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

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

シナリオとは何ですか。

この例では、PaymentオブジェクトはContactオブジェクトと多対多の関係を持っています。実行時に、ユーザーは支払詳細ページで支払の担当者を表示し、担当者サブビューにドリルダウンできる必要があります。

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

担当者サブビューの作成

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

Visual Builder Studioで、「アプリケーションUI」タブをクリックします。
cx-custom > payment_cを展開し、payment_c-detailノードをクリックします。
payment_c-detailタブで、ページ・デザイナ・サブタブをクリックします。
「コード」ボタンをクリックします。
ページ・デザイナでページを表示していることを確認します。
「actionBar」パラメータで、コードは次のようになるようにsubviewLabelプロパティを追加します:

<oj-vb-fragment-param name="actionBar" value='[[ { "applicationId": "ORACLE-ISS-APP", "subviewLabel": {"PaymentContactMMInter_Src_Payment_cToPaymentContactMMInter_c_Tgt": $translations.CustomBundle.Contacts()},"resource": {"name": $flow.constants.objectName, "primaryKey": "Id", "puid": "Id", "value": $variables.puid }} ]]'></oj-vb-fragment-param>

これにより、自動生成されたスマート表示アクションの交差オブジェクト名が、よりわかりやすく翻訳可能なラベルに置換されます。上のパラメータでは、PaymentContactMMInter_Src_Payment_cToPaymentContactMMInter_c_Tgtおよび翻訳バンドル名と文字列を、独自のサブビュー表示プロパティ(通常は交差オブジェクト名)、翻訳バンドル名および文字列に置き換えてください。

ヒント: あるいは、このフラグメント・コードでは、subviewLabel定数を参照して、同じことを実現できます。「表示」アクションについてを参照してください。
パネルおよびサブビューを含む動的コンテナ・コンポーネントのコメント・タグを削除します。
サブビューの<oj-dynamic-container>タグを強調表示します。
プロパティ・ペインのケース1リージョンで、「セクションの追加」アイコンをクリックし、「新規セクション」をクリックします。
タイトル・フィールドに、オブジェクトの名前(Contacts Subviewなど)を使用してセクションのタイトルを入力します。
IDフィールドで、値をPaymentContactMMInter_Src_Payment_cToPaymentContactMMInter_c_Tgtに変更します。

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

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

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

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

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

コードが次のサンプルになるように、次のパラメータをフラグメント・コードに追加します。必ず、Payment__c_IdおよびPaymentContactMMInter_Src_Payment_cToPaymentContactMMInter_c_Tgtを、ソース・オブジェクトIDおよび交差オブジェクト名の適切な値に置き換えてください。必要に応じて、翻訳バンドル名も変更します。

ノート: 交差オブジェクト名の形式は、常に<Relationship Name>_Src_<Source Object API Name>To<Relationship name>_Tgtです。

<template id="contactsSubview">
  <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": "PaymentContactMMInter_Src_Payment_cToPaymentContactMMInter_c_Tgt", "primaryKey": "Id", "relationship": "M2M"} ]]'></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-param name="title" value="[[$translations.CustomBundle.Contacts()]]"></oj-vb-fragment-param>
  </oj-vb-fragment>  
</template>

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

サブビューのパラメータ

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

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

「レイアウト」タブをクリックし、PaymentContactMMInter_Src_Payment_cToPaymentContactMMInter_c_Tgt > 「ルール・セット」サブタブをクリックします。
「+ルール・セット」をクリックして、レイアウトの新しいルール・セットを作成します。
1. 「ルール・セット」の作成ダイアログのコンポーネント・フィールドで、「動的表」を選択します。
2. ラベル・フィールドに、この値(大文字と小文字を区別)を正確に入力: SubViewLayout.
3. IDフィールドに、この値を入力します(大文字と小文字は区別されます): SubViewLayout.
4. 「作成」をクリックします。
レイアウトに表示するフィールドを追加します。
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-detailタブで、ページ・デザイナ・サブタブをクリックします。
2. 「コード」ボタンをクリックします。
3. ドロップダウンから「ページ」を選択します。
4. パネルとサブビューを含む動的コンテナ・コンポーネントをコメント・アウトします。
サブビューにアクション・メニューを追加します。

これを行うには、カスタム・フィールドActions Menuを作成します。
1. PaymentContactMMInter_Src_Payment_cToPaymentContactMMInter_c_Tgtタブで、フィールド・サブタブをクリックします。
2. 「+カスタム・フィールド」をクリックします。
3. 「フィールドの作成」ダイアログのラベル・フィールドに、Actions Menuと入力します。
4. IDフィールドでは、値はactionsMenuである必要があります。
5. タイプ・フィールドで、「文字列」を選択します。
6. 「作成」をクリックします。
カスタム・フィールドをフィールド・テンプレートにマップします。
1. PaymentContactMMInter_Src_Payment_cToPaymentContactMMInter_c_Tgtタブで、JSONサブタブをクリックします。
2. SubViewLayoutセクションで、次のコードを追加します:
```
,
      "fieldTemplateMap": {
        "actionsMenu" : "actionMenuTemplate"
      }
```
  結果のコードは次のようになります:
カスタム・フィールドをサブビュー表に追加します。
1. PaymentContactMMInter_Src_Payment_cToPaymentContactMMInter_c_Tgtタブ→「ルール・セット」サブタブをクリックします。
2. SubViewLayoutをクリックします。
3. 「デフォルト」レイアウトの横にある開くアイコンをクリックします。
4. フィールドのリストから、actionsMenuフィールドをクリックして、表の最終列としてサブビュー表に追加します。

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

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リポジトリへのプッシュの両方を行います)。