1. カスタム・オブジェクトの拡張方法
  2. 子オブジェクトの構成
機械翻訳について

子オブジェクトの構成

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

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

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

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

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

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

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

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

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

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

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

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

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

    4. フィールドのリストから、それぞれのフィールドを目的のスロットにドラッグします。

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

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

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

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

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

    <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>

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

    <!-- 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>

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

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

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

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

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

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

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

      これは、Visual Builder Studioの「プレビュー」ボタンのスクリーンショットです。

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

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

    2. リストページで任意のレコードをクリックして、詳細ページにドリルダウンします。

      次のスクリーンショットでは、パネルが強調表示されています。

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

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

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

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

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

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

このトピックでは、フラグメントを使用してサブビューを構築する方法について説明します。

サブビューとは

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  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セクション・テンプレート・レイアウトのセクションで、sectionTemplateMapおよびdisplayPropertiesの値を、サブビューPaymentLineCollection_cの名前と一致するように置き換えます。

      この例では、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. 「変数」ウィンドウの「ページ」ヘッダーで、「表示」をクリックします。

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

      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リスト・ページで、「プレビュー」ボタンをクリックして、ランタイム・テスト環境の変更を確認します。

      これは、Visual Builder Studioの「プレビュー」ボタンのスクリーンショットです。

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

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

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

      ノート:

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

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

    3. [全て表示]リンクをクリックして、サブビューにドリルダウンします。

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

    4. 「処理」→「編集」をクリックして、支払明細を編集します。

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

  9. Push 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>タグの直前に挿入します。

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