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

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

シナリオ

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

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

出荷サブビューの作成

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

1. Visual Builder Studioで、「アプリケーションUI」タブをクリックします。

2. 「cx-custom」 > 「payment_c」を展開し、「payment_c-detail」ノードをクリックします。

3. 「payment_c-detail」タブで、ページ・デザイナ・サブタブをクリックします。

4. 「コード」ボタンをクリックします。

   

5. ページ・デザイナでページを表示していることを確認します。

   

6. パネルおよびサブビューを格納する動的コンテナ・コンポーネントのコメント・タグを削除します。

   

7. サブビューの<oj-dynamic-container>タグを強調表示します。

   

8. 「プロパティ」ペインのケース1リージョンで、セクションの追加アイコンをクリックし、新規セクションをクリックします。

9. 「タイトル」フィールドで、Shipment_cなどのセクションのタイトルを入力します。

10. 「ID」フィールドで、値をShipment_cに変更します。

    ノート:

    このIDにはREST APIオブジェクト名を使用します。

11. 「OK」をクリックします。

12. 正しいサブビュー名を使用して、テンプレートのJSONを手動で更新します。

    1. 「payment_c-detail」タブで、「JSON」サブタブをクリックします。

    2. SubviewContainerLayoutのセクション・テンプレート・レイアウトのセクションで、サブビューのID名であるShipment_cに一致するようにsectionTemplateMapおよびdisplayPropertiesを置き換えます。これがオブジェクトのREST API名です。

       この例では、SubviewContainerLayoutのsectionTemplateMapおよびdisplayPropertiesは次のようになります:

       

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

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

1. 「payment_c-detail」タブで、ページ・デザイナ・サブタブをクリックします。

2. 「プロパティ」ペインで、先ほど追加したShipment_cセクションをクリックします。

   

   ページ・デザイナでテンプレート・エディタの「payment_c-detail」タブが表示され、Shipment_cテンプレートの設計を続行できます。

3. 「コード」ボタンをクリックします。

   

4. 「コンポーネント」パレットで、「フィルタ」フィールドにcx-subviewと入力します。

5. cx-subviewフラグメントを、テンプレート・エディタのshipmentC templateタグの間にドラッグ・アンド・ドロップします。

   

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

   ノート:

   外部キー・フィールドの名前の形式は、常に<Source object name>_Id_<Relationship name>です。ターゲット・オブジェクト(出荷)のREST describeを実行して、フィールド名を取得することもできます。

   <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	最終更新日に基づいた降順ソートなど、サブビューでデータをソートする方法を指定します。
   query	サブビューでデータを問い合せるための基準を含めます。

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

1. 「レイアウト」タブをクリックし、「Shipment_c」>「ルール・セット」サブタブをクリックします。

2. Sub View Layoutルール・セットをクリックします。

3. レイアウトに表示するフィールドを追加します。

   1. 「デフォルト」レイアウトの横にある「開く」アイコンをクリックします。

   2. フィールドのリストから、サブビューの表に表示するフィールドを選択します。フィールドは、クリックした順に列として表示されますが、並べ替えることができます。

4. ユーザーがサブビューにナビゲートしたときにURLを更新するイベントを作成します。こうすることで、レコードの編集後にユーザーが自動的にサブビューに戻るようにできます。

   ノート: 別のオブジェクトのサブビューの構成時にこのイベントをすでに作成している場合は、このステップを省略できます。

   1. 「payment_c-detail」タブで、ページ・デザイナ・サブタブをクリックします。

   2. ページ・デザイナでページを表示していることを確認します。

      

   3. 「コード」ボタンをクリックします。

      

   4. 詳細ページのコードで、oj-vb-fragmentタグをクリックします。

      

   5. cx-detailフラグメントの「プロパティ」ペインで、「イベント」サブタブをクリックします。

      1. + 新規イベント > 「On 'viewChangeEvent'」をクリックします。

      2. 変数の割当アクションをキャンバスにドラッグします。

      3. 「プロパティ」ペインの「変数」フィールドで、「ページ」見出しの下にある「view」をクリックします。

         

      4. 「値」フィールドに、{{ payload.view }}と入力します。

5. payment_c-detailページから動的コンテナ・コンポーネントをコメント・アウトします。

   1. 「payment_c-detail」タブをクリックし、ページ・デザイナ・サブタブをクリックします。

   2. 「コード」ボタンをクリックします。

   3. ドロップダウンから「ページ」を選択します。

      

   4. パネルおよびサブビューを格納する動的コンテナ・コンポーネントをコメント・アウトします。

      

パネルおよびサブビューへのリンクの追加

パネルおよびサブビューの両方で、ユーザーは出荷名をクリックして、出荷詳細ページにナビゲートできる必要があります。出荷名をハイパーリンクとして使用できるようにするには、次の手順を実行する必要があります:

1. RecordNameフィールドを「出荷」パネルおよびサブビュー・レイアウトに追加します。

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

3. レイアウトごとに、RecordNameフィールドをハイパーリンク・フィールド・テンプレートに関連付けます。

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

1. 「レイアウト」タブをクリックし、「Shipment_c」ノードをクリックします。

2. 「Shipment_c」タブで、「テンプレート」サブタブをクリックします。

3. 「+ テンプレート」をクリックします。

4. 「テンプレートの作成」ダイアログで、「タイプ」として「フィールド」を選択します。

5. 「ラベル」フィールドに、hyperlinkTemplateと入力します。

6. 「作成」をクリックします。

7. テンプレート・エディタで、「設計」ボタンをクリックします。

8. 「コンポーネント」パレットの「フィルタ」フィールドに、cx-hyperlinkと入力します。

9. cx-hyperlinkフラグメントを、構造ペインの入力テキスト・ノードの下にドラッグ・アンド・ドロップします。

   

10. 入力テキスト・ノードを削除します。

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

1. 「レイアウト」タブをクリックし、「Shipment_c」ノードをクリックします。

2. 「Shipment_c」タブで、「ルール・セット」サブタブをクリックします。

3. Panel Card Layoutルール・セットをクリックします。

4. 「プロパティ」ペインで、「テンプレート」サブタブをクリックします。

5. + デフォルト・フィールド・テンプレートをクリックします。

6. 「RecordName」フィールドを選択し、「hyperlinkTemplate」テンプレートを選択します。「確認」をクリックします。

   

7. ページの上部で、「<ルール・セット」をクリックして、ルール・セットのリストに戻ります。

   

8. Sub View Layoutルール・セットをクリックします。

9. 「デフォルト」レイアウトの横にある「開く」アイコンをクリックします。

10. RecordNameフィールドをクリックして選択します。

11. 「プロパティ」ペインの「テンプレート」フィールドで、「hyperlinkTemplate」テンプレートを選択します。

    

12. Panel Card Layoutのハイパーリンク・テンプレートのJSONエントリを変更します。

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

    次のコードがPanelCardLayoutセクションに表示されます:

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

13. "/"を削除して、次のようなコードにします:

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

パネルおよびサブビューのテスト

payment_c-listページからアプリケーション拡張をプレビューして、サブビューをテストします。

1. payment_c-listページから、「プレビュー」ボタンをクリックして、ランタイム・テスト環境の変更を表示します。

   

2. 結果のプレビュー・リンクは次のようになります:

   https://<servername>/fscmUI/redwood/cx-custom/payment_c/payment_c-list

3. プレビュー・リンクを次のように変更します:

   https://<servername>/fscmUI/redwood/cx-custom/application/container/payment_c/payment_c-list

   ノート:

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

   次のスクリーンショットは、データを含むリスト・ページがどのように見えるかを示しています。

   

4. データが存在する場合、リスト・ページで任意のレコードをクリックして、詳細ページにドリルダウンできます。ヘッダー・リージョンとパネルを含む詳細ページが表示されます。

   これで、「出荷」パネルが表示されるようになります。

   

5. 処理バーで、「出荷の作成」処理を選択します。

   

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

   

   出荷を作成すると、出荷の詳細ページにナビゲートされます。ブラウザの戻るボタンをクリックして、出荷の詳細ページに戻ります。

6. 「出荷」パネルで、作成した出荷のリンクをクリックして、出荷の詳細ページにナビゲートします。

   ブラウザの戻るボタンをクリックします。

7. 「すべて表示」リンクをクリックして、サブビューにドリルダウンします。

   

8. 「出荷」サブビューで、「Mar Shipment」リンクをクリックし、出荷の詳細ページにナビゲートします。

   ブラウザの戻るボタンをクリックします。

9. Gitのプッシュ・コマンドを使用して、作業内容を保存します。

   「Git」タブにナビゲートし、変更をレビューして、Gitのプッシュを実行します(コミットとGitリポジトリへのプッシュの両方が行われます)。