子オブジェクトの構成
子オブジェクトのパネルを親に追加し、子オブジェクトのサブビューを構成します。
子オブジェクトのパネルの構成
cx-panelフラグメントを使用して、子オブジェクトのパネルを構成します。
パネル・リージョンを構成するには:
-
Visual Builder Studioで、「アプリケーションUI」タブをクリックします。
-
「cx-custom」 > 「payment_c」を展開し、「payment_c-detail」ノードをクリックします。
-
「payment_c-detail」タブで、ページ・デザイナ・サブタブをクリックします。
-
「コード」ボタンをクリックします。
作成したルール・セットおよびレイアウトを更新する前に、パネル自体で使用するカスタム・フィールドを作成します。
詳細ページのパネルでは、
avatar-card
スタイルが使用されます。これは、パネル上のフィールドのいずれかのビジュアル表現(通常は名前)であるアバターがパネルに含まれるようになるという意味です。このステップでは、カスタム・フィールド
Avatar
と、アバターのスタイルを定義するavatarFieldTemplate
フィールド・テンプレートを作成します。最初にカスタム・フィールドを作成します。
-
「PaymentLineCollection_c」タブで、「フィールド」サブタブをクリックします。
-
「+ カスタム・フィールド」をクリックします。
-
「フィールドの作成」ダイアログで、「ラベル」フィールドに
Avatar
と入力します。 -
「ID」フィールドでは、値を
avatar
にする必要があります。 -
「タイプ」フィールドで、オブジェクト(仮想フィールド)を選択します。
-
「作成」をクリックします。
-
新しい仮想フィールドの「プロパティ」ペインで、「フィールド」セクションの横にある「追加」をクリックします。
-
「RecordName」を選択します。
イニシャルを導出できる任意のフィールドを選択します。たとえば、カスタム・オブジェクトにはRecordNameフィールドを使用できます。アカウント・オブジェクトにはPartyNameフィールドを選択します。
-
「追加」をクリックします。
次に、フィールド・テンプレートを作成します。
-
「PaymentLinesCollection_c」タブで、「テンプレート」サブタブをクリックします。
-
「+ テンプレート」をクリックします。
-
「テンプレートの作成」ダイアログで、「タイプ」として「フィールド」オプションを選択します。
-
「ラベル」フィールドに、
avatarFieldTemplate
と入力します。 -
「作成」をクリックします。
カスタム・フィールドをフィールド・テンプレートにマップします。
-
「PaymentLinesCollection_c」タブで、「JSON」サブタブをクリックします。
PanelCardLayout
セクションで、次のコードを追加します:, "fieldTemplateMap": { "avatar": "avatarFieldTemplate" }
結果のコードは次のようになります:
-
-
次に、パネルに表示するフィールドを追加します。
-
「PaymentLineCollection_c」タブで、「ルール・セット」サブタブをクリックします。
-
「デフォルト」レイアウトの横にある「開く」アイコンをクリックします。
-
「cx-card」フラグメントをクリックします。
このフラグメントによって、パネルの書式が提供されます。
それぞれのパネルには固有のスロットが含まれています。フィールドのリストから、それぞれのフィールドを目的のスロットにドラッグします。
たとえば、Avatarフィールドを「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"
に設定します。 -
labelEdgeプロパティを使用して、テンプレートのJSONを手動で更新します。
-
「PaymentLineCollection_c」タブで、「JSON」サブタブをクリックします。
PanelCardLayoutの「デフォルト」レイアウトのセクションで、値
"none"
を指定してlabelEdgeプロパティを追加します。この例では、labelEdgeプロパティは次のようになります:
-
-
最後に、payment_c-detailページから動的コンテナ・コンポーネントをコメント・アウトします。
-
「payment_c-detail」タブをクリックし、ページ・デザイナ・サブタブをクリックします。
-
「コード」ボタンをクリックします。
ドロップダウンから「ページ」を選択します。
パネル・リージョンのために追加した動的コンテナ・コンポーネントをコメント・アウトします。
ノート:パネル・リージョンにさらにパネルを追加するには、まず、必要なそれぞれのパネルについて新しいセクションを追加できるように、動的コンテナ・コンポーネントを非コメント化する必要があります。
-
-
payment_c-listページからアプリケーション拡張をプレビューして、追加したパネルをテストします。
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
次のスクリーンショットは、データを含むリスト・ページがどのように見えるかを示しています。
データが存在する場合、リスト・ページで任意のレコードをクリックして、詳細ページにドリルダウンできます。ヘッダー・リージョンとパネルを含む詳細ページが表示されます。
ノート:次のスクリーンショットは、データを含むパネルがどのように見えるかを示しています。テストでは、パネルが空の場合があります。
パネルの下部にあるリンクによって、ユーザーがサブビューにナビゲートされます。サブビューを構成する方法の詳細は、「子オブジェクトのサブビューの構成」を参照してください。
Gitのプッシュ・コマンドを使用して、作業内容を保存します。
「Git」タブにナビゲートし、変更をレビューして、Gitのプッシュを実行します(コミットとGitリポジトリへのプッシュの両方が行われます)。
子オブジェクトのサブビューの構成
Oracle Visual Builder Studioでフラグメントを使用して、カスタム・オブジェクトのユーザー・インタフェース・ページ(リスト・ページ、作成ページ、およびパネルを含む詳細ページ)を作成できます。ただし、領域が限られているため、1枚のパネルには少数のレコードのみを表示できます。すべてのレコードを表示するには、ユーザーがパネルからサブビューにナビゲートする必要があります。このトピックでは、フラグメントを使用してサブビューを構築する方法について説明します。
サブビューとは
パネルの領域が小さいため、ユーザーは「すべて表示」リンクをクリックすることで、すべてのレコードが表示される別のページにナビゲートできます。
パネル上の「すべての担当者の表示」リンクのスクリーンショットを次に示します。この例では、パネル自体には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-detail」タブで、「JSON」サブタブをクリックします。
-
詳細ページのJSONで、
containerLayout1
の2つのインスタンスをSubviewContainerLayout
に名前変更します。この2つのインスタンスは、
"layouts"
セクションと"templates"
セクションに表示されます。インスタンスが表示される"templates"
セクション内の場所を次に示します。
サブビューに使用するセクション・テンプレートを作成します。
-
「payment_c-detail」タブで、ページ・デザイナ・サブタブをクリックします。
-
「プロパティ」ペインのケース1リージョンで、セクションの追加アイコンをクリックし、新規セクションをクリックします。
-
「タイトル」フィールドに、
PaymentLineCollection_c
など、REST子オブジェクト名を使用してセクションのタイトルを入力します。 -
「ID」フィールドで、値を
PaymentLineCollection_c
に変更します。ノート:REST子オブジェクト名は、サービス接続エンドポイントから取得できます。
-
「OK」をクリックします。
-
Default Section
を削除します。 -
正しいサブビュー名を使用して、テンプレートのJSONを手動で更新します。
-
「Payment_c-detail」タブで、「JSON」サブタブをクリックします。
-
SubviewContainerLayoutのセクション・テンプレート・レイアウトのセクションで、サブビューの名前である
PaymentLineCollection_c
と一致するようにsectionTemplateMap
およびdisplayProperties
の値を置き換えます。この例では、SubviewContainerLayoutの
sectionTemplateMap
およびdisplayProperties
は次のようになります:
-
サブビュー・レイアウトの構成
これまでに、サブビュー動的コンテナをページに追加するとともに、セクション・テンプレートも追加しました。
cx-subviewフラグメントを使用して、サブビューの構造を構築します。
-
「プロパティ」ペインで、先ほど追加したPaymentLineCollection_cセクションをクリックします。
ページ・デザイナでテンプレート・エディタの「payment_c-detail」タブが表示され、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 最終更新日に基づいた降順ソートなど、サブビューでデータをソートする方法を指定します。 query サブビューでデータを問い合せるための基準を含めます。 child パネルの基になる子オブジェクトのREST子オブジェクト名を入力します。
サブビュー・レイアウトを構成します。
-
「レイアウト」タブをクリックし、「PaymentLineCollection_c」をクリックします。
-
「PaymentLineCollection_c」タブで、「+ ルール・セット」をクリックして、レイアウトの新しいルール・セットを作成します。
-
「ルール・セットの作成」ダイアログの「コンポーネント」フィールドで、動的表を選択します。
-
「ラベル」フィールドに、
SubViewLayout
と入力します。 -
「ID」フィールドで、値を
SubViewLayout
に変更します。 -
「作成」をクリックします。
-
-
レイアウトに表示するフィールドを追加します。
-
「デフォルト」レイアウトの横にある「開く」アイコンをクリックします。
-
フィールドのリストから、サブビューの表に表示するフィールドを選択します。フィールドは、クリックした順に列として表示されますが、並べ替えることができます。
-
-
支払の編集後にユーザーが自動的にサブビューに戻るようにできるように、イベントを作成します。
-
「payment_c-detail」タブで、ページ・デザイナ・サブタブをクリックします。
-
ページ・デザイナでページを表示していることを確認します。
-
「コード」ボタンをクリックします。
-
詳細ページのコードで、
oj-vb-fragment
タグをクリックします。 -
cx-detailフラグメントの「プロパティ」ペインで、「イベント」サブタブをクリックします。
-
+ 新規イベント > 「On 'viewChangeEvent'」をクリックします。
-
変数の割当アクションをキャンバスにドラッグします。
-
「プロパティ」ペインで、「変数」フィールドの横にある変数の選択アイコンをクリックします。
-
「変数」ポップアップで、「ページ」見出しの下にある「view」をクリックします。
-
「値」フィールドに、
{{ payload.view }}
と入力します。
-
-
-
payment_c-detailページからサブビューの動的コンテナ・コンポーネントをコメント・アウトします。
-
「payment_c-detail」タブをクリックし、ページ・デザイナ・サブタブをクリックします。
-
「コード」ボタンをクリックします。
ドロップダウンから「ページ」を選択します。
-
サブビューのために追加した動的コンテナ・コンポーネントをコメント・アウトします。
-
-
処理メニューをサブビューに追加します。
これを行うには、カスタム・フィールド
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-listページからアプリケーション拡張をプレビューして、サブビューをテストします。
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
次のスクリーンショットは、データを含むリスト・ページがどのように見えるかを示しています。
-
データが存在する場合、リスト・ページで任意のレコードをクリックして、詳細ページにドリルダウンできます。ヘッダー・リージョンとパネルを含む詳細ページが表示されます。
ノート:次のスクリーンショットは、データを含むパネルがどのように見えるかを示しています。テストでは、パネルが空の場合があります。
-
「すべて表示」リンクをクリックして、サブビューにドリルダウンします。
-
「処理メニュー」 > 「編集」をクリックして、支払明細を編集します。
Gitのプッシュ・コマンドを使用して、作業内容を保存します。
「Git」タブにナビゲートし、変更をレビューして、Gitのプッシュを実行します(コミットとGitリポジトリへのプッシュの両方が行われます)。
特定の親オブジェクトの子オブジェクト・サブビューのみでのスマート処理の表示
子オブジェクトのサブビューを作成するときに、そのサブビューに特別に適用するスマート処理を作成することが必要になる場合があります。
たとえば、CX拡張ジェネレータを使用して出荷のリストを支払に表示しており、出荷が支払の子オブジェクトであるとします。ユーザーが出荷を支払に追加するために処理バーに入力する追加スマート処理は、CX拡張ジェネレータによって自動的に作成されますが、エントリを削除するためのスマート処理は作成されません。このスマート処理を作成し、支払のサブビューでのみ使用できるようにするステップを次に示します。
- RESTベースのスマート処理の作成のトピックで説明されているように、削除スマート処理をRESTベースのスマート処理として作成します。「可用性」ページの「コンテキスト」リージョンには、必ず親オブジェクトの名前を入力してください。
VB Studioで、親オブジェクトの詳細ページを開き、テンプレート・コードを表示します(
)コード内でサブビューのテンプレートを探し、次のパラメータを追加します:
<oj-vb-fragment-param name=“enableActions” value=‘[[{“enabled”: “true”, “enableContext”: “true”}]]’></oj-vb-fragment-param>
</oj-vb-fragment>タグの直前に挿入します。