사용 사례: Salesforce VisualForce 페이지에 UI 포함 CPQ
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의 줄임표를 환경, 가격표 및 productID의 CPQ 적절한 값으로 바꿉니다.
LGK__Logik_Id__c": null 대신 "LGK__Logik_Id__c": Null(대문자 N)이 포함되어 있으면 403 Forbidden—이 리소스에 액세스할 수 있는 권한이 없습니다 오류가 발생할 수 있습니다.기본 레이아웃 표시
블루프린트 레이아웃 목록에서 첫 번째로 정렬되지 않은 특정 기본 레이아웃을 표시하고 싶을 때가 있습니다. 구성 페이지가 로드되는 특정 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.location = 'whereeveryouwanttoredirectto'; 다른 페이지로 리디렉션하려면
EasyXDM 라이브러리
이 주제에서 사용된 easyXDM 라이브러리에 대한 자세한 내용은 쉬운 XDM.net 참조하십시오.