사용 사례: HTML 페이지에 UI 포함 CPQ
HTML iFrame에 사용자 인터페이스를 포함하는 CPQ 방법에 대해 알아봅니다.
이 문서에서는 관리자가 모든 HTML 페이지의 iframe에 UI를 표시 CPQ 하는 방법에 대한 개요를 제공합니다. 간단히 말해서 레시피는 다음으로 구성됩니다.
- 호스트 애플리케이션이 호스트 HTML 페이지에 JSON 형태로 전달할 데이터
- 호스트 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의 줄임표를 환경, 가격표 및 제품 ID의 CPQ 적절한 값으로 바꿉니다.
블루프린트 레이아웃 목록에서 첫 번째로 정렬되지 않은 기본 레이아웃을 표시하고 싶을 때가 있습니다. 구성 페이지가 CPQ 로드되는 시작 레이아웃을 지정하려면 위 JSON의 최상위 수준에서 "layoutVarName":"<기본적으로 표시할 레이아웃의 변수 이름>" 을 전달합니다.
호스트 HTML 페이지
상위 애플리케이션을 호스팅해야 합니다. 보안상의 이유로 이 애플리케이션/호스트 HTML 페이지는 localhost일 수 없습니다. 다음 샘플 HTML은 UI를 포함하려는 호스트 페이지에 대한 프록시입니다.CPQ 이 페이지는 UI와의 통신을 용이하게 하는 easyXDM JavaScript 라이브러리를 가져옵니다.CPQ 그런 다음 easyXDM은 JSON 입력을 구문 분석하고 전치한 다음 데이터를 CPQ 원격 프로시저 호출로 페이지에 전달합니다.
UI에서 CPQ 전달된 데이터를 처리하고 이 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>콘텐츠 보안 정책 설정
iframe에 애플리케이션을 포함 CPQ 하려면 호스트 애플리케이션의 도메인을 허용하도록 구성해야 합니다. 지원 서비스에 케이스 CPQ 를 기록하고, HTML 페이지에 UI를 CPQ 포함하려는 의도를 설명하고, 상위 애플리케이션의 도메인 URL을 수용하도록 서버 CSP 설정을 구성하도록 CPQ 요청합니다.
EasyXDM 라이브러리
easyXDM 라이브러리에 대한 자세한 내용은 쉬운 XDM.net 를 참조하십시오.