ページへのマッシュアップの追加
Redwood Salesオブジェクト(標準またはカスタム)について、公開されているURLを参照するマッシュアップを含めるように詳細ページを構成できます。 マッシュアップは、Oracle Visual Builder Studioで作成します。
たとえば、ウィキペディア・ページを支払の詳細ページに追加できます。 実行時に、ユーザーが支払を表示すると、ユーザーはアクション・バーに「ウィキペディアを表示」を入力できます。 「ウィキペディアを表示」アクションを使用すると、ユーザーは支払レコードから移動せずに、関連する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詳細タブで、JSONサブタブをクリックします。
-
SubviewContainerLayoutのセクション・テンプレート・レイアウトのセクションで、サブビューのID名
Wikipediaと一致するようにsectionTemplateMapおよびdisplayPropertiesの値を置き換えます。この例では、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詳細ページから動的コンテナ・コンポーネントをコメント・アウトします。
-
「<ページに戻る」をクリックします。

-
「コード」ボタンをクリックします。
パネルとサブビューを含む動的コンテナ・コンポーネントをコメント・アウトします。
ノート: サブビューをさらに追加するには、目的のサブビューごとに新しいセクションを追加できるように、まず動的コンテナ・コンポーネントのコメントを解除する必要があります。
-
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を追加する必要があります。次のスクリーンショットは、データを使用したリスト・ページの外観を示しています。

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

Push Gitコマンドを使用して作業内容を保存します。
Gitタブに移動し、変更内容を確認し、Gitプッシュを実行します(これはコミットとGitリポジトリへのプッシュの両方を行います)。
