1. カスタム・オブジェクトの拡張方法
  2. パネルへのロールアップ・リージョンの追加

パネルへのロールアップ・リージョンの追加

ロールアップは、ビジネス・オブジェクトとその関連オブジェクトの属性について、レコードを横断してデータを集計します。ロールアップの集計値は、オブジェクトの詳細ページのパネル内にビジネス・メトリックとして表示されます。Oracle Visual Builder Studioを使用して、新しいロールアップをパネルに追加できます。

ロールアップが表示される場所

ロールアップは、オブジェクトの詳細ページのパネル内に表示されます。

カスタム・オブジェクトと標準オブジェクトの両方のパネルに、事前定義済またはカスタムのロールアップを追加できます。標準オブジェクトの一部のパネルはすでに、ロールアップ・リージョンが含まれた状態で提供されています。

支払のパネルに表示されているロールアップのスクリーンショットを次に示します。

このスクリーンショットは、支払の「支払明細」パネルに表示されているロールアップを示しています。

前提条件

パネルには事前定義済ロールアップまたはカスタム・ロールアップを追加できます。

カスタム・ロールアップを追加する前に、まず、そのカスタム・ロールアップを作成する必要があります。

  1. アプリケーション・コンポーザで:

    • 目的のオブジェクトについて、ロールアップ・オブジェクトおよびフィールドを作成します。

    • 次に、フィールドをロールアップとして作成して公開します。

  2. 営業の「設定および保守」作業領域の「適応型検索の構成」タスクで、ロールアップ・オブジェクトおよび属性を有効にします。

ロールアップを設定するステップを参照してください。

次の例では、支払オブジェクトについて作成された、RollupObjectと呼ばれるロールアップ・オブジェクトを使用します。RollupObjectオブジェクトには次のフィールドがあります:

  • 支払明細数(数値フィールド)

  • 合計金額(通貨フィールド)

ロールアップ・レイアウトおよびルール・セットの作成

ロールアップをパネルに追加するには、まず、そのロールアップのレイアウトを作成する必要があります。その後、ロールアップ・レイアウトをパネルに追加できます。

支払の詳細ページの「支払明細」パネルにロールアップを追加する例を見てみましょう。

まず、ロールアップ・レイアウトを作成します:

  1. Visual Builder Studioで、「レイアウト」タブをクリックし、レイアウトの作成アイコンをクリックします。

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

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

    この例では、ロールアップ・オブジェクトはRollupObjectと呼ばれます。そのため、「cx-custom」を展開し、「Payment_c/RollupObject_c」をクリックします。

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

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

次に、関連するルール・セットを作成します。

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

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

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

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

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

  2. ロールアップ・フィールドをレイアウトに追加します。

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

      このスクリーンショットは、「デフォルト」レイアウトを開く方法を示しています。

    2. 「cx-panel-rollup」フラグメントをクリックします。

      このフラグメントによって、ロールアップ・リージョンの書式が提供されます。

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

    3. このロールアップ・レイアウトには、2つのスロットが含まれています。フィールドのリストから、ロールアップ・フィールドを目的のスロットにドラッグします。

      たとえば、TotalAmount_cフィールドを「item2」スロットにドラッグします。

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

パネルへのロールアップ・リージョンの追加

前の項では、レイアウトおよびルール・セットを使用してロールアップ・リージョンを構成しました。

次に、パネルのページおよびテンプレートにパラメータを追加して、ロールアップ・リージョンをパネルに追加します。その方法は次のとおりです:

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

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

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

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

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

  5. ドロップダウンから「テンプレート」を選択します。

    このスクリーンショットは、テンプレートを編集する方法を示しています。

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

    <oj-vb-fragment-param name="rollupLayoutId" value="PaymentLinesRollup"></oj-vb-fragment-param>

    必ず、rollupLayoutIdパラメータの値を適切な値に置き換えてください。

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

    
<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": "PaymentLinesCollection_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-param name="rollupLayoutId" value="PaymentLinesRollup"></oj-vb-fragment-param> 
</oj-vb-fragment>
</template>

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

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

    このスクリーンショットは、ページを編集する方法を示しています。

  8. 既存のresourceパラメータを次のコードに置き換えます:

    <oj-vb-fragment-param name="resource"
    value="[[ {'name':'Payment_c', 'puid': $variables.puid, 'id': $variables.id, 'endpoint': $application.constants.serviceConnection ,'extensionId': $application.constants.extensionId, 'rollup': 'RollupObject_c'} ]]">

    必ず、すべての属性値をシナリオに適した値に置き換えてください。

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

    <oj-vb-fragment bridge="[[vbBridge]]" name="oracle_cx_fragmentsUI:cx-detail" class="oj-flex-item oj-sm-12 oj-md-11"
  on-view-change-event="[[$listeners.fragmentViewChangeEvent]]">
    <oj-vb-fragment-param name="resource"
    value="[[ {'name':'Payment_c', 'puid': $variables.puid, 'id': $variables.id, 'endpoint': $application.constants.serviceConnection ,'extensionId': $application.constants.extensionId, 'rollup': 'RollupObject_c'} ]]">
    <oj-vb-fragment-param name="header" value="[[ {'resource': $flow.constants.objectName, 'extensionId': $application.constants.extensionId } ]]"></oj-vb-fragment-param>
    <oj-vb-fragment-param name="actionBar"  value='[[ { "applicationId": "ORACLE-ISS-APP", "subviewLabel": {"PaymentContactMMInter_Src_Payment_cToPaymentContactMMInter_c_Tgt": $translations.CustomBundle.Contacts()}, "resource": {"name": $flow.constants.objectName, "primaryKey": "Id", "puid": "Id", "value": $variables.puid }} ]]'></oj-vb-fragment-param>
    <oj-vb-fragment-param name="panels" value='[[ { "panelsMetadata": $metadata.dynamicContainerMetadata, "view": $page.variables.view } ]]'></oj-vb-fragment-param>
    <oj-vb-fragment-param name="context" value="[[ {'flowContext': $flow.variables.context} ]]"></oj-vb-fragment-param>
    <oj-vb-fragment-param name="row" value="{{ $variables.row }}"></oj-vb-fragment-param>
</oj-vb-fragment>

パネルのテスト

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

    ノート:

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

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

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

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

    ロールアップのリージョンが含まれた「支払明細」パネルが詳細ページに表示されるようになりました。

    このスクリーンショットは、支払の「支払明細」パネルに表示されているロールアップを示しています。

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

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

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