ユースケース:Salesforce VisualForce ページへの CPQ UI の埋め込み
Salesforce VisualForce ページに CPQ ユーザーインターフェイスを埋め込む方法について説明します。
この記事では、Salesforce B2B Commerce などの Salesforce VisualForce ページに CPQ ユーザーインターフェイスを表示する方法について説明します。
必須条件
この例では、easyXDM ライブラリを Salesforce [SFDC] にロードする必要があります。ナビゲーション:SFDC →セットアップ→静的リソース→新規。https://drive.google.com/file/d/1T0TqffMjlZcEjFke__Re23NdZ_1gWkaJ/viewファイルをアップロードします。この例では、リソース名を「XDMFile1」に設定します。
また、Salesforce ドメインと環境のカスタム CPQ URL の両方のオリジンを持つように、Logik アドミンでランタイムクライアントを設定する必要があります
構成初期化データ形式
構成を初期化するには、基本的なフィールドデータをページに渡す必要があります。渡すことができるパラメーターは、きれいな JSON 形式で表されます。
{
"runtimeToken": "...",
"quote": {
"SBQQ__PricebookId__c": "...",
"LGK__QueriedEditAccess__c": "Active",
"LGK__FlightPath__c": "None"
},
"product": {
"configuredProductId": "...",
"configurationAttributes": {
"LGK__Logik_Id__c": null
},
"optionConfigurations": {
"Dynamic": []
}
},
"layoutVarName": "someLayoutVarName"
}上記の JSON の省略記号を、 CPQ 環境、価格ブック、productID の適切な値に置き換えます。
"LGK__Logik_Id__c": null ではなく "LGK__Logik_Id__c": Null (大文字の N) が含まれている場合、「403 Forbidden—You don't have permission to access this resource」というエラーが発生する可能性があります。デフォルトのレイアウトを表示
場合によっては、ブループリント レイアウト リストの最初に順序付けされていない特定のデフォルト レイアウトを表示したい場合があります。設定ページがロードされる CPQ で特定の開始レイアウトを指定するには、上記の JSON の最上位レベルで「layoutVarName」:「<デフォルトで表示するレイアウトの変数名>」を渡します。
ホスト VisualForce ページ
次のサンプル VisualForce コードは、Logik UI を埋め込むホストページのプロキシです。主要コンポーネント:
- このページは、Logik UI との通信を容易にする easyXDM Javascript ライブラリをインポートします。
- easyXDM は JSON 入力を解析して転置し、リモートプロシージャコールとしてデータを Logik ページに渡します。
サンプル VisualForce ページ:
<apex:page>
<head>
<apex:includeScript value=”{!$Resource.XDMFile1}”/>
<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="{!$Resource.XDMFile1}" crossorigin="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 Logik
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>
</apex:page>上記の VisualForce で強調表示された<BASE_LOGIK_URL>プレースホルダを、 CPQ 環境のベース URL に置き換えます。
実行する内容に応じて、[見積もり] ボタンのアクションも関連付ける必要があります。console.log(configObj) 行の後にアクションを挿入します。
例：
window.close(); ブラウザページ全体を閉じる場合
window.location = 'whereeveryouwanttoredirectto'; 別のページにリダイレクトする場合
EasyXDM ライブラリ
このトピックで使用される easyXDM ライブラリーの詳細については、「 簡単な XDM.net」を参照してください。