関連オブジェクトのパネルを追加することで、オブジェクトの詳細ページを拡張できます。 これにより、ユーザーが見やすくなります - 単一ページ - レコードに関連するすべての関連情報。 カスタム・オブジェクト・パネルまたは標準オブジェクト・パネルを追加できます。 このトピックでは、カスタム・オブジェクト・パネルをオブジェクトの詳細ページに追加する方法を説明します(パネル・オブジェクトが1対多関係を介して関連している場合)。
シナリオとは何ですか。
この例では、PaymentオブジェクトとShipmentオブジェクトの関係が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に変更します。
ノート: このIDにはRESTオブジェクト名を使用しないでください。これは、サブビューの作成時にRESTオブジェクト名を使用するためです。
-
「OK」をクリックします。
-
プロパティ・ペインで、追加した「出荷」セクションをクリックします。
ページ・デザイナでは、payment_c詳細タブに引き続きテンプレート・エディタにナビゲートし、出荷パネル・テンプレートを設計できます。
「コード」ボタンをクリックします。
-
コンポーネント・パレットのフィルタ・フィールドに、cx-panelと入力します。
-
cx-panelフラグメントをテンプレート・エディタの出荷テンプレート・タグの間にドラッグ・アンド・ドロップします。
-
コードが次のサンプルになるように、次のパラメータをフラグメント・コードに追加します。 Shipment_cおよびPayment_Id_PaymentShipment1Mは、関連するオブジェクト名と外部キー・フィールドの適切な値に置き換えて、カスタム・オブジェクト名の適切な大文字表記を保持してください。
ノート: 外部キー・フィールドの名前の形式は、常に<Source object name>_Id_<Relationship name>です。 ターゲット・オブジェクト(出荷)のREST記述を実行して、フィールド名を取得することもできます。
<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 |
最終更新日によるソートや降順など、パネル上のデータのソート方法を指定します。 |
| 問合せ |
パネルでデータを問い合せるための基準を含めます。 |
-
前のステップで、パネル・テンプレートを構成しました。 次に、パネルのレイアウトを構成します。
-
レイアウト・タブをクリックし、Shipment_cノードをクリックします。
-
Shipment_cタブで、「パネル・カード・レイアウト」ルール・セットをクリックします。
-
パネルに表示するフィールドを追加します。
-
「デフォルト」レイアウトの横にある開くアイコンをクリックします。
-
各パネルには、特定のスロットが含まれています。 フィールドのリストから、各フィールドを目的のスロットにドラッグします。
たとえば、RecordNameフィールドをitem1スロットにドラッグ・アンド・ドロップします。 そのスロットにIDフィールドがある場合は、そのフィールドを削除できます。
他の目的のフィールドを適切なスロットにドラッグ・アンド・ドロップします。 たとえば、ShipmentDate_cフィールドをitem2スロットにドラッグし、Email_cフィールドをitem3スロットにドラッグします。
-
payment_c-detailページから動的コンテナ・コンポーネントをコメント・アウトします。
-
payment_c詳細タブをクリックし、ページ・デザイナ・サブタブをクリックします。
-
「<ページに戻る」をクリックします。
-
「コード」ボタンをクリックします。
ドロップダウンから「ページ」を選択します。
パネルとサブビューを含む動的コンテナ・コンポーネントをコメント・アウトします。
ノート: パネル・リージョンにパネルを追加するには、目的のパネルごとに新しいセクションを追加できるように、まず動的コンテナ・コンポーネントのコメントを解除する必要があります。
サブビューの追加後にパネルをテストできます。 次にそれをしましょう。