機械翻訳について

関連オブジェクトのパネルの追加(多対多)

関連オブジェクトのパネルを追加することで、オブジェクトの詳細ページを構成できます。 これにより、ユーザーが見やすくなります - 単一ページ - レコードに関連するすべての関連情報。 このトピックでは、パネルをオブジェクトの詳細ページに追加する方法を説明します(パネル・オブジェクトが多対多関係を介して関連している場合)。 これらの手順は、パネル・オブジェクトが標準オブジェクトであるかカスタム・オブジェクトであるかに適用されます。

シナリオとは何ですか。

この例では、PaymentオブジェクトはContactオブジェクトと多対多の関係を持っています。 実行時に、ユーザーは支払の担当者を追加し、支払詳細ページでその担当者を表示できる必要があります。 これを有効にするには、支払詳細ページに担当者パネルを追加する必要があります。

設定の概要

カスタム・オブジェクトの詳細ページに関連オブジェクト・パネルを追加するには、最初にいくつかのステップを完了する必要があります。 次に、必要なステップの概要を示します。

1. オブジェクトがカスタム・オブジェクトか標準オブジェクトかに関係なく、関連オブジェクトに対して次のステップを実行します:

   1. 多対多関係の交差オブジェクトに、レコード名のカスタム・フィールドが含まれていることを確認します。 このカスタム・フィールドは、交差オブジェクト・パネルおよびサブビューのレイアウトを作成するとき、および交差オブジェクト・レイアウトを編集するときに使用されます。

      たとえば、PaymentオブジェクトとContactオブジェクトの間に多対多関係が存在するシナリオがあります。 この例では、次のように交差オブジェクトに「担当者名」フィールドを作成します:

      レコード名フィールド構成

      レコード名フィールド	レコード名値
      フィールド・タイプ	Formula
      名前	<Object>Name たとえば、ContactNameです
      表示タイプ	単純テキスト・ボックス
      フィールド式	ターゲット・オブジェクトから担当者名を取得する式を入力します。 たとえば: Person_Tgt_PersonToPaymentContactMMInter_c_Src?.PartyUniqueName

   2. アプリケーション・コンポーザで、関連オブジェクトに必要な「追加」スマート・アクションを作成します。

      たとえば、「担当者の追加」スマート・アクションを作成します。

      ユーザーは、支払詳細ページまたは担当者サブビューの両方のアクション・バーから担当者を追加スマート・アクションにアクセスして、担当者を支払に追加できます。

      「スマート処理の作成」を参照してください。

2. その後、ユーザーが支払レコードの担当者を追加および表示できるように、担当者UIコンポーネントを支払詳細ページに追加できます。

   • 支払詳細ページへの担当者パネルの追加

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

   • 関連オブジェクトの追加レイアウトの構成(多対多)

   • 関連オブジェクトのリンク・フィールドの作成(多対多)

支払詳細ページへの担当者パネルの追加

担当者の新しいパネルを支払詳細ページに追加するには:

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. タイトル・フィールドに、セクションのタイトル(Contacts Panelなど)を入力します。

10. IDフィールドで、contactsPanelの値を受け入れます。

    ノート: このIDにはRESTオブジェクト名を使用しないでください。これは、サブビューの作成時にRESTオブジェクト名を使用するためです。

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

12. プロパティ・ペインで、追加した「担当者パネル」セクションをクリックします。

    ページ・デザイナでは、payment_c-detailタブに引き続きテンプレート・エディタにナビゲートし、担当者パネル・テンプレートを設計できます。

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

    

14. コンポーネント・パレットのフィルタ・フィールドに、cx-panelと入力します。

15. cx-panelフラグメントをテンプレート・エディタのContactsテンプレート・タグの間にドラッグ・アンド・ドロップします。

    

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

    ノート: 交差オブジェクトの名前の形式は、常に<Relationship Name>_Src_<Source Object API Name>To<Relationship name>_Tgtです。 ソース・オブジェクト(Payment)のREST記述を実行して、名前を取得することもできます。

    <template id="contactsPanel">
     <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": $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	最終更新日によるソートや降順など、パネル上のデータのソート方法を指定します。
    問合せ	パネルでデータを問い合せるための基準を含めます。

17. 前のステップで、パネル・テンプレートを構成しました。 次に、パネルのレイアウトを構成します。

    まず、新しいレイアウトを作成します。

    1. レイアウト・タブをクリックし、レイアウトの作成アイコンをクリックします。

       

    2. 「レイアウトの作成」ダイアログで、Paymentオブジェクトがソースである交差オブジェクトのRESTリソースをクリックします。

       この例では、cx-customを展開し、Payment_c/PaymentContactMMInter_Src_Payment_cToPaymentContactMMInter_c_Tgtをクリックします。

       

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

18. PaymentContactMMInter_Src_Payment_cToPaymentContactMMInter_c_Tgtタブで、「+ルール・セット」をクリックして、レイアウトの新しいルール・セットを作成します。

    1. 「ルール・セット」の作成ダイアログのコンポーネント・フィールドで、「動的フォーム」を選択します。

    2. ラベル・フィールドに、この値(大文字と小文字を区別)を正確に入力: PanelCardLayout.

    3. IDフィールドに、この値を入力します(大文字と小文字は区別されます): PanelCardLayout.

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

19. パネルに表示するフィールドを追加します。

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

    2. cx-cardフラグメントをクリックします。

       このフラグメントは、パネルの形式を提供します。

    3. 各パネルには、特定のスロットが含まれています。 フィールドのリストから、各フィールドを目的のスロットにドラッグします。

       たとえば、ContactName_cフィールドをitem1スロットにドラッグ・アンド・ドロップします。

       ノート: 関連オブジェクト・パネルで選択するフィールド(多対多関係を介して関連)は、交差オブジェクトからのみ使用できます。 カスタム・フィールドをレイアウトに追加するには、これらのカスタム・フィールドをアプリケーション・コンポーザの交差オブジェクトに追加する必要があります。

       

       他の目的のフィールドを適切なスロットにドラッグ・アンド・ドロップします。

    4. プロパティ・ペインで、「テンプレートに移動」をクリックします。

20. テンプレート・サブタブで、コード・ボタンをクリックします。

    

21. 次のパラメータをフラグメント・コードに追加します:

    <oj-vb-fragment-param name="style" value="avatar-card"></oj-vb-fragment-param>
        <oj-vb-fragment-param name="enableActions" value="false"></oj-vb-fragment-param>
    

    テンプレート・コードは、次の例のようになります。

    <!-- Contains Dynamic UI layout templates -->
    <template id="defaultTemplate">
    <oj-vb-fragment name="oracle_cx_fragmentsUI:cx-card" bridge="[[ vbBridge ]]">
        <oj-vb-fragment-param name="dynamicLayoutContext" value="{{ $dynamicLayoutContext }}"></oj-vb-fragment-param>
        <oj-vb-fragment-param name="item1" value="[[ $fields.ContactName_c.name ]]">
        </oj-vb-fragment-param>
        <oj-vb-fragment-param name="item2" value="[[ $fields.CurrencyCode.name ]]">
        </oj-vb-fragment-param>
        <oj-vb-fragment-param name="item3" value="[[ $fields.CreatedBy.name ]]">
        </oj-vb-fragment-param>
        <oj-vb-fragment-param name="style" value="avatar-card"></oj-vb-fragment-param>
        <oj-vb-fragment-param name="enableActions" value="false"></oj-vb-fragment-param>
      </oj-vb-fragment>
    </template>

    ノート: avatar-cardスタイルは、「担当者」パネルのみに固有です。 別のオブジェクトのパネルを追加する場合は、スタイル・パラメータを省略できます。

    前に行ったように、「デフォルト」レイアウトに戻り、ドラッグ・アンド・ドロップすることで、さらにフィールドを追加できます。

    または、プロパティ・ペインを使用してパネルにフィールドを追加できます。 これを行うには、構造ペインでフラグメント・コンテナ・ノードをクリックします。

    

    次に、プロパティ・ペインの「入力パラメータ」フィールドを使用して、目的の関連オブジェクト・フィールドを追加します。

    

    この表は、カスタム・パネルに指定できるいくつかのパラメータについて説明しています。

    カスタム・パネルのパラメータ

    パラメータ名	説明
    style	詳細ページに追加するパネルには、"avatar-card"を指定します。
    enableActions	パネルは、ダッシュボードに表示されるときにアクションを持つことができます。 詳細ページに表示されるパネルには通常、アクションは必要ありません。したがって、このパラメータを"false"に設定します。

22. テンプレートのJSONをlabelEdgeプロパティで手動で更新します。

    1. PaymentContactMMInter_Src_Payment_cToPaymentContactMMInter_c_Tgtタブで、JSONサブタブをクリックします。

    2. PanelCardLayoutの「デフォルト」レイアウトのセクションで、"none"の値を持つlabelEdgeプロパティを追加します。

       この例では、labelEdgeプロパティは次のようになります:

       

23. 最後に、payment_c詳細ページから動的コンテナ・コンポーネントをコメント・アウトします。

    1. payment_c詳細タブをクリックし、ページ・デザイナ・サブタブをクリックします。

    2. 「<ページに戻る」をクリックします。

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

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

       

    5. パネルとサブビューを含む動的コンテナ・コンポーネントをコメント・アウトします。

       
       ノート: パネル・リージョンにパネルを追加するには、目的のパネルごとに新しいセクションを追加できるように、まず動的コンテナ・コンポーネントのコメントを解除する必要があります。

サブビューの追加後にパネルをテストできます。 次にそれをしましょう。