External Configurator Example

This example shows how to initialize the easyXML library and create Send and Cancel buttons. It then displays the configuration data sent from Salesforce CPQ.

Required Editions
Available in: Salesforce CPQ Winter ’16 and later
1<apex:page doctype="html-5.0" standardstylesheets="false" showHeader="false">
2 <html>
3    <head>
4<!-- easyXDM.min.js compiled and minified JavaScript to communicate with Salesforce CPQ-->
5<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/easyXDM/2.4.20/easyXDM.min.js" crossorigin="anonymous">
6</script>
7    </head>
8    <body>
9        <div>
10            <button onclick="broadcastSend()">Send</button>
11            <button onclick="broadcastCancel()">Cancel (Customer's Cancel Button)</button>
12            <br></br>
13            <textarea id="output" type="text" style="width:1400px; height:700px"></textarea>
14        </div>
15        <script type="text/javascript">
16            // Set up the EasyXDM connection to Salesforce CPQ 
17            var rpc = new easyXDM.Rpc({},{
18                remote: {
19                    postMessage: {}
20                },
21                local: {
22                    //Method that receives the configuration information. 
23                    postMessage: function(message) {
24                        // Display the JSON received from Salesforce CPQ.
25                        document.getElementById('output').value = JSON.stringify(JSON.parse(message), null, 4);
26                    }
27                }
28            });
29            function broadcastSend() {
30                //Return the configuration information to Salesforce CPQ
31                rpc.postMessage(document.getElementById('output').value);
32            }
33            function broadcastCancel() {
34                rpc.postMessage(null);
35            }
36        </script>
37    </body>
38</html>
39</apex:page>