ページへのマッシュアップの追加
Redwood営業オブジェクト(標準またはカスタム)については、公開されたURLを参照するマッシュアップを含むように、その詳細ページを構成できます。 このマッシュアップは、Oracle Visual Builder Studioで作成します。
たとえば、支払の詳細ページにWikipediaページを追加できます。 実行時に、ユーザーが支払を表示するときに、処理バーにWikipediaの表示と入力できます。 Wikipediaの表示処理を使用すると、ユーザーは支払レコードから離れることなく、関連するWikipediaページを表示できます。
詳細ページへのマッシュアップの追加
マッシュアップを追加する例を見てみましょう。 この例では、支払の詳細ページにマッシュアップを追加します。
-
Visual Builder Studioで、「アプリケーションUI」タブをクリックします。
-
「cx-custom」 > 「payment_c」を展開し、「payment_c-detail」ノードをクリックします。
-
「payment_c-detail」タブで、ページ・デザイナ・サブタブをクリックします。
-
「コード」ボタンをクリックします。

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

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

-
サブビューの
<oj-dynamic-container>タグを強調表示します。
-
「プロパティ」ペインのケース1リージョンで、セクションの追加アイコンをクリックし、新規セクションをクリックします。
-
「タイトル」フィールドに、
Wikipediaなど、セクションのタイトルを入力します。 -
「ID」フィールドで、値を
Wikipediaに変更します。 -
「OK」をクリックします。
-
正しいサブビュー名を使用して、テンプレートのJSONを手動で更新します。
-
「payment_c-detail」タブで、「JSON」サブタブをクリックします。
-
SubviewContainerLayoutセクション・テンプレート・レイアウトのセクションで、
sectionTemplateMapおよびdisplayPropertiesの値を、サブビューのID名Wikipediaと一致するように置き換えます。この例では、SubviewContainerLayout
sectionTemplateMapおよびdisplayPropertiesは次のようになります。
-
-
引き続き「payment_c-detail」タブで、ページ・デザイナ・タブをクリックします。
-
「プロパティ」ペインで、先ほど追加したWikipediaセクションをクリックします。

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

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

-
次のパラメータをフラグメント・コードに追加して、下のサンプルのようなコードにします。
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を入力します。
-
payment_c-detailページから動的コンテナ・コンポーネントをコメント・アウトします。
-
< ページに戻るをクリックします。

-
「コード」ボタンをクリックします。
パネルおよびサブビューを格納する動的コンテナ・コンポーネントをコメント・アウトします。
ノート:さらにサブビューを追加するには、まず、必要なそれぞれのサブビューについて新しいセクションを追加できるように、動的コンテナ・コンポーネントを非コメント化する必要があります。
-
payment_c-listページから、「プレビュー」ボタンをクリックして、ランタイム・テスト環境の変更を表示します。
-
結果のプレビュー・リンクは次のようになります:
https://<servername>/fscmUI/redwood/cx-custom/payment_c/payment_c-list -
プレビュー・リンクを次のように変更します:
https://<servername>/fscmUI/redwood/cx-custom/application/container/payment_c/payment_c-listノート:プレビュー・リンクに
/application/containerを追加する必要があります。次のスクリーンショットは、データを含むリスト・ページがどのように見えるかを示しています。

-
データが存在する場合、リスト・ページで任意のレコードをクリックして、詳細ページにドリルダウンできます。 ヘッダー・リージョンとパネルを含む詳細ページが表示されます。
-
処理バーに、
Wikipediaの表示と入力します。
-
Wikipediaの表示をクリックします。
Wikipediaマッシュアップが表示されます:

Gitのプッシュ・コマンドを使用して、作業内容を保存します。
「Git」タブにナビゲートし、変更をレビューして、Gitのプッシュを実行します(コミットとGitリポジトリへのプッシュの両方が行われます)。
