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 explains how to embed the ServiceNow Configure, Price, Quote (CPQ) user interface within a Salesforce VisualForce page, enabling ServiceNow CPQ functionality to be accessible directly inside Salesforce environments such as Salesforce B2B Commerce. This integration enhances user experience by providing seamless access to pricing and configuration data without leaving Salesforce.
Show less
Prerequisites
- The easyXDM JavaScript library must be uploaded as a static resource within Salesforce Setup to facilitate secure cross-domain communication between Salesforce and ServiceNow CPQ.
- ServiceNow CPQ Admin must be configured to recognize the origins of both the Salesforce domain and the custom ServiceNow CPQ environment URL to enable authorized data exchange.
Configuration Initialization
To initialize the embedded CPQ UI, a JSON configuration object must be passed containing:
- runtimeToken: Security token for authentication.
- quote: Includes Pricebook ID, edit access status, and flight path.
- product: Contains the configured product ID, configuration attributes, and option configurations.
- layoutVarName: (Optional) Specifies a default layout to display if it is not the first in the Blueprint layouts list.
Careful attention must be paid to JSON syntax and exact case sensitivity to avoid access errors such as 403 Forbidden.
Embedding in VisualForce Page
- The VisualForce page should include the easyXDM library as a static resource for communication.
- A JavaScript RPC (Remote Procedure Call) setup using easyXDM transmits the configuration JSON securely to the ServiceNow CPQ UI iframe.
- The
remoteURL in the easyXDM configuration must be replaced with the base URL of your ServiceNow CPQ environment. - Developers can handle messages received from the CPQ iframe in JavaScript, allowing for custom actions such as closing the page or redirecting after quote completion.
Practical Considerations
- Ensure the easyXDM static resource name in Salesforce matches the script references in your VisualForce page.
- Customize the JSON configuration data with your actual ServiceNow CPQ environment values, product IDs, and pricebooks.
- Implement event handling in the VisualForce page JavaScript to respond to CPQ UI events such as quote submission.
Benefits for ServiceNow Customers
This integration enables customers to leverage ServiceNow CPQ capabilities within their Salesforce user interface, reducing context switching and improving sales workflow efficiency. By embedding CPQ UI directly, sales teams can configure products and generate quotes without leaving Salesforce, maintaining data integrity and enhancing user productivity.
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 ServiceNow CPQ 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 ServiceNow CPQ UI. Key components:
- The page imports the easyXDM Javascript library, which facilitates communication with the ServiceNow CPQ UI.
- easyXDM parses the JSON input, transposes it, and passes the data to the ServiceNow CPQ 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_ServiceNow CPQ_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.