子オブジェクトの構成

子オブジェクトのパネルを親に追加し、子オブジェクトのサブビューを構成します。

子オブジェクトのパネルの構成

cx-panelフラグメントを使用して、子オブジェクトのパネルを構成します。

パネル・リージョンを構成するには:

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

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

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

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

    このスクリーンショットは、「コード」ボタンを示しています。

  1. 作成したルール・セットおよびレイアウトを更新する前に、パネル自体で使用するカスタム・フィールドを作成します。

    詳細ページのパネルでは、avatar-cardスタイルが使用されます。これは、パネル上のフィールドのいずれかのビジュアル表現(通常は名前)であるアバターがパネルに含まれるようになるという意味です。

    このスクリーンショットは、アバターがパネル上でどのように見えるかを示しています。

    このステップでは、カスタム・フィールドAvatarと、アバターのスタイルを定義するavatarFieldTemplateフィールド・テンプレートを作成します。

    最初にカスタム・フィールドを作成します。

    1. 「PaymentLineCollection_c」タブで、「フィールド」サブタブをクリックします。

    2. 「+ カスタム・フィールド」をクリックします。

    3. 「フィールドの作成」ダイアログで、「ラベル」フィールドにAvatarと入力します。

    4. 「ID」フィールドでは、値をavatarにする必要があります。

    5. 「タイプ」フィールドで、オブジェクト(仮想フィールド)を選択します。

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

    7. 新しい仮想フィールドの「プロパティ」ペインで、「フィールド」セクションの横にある「追加」をクリックします。

    8. 「RecordName」を選択します。

      イニシャルを導出できる任意のフィールドを選択します。たとえば、カスタム・オブジェクトにはRecordNameフィールドを使用できます。アカウント・オブジェクトにはPartyNameフィールドを選択します。

    9. 「追加」をクリックします。

    次に、フィールド・テンプレートを作成します。

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

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

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

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

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

    カスタム・フィールドをフィールド・テンプレートにマップします。

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

    2. PanelCardLayoutセクションで、次のコードを追加します:

      ,
      "fieldTemplateMap": {
      "avatar": "avatarFieldTemplate"
            }
      

      結果のコードは次のようになります:

      このスクリーンショットは、カスタム・フィールドをフィールド・テンプレートにマップする方法を示しています。
  2. 次に、パネルに表示するフィールドを追加します。

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

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

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

      このフラグメントによって、パネルの書式が提供されます。

      このスクリーンショットは、cx-cardフラグメントを選択する方法を示しています。

    4. それぞれのパネルには固有のスロットが含まれています。フィールドのリストから、それぞれのフィールドを目的のスロットにドラッグします。

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

      このスクリーンショットは、パネル・レイアウトのスロットにフィールドをドラッグする方法を示しています。

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

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

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

    このスクリーンショットは、「コード」ボタンを示しています。

  4. 次のパラメータをテンプレート・コードに追加します。

    <oj-vb-fragment-param name="dynamicLayoutContext" value="{{ $dynamicLayoutContext }}"></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-param name="badgeItemColor" value="oj-badge-success"></oj-vb-fragment-param>

    テンプレート・コードは次のサンプルのようになります。(次のサンプルには、avatarFieldTemplateフィールド・テンプレートのスタイル指示も含まれています。)

    <!-- 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="style" value="avatar-card"></oj-vb-fragment-param>
        <oj-vb-fragment-param name="enableActions" value="false"></oj-vb-fragment-param>
        <oj-vb-fragment-param name="badgeItem" value="[[ $fields.Type_c.name ]]">
        </oj-vb-fragment-param>    
        <oj-vb-fragment-param name="avatarItem" value="[[ $fields.avatar.name ]]">
        </oj-vb-fragment-param>
        <oj-vb-fragment-param name="item1" value="[[ $fields.RecordName.name ]]">
        </oj-vb-fragment-param>
        <oj-vb-fragment-param name="item4" value="[[ $fields.CreationDate.name ]]">
        </oj-vb-fragment-param>
        <oj-vb-fragment-param name="item2" value="[[ $fields.Amount_c.name ]]">
        </oj-vb-fragment-param>
        <oj-vb-fragment-param name="item3" value="[[ $fields.CreatedBy.name ]]">
        </oj-vb-fragment-param>
        <oj-vb-fragment-param name="badgeItemColor" value="oj-badge-success"></oj-vb-fragment-param>
      </oj-vb-fragment>
    </template>
     
    <template id="avatarFieldTemplate">
    <oj-avatar role="img" size="sm" initials="[[ oj.IntlConverterUtils.getInitials($value.RecordName(), $value.RecordName()) ]]"
        :aria-label="[['Avatar of ' + $value.RecordName()]]"
        :title="[['Avatar of ' + $value.RecordName()]]" background="green">
      </oj-avatar></template>

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

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

    このスクリーンショットは、「支払明細」パネルのテンプレートの構造ペインを示しています。

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

    このスクリーンショットは、「プロパティ」ペインを使用してパネルを設定する方法を示しています。

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

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

    パラメータ名 説明

    style

    詳細ページに追加するパネルについては"avatar-card"を指定します。

    enableActions

    ダッシュボードに表示されるパネルには処理を指定できます。ただし、詳細ページに表示されるパネルには通常、処理は必要ないため、このパラメータを"false"に設定します。

  5. labelEdgeプロパティを使用して、テンプレートのJSONを手動で更新します。

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

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

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

      このスクリーンショットは、labelEdgeプロパティを追加する場所を示しています。
  6. 最後に、payment_c-detailページから動的コンテナ・コンポーネントをコメント・アウトします。

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

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

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

      このスクリーンショットは、ドロップダウンを使用してページを表示する方法を示しています。
    4. パネル・リージョンのために追加した動的コンテナ・コンポーネントをコメント・アウトします。

      このスクリーンショットは、動的コンテナ・コンポーネントをコメント・アウトする方法を示しています。
      ノート:

      パネル・リージョンにさらにパネルを追加するには、まず、必要なそれぞれのパネルについて新しいセクションを追加できるように、動的コンテナ・コンポーネントを非コメント化する必要があります。

  7. payment_c-listページからアプリケーション拡張をプレビューして、追加したパネルをテストします。

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

      これは、Visual Builder Studioの「プレビュー」ボタンのスクリーンショットです。
    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

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

      これは、テスト・リスト・ページのスクリーンショットです。

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

      ノート:

      次のスクリーンショットは、データを含むパネルがどのように見えるかを示しています。テストでは、パネルが空の場合があります。

      このスクリーンショットは、パネルがどのように見えるかを示しています。

      パネルの下部にあるリンクによって、ユーザーがサブビューにナビゲートされます。サブビューを構成する方法の詳細は、「子オブジェクトのサブビューの構成」を参照してください。

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

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

    このスクリーンショットは、Gitのプッシュ・コマンドの使用方法を示しています。

子オブジェクトのサブビューの構成

Oracle Visual Builder Studioでフラグメントを使用して、カスタム・オブジェクトのユーザー・インタフェース・ページ(リスト・ページ、作成ページ、およびパネルを含む詳細ページ)を作成できます。ただし、領域が限られているため、1枚のパネルには少数のレコードのみを表示できます。すべてのレコードを表示するには、ユーザーがパネルからサブビューにナビゲートする必要があります。このトピックでは、フラグメントを使用してサブビューを構築する方法について説明します。

サブビューとは

パネルの領域が小さいため、ユーザーは「すべて表示」リンクをクリックすることで、すべてのレコードが表示される別のページにナビゲートできます。

パネル上の「すべての担当者の表示」リンクのスクリーンショットを次に示します。この例では、パネル自体には1人の担当者John Cookのみを表示する領域があるものの、レコードは合計で3件存在します。ユーザーは、「すべての担当者の表示」リンクをクリックすることで、3人の担当者すべてを表示できます。

これは、「すべて表示」リンクのスクリーンショットです。

サブビューのスクリーンショットを次に示します。サブビューには、上部の基本情報リージョンと、表が含まれます。子オブジェクトまたは関連オブジェクトのカスタム・パネルを作成する場合は、このページも作成する必要があります。フラグメントを使用して、このページを作成できます。

これは、「すべての担当者の表示」ページのスクリーンショットです。

「支払明細」サブビューの作成

支払レコードのサブビューを作成します。これを行うには、ページ・デザイナで新しい動的コンテナを詳細ページに追加します。

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

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

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

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

    このスクリーンショットは、ドロップダウンを使用してページを表示する方法を示しています。

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

    このスクリーンショットは、「コード」ボタンを示しています。

  6. 「フィルタ」フィールドに、dynamic containerと入力します。

  7. 詳細ページ・キャンバスの、パネルを保持する動的コンテナ(先に作成したもの)の外に動的コンテナ・コンポーネントを追加します。この動的コンテナにはサブビューが保持されます。

  8. 動的コンテナのコードで、containerLayout1SubviewContainerLayoutに置き換えます。

    このスクリーンショットは、サブビュー用の新しい動的コンテナの配置を示しています。

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

  10. 詳細ページのJSONで、containerLayout1の2つのインスタンスをSubviewContainerLayoutに名前変更します。

    この2つのインスタンスは、"layouts"セクションと"templates"セクションに表示されます。インスタンスが表示される"templates"セクション内の場所を次に示します。

    このスクリーンショットは、元のテキストを新しいSubviewContainerLayoutテキストに置き換える場所を示しています。

サブビューに使用するセクション・テンプレートを作成します。

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

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

  3. 「タイトル」フィールドに、PaymentLineCollection_cなど、REST子オブジェクト名を使用してセクションのタイトルを入力します。

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

    ノート:

    REST子オブジェクト名は、サービス接続エンドポイントから取得できます。

    このスクリーンショットは、RESTオブジェクト名を確認する方法を示しています。

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

  6. Default Sectionを削除します。

    このスクリーンショットは、サブビューのセクションを示しています。

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

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

    2. SubviewContainerLayoutのセクション・テンプレート・レイアウトのセクションで、サブビューの名前であるPaymentLineCollection_cと一致するようにsectionTemplateMapおよびdisplayPropertiesの値を置き換えます。

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

      このスクリーンショットは、JSONファイルで更新する場所を示しています。

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

これまでに、サブビュー動的コンテナをページに追加するとともに、セクション・テンプレートも追加しました。

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

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

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

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

    このスクリーンショットは、「コード」ボタンを示しています。

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

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

    このスクリーンショットは、ページでフラグメントをドラッグする場所を示しています。

  5. 次のパラメータをフラグメント・コードに追加して、下のサンプルのようなコードにします。Payment__c_IdおよびPaymentLineCollection_cは、必ず、カスタム・トップ・レベル・オブジェクトおよび子オブジェクトの適切な値に置き換えてください。サービス接続エンドポイントからこれらの値を取得します。

    このスクリーンショットは、サービス接続を使用して適切なパラメータ値を確認する方法を示しています。

    <template id="paymentLineCollectionC">
      <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": "PaymentLineCollection_c", "primaryKey": "Id", "relationship": "Child"} ]]'></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 最終更新日に基づいた降順ソートなど、サブビューでデータをソートする方法を指定します。
    query サブビューでデータを問い合せるための基準を含めます。
    child パネルの基になる子オブジェクトのREST子オブジェクト名を入力します。

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

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

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

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

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

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

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

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

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

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

  4. 支払の編集後にユーザーが自動的にサブビューに戻るようにできるように、イベントを作成します。

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

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

      このスクリーンショットは、ドロップダウンを使用してページを表示する方法を示しています。

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

      このスクリーンショットは、「コード」ボタンを示しています。

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

      このスクリーンショットは、クリックするフラグメント・タグを示しています。

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

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

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

      3. 「プロパティ」ペインで、「変数」フィールドの横にある変数の選択アイコンをクリックします。

      4. 「変数」ポップアップで、「ページ」見出しの下にある「view」をクリックします。

        このスクリーンショットは、選択する変数を示しています。

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

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

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

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

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

      このスクリーンショットは、ドロップダウンを使用してページを表示する方法を示しています。
    4. サブビューのために追加した動的コンテナ・コンポーネントをコメント・アウトします。

      このスクリーンショットは、動的コンテナ・コンポーネントをコメント・アウトする方法を示しています。

  6. 処理メニューをサブビューに追加します。

    これを行うには、カスタム・フィールドActions Menuを作成します。

    1. 「PaymentLineCollection_c」タブで、「フィールド」サブタブをクリックします。

    2. 「+ カスタム・フィールド」をクリックします。

    3. 「フィールドの作成」ダイアログで、「ラベル」フィールドにActions Menuと入力します。

    4. 「ID」フィールドでは、値をactionsMenuにする必要があります。

    5. 「タイプ」フィールドで、「文字列」を選択します。

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

    カスタム・フィールドをフィールド・テンプレートにマップします。

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

    2. SubViewLayoutセクションで、次のコードを追加します:

      ,
            "fieldTemplateMap": {
              "actionsMenu" : "actionMenuTemplate"
            }
      

      結果のコードは次のようになります:

      このスクリーンショットは、カスタム・フィールドをフィールド・テンプレートにマップする方法を示しています。

    カスタム・フィールドをサブビューの表に追加します。

    1. 「PaymentLineCollection_c」タブ > 「ルール・セット」サブタブをクリックします。

    2. 「SubViewLayout」をクリックします。

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

    4. フィールドのリストから、「actionsMenu」フィールドをクリックしてサブビューの表に追加します。

  7. 処理メニューでは、「編集」処理と「削除」処理の両方を提供します。ユーザーは、「編集」をクリックして支払明細を編集します。

    支払明細の編集ページのレイアウトを作成します。

    このスクリーンショットは、実行時に処理メニューがどのように見えるかを示しています。

    1. 「PaymentLineCollection_c」タブで、「< ルール・セット」をクリックしてメインの「ルール・セット」ページに戻り、新しいルール・セットを作成できます。

      1. 「+ ルール・セット」をクリックします。

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

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

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

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

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

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

      2. 表示するフィールドの選択をクリックします。

      3. フィールドのリストから、支払明細の編集ページに表示するフィールドを選択します。フィールドは、クリックした順に列として表示されますが、並べ替えることができます。

    3. このレイアウトの「プロパティ」ペインで、最大列数フィールドに2と入力します。

      レイアウトのプロパティを表示するには、「< フォーム」をクリックする必要がある場合があります。

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

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

      これは、Visual Builder Studioの「プレビュー」ボタンのスクリーンショットです。
    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

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

      これは、テスト・リスト・ページのスクリーンショットです。

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

      ノート:

      次のスクリーンショットは、データを含むパネルがどのように見えるかを示しています。テストでは、パネルが空の場合があります。

      このスクリーンショットは、パネルがどのように見えるかを示しています。

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

      このスクリーンショットは、サブビューがどのように見えるかを示しています。

    6. 「処理メニュー」 > 「編集」をクリックして、支払明細を編集します。

      このスクリーンショットは、ユーザーが支払明細を編集するために「編集」処理をクリックすると表示されるページを示しています。

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

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

    このスクリーンショットは、Gitのプッシュ・コマンドの使用方法を示しています。

特定の親オブジェクトの子オブジェクト・サブビューのみでのスマート処理の表示

子オブジェクトのサブビューを作成するときに、そのサブビューに特別に適用するスマート処理を作成することが必要になる場合があります。

たとえば、CX拡張ジェネレータを使用して出荷のリストを支払に表示しており、出荷が支払の子オブジェクトであるとします。ユーザーが出荷を支払に追加するために処理バーに入力する追加スマート処理は、CX拡張ジェネレータによって自動的に作成されますが、エントリを削除するためのスマート処理は作成されません。このスマート処理を作成し、支払のサブビューでのみ使用できるようにするステップを次に示します。

  1. RESTベースのスマート処理の作成のトピックで説明されているように、削除スマート処理をRESTベースのスマート処理として作成します。「可用性」ページの「コンテキスト」リージョンには、必ず親オブジェクトの名前を入力してください。
  2. VB Studioで、親オブジェクトの詳細ページを開き、テンプレート・コードを表示します(「アプリケーションUI」 > 「Payment_c_detail」 > 「コード」 > 「ページ」 > 「テンプレート」)

    テキストで説明されているVBSでのナビゲーション。
  3. コード内でサブビューのテンプレートを探し、次のパラメータを追加します:

    <oj-vb-fragment-param name=“enableActions” value=‘[[{“enabled”: “true”, “enableContext”: “true”}]]’></oj-vb-fragment-param>

    </oj-vb-fragment>タグの直前に挿入します。

    追加したコードの場所が強調表示されているコード。