Using Functions in SAP CPQ

Custom JavaScript in SAP CPQ allows you to extend the system's behavior beyond its out-of-the-box functionality. 

Here are a few practical examples of what you can do with custom JavaScript: 

Example:- 

In a quote you want to display few quote information details, where we cannot use the custom fields. Ex:-  In such scenario we use JavaScript to get current quote details.

There are two ways to get the values of custom fields.

• cpq.server 

• cpq.model 

1. To get the details of custom fields we can call global scripts in responsive template using cpq.server 

2. To get the details of custom fields we can use cpq.model in responsive template. 

using cpq.server

Here we will create our own html tags, now to append values dynamically using cpq.server using global scripts. 

To retrieve data from Global script, refer to the below syntax. 

“cpq.server.executeScript('Globalscriptname', {}, function (data) {});” 

To assign value to html elements for global script use below syntax. 

In Global script we have get the custom fields data and send response 

To get data from UI using cpq.server

When ever we created any forms or model popups using UI in CPQ templates. To store that data or to perform some API request or to perform global script operation. We must send data to Global script; There we will do operations. 

To Send data to Global script use below syntax 

• script Name 

• Parameter (in object form) 

• callback function(optional) 

To Access those Parameters in Global Script, use below syntax as Example. 

Using Param.{key Name which passed in cpq.server} we will get those values from the UI script.

using cpq.model 

Append values dynamically using cpq.model in Responsive template. 

• To access cart page custom fields, use below syntax. 

To access custom tabs custom fields, use below syntax

Update custom fields value Using cpq.models

Custom field value will save automatically. Use below syntax as example.

When you want to execute a JavaScript function or cpq.server script on custom field update. 

Use below syntax as example. 

Custom Java Script and File Management. 

We can write in line JavaScript function to the knockout syntax. Example 

if we want to use same function in different templates we cannot write the same function in each template.  

File Management:- 

1. Go to Setup  

   

2. Select General >> File Management 

   

3. Click on Additional Files  

   Here based on type of file you can create folders and add files to their respective folder. 

   To access these files in the templates, use below syntax as example. 

   <script type="text/javascript" src='@Url.MTContent("Additionalfiles/CustomJS/ProductTour/Tourscript.js")'></script> 

   

   1.Additional File  (Main Folder) 

   2.Type of Folder (ex:- HTML files, JS files, CSS files, Images etc.…) 

   You can add as many files as possible in folder. Whiles accessing provide the exact path.