関連オブジェクトのサブビューの構成(1対多)

カスタム・オブジェクトの詳細ページに関連オブジェクト・パネルを追加した後、サブビューを作成および構成できるようになりました。このトピックでは、(1対多関係を介して関連付けられた)関連オブジェクトのサブビューを作成する方法について説明します。

シナリオとは何ですか。

この例では、PaymentオブジェクトとShipmentオブジェクトの関係が1対多になっています。実行時に、ユーザーは支払詳細ページで支払の出荷を作成および表示し、出荷サブビューにドリルダウンできる必要があります。

支払詳細ページに出荷パネルをすでに追加しました。次に、出荷サブビューを作成します。

出荷サブビューの作成

支払用に作成された出荷を表示するサブビュー用の新しいテンプレートを作成します。

Visual Builder Studioで、「アプリケーションUI」タブをクリックします。
cx-custom > payment_cを展開し、payment_c-detailノードをクリックします。
payment_c-detailタブで、ページ・デザイナ・サブタブをクリックします。
「コード」ボタンをクリックします。
ページ・デザイナでページを表示していることを確認します。
パネルおよびサブビューを含む動的コンテナ・コンポーネントのコメント・タグを削除します。
サブビューの<oj-dynamic-container>タグを強調表示します。
プロパティ・ペインのケース1リージョンで、「セクションの追加」アイコンをクリックし、「新規セクション」をクリックします。
タイトル・フィールドに、セクションのタイトル(Shipment_cなど)を入力します。
IDフィールドで、値をShipment_cに変更します。

ノート: このIDにはREST APIオブジェクト名を使用します。
「OK」をクリックします。
テンプレートのJSONを正しいサブビュー名で手動で更新します。
1. payment_c詳細タブで、JSONサブタブをクリックします。
2. SubviewContainerLayoutのセクション・テンプレート・レイアウトのセクションで、サブビューのID名Shipment_cと一致するようにsectionTemplateMapおよびdisplayPropertiesの値を置き換えます。これはオブジェクトのREST API名です。
  
  この例では、SubviewContainerLayoutのsectionTemplateMapおよびdisplayPropertiesは次のようになります:

サブビュー・レイアウトの構成

次に、cx-subviewフラグメントを使用してサブビューの構造を構築します。

payment_c-detailタブで、ページ・デザイナ・サブタブをクリックします。
プロパティ・ペインで、追加したShipment_cセクションをクリックします。

ページ・デザイナでは、payment_c-detailタブに引き続きテンプレート・エディタにナビゲートし、Shipment_cテンプレートを設計できます。
「コード」ボタンをクリックします。
コンポーネント・パレットのフィルタ・フィールドに、cx-subviewと入力します。
cx-subviewフラグメントをテンプレート・エディタのshipmentCテンプレート・タグの間にドラッグ・アンド・ドロップします。

コードが次のサンプルになるように、次のパラメータをフラグメント・コードに追加します。 Shipment_cおよびPayment_Id_PaymentShipment1Mは、オブジェクトおよび外部キー・フィールドに適切な値に置き換えてください。

ノート: 外部キー・フィールドの名前の形式は、常に<Source object name>_Id_<Relationship name>です。

<template id="shipmentC">
  <oj-vb-fragment bridge="[[vbBridge]]" name="oracle_cx_fragmentsUI:cx-subview">
    <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>

次の表では、サブビューに指定できるパラメータの一部について説明します:

サブビューのパラメータ

パラメータ名	説明
sortCriteria	最終更新日による並べ替えや降順など、サブビュー上のデータの並べ替え方法を指定します。
問合せ	サブビューでデータを問合せするための基準を含めます。

次に、サブビュー・レイアウトを構成します。

「レイアウト」タブをクリックし、Shipment_c > 「ルール・セット」サブタブをクリックします。
「サブビュー・レイアウト」ルール・セットをクリックします。
レイアウトに表示するフィールドを追加します。
1. 「デフォルト」レイアウトの横にある開くアイコンをクリックします。
2. フィールドのリストから、サブビュー・テーブルに表示するフィールドを選択します。フィールドは、クリックした順序で列として表示されますが、並べ替えることができます。
ユーザーがサブビューに移動したときにURLを更新するイベントを作成します。これにより、ユーザーはレコードの編集後に自動的にサブビューに戻ることができます。

ノート: 別のオブジェクトのサブビューを構成するときにこのイベントをすでに作成している場合は、このステップをスキップできます。
1. payment_c-detailタブで、ページ・デザイナ・サブタブをクリックします。
2. ページ・デザイナでページを表示していることを確認します。
3. 「コード」ボタンをクリックします。
4. 詳細ページのコードで、oj-vb-fragmentタグをクリックします。
5. cx-detailフラグメントのプロパティ・ペインで、イベント・サブタブをクリックします。
  1. 「+新規イベント」 > 「'viewChangeEvent'の場合」をクリックします。
  2. 変数の割当てアクションをキャンバスにドラッグします。
  3. プロパティ・ペインの変数フィールドで、ページ・ヘッダーの下にある「ビュー」をクリックします。
  4. 値フィールドに、{{ payload.view }}と入力します。
payment_c-detailページから動的コンテナ・コンポーネントをコメント・アウトします。
1. payment_c詳細タブをクリックし、ページ・デザイナ・サブタブをクリックします。
2. 「コード」ボタンをクリックします。
3. ドロップダウンから「ページ」を選択します。
4. パネルとサブビューを含む動的コンテナ・コンポーネントをコメント・アウトします。

パネルとサブビューへのリンクの追加

パネルとサブビューの両方で、ユーザーは出荷名をクリックして出荷詳細ページに移動できる必要があります。出荷名をハイパーリンクとして有効にするには、次を実行する必要があります:

RecordNameフィールドを出荷パネルおよびサブビューのレイアウトに追加します。
ハイパーリンク・フィールド・テンプレートを作成します。
レイアウトごとに、RecordNameフィールドをハイパーリンク・フィールド・テンプレートに関連付けます。

まず、ハイパーリンク・フィールド・テンプレートを作成します。

レイアウト・タブをクリックし、Shipment_cノードをクリックします。
Shipment_cタブで、テンプレート・サブタブをクリックします。
「+テンプレート」をクリックします。
「テンプレートの作成」ダイアログで、タイプに「フィールド」を選択します。
ラベル・フィールドに、hyperlinkTemplateと入力します。
「作成」をクリックします。
テンプレート・エディタで、デザイン・ボタンをクリックします。
コンポーネント・パレットのフィルタ・フィールドに、cx-hyperlinkと入力します。
cx-hyperlinkフラグメントを構造ペインの入力テキスト・ノードの下にドラッグ・アンド・ドロップします。
入力テキスト・ノードを削除します。

次に、作成したハイパーリンク・フィールド・テンプレートを、パネル・レイアウトおよびサブビュー・レイアウトにすでに追加したRecordNameフィールドに関連付けます。

レイアウト・タブをクリックし、Shipment_cノードをクリックします。
Shipment_cタブで、ルール・セット・サブタブをクリックします。
「パネル・カード・レイアウト」ルール・セットをクリックします。
プロパティ・ペインで、テンプレート・サブタブをクリックします。
「+デフォルト・フィールド・テンプレート」をクリックします。
RecordNameフィールドを選択し、hyperlinkTemplateテンプレートを選択します。「確認」をクリックします。
ページ上部で、「<ルール・セット」をクリックしてルール・セットのリストに戻ります。
「サブビュー・レイアウト」ルール・セットをクリックします。
「デフォルト」レイアウトの横にある開くアイコンをクリックします。
RecordNameフィールドをクリックして選択します。
プロパティ・ペインのテンプレート・フィールドで、hyperlinkTemplateテンプレートを選択します。
パネル・カード・レイアウトのハイパーリンク・テンプレートのJSONエントリを変更します。

Shipment_cタブで、JSONサブタブをクリックします。

次のコードがPanelCardLayoutセクションに表示されます:
```
,
      "fieldTemplateMap": {
        "RecordName": "/hyperlinkTemplate"
      }
```

コードは次のようになるように「/」を削除します:

,
      "fieldTemplateMap": {
        "RecordName": "hyperlinkTemplate"
      }

パネルとサブビューのテスト

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

ノート: プレビュー・リンクに/application/containerを追加する必要があります。

次のスクリーンショットは、データを使用したリスト・ページの外観を示しています。
データが存在する場合は、リスト・ページの任意のレコードをクリックして詳細ページにドリルダウンできます。ヘッダー・リージョンおよびパネルを含む詳細ページが表示されます。

出荷パネルが表示されます。
アクション・バーで、出荷を作成アクションを選択します。

「出荷の作成」ページが表示されます。一般的な「出荷の作成」ページの例を次に示します:

出荷を作成した後、出荷詳細ページにナビゲートする必要があります。ブラウザの戻るボタンをクリックして、支払詳細ページに戻ります。
出荷パネルで、作成した出荷のリンクをクリックして出荷詳細ページにナビゲートします。

ブラウザの戻るボタンをクリックします。
すべて表示リンクをクリックして、サブビューにドリルダウンします。
出荷サブビューで出荷リンクをクリックして、出荷詳細ページに移動します。

ブラウザの戻るボタンをクリックします。
Push Gitコマンドを使用して作業内容を保存します。
Gitタブに移動し、変更内容を確認し、Gitプッシュを実行します(これはコミットとGitリポジトリへのプッシュの両方を行います)。