How to Auto Populate Product List Price in Zoho CRM Subform Using Client Script

How to Auto Populate Product List Price in Zoho CRM Subform Using Client Script

Requirement Overview

The customer wants to automatically update and display the List Price of the Product in the Subform of the custom module (i.e., Pre-Orders) based on the selected Price Book (i.e., Lookup field) stored in the same module. This action should occur when a Product is chosen from the Subform.

Permissions & Availability

-> Users with the Manage Extensibility can configure & setup Client Script.
-> Users with the Manage Sandbox permission can manage the sandbox.

  1. Deploy Client Script in various places

Such as

-> On_Load/On_Save/On_Edit of Page, On_Type/On_Change of Field, Subform Events, Blueprint Events, List View Events, etc.
-> Commands/Shortcut Keys (Trigger script from anywhere & anytime in CRM).
-> Custom Button (Recent Enhancement)

NotesPlease refer to the following Help Reference to know more about Client Script Events Details.

  1. To Create Client Script:

You could add Client Script through two ways:

1. Through Setup Page:

Navigate to Setup (⚙️) in Zoho CRM >> Developer Hub >> Client Script >> New Script.



-> Provide a Name & Description appropriate to script
-> Category Details -
  1.       Select Category based on requirement. Module - triggers via Events || Commands - triggers via Command Pallet/Shortcut Keys.
  2.       Choose Module where you want to add script. i.e., Lead, Contact, etc.
  3.       Choose Page to deploy script in specific page. i.e., Create, Edit, Clone, Detail, List, etc.
  4.       Choose Layout. i.e., Standard or Custom layouts.

-> Event Details - 
      Select Event Type - Field Event or Page Event or Subform Event
  1.       Field Event -> Select the Field & Event (i.e., onChange on First Name field).
  2.       Page Event -> Select the Page & Event (i.e., onLoad on Create Page).
  3.       Subform Event -> Select the Subform & Event (i.e., onCellChange).



2. Through Detail/List/Create/Edit/Clone Pages of a Record in Module

-> Choose a desired module in Zoho CRM, and open either the List, Create, Detail, Edit or Clone page of any record in that module. For example, consider the Create Lead page.
-> For Pages (such as Create/Edit/Clone) - In the right-most corner of the page, click Client Script. Then, Add script.
-> The Category details will be pre-populated by the system. Fill in the other details of the client script, such as Name, Description, Event Details of the client script. Further, click next and add your script to the code editor in Client Script IDE. Then click Save and Close.

Add Client Script via Detail Page:



Add Client Script via Different Pages such as List/Create/Edit/Clone:


Use-case

A company allows their employees to create a custom record (i.e., Pre-Orders) in Zoho CRM. These are typically filled out by sales teams or support staff during lead qualification or quote preparation. Each record includes a lookup field to a price book, which the internal team selects based on customer eligibility, region, or promotion.

A subform to add multiple products that the customer wants to purchase. Once a sales rep selects a product inside the subform, the system should fetch the list price from the price book selected in the main record and automatically populate the subform’s list price field for that product, ensuring the correct pricing tier is reflected.

Current challenge in achieving this use case:

As of now, we can only achieve this requirement manually, and we do not have an option to auto-populate the product's list price automatically based on the price book associated with the product. Hence, we have come up with the custom solution using Client Script.

Configuration

Now, let us create a Client Script on Create Page of a Order Module for a Subform Event trigger (i.e., onCellChange). As an example, whenever there is any cell modifies in subform, client script will be triggered and make the intended action by updating Product List Price.

Follow the steps below to configure the Client Script for this use case:

1) Provide the basic information, like Name and Description.

2) In the Category Details section, please choose the following:
* Category as Module.
* Page as Create.
* Module as Pre-Orders.
* Choose the required Layout.

3) In the Event Details section, please choose the following:

* Type as a Subform event.
* Choose the required Subform from the drop-down.
* Event as OnCellChange.



The Code

  1. console.clear();
  2. //Fetching the Pricebook details from the Pre-Orders module when the Product is chosen from the subform
  3. if (field_name == "Product") 
  4. {
  5. var pricebook = ZDK.Page.getField("Pricebooks").getValue();
  6. log("Pricebook:",pricebook);
  7. row_no = 0;
  8. if (pricebook != null)
  9. {
  10. var pricebookID = pricebook.id;
  11. log("PricebookID:", pricebookID);
  12. var productId = value.id;
  13. log("productId:", productId);
  14. //Fetching the Product details and its related Pricebook details by Product Id
  15. var getproduct = ZDK.Apps.CRM.Products.fetchById(productId);
  16. log("getproduct:", getproduct);
  17. var related_records = getproduct.__fetchRelatedRecords("Price_Books");
  18. log("related_records:", related_records);
  19. //Search for the matching Pricebook of the Product using For loop to update the List Price of the Product in the Pre-Orders Subform
  20. if (related_records.length > 0)
  21. {
  22. for (var j = 0; j < related_records.length; j++)
  23. {
  24. var pricebookid = related_records[j].id;
  25. log("pricebookid:", pricebookid);
  26. if (pricebookid == pricebookID)
  27. {
  28. var listprice = related_records[j].list_price;
  29. log("listprice:", listprice);
  30. row_no = row_no + 1;
  31. }
  32. }
  33. }
  34. if(row_no>0)
  35. {
  36. var cell_obj = ZDK.Page.getSubform('Subform_1').getRow(index).getCell('Unit_Price_1').setValue(listprice);
  37. }
  38. }
  39. }


Working Demo—Screencast



TIPS

-> Ensure to use the correct API Names for both Module & Fields in the script.
​
-> While writing the script, we would suggest you to add logs() || console.log() to each variable to check the output for seamless functionality. i.e., you could view the output in the "Messages" tab within Client Script IDE for each logs() print. To view console logs, you could follow - "Right Click on browser page >> Inspect >> Console".
​
-> In case the expected functionality does not work, then try the script by verifying each output & loop along with that, cross-verify the syntax of each ZDK Client/CRM API method in the provided sample help document. 

-> If you have any repeated lines of script (i.e., repeated small functions), then you could use Static Resources.

Sample Scripts for each ZDK Client/CRM APIs methods - Help Reference

To ensure a smooth implementation, we recommend configuring and testing the setup in the sandbox environment before deploying it to production.


Quote
Custom Solution Created by Hemanth Kumar L M | Zoho Partner Support


If you need any further clarifications, please don’t hesitate to contact partner-support@zohocorp.com.

Additionally, we kindly ask all Europe and UK Partners to reach out to partner-support@eu.zohocorp.com.