子オブジェクトの構成
子オブジェクトのパネルを親に追加し、子オブジェクトのサブビューを構成します。
子オブジェクトのパネルの構成
cx-panelフラグメントを使用して、子オブジェクトのパネルを構成します。
パネル・リージョンを構成するには:
-
Visual Builder Studioで、「アプリケーションUI」タブをクリックします。
-
cx-custom > payment_cを展開し、payment_c-detailノードをクリックします。
-
payment_c-detailタブで、ページ・デザイナ・サブタブをクリックします。
-
「コード」ボタンをクリックします。
-
フィルタ・フィールドに、
dynamic container
と入力します。 -
動的コンテナ・コンポーネントを、終了oj-vb-fragmentタグの外にある詳細ページ・キャンバスにドラッグ・アンド・ドロップします。 動的コンテナには、詳細ページのパネルが保持されます。
-
動的コンテナのコードで、
containerLayout1
をPanelsContainerLayout
に置き換えます。 -
payment_c詳細タブで、JSONサブタブをクリックします。
-
詳細ページのJSONで、
containerLayout1
の2つのインスタンスの名前をPanelsContainerLayout
に変更します。2つのインスタンスが
"layouts"
セクションと"templates"
セクションに表示されます。
次に、パネルに使用するセクション・テンプレートを作成します。
-
payment_c-detailタブで、ページ・デザイナ・サブタブをクリックします。
-
プロパティ・ペインのケース1リージョンで、「セクションの追加」アイコンをクリックし、「新規セクション」をクリックします。
-
Payment Lines
などのセクションのタイトルを入力し、OKをクリックします。 -
Default Section
を削除します。
「支払明細」パネルのテンプレートおよびレイアウトを構成します。
-
プロパティ・ペインで、追加した「支払明細」セクションをクリックします。
ページ・デザイナは、payment_cの詳細タブにあるテンプレート・エディタにナビゲートし、「支払明細」パネル・テンプレートを設計できます。
「コード」ボタンをクリックします。
-
コンポーネント・パレットのフィルタ・フィールドに、
cx-panel
と入力します。 -
cx-panelフラグメントをテンプレート・エディタのpaymentLinesテンプレート・タグの間にドラッグ・アンド・ドロップします。
-
コードが次のサンプルになるように、次のパラメータをフラグメント・コードに追加します。
Payment_c_Id
およびPaymentLineCollection_c
は、カスタムの最上位レベルおよび子オブジェクトに適した値に必ず置き換えてください。<template id="paymentLines"> <oj-vb-fragment bridge="[[vbBridge]]" name="oracle_cx_fragmentsUI:cx-panel"> <oj-vb-fragment-param name="resource" value='[[ {"name": $flow.constants.objectName, "primaryKey": "Id", "endpoint": $application.constants.serviceConnection } ]]'> </oj-vb-fragment-param> <oj-vb-fragment-param name="sortCriteria" value='[[ [{"attribute": "LastUpdateDate","direction": "desc" }] ]]'> </oj-vb-fragment-param> <oj-vb-fragment-param name="query" value='[[ [{"type": "selfLink", "params": [{"key": "Payment__c_Id", "value": $variables.id }]}] ]]'></oj-vb-fragment-param> <oj-vb-fragment-param name="child" value='[[ {"name": "PaymentLineCollection_c", "primaryKey": "Id", "relationship": "Child"} ]]'></oj-vb-fragment-param> <oj-vb-fragment-param name="context" value="[[ {} ]]"></oj-vb-fragment-param> <oj-vb-fragment-param name="extensionId" value="[[ $application.constants.extensionId ]]"></oj-vb-fragment-param> </oj-vb-fragment> </template>
この表は、カスタム・パネルに指定できるパラメータについて説明しています。
カスタム・パネルのパラメータ
パラメータ名 説明 sortCriteria 最終更新日によるソートや降順など、パネル上のデータのソート方法を指定します。 問合せ パネルでデータを問い合せるための基準を含めます。 子供 パネルの基準となる子オブジェクトのREST子オブジェクト名を入力します。 -
前のステップで、パネル・テンプレートを構成しました。
次に、パネルのレイアウトを構成します。
レイアウト・タブをクリックし、レイアウトの作成アイコンをクリックします。
-
「レイアウトの作成」ダイアログで、子オブジェクトのRESTリソースをクリックします。
この例では、cx-customを展開し、Payment_c/PaymentLineCollection_cをクリックします。
-
「作成」をクリックします。
-
PaymentLineCollection_cタブで、「+ルール・セット」をクリックしてレイアウトの新しいルール・セットを作成します。
-
「ルール・セット」の作成ダイアログのコンポーネント・フィールドで、「動的フォーム」を選択します。
-
ラベル・フィールドに、PanelCardLayoutと入力します。
-
IDフィールドで、値をPanelCardLayoutに変更します。
-
「作成」をクリックします。
-
作成したルール・セットとレイアウトを更新する前に、パネル自体で使用するカスタム・フィールドを作成します。
詳細ページのパネルでは、
avatar-card
スタイルが使用されます。 つまり、パネルにはアバターがあり、これはパネル上のフィールドの1つ(通常は名前)を視覚的に表したものです。このステップでは、
Avatar
というカスタム・フィールドと、アバターのスタイルを定義するavatarFieldTemplate
フィールド・テンプレートを作成します。最初にカスタム・フィールドを作成します。
-
PaymentLineCollection_cタブで、フィールド・サブタブをクリックします。
-
「+カスタム・フィールド」をクリックします。
-
「フィールドの作成」ダイアログのラベル・フィールドに、
Avatar
と入力します。 -
IDフィールドの値は
avatar
である必要があります。 -
タイプ・フィールドで、「オブジェクト(仮想フィールド)」を選択します。
-
「作成」をクリックします。
-
新しい仮想フィールドのプロパティ・ペインで、フィールド・セクションの横にある「追加」をクリックします。
-
RecordNameを選択します。
イニシャルを導出できる任意のフィールドを選択します。 たとえば、カスタム・オブジェクトにはRecordNameフィールドを使用できます。 Accountオブジェクトの場合は、PartyNameフィールドを選択します。
-
「追加」をクリックします。
次にフィールド・テンプレートを作成します。
-
PaymentLinesCollection_cタブで、テンプレート・サブタブをクリックします。
-
「+テンプレート」をクリックします。
-
「テンプレートの作成」ダイアログのタイプで、フィールド・オプションを選択します。
-
ラベル・フィールドに、
avatarFieldTemplate
と入力します。 -
「作成」をクリックします。
カスタム・フィールドをフィールド・テンプレートにマップします。
-
PaymentLinesCollection_cタブで、JSONサブタブをクリックします。
PanelCardLayout
セクションで、次のコードを追加します:, "fieldTemplateMap": { "avatar": "avatarFieldTemplate" }
結果のコードは次のようになります:
-
-
次に、パネルに表示するフィールドを追加します。
-
PaymentLineCollection_cタブで、ルール・セット・サブタブをクリックします。
-
「デフォルト」レイアウトの横にある開くアイコンをクリックします。
-
cx-cardフラグメントをクリックします。
このフラグメントは、パネルの形式を提供します。
各パネルには、特定のスロットが含まれています。 フィールドのリストから、各フィールドを目的のスロットにドラッグします。
たとえば、フィールドをavatarItemスロットにドラッグ・アンド・ドロップします。
他の目的のフィールドを適切なスロットにドラッグ・アンド・ドロップします。
-
プロパティ・ペインで、「テンプレートに移動」をクリックします。
-
-
テンプレート・サブタブで、コード・ボタンをクリックします。
-
テンプレート・コードに次のパラメータを追加します。
<oj-vb-fragment-param name="dynamicLayoutContext" value="{{ $dynamicLayoutContext }}"></oj-vb-fragment-param> <oj-vb-fragment-param name="style" value="avatar-card"></oj-vb-fragment-param> <oj-vb-fragment-param name="enableActions" value="false"></oj-vb-fragment-param> <oj-vb-fragment-param name="badgeItemColor" value="oj-badge-success"></oj-vb-fragment-param>
テンプレート・コードは、次の例のようになります。 (次のサンプルには、avatarFieldTemplateフィールド・テンプレートのスタイル指示も含まれています。)
<!-- Contains Dynamic UI layout templates --> <template id="defaultTemplate"> <oj-vb-fragment name="oracle_cx_fragmentsUI:cx-card" bridge="[[ vbBridge ]]"> <oj-vb-fragment-param name="dynamicLayoutContext" value="{{ $dynamicLayoutContext }}"></oj-vb-fragment-param> <oj-vb-fragment-param name="style" value="avatar-card"></oj-vb-fragment-param> <oj-vb-fragment-param name="enableActions" value="false"></oj-vb-fragment-param> <oj-vb-fragment-param name="badgeItem" value="[[ $fields.Type_c.name ]]"> </oj-vb-fragment-param> <oj-vb-fragment-param name="avatarItem" value="[[ $fields.avatar.name ]]"> </oj-vb-fragment-param> <oj-vb-fragment-param name="item1" value="[[ $fields.RecordName.name ]]"> </oj-vb-fragment-param> <oj-vb-fragment-param name="item4" value="[[ $fields.CreationDate.name ]]"> </oj-vb-fragment-param> <oj-vb-fragment-param name="item2" value="[[ $fields.Amount_c.name ]]"> </oj-vb-fragment-param> <oj-vb-fragment-param name="item3" value="[[ $fields.CreatedBy.name ]]"> </oj-vb-fragment-param> <oj-vb-fragment-param name="badgeItemColor" value="oj-badge-success"></oj-vb-fragment-param> </oj-vb-fragment> </template> <template id="avatarFieldTemplate"> <oj-avatar role="img" size="sm" initials="[[ oj.IntlConverterUtils.getInitials($value.RecordName(), $value.RecordName()) ]]" :aria-label="[['Avatar of ' + $value.RecordName()]]" :title="[['Avatar of ' + $value.RecordName()]]" background="green"> </oj-avatar></template>
前に行ったように、「デフォルト」レイアウトに戻り、ドラッグ・アンド・ドロップすることで、さらにフィールドを追加できます。
または、プロパティ・ペインを使用してパネルにフィールドを追加できます。 これを行うには、構造ペインでフラグメント・コンテナ・ノードをクリックします。
次に、プロパティ・ペインの「入力パラメータ」フィールドを使用して、目的のカスタム・オブジェクト・フィールドを追加します。
この表は、カスタム・パネルに指定できるいくつかのパラメータについて説明しています。
カスタム・パネルのパラメータ
パラメータ名 説明 style
詳細ページに追加するパネルには、
"avatar-card"
を指定します。enableActions
パネルは、ダッシュボードに表示されるときにアクションを持つことができます。 詳細ページに表示されるパネルには通常、アクションは必要ありません。したがって、このパラメータを
"false"
に設定します。 -
テンプレートのJSONをlabelEdgeプロパティで手動で更新します。
-
PaymentLineCollection_cタブで、JSONサブタブをクリックします。
PanelCardLayoutの「デフォルト」レイアウトのセクションで、
"none"
の値を持つlabelEdgeプロパティを追加します。この例では、labelEdgeプロパティは次のようになります:
-
-
最後に、payment_cの詳細ページから動的コンテナ・コンポーネントをコメント・アウトします。
-
payment_c詳細タブをクリックし、ページ・デザイナ・サブタブをクリックします。
-
「コード」ボタンをクリックします。
ドロップダウンから「ページ」を選択します。
パネル・リージョンに追加した動的コンテナ・コンポーネントをコメント・アウトします。
ノート: パネル・リージョンにパネルを追加するには、目的のパネルごとに新しいセクションを追加できるように、まず動的コンテナ・コンポーネントのコメントを解除する必要があります。
-
-
payment_cリスト・ページからアプリケーション拡張をプレビューして、追加したパネルをテストします。
payment_c-listページで、プレビュー・ボタンをクリックして、ランタイム・テスト環境の変更を表示します。
-
結果のプレビュー・リンクは次のようになります:
https://<servername>/fscmUI/redwood/cx-custom/payment_c/payment_c-list
-
プレビュー・リンクを次のように変更します:
https://<servername>/fscmUI/redwood/cx-custom/application/container/payment_c/payment_c-list
次のスクリーンショットは、データを使用したリスト・ページの外観を示しています。
データが存在する場合は、リスト・ページの任意のレコードをクリックして詳細ページにドリルダウンできます。 ヘッダー・リージョンおよびパネルを含む詳細ページが表示されます。
ノート: 次のスクリーンショットは、データでのパネルの外観を示しています。 テストでは、パネルが空である場合があります。パネルの下部にあるリンクによって、ユーザーはサブビューにナビゲートされます。 「子オブジェクトのサブビューの構成」でサブビューを構成する方法について学習します。
Push Gitコマンドを使用して作業内容を保存します。
Gitタブに移動し、変更内容を確認し、Gitプッシュを実行します(これはコミットとGitリポジトリへのプッシュの両方を行います)。
子オブジェクトのサブビューの構成
Oracle Visual Builder Studioのフラグメントを使用して、カスタム・オブジェクトのユーザー・インタフェース・ページを作成できます: リスト・ページ、ページの作成、およびパネルを含む詳細ページ。 パネルには少数のレコードしか表示できませんが、範囲が制限されているためです。 すべてのレコードを表示するには、ユーザーはパネルからサブビューに移動する必要があります。 このトピックでは、フラグメントを使用してサブビューを構築する方法について説明します。
サブビューとは
パネルの範囲は小さいため、ユーザーはすべて表示リンクをクリックして、すべてのレコードを表示する2ページ目に移動できます。
パネルのすべての担当者の表示リンクのスクリーンショットを次に示します。 この例では、パネル自体に1つの担当者John Cookのみを表示する余地がありますが、合計3つのレコードが存在します。 ユーザーは、全担当者を表示リンクをクリックして3人の担当者すべてを表示できます。
サブビューのスクリーンショットを次に示します。 サブビューには、上部に基本情報リージョンと表が含まれています。 子オブジェクトまたは関連オブジェクトのカスタム・パネルを作成する場合は、このページも作成する必要があります。 このページは、フラグメントを使用して作成できます。
支払明細サブビューの作成
支払レコードのサブビューを作成します。 これを行うには、新しい動的コンテナをページ・デザイナの詳細ページに追加します。
-
Visual Builder Studioで、「アプリケーションUI」タブをクリックします。
-
cx-custom > payment_cを展開し、payment_c-detailノードをクリックします。
-
payment_c-detailタブで、ページ・デザイナ・サブタブをクリックします。
-
ページ・デザイナでページを表示していることを確認します。
-
「コード」ボタンをクリックします。
-
フィルタ・フィールドに、
dynamic container
と入力します。 -
動的コンテナ・コンポーネントを、パネルを保持する前の動的コンテナの外部にある詳細ページ・キャンバスにドラッグ・アンド・ドロップします。 この動的コンテナはサブビューを保持します。
-
動的コンテナのコードで、
containerLayout1
をSubviewContainerLayout
に置き換えます。 -
payment_c詳細タブで、JSONサブタブをクリックします。
-
詳細ページのJSONで、
containerLayout1
の2つのインスタンスの名前をSubviewContainerLayout
に変更します。2つのインスタンスが
"layouts"
セクションと"templates"
セクションに表示されます。 インスタンスが"templates"
セクションに表示される場所を次に示します。
サブビューに使用するセクション・テンプレートを作成します。
-
payment_c-detailタブで、ページ・デザイナ・サブタブをクリックします。
-
プロパティ・ペインのケース1リージョンで、セクションの追加アイコンをクリックし、「新規セクション」をクリックします。
-
タイトル・フィールドに、REST子オブジェクト名(
PaymentLineCollection_c
など)を使用してセクションのタイトルを入力します。 -
IDフィールドで、値を
PaymentLineCollection_c
に変更します。ノート: REST子オブジェクト名は、サービス接続エンドポイントから取得できます。 -
「OK」をクリックします。
-
Default Section
を削除します。 -
テンプレートのJSONを正しいサブビュー名で手動で更新します。
-
Payment_c詳細タブで、JSONサブタブをクリックします。
-
SubviewContainerLayoutのセクション・テンプレート・レイアウトのセクションで、
sectionTemplateMap
およびdisplayProperties
の値を、サブビューの名前PaymentLineCollection_c
と一致するように置き換えます。この例では、SubviewContainerLayoutの
sectionTemplateMap
およびdisplayProperties
は次のようになります:
-
サブビュー・レイアウトの構成
以前に、サブビュー動的コンテナをページとセクション・テンプレートに追加しました。
cx-subviewフラグメントを使用して、サブビューの構造を作成します。
-
プロパティ・ペインで、追加したPaymentLineCollection_cセクションをクリックします。
ページ・デザイナは、payment_cの詳細タブにあるテンプレート・エディタにナビゲートし、そこでPaymentLineCollection_cテンプレートを設計できます。
-
「コード」ボタンをクリックします。
-
コンポーネント・パレットのフィルタ・フィールドに、
cx-subview
と入力します。 -
cx-subviewフラグメントをテンプレート・エディタのpaymentLineCollectionCテンプレート・タグの間にドラッグ・アンド・ドロップします。
-
コードが次のサンプルになるように、次のパラメータをフラグメント・コードに追加します。
Payment__c_Id
およびPaymentLineCollection_c
は、カスタムの最上位レベルおよび子オブジェクトに適した値に必ず置き換えてください。 これらの値をサービス接続エンドポイントから取得します。<template id="paymentLineCollectionC"> <oj-vb-fragment bridge="[[vbBridge]]" name="oracle_cx_fragmentsUI:cx-subview"> <oj-vb-fragment-param name="resource" value='[[ {"name": $flow.constants.objectName, "primaryKey": "Id", "endpoint": $application.constants.serviceConnection } ]]'> </oj-vb-fragment-param> <oj-vb-fragment-param name="sortCriteria" value='[[ [{"attribute": "LastUpdateDate","direction": "desc" }] ]]'> </oj-vb-fragment-param> <oj-vb-fragment-param name="query" value='[[ [{"type": "selfLink", "params": [{"key": "Payment__c_Id", "value": $variables.id }]}] ]]'></oj-vb-fragment-param> <oj-vb-fragment-param name="child" value='[[ {"name": "PaymentLineCollection_c", "primaryKey": "Id", "relationship": "Child"} ]]'></oj-vb-fragment-param> <oj-vb-fragment-param name="context" value="[[ {} ]]"></oj-vb-fragment-param> <oj-vb-fragment-param name="extensionId" value="[[ $application.constants.extensionId ]]"></oj-vb-fragment-param> </oj-vb-fragment> </template>
次の表では、サブビューに指定できるパラメータについて説明します:
サブビューのパラメータ
パラメータ名 説明 sortCriteria 最終更新日による並べ替えや降順など、サブビュー上のデータの並べ替え方法を指定します。 問合せ サブビューでデータを問合せするための基準を含めます。 子供 パネルの基準となる子オブジェクトのREST子オブジェクト名を入力します。
サブビュー・レイアウトを構成します。
-
レイアウト・タブをクリックし、PaymentLineCollection_cをクリックします。
-
PaymentLineCollection_cタブで、「+ルール・セット」をクリックしてレイアウトの新しいルール・セットを作成します。
-
「ルール・セット」の作成ダイアログのコンポーネント・フィールドで、「動的表」を選択します。
-
ラベル・フィールドに、
SubViewLayout
と入力します。 -
IDフィールドで、値を
SubViewLayout
に変更します。 -
「作成」をクリックします。
-
-
レイアウトに表示するフィールドを追加します。
-
「デフォルト」レイアウトの横にある開くアイコンをクリックします。
-
フィールドのリストから、サブビュー・テーブルに表示するフィールドを選択します。 フィールドは、クリックした順序で列として表示されますが、並べ替えることができます。
-
-
支払の編集後にユーザーが自動的にサブビューに戻れるようにイベントを作成します。
-
payment_c-detailタブで、ページ・デザイナ・サブタブをクリックします。
-
ページ・デザイナでページを表示していることを確認します。
-
「コード」ボタンをクリックします。
-
詳細ページのコードで、
oj-vb-fragment
タグをクリックします。 -
cx-detailフラグメントのプロパティ・ペインで、イベント・サブタブをクリックします。
-
「+新規イベント」 > 「'viewChangeEvent'の場合」をクリックします。
-
変数の割当てアクションをキャンバスにドラッグします。
-
プロパティ・ペインの変数フィールドの横にある変数の選択アイコンをクリックします。
-
変数ポップアップのページ見出しで、「ビュー」をクリックします。
-
値フィールドに、
{{ payload.view }}
と入力します。
-
-
-
payment_cの詳細ページから、サブビューの動的コンテナ・コンポーネントをコメント・アウトします。
-
payment_c詳細タブをクリックし、ページ・デザイナ・サブタブをクリックします。
-
「コード」ボタンをクリックします。
ドロップダウンから「ページ」を選択します。
-
サブビューに追加した動的コンテナ・コンポーネントをコメント・アウトします。
-
-
サブビューにアクション・メニューを追加します。
これを行うには、カスタム・フィールド
Actions Menu
を作成します。-
PaymentLineCollection_cタブで、フィールド・サブタブをクリックします。
-
「+カスタム・フィールド」をクリックします。
-
「フィールドの作成」ダイアログのラベル・フィールドに、
Actions Menu
と入力します。 -
IDフィールドでは、値は
actionsMenu
である必要があります。 -
タイプ・フィールドで、「文字列」を選択します。
-
「作成」をクリックします。
カスタム・フィールドをフィールド・テンプレートにマップします。
-
PaymentLinesCollection_cタブで、JSONサブタブをクリックします。
-
SubViewLayout
セクションで、次のコードを追加します:, "fieldTemplateMap": { "actionsMenu" : "actionMenuTemplate" }
結果のコードは次のようになります:
カスタム・フィールドをサブビュー表に追加します。
-
PaymentLineCollection_cタブ >「ルール・セット」サブタブをクリックします。
-
SubViewLayoutをクリックします。
-
「デフォルト」レイアウトの横にある開くアイコンをクリックします。
-
フィールドのリストから、actionsMenuフィールドをクリックして、サブビュー表に追加します。
-
-
「アクション」メニューには、「編集」と「削除」の両方のアクションがあります。 ユーザーは、「編集」をクリックして支払明細を編集します。
支払明細の編集ページのレイアウトを作成します。
-
PaymentLineCollection_cタブで、「<ルール・セット」をクリックして、新しいルール・セットを作成できるメインのルール「セット」ページに戻ります。
-
「+ルール・セット」をクリックします。
-
「ルール・セット」の作成ダイアログのコンポーネント・フィールドで、「動的フォーム」を選択します。
-
ラベル・フィールドに、
EditLayout
と入力します。 -
IDフィールドで、値を
EditLayout
に変更します。 -
「作成」をクリックします。
-
-
レイアウトに表示するフィールドを追加します。
-
「デフォルト」レイアウトの横にある開くアイコンをクリックします。
-
「表示するフィールドの選択」をクリックします。
-
フィールドのリストから、支払明細の編集ページに表示するフィールドを選択します。 フィールドは、クリックした順序で列として表示されますが、並べ替えることができます。
-
-
このレイアウトのプロパティ・ペインの「最大列数」フィールドに、
2
と入力します。レイアウトのプロパティを表示するには、「<フォーム」をクリックする必要がある場合があります。
-
-
payment_cリスト・ページからアプリケーション拡張をプレビューして、サブビューをテストします。
payment_c-listページで、プレビュー・ボタンをクリックして、ランタイム・テスト環境の変更を表示します。
-
結果のプレビュー・リンクは次のようになります:
https://<servername>/fscmUI/redwood/cx-custom/payment_c/payment_c-list
プレビュー・リンクを次のように変更します:
https://<servername>/fscmUI/redwood/cx-custom/application/container/payment_c/payment_c-list
次のスクリーンショットは、データを使用したリスト・ページの外観を示しています。
-
データが存在する場合は、リスト・ページの任意のレコードをクリックして詳細ページにドリルダウンできます。 ヘッダー・リージョンおよびパネルを含む詳細ページが表示されます。
ノート: 次のスクリーンショットは、データでのパネルの外観を示しています。 テストでは、パネルが空である場合があります。 -
すべて表示リンクをクリックして、サブビューにドリルダウンします。
-
「「アクション」メニュー」>「編集」をクリックして、支払明細を編集します。
Push Gitコマンドを使用して作業内容を保存します。
Gitタブに移動し、変更内容を確認し、Gitプッシュを実行します(これはコミットとGitリポジトリへのプッシュの両方を行います)。