1. Oracle Visual Builder Studioでのカスタム・オブジェクトのアプリケーション拡張方法
  2. 関連オブジェクトの標準オブジェクト・パネルの追加(1対多)
機械翻訳について

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

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

シナリオとは何ですか。

次に例を示します。 この例では、PaymentオブジェクトはLeadオブジェクトと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)」を選択します。

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

    タイプ

    属性

    値

    「レコード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の値を保持します。

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

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

  12. プロパティ・ペインで、追加した「リード・パネル」セクションをクリックします。

    ページ・デザイナでは、引き続きpayment_c詳細タブにあるテンプレート・エディタにナビゲートし、リード・パネル・テンプレートを設計できます。

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

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

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

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

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

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

    ノート: 外部キー・フィールドの名前の形式は、常に<Source object name>_Id_<Relationship name>です。 ターゲット・オブジェクト(リード)のREST記述を実行して、フィールド名を取得することもできます。 
    <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 最終更新日によるソートや降順など、パネル上のデータのソート方法を指定します。
    問合せ パネルでデータを問い合せるための基準を含めます。

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

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

  19. 次にサブビューを追加する準備ができました。

ヒント: パネルをパネル・リージョンに追加したら、それだけが必要です。 標準オブジェクト・パネルには、デフォルトで表示される一連の属性が構成されています。 ただし、パネルを構成する場合は、構成できます。 「パネルのコンテンツの構成」を参照してください。

サブビューの追加後にパネルをテストできます。 次にそれをしましょう。

見込み客パネルのサブビューの追加

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

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

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

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

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

  4. IDフィールドで、leadsの値を保持します。

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

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

  6. プロパティ・ペインで、追加した見込み客セクションをクリックします。

    ページ・デザイナでは、引き続きpayment_c詳細タブにあるテンプレート・エディタにナビゲートし、リード・テンプレートを設計できます。

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

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

  8. コンポーネント・パレットのフィルタ・フィールドに、cx-subviewと入力します。

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

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

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

    ノート: 外部キー・フィールドの名前の形式は、常に<Source object name>_Id_<Relationship name>です。 ターゲット・オブジェクト(リード)のREST記述を実行して、フィールド名を取得することもできます。 
    <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 最終更新日による並べ替えや降順など、サブビュー上のデータの並べ替え方法を指定します。
    問合せ サブビューでデータを問合せするための基準を含めます。

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

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

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

    3. パネルとサブビューを含む動的コンテナ・コンポーネントをコメント・アウトします。

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

      ノート: パネルおよびサブビューをさらに追加するには、まず動的コンテナ・コンポーネントのコメントを解除する必要があります。
ヒント: サブビューを追加したら、それだけが必要です。 標準オブジェクトのサブビューには、デフォルトで表示される一連の属性が構成されています。 ただし、サブビューを構成する場合は、構成できます。 「サブビュー・レイアウトの構成」を参照してください。

パネルとサブビューのテスト

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

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

    次のスクリーンショットは、データを使用したリスト・ページの外観を示しています。

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

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

    「営業リード」パネルが表示されます。

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

  5. アクション・バーで、見込み客の作成アクションを選択します。

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

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

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

    見込み客の作成後、見込み客の詳細ページに移動します。 ブラウザの戻るボタンをクリックして、新しいリードが「営業リード」パネルに表示される支払詳細ページに戻ります。

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

  6. 「営業リード」パネルで、作成したリードのリンクをクリックして、リードの詳細ページに移動します。

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

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

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

  8. セールス見込み客サブビューで、見込み客をクリックして見込み客の詳細ページに移動します。

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

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

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

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