Use case: Embed ServiceNow CPQ UI in a Salesforce VisualForce page
Summarize
Summary of Embed ServiceNow CPQ UI in a Salesforce VisualForce page
This guide provides instructions on embedding the ServiceNow CPQ user interface within a Salesforce VisualForce page, specifically for use with Salesforce B2B Commerce. It outlines necessary prerequisites, configuration details, and sample code to facilitate integration.
Show less
Prerequisites
- The easyXDM library must be loaded into Salesforce.
- Navigate to Salesforce Setup, create a new static resource, and upload the specified easyXDM library file.
- Configure the runtime client in Logik Admin to include both the Salesforce domain and the ServiceNow CPQ URL.
Configuration Initialization Data Format
To initialize the configuration, use a JSON format to pass essential field data to the page. Ensure to replace placeholders with actual values from your ServiceNow CPQ environment. Pay attention to case sensitivity to avoid access errors.
Display the Default Layout
To set a specific layout as the default upon loading the CPQ configuration, include the "layoutVarName" parameter in your JSON configuration.
The Host VisualForce Page
Sample VisualForce code is provided to demonstrate the embedding process. This code imports the easyXDM library and establishes communication with the Logik UI. Make sure to replace placeholders with actual URLs and adjust the resource names as necessary.
- Configure the iframe dimensions for optimal display.
- Implement actions based on user interactions, such as closing the window or redirecting to another page.
Next Steps
After implementing the above instructions, test the integration to ensure the ServiceNow CPQ UI functions as intended within the Salesforce environment.
Learn how to embed the ServiceNow CPQ user interface in a Salesforce VisualForce page.
This article outlines how to display the ServiceNow CPQ user interface on a Salesforce VisualForce page, such as Salesforce B2B Commerce.
Prerequisite
This example requires the easyXDM library to be loaded into Salesforce [SFDC]. Navigation: SFDC → Setup → Static Resources → New. Upload the https://drive.google.com/file/d/1T0TqffMjlZcEjFke__Re23NdZ_1gWkaJ/view file. For the purposes of thisexample, set the resource name to ‘XDMFile1ʼ.
You must also set up your runtime client in the Logik Admin to have the origins for both your Salesforce domain as well as your envrionment's custom ServiceNow CPQ URL
Configuration initialization data format
To initialize the configuration, basic field data needs to be passed to the page. Here are the parameters that can be passed, represented in pretty JSON format:
{
"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"
}Replace the ellipses in the above JSON with the appropriate values from your ServiceNow CPQ environment, pricebook, and productID.
"LGK__Logik_Id__c": Null (with a capital N) instead of "LGK__Logik_Id__c":
null, it could result in a 403 Forbidden—you don't have permission to access this resource error.Display the default layout
Sometimes, you may want to display a specific default layout that is not ordered first in the list of Blueprint layouts. To designate a specific starting layout with the ServiceNow CPQ configuration page loads, pass "layoutVarName":"<variable name of the layout to show by default>" in the topmost level of the JSON above.
The host VisualForce page
The following sample VisualForce code is a proxy for the host page in which you intend to embed the Logik UI. Key components:
- The page imports the easyXDM Javascript library, which facilitates communication with the Logik UI.
- easyXDM parses the JSON input, transposes it, and passes the data to the Logik page as a remote procedure call.
Sample VisualForce page:
<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>Replace the highlighted <BASE_LOGIK_URL> placeholder in the above VisualForce with the base URL of your ServiceNow CPQ environment.
Depending on what you want to do, you must also associate an action for the "Quote" button. Insert the action after the console.log(configObj) line.
Examples:
//window.close(); // if you want to close the whole browser page
//window.location = 'whereeveryouwanttoredirectto'; // if you want to redirect to another page
The EasyXDM library
To learn more about the easyXDM library used in this topic, see easy XDM.net.