1. カスタム・オブジェクトの拡張方法
  2. 関連オブジェクトの標準オブジェクト・パネルの追加(1対多)

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

関連オブジェクトのパネルを追加することによって、オブジェクトの詳細ページを構成できます。このことにより、ユーザーは、レコードに関係するすべての関連情報を単一のページで簡単に表示できるようになります。カスタム・オブジェクト・パネルまたは標準オブジェクト・パネルを追加できます。このトピックでは、標準オブジェクト・パネルをオブジェクトの詳細ページに追加する方法(パネル・オブジェクトが1対多の関係で関連している場合)について説明します。

シナリオ

次に例を示します。この例では、支払オブジェクトとリード・オブジェクトの間に1対多の関係があります。実行時に、ユーザーが支払詳細ページで支払に対してリードを作成し、それらのリードを表示できる必要があります。

設定の概要

ユーザーが支払に対してリードを作成できるよう、支払詳細ページにリード・パネルおよびサブビューを追加します。

  1. まず、アプリケーション・コンポーザで「リードの作成」スマート処理を作成します。

    「前提条件: 作成スマート処理」を参照してください。

  2. 支払詳細ページに新しいリード・パネルを追加します。

    「支払詳細ページへのリード・パネルの追加」を参照してください。

  3. リード・パネルを追加した後、サブビューを追加できます。

    「リード・パネルのサブビューの追加」を参照してください。

前提条件: 作成スマート処理

「リードの作成」スマート処理は、支払詳細ページとリード・サブビューの両方の処理バーから表示されます。ユーザーは、「リードの作成」スマート処理を選択して、リードの作成ページにナビゲートできます。

ノート:

以前に非フラグメント実装の「リードの作成」スマート処理を作成している場合、このユース・ケースについて新しいスマート処理を作成する必要はありません。かわりに、既存のスマート処理を更新して、「作成」処理タイプ、オブジェクトおよびフィールド・マッピングを指定します。これにより、この新しいフラグメントベースの拡張でカスタム・スマート処理が引き続き確実に機能するようになります。

「リードの作成」スマート処理をまだ作成していない場合は、ここで作成します:

  1. サンドボックスを作成します。

  2. アプリケーション・コンポーザで、「共通設定」メニューにある「スマート処理」をクリックします。

  3. ページの上部にある「作成」をクリックします。

  4. 「処理の種類」ページで、「UIベースの処理」をクリックし、「続行」をクリックします。

  5. 「基本詳細」ページの「名前」フィールドに、スマート処理名を入力します。

    たとえば、Create Leadと入力します。

  6. 「オブジェクト」フィールドで、1対多関係のソース・オブジェクトを選択します。

    この場合は、「支払」を選択し、「続行」をクリックします。

  7. 「可用性」ページの「アプリケーション」フィールドで、「営業」を選択します。

  8. 「UI可用性」フィールドで、「リスト・ページ」を選択し、「続行」をクリックします。

  9. 「処理タイプ」ページの「タイプ」フィールドで、「作成」を選択します。

  10. 「ターゲット・オブジェクト」フィールドの「トップレベル・オブジェクト」見出しで、1対多関係のターゲット・オブジェクトを選択します。

    たとえば、「営業リード」を選択します。

  11. 「フィールド・マッピング」リージョンで、「追加」をクリックします。

  12. 「処理」列で、「編集」アイコンをクリックし、次のフィールド値を設定します:

    このスクリーンショットは、属性のデフォルトをスマート処理に追加する方法を示しています。

    属性のデフォルト

    列

    値

    名前

    ソース・オブジェクトのIDおよび関係名を保持する、1対多関係のターゲット・オブジェクトのフィールドを選択します。これは、ターゲット・オブジェクト(営業リード)の標準フィールドです。

    フィールド名の形式は、常に<Source object name>_Id_<Relationship name>です。たとえば、支払ID PaymentLead1M (Payment_Id_PaymentLead1M)を選択します。

    ノート:

    ターゲット・オブジェクトのこのフィールドは、アプリケーション・コンポーザには表示されません。

    タイプ

    属性

    値

    「Record ID (Id)」を選択します。これは、ソース・オブジェクト(支払)の標準フィールドです。

    このことは、ユーザーがリードを作成するときに、作成スマート処理によって、支払のIDがリード・レコードの支払ID PaymentLead1M (Payment_Id_PaymentLead1M)属性にデフォルト設定されることを意味します。

  13. 「完了」をクリックします。

  14. 「続行」をクリックします。

  15. 「処理詳細」ページの「ナビゲーション・ターゲット」フィールドで、「ローカル」を選択し、「続行」をクリックします。

  16. 「レビューおよび発行」ページで、「発行」をクリックします。

支払詳細ページへのリード・パネルの追加

支払詳細ページに新しいリード・パネルを追加するには:

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

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

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

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

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

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

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

  6. キャンバスのcx-detailフラグメントの</oj-vb-fragment>終了タグのすぐ下に、次のコードを追加します:

    <oj-dynamic-container layout="PanelsContainerLayout" layout-provider="[[ $metadata.dynamicContainerMetadata.provider ]]"
    class="oj-flex-item oj-sm-12 oj-md-1"></oj-dynamic-container>
<oj-dynamic-container layout="SubviewContainerLayout" layout-provider="[[ $metadata.dynamicContainerMetadata.provider ]]">
  </oj-dynamic-container>

  7. パネルの<oj-dynamic-container>タグを強調表示します。

    このスクリーンショットは、強調表示するコンポーネントを示しています。

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

    このスクリーンショットは、「プロパティ」ペインを示しています。

  9. 「タイトル」フィールドに、Leads Panelなど、セクションのタイトルを入力します。

  10. 「ID」フィールドで、値をleadsPanelのままにします。

    ノート:

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

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

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

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

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

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

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

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

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

  16. 次のパラメータをフラグメント・コードに追加して、下のサンプルのようなコードにします。leadsおよびPayment_Id_PaymentLead1Mは、必ず、関連オブジェクト名および外部キー・フィールドの適切な値に置き換えてください。

    ノート:

    外部キー・フィールドの名前の形式は、常に<Source object name>_Id_<Relationship name>です。ターゲット・オブジェクト(リード)のREST describeを実行して、フィールド名を取得することもできます。

    <template id="leadsPanel">
  <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": "leads", "primaryKey": "Id", "endpoint": "cx" } ]]'>
    </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": "qbe", "params": [{"key": "Payment_Id_PaymentLead1M", "value": $variables.id }]}] ]]'>
    </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 パネルでデータを問い合せるための基準を含めます。

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

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

  19. 次にサブビューを追加するための準備が整いました。

ヒント:

パネルをパネル・リージョンに追加したら、必要な作業は終わりです。標準オブジェクト・パネルには、デフォルトで表示される属性のセットが構成されています。ただし、パネルを構成する必要がある場合は、構成することもできます。「パネルの内容の構成」を参照してください。

サブビューを追加したら、パネルをテストできます。それは次に行います。

リード・パネルのサブビューの追加

関連オブジェクト・パネルをカスタム・オブジェクトの詳細ページに追加したら、次はサブビューを追加します。

  1. payment_c-detailページで、サブビューの<oj-dynamic-container>タグを強調表示します。

    このスクリーンショットは、強調表示するコンポーネントを示しています。

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

  3. 「タイトル」フィールドに、Leadsなど、セクションのタイトルを入力します。

  4. 「ID」フィールドで、値をleadsのままにします。

    ノート:

    このIDにはREST APIオブジェクト名を使用します。

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

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

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

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

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

  8. 「コンポーネント」パレットで、「フィルタ」フィールドにcx-subviewと入力します。
  9. cx-subviewフラグメントを、テンプレート・エディタのleadsテンプレート・タグの間にドラッグ・アンド・ドロップします。

    このスクリーンショットは、cx-subviewフラグメントを追加する場所を示しています。

  10. 次のパラメータをフラグメント・コードに追加して、下のサンプルのようなコードにします。leadsおよびPayment_Id_PaymentLead1Mは、必ず、オブジェクトおよび外部キー・フィールドの適切な値に置き換えてください。
    ノート: 外部キー・フィールドの名前の形式は、常に<Source object name>_Id_<Relationship name>です。ターゲット・オブジェクト(リード)のREST describeを実行して、フィールド名を取得することもできます。
    <template id="leads">
  <oj-vb-fragment bridge="[[vbBridge]]" name="oracle_cx_fragmentsUI:cx-subview">
    <oj-vb-fragment-param name="resource" value='[[ {"name": "leads", "primaryKey": "Id", "endpoint": "cx" } ]]'>
    </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": "qbe", "params": [{"key": "Payment_Id_PaymentLead1M", "value": $variables.id }]}] ]]'>
    </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 サブビューでデータを問い合せるための基準を含めます。

  11. payment_c-detailページから動的コンテナ・コンポーネントをコメント・アウトします。

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

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

    3. パネルおよびサブビューを格納する動的コンテナ・コンポーネントをコメント・アウトします。

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

      ノート:

      さらにパネルおよびサブビューを追加するには、まず、その動的コンテナ・コンポーネントを非コメント化する必要があります。

ヒント:

サブビューを追加したら、必要な作業は終わりです。標準オブジェクトのサブビューには、デフォルトで表示される属性のセットが構成されています。ただし、サブビューを構成する必要がある場合は、構成することもできます。「サブビュー・レイアウトの構成」を参照してください。

パネルおよびサブビューのテスト

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. 処理バーで、「リードの作成」処理を選択します。

    このスクリーンショットは、「リードの作成」処理にアクセスする方法を示しています。

    「リードの作成」ページが表示されます。一般的な「リードの作成」ページの例を次に示します:

    このスクリーンショットは、「リードの作成」ページの例を示しています。

    リードを作成すると、リードの詳細ページにナビゲートされます。ブラウザの戻るボタンをクリックして支払詳細ページに戻ると、「営業リード」パネルに新しいリードが表示されます。

    このスクリーンショットは、「営業リード」パネルに表示されている新しいリードを示しています。

  6. 「営業リード」パネルで、先ほど作成したリードのリンクをクリックして、リードの詳細ページにナビゲートします。

    ブラウザの戻るボタンをクリックします。

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

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

  8. 「営業リード」サブビューで、リードをクリックして、リードの詳細ページにナビゲートします。

    ブラウザの戻るボタンをクリックします。

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

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

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