関連オブジェクトのパネルを追加することによって、オブジェクトの詳細ページを拡張できます。 このことにより、ユーザーは、レコードに関係するすべての関連情報を単一のページで簡単に表示できるようになります。 カスタム・オブジェクト・パネルまたは標準オブジェクト・パネルを追加できます。 このトピックでは、カスタム・オブジェクト・パネルをオブジェクトの詳細ページに追加する方法(パネル・オブジェクトが1対多の関係で関連している場合)について説明します。
シナリオ
この例の関係では、支払オブジェクトと出荷オブジェクトの間に1対多の関係があります。 実行時に、ユーザーが支払詳細ページで支払に対して出荷を作成し、それらの出荷を表示できる必要があります。 このことができるようにするには、支払詳細ページに出荷パネルを追加する必要があります。
設定の概要
関連オブジェクト・パネルをカスタム・オブジェクトの詳細ページに追加するには、最初にいくつかのステップを完了する必要があります。 必要なステップの概要を次に示します。
-
関連オブジェクトについて次のステップを完了します:
-
CX拡張ジェネレータによって、関連オブジェクト(この場合は出荷オブジェクト)のページおよびレイアウトが生成されていることを確認します。
CX拡張ジェネレータを使用した新規アプリケーションの作成を参照してください。
-
アプリケーション・コンポーザで、関連オブジェクトに必要な作成スマート処理を作成します。
たとえば、「出荷の作成」スマート処理を作成します。
「出荷の作成」スマート処理は、支払詳細ページと出荷サブビューの両方の処理バーから表示されます。 ユーザーは、「出荷の作成」スマート処理を選択して、出荷の作成ページにナビゲートできます。
-
次に、新しい関連オブジェクト・パネルをカスタム・オブジェクトの詳細ページに追加できます。
支払詳細ページへの出荷パネルの追加を参照してください。
-
パネルを追加した後、サブビューを作成および構成できます。
関連オブジェクトのサブビューの構成(1対多)を参照してください。
支払詳細ページへの出荷パネルの追加
支払詳細ページに出荷の新しいパネルを追加するには:
-
Visual Builder Studioで、「アプリケーションUI」タブをクリックします。
-
「cx-custom」 > 「payment_c」を展開し、「payment_c-detail」ノードをクリックします。
-
「payment_c-detail」タブで、ページ・デザイナ・サブタブをクリックします。
-
「コード」ボタンをクリックします。
-
ページ・デザイナでページを表示していることを確認します。
パネルおよびサブビューを格納する動的コンテナ・コンポーネントのコメント・タグを削除します。
-
パネルの<oj-dynamic-container>タグを強調表示します。
-
「プロパティ」ペインのケース1リージョンで、セクションの追加アイコンをクリックし、新規セクションをクリックします。
-
「タイトル」フィールドに、Shipmentsなど、セクションのタイトルを入力します。
-
「ID」フィールドで、値をShipmentsPanelに変更します。
ノート:
サブビューを作成するときにRESTオブジェクト名を使用するため、このIDにはRESTオブジェクト名を使用しないでください。
-
「OK」をクリックします。
-
「プロパティ」ペインで、先ほど追加したShipmentsセクションをクリックします。
ページ・デザイナでテンプレート・エディタの「payment_c-detail」タブが表示され、出荷パネル・テンプレートの設計を続行できます。
「コード」ボタンをクリックします。
-
「コンポーネント」パレットで、「フィルタ」フィールドにcx-panelと入力します。
-
cx-panelフラグメントを、テンプレート・エディタのshipmentsテンプレート・タグの間にドラッグ・アンド・ドロップします。
-
次のパラメータをフラグメント・コードに追加して、下のサンプルのようなコードにします。 Shipment_cおよびPayment_Id_PaymentShipment1Mは、必ず、関連オブジェクト名および外部キー・フィールドの適切な値に置き換え、カスタム・オブジェクト名の正しい大文字/小文字を維持してください。
ノート:
外部キー・フィールドの名前の形式は、常に<Source object name>_Id_<Relationship name>です。 ターゲット・オブジェクト(出荷)のREST describeを実行して、フィールド名を取得することもできます。
<template id="shipments">
<oj-vb-fragment bridge="[[vbBridge]]" class="oj-sp-foldout-layout-panel" name="oracle_cx_fragmentsUI:cx-panel">
<oj-vb-fragment-param name="resource" value='[[ {"name": "Shipment_c", "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": "qbe", "params": [{"key": "Payment_Id_PaymentShipment1M", "value": $variables.id }]}] ]]'>
</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 |
パネルでデータを問い合せるための基準を含めます。 |
-
前のステップでは、パネル・テンプレートを構成しました。 次に、パネルのレイアウトを構成します。
-
「レイアウト」タブをクリックし、「Shipment_c」ノードをクリックします。
-
「Shipment_c」タブで、Panel Card Layoutルール・セットをクリックします。
-
パネルに表示するフィールドを追加します。
-
「デフォルト」レイアウトの横にある「開く」アイコンをクリックします。
-
それぞれのパネルには固有のスロットが含まれています。 フィールドのリストから、それぞれのフィールドを目的のスロットにドラッグします。
たとえば、RecordNameフィールドを「item1」スロットにドラッグ・アンド・ドロップします。 そのスロットにIdフィールドが存在する場合、それを削除できます。
他の必要なフィールドを適切なスロットにドラッグ・アンド・ドロップします。 たとえば、ShipmentDate_cフィールドを「item2」スロットにドラッグし、Email_cフィールドを「item3」スロットにドラッグします。
-
payment_c-detailページから動的コンテナ・コンポーネントをコメント・アウトします。
-
「payment_c-detail」タブをクリックし、ページ・デザイナ・サブタブをクリックします。
-
< ページに戻るをクリックします。
-
「コード」ボタンをクリックします。
ドロップダウン・リストから「ページ」を選択します。
パネルおよびサブビューを格納する動的コンテナ・コンポーネントをコメント・アウトします。
ノート:
パネル・リージョンにさらにパネルを追加するには、まず、必要なそれぞれのパネルについて新しいセクションを追加できるように、動的コンテナ・コンポーネントを非コメント化する必要があります。
サブビューを追加したら、パネルをテストできます。 それは次に行います。