ユースケース:HTML ページへの CPQ UI の埋め込み
HTML iFrame に CPQ ユーザーインターフェイスを埋め込む方法について説明します。
この記事では、管理者が任意の HTML ページの iframe に CPQ UI を表示する方法の概要を説明します。簡単に言うと、レシピは次のもので構成されています。
- ホストアプリケーションが JSON としてホスト HTML ページに渡すデータ
- ホスト HTML ページ
- CPQ サーバーで調整されたコンテンツセキュリティポリシー [CSP] 設定
構成の初期化 JSON データ形式
構成を初期化するには、基本的なフィールドデータをページに渡します。渡すことができるパラメーターは、きれいな JSON 形式で表されます。
{
"runtimeToken": "...",
"quote": {
"SBQQ__PricebookId__c": "...",
"LGK__QueriedEditAccess__c": "Active",
"LGK__FlightPath__c": "None"
},
"product": {
"configuredProductId": "...",
"configurationAttributes": {
"Logik__Id__c": null
},
"optionConfigurations": {
"Dynamic": []
}
},
"layoutVarName": "someLayoutVarName"
}上記の JSON の省略記号を、 CPQ 環境、価格ブック、および製品 ID の適切な値に置き換えます。
ブループリントレイアウトのリストの最初に順序付けされていないデフォルトのレイアウトを表示したい場合があります。CPQ構成ページのロードに使用する開始レイアウトを指定するには、上記の JSON の最上位レベルで「layoutVarName」:「<デフォルトで表示するレイアウトの変数名>」を渡します。
ホスト HTML ページ
親アプリケーションをホストする必要があります。セキュリティ上の理由から、このアプリケーション/ホスト HTML ページを localhost にすることはできません。次のサンプル HTML は、 CPQ UI を埋め込むホストページのプロキシです。このページは、 CPQ UI との通信を容易にする easyXDM JavaScript ライブラリをインポートします。次に、easyXDM は JSON 入力を解析して転置し、リモートプロシージャコールとしてデータを CPQ ページに渡します。
CPQ UI から渡されたデータを処理し、この HTML ページで活用するには、以下の JavaScript の青色のconsole.log行でブラウザコンソールに書き込まれた値を確認してください。上級アドミンは、この領域に JavaScript を追加することで、このデータを活用できます。
<BASE_LOGIK_URL>プレースホルダーをCPQ環境のベース URL に置き換えます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Logik Configuration Wrapper" />
<title>Logik Wrapper</title>
<style>
iframe {
width:100%;
height:92vh;
}
</style>
<script type="text/javascript" src="assets/js/easyXDM/2.5.0/easyXDM.min.js"
ssorigin="anonymous"></script>
<!-- easyXDM and Lightning for VF for passing config data to/from Salesforce CPQ -->
<script type="text/javascript">
var rpc = new easyXDM.Rpc({
remote: "<BASE_LOGIK_URL>/ui/configure",
container: "root"
}, {
// method defined in CPQ
remote: {
postMessage: {}
},
local: {
postMessage: function (message) {
console.log("External Config JSON Received from iframe");
configObj = JSON.parse(message);
console.log(configObj);
}
}
});
var cfgData = {"runtimeToken":"<PLACEHOLDER>","quote":{"SBQQ__PricebookId__c":"<PLACEHOLDER"},"LGK_QueriedEditAccess__c":"<PLACEHOLDER>","LGK__FlightPath__c":"<PLACEHOLDER>"},"product":{"configuredProductId":"<PLACEHOLDER>","configurationAttributes":{"LGK__LOGIK_Id__c":""},"optionConfigurations":{"Dynamic":[]}},"layoutVarName":"<PLACEHOLDER>"};
console.log(JSON.stringify(cfgData));
rpc.postMessage(JSON.stringify(cfgData));
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>コンテンツセキュリティポリシー設定
CPQ アプリケーションを iframe に埋め込むには、ホストアプリケーションのドメインを許可するように構成する必要があります。CPQサポートを使用してケースを記録し、CPQ UI を HTML ページに埋め込む意図を説明し、親アプリケーションのドメイン URL に対応するように CPQ サーバー CSP 設定を構成するように要求します。
EasyXDM ライブラリ
easyXDM ライブラリの詳細については、「 簡単な XDM.net」を参照してください。