機械翻訳について

子オブジェクトの構成

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

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

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

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

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

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

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

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

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

  5. フィルタ・フィールドに、dynamic containerと入力します。

  6. 動的コンテナ・コンポーネントを、終了oj-vb-fragmentタグの外にある詳細ページ・キャンバスにドラッグ・アンド・ドロップします。 動的コンテナには、詳細ページのパネルが保持されます。

    このスクリーンショットは、コンポーネントをページ・キャンバスにドラッグする方法を示しています。

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

    このスクリーンショットは、動的コンテナのレイアウト名を更新する方法を示しています。

  8. payment_c詳細タブで、JSONサブタブをクリックします。

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

    2つのインスタンスが"layouts"セクションと"templates"セクションに表示されます。

次に、パネルに使用するセクション・テンプレートを作成します。

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

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

  3. Payment Linesなどのセクションのタイトルを入力し、OKをクリックします。

  4. Default Sectionを削除します。

    このスクリーンショットは、パネル・テンプレートを追加する方法を示しています。

「支払明細」パネルのテンプレートおよびレイアウトを構成します。

  1. プロパティ・ペインで、追加した「支払明細」セクションをクリックします。

    ページ・デザイナは、payment_cの詳細タブにあるテンプレート・エディタにナビゲートし、「支払明細」パネル・テンプレートを設計できます。

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

    このスクリーンショットは、コード・ボタンを示しています。
  3. コンポーネント・パレットのフィルタ・フィールドに、cx-panelと入力します。

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

    このスクリーンショットは、フラグメントをテンプレート・エディタにドラッグする方法を示しています。

  5. コードが次のサンプルになるように、次のパラメータをフラグメント・コードに追加します。 Payment_c_IdおよびPaymentLineCollection_cは、カスタムの最上位レベルおよび子オブジェクトに適した値に必ず置き換えてください。

    
    <template id="paymentLines">
      <oj-vb-fragment bridge="[[vbBridge]]" 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": "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 最終更新日によるソートや降順など、パネル上のデータのソート方法を指定します。
    問合せ パネルでデータを問い合せるための基準を含めます。
    子供 パネルの基準となる子オブジェクトのREST子オブジェクト名を入力します。
  6. 前のステップで、パネル・テンプレートを構成しました。

    次に、パネルのレイアウトを構成します。

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

    このスクリーンショットは、レイアウトの作成方法を示しています。

  7. 「レイアウトの作成」ダイアログで、子オブジェクトのRESTリソースをクリックします。

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

    このスクリーンショットは、レイアウトのRESTリソースを選択する方法を示しています。

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

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

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

    2. ラベル・フィールドに、PanelCardLayoutと入力します。

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

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

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

    詳細ページのパネルでは、avatar-cardスタイルが使用されます。 つまり、パネルにはアバターがあり、これはパネル上のフィールドの1つ(通常は名前)を視覚的に表したものです。

    このスクリーンショットは、パネルでのアバターの外観を示しています。

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

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

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

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

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

    4. IDフィールドの値はavatarである必要があります。

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

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

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

    8. RecordNameを選択します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    <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"に設定します。

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

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

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

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

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

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

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

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

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

      このスクリーンショットは、動的コンテナ・コンポーネントをコメント・アウトする方法を示しています。
      ノート: パネル・リージョンにパネルを追加するには、目的のパネルごとに新しいセクションを追加できるように、まず動的コンテナ・コンポーネントのコメントを解除する必要があります。
  16. payment_cリスト・ページからアプリケーション拡張をプレビューして、追加したパネルをテストします。

    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. データが存在する場合は、リスト・ページの任意のレコードをクリックして詳細ページにドリルダウンできます。 ヘッダー・リージョンおよびパネルを含む詳細ページが表示されます。

      ノート: 次のスクリーンショットは、データでのパネルの外観を示しています。 テストでは、パネルが空である場合があります。
      このスクリーンショットは、パネルの外観を示しています。

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

  17. Push Gitコマンドを使用して作業内容を保存します。

    Gitタブに移動し、変更内容を確認し、Gitプッシュを実行します(これはコミットとGitリポジトリへのプッシュの両方を行います)。

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

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

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

サブビューとは

パネルの範囲は小さいため、ユーザーはすべて表示リンクをクリックして、すべてのレコードを表示する2ページ目に移動できます。

パネルのすべての担当者の表示リンクのスクリーンショットを次に示します。 この例では、パネル自体に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詳細タブで、JSONサブタブをクリックします。

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

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

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

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

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

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

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

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

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

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

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

  6. Default Sectionを削除します。

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

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

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

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

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

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

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

以前に、サブビュー動的コンテナをページとセクション・テンプレートに追加しました。

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

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

    ページ・デザイナは、payment_cの詳細タブにあるテンプレート・エディタにナビゲートし、そこで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 最終更新日による並べ替えや降順など、サブビュー上のデータの並べ替え方法を指定します。
    問合せ サブビューでデータを問合せするための基準を含めます。
    子供 パネルの基準となる子オブジェクトの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. 「+新規イベント」 > 「'viewChangeEvent'の場合」をクリックします。

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

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

      4. 変数ポップアップのページ見出しで、「ビュー」をクリックします。

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

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

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

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

    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リスト・ページからアプリケーション拡張をプレビューして、サブビューをテストします。

    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. Push Gitコマンドを使用して作業内容を保存します。

    Gitタブに移動し、変更内容を確認し、Gitプッシュを実行します(これはコミットとGitリポジトリへのプッシュの両方を行います)。

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