ページへのマッシュアップの追加

Redwood営業オブジェクト(標準またはカスタム)については、公開されたURLを参照するマッシュアップを含むように、その詳細ページを構成できます。このマッシュアップは、Oracle Visual Builder Studioで作成します。

たとえば、支払の詳細ページにWikipediaページを追加できます。実行時に、ユーザーが支払を表示するときに、処理バーにWikipediaの表示と入力できます。Wikipediaの表示処理を使用すると、ユーザーは支払レコードから離れることなく、関連するWikipediaページを表示できます。

詳細ページへのマッシュアップの追加

マッシュアップを追加する例を見てみましょう。この例では、支払の詳細ページにマッシュアップを追加します。

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

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

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

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

   

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

   

6. パネルおよびサブビューを格納する動的コンテナ・コンポーネントのコメント・タグを削除します。

   

7. サブビューの<oj-dynamic-container>タグを強調表示します。

   

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

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

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

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

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

    1. 「payment_c-detail」タブで、「JSON」サブタブをクリックします。

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

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

       

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

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

    

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

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

    

16. テンプレート・エディタで、マッシュアップのテンプレート・タグを探します。

    

17. 次のパラメータをフラグメント・コードに追加して、下のサンプルのようなコードにします。titleおよびurlパラメータの値を必要に応じて更新してください。

    <template id="wikipedia">
      <oj-vb-fragment bridge="[[vbBridge]]" name="oracle_cx_fragmentsUI:cx-url">
        <oj-vb-fragment-param name="dynamicLayoutContext" value="{}"></oj-vb-fragment-param>
        <oj-vb-fragment-param name="mode" value="embedded"></oj-vb-fragment-param>
        <oj-vb-fragment-param name="title" value="Wikipedia"></oj-vb-fragment-param>
        <oj-vb-fragment-param name="url" value="https://en.wikipedia.org/wiki/"></oj-vb-fragment-param>
      </oj-vb-fragment>
    </template>
    

    次の表では、マッシュアップについて指定できるパラメータについて説明します:

    マッシュアップのパラメータ

    パラメータ名	説明
    title	サブビューのUIに表示する、マッシュアップのタイトルを入力します。
    url	マッシュアップのURLを入力します。

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

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

       

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

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

       
       ノート:

       さらにサブビューを追加するには、まず、必要なそれぞれのサブビューについて新しいセクションを追加できるように、動的コンテナ・コンポーネントを非コメント化する必要があります。

19. payment_c-listページから、「プレビュー」ボタンをクリックして、ランタイム・テスト環境の変更を表示します。

    

20. 結果のプレビュー・リンクは次のようになります:

    https://<servername>/fscmUI/redwood/cx-custom/payment_c/payment_c-list

21. プレビュー・リンクを次のように変更します:

    https://<servername>/fscmUI/redwood/cx-custom/application/container/payment_c/payment_c-list

    ノート:

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

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

    

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

23. 処理バーに、Wikipediaの表示と入力します。

    

24. Wikipediaの表示をクリックします。

    Wikipediaマッシュアップが表示されます:

    

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

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