Kaizen #99 - Render Widgets Using Client Script

Kaizen #99 - Render Widgets Using Client Script

Hello everyone!
Welcome back to another interesting post. In this post, let us see how you can render Widgets using Client Script.

Widgets are embeddable UI components that you can create and add to your Zoho CRM. You can use widgets to perform functions that utilize data from third-party applications. You can build widgets for Zoho CRM using our JS SDK.

You can render a Widget through Client Script and pass data from the Widget to the Client Script.

Use Case:
At Zylker, a manufacturing company, the Service Agent places orders using the Orders module.  There is a sub-form named Product list. The user should add the products by clicking the "Add row" button every time. 



To avoid this, Zylker wants the users to select multiple products from a single pop-up. Once the user selects the products from that pop-up , the sub-form "Product list" should get updated with all those products(one product in one sub-form row).

Solution:

Whenever the user picks the Product Category, you can create a Client Script to render the widget. The Products selected by the user on the widget , will be passed to the Client Script and will be added as separate rows in  Product list subform.
 
1. Install Zoho CLI and add code to the app folder.
2. Upload the zip file as a Widget.
3. Create a Client Script to render the Widget and to add data to the Sub-form.


1.  Install Zoho CLI and add code to the app folder 

Follow the steps given in this post and add the html code, javascript file and css file.

Index.html



<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Choose products</title>
  <link href="styles/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class="wgt_cp_popupContent">
    <section class="wgt_cp_contentWrap">
      <div hidden="true" id="noProductDiv">
        <pre>No products associated to the selected deal</pre>
      </div>
      <table width="100%" cellspacing="0" id="pTable">
        <thead>
          <tr class="wgt_productTblHead">
            <th><input type="checkbox" id="selectAll"     onclick="selectAllProducts(this)"></th>
            <th>Product Name</th>
            <th>Product Category</th>
            <th>Unit Price</th>
            <th>Quantity in Stock</th>
          </tr>
        </thead>
        <tbody id="tbody"></tbody>
      </table>
    </section>
  </div>
  <script src="./script/script.js"></script>
</body>
</html>


Script.js

var count = 0;
var productData, maxRows = 0;
ZOHO.embeddedApp.on("PageLoad", async function (data) {
 console.log("data from Client Script", data);
 maxRows = data.max_rows;
 const search_response = await ZOHO.CRM.API.searchRecord({ Entity: "Products", Type: "criteria", Query: "(Product_Category:equals:" + data.product_category + ")" })
 if (search_response && search_response.data && search_response.data.length) {
  productData = search_response.data;
  var htmlString = "";
  productData.forEach(({ id, Product_Category, Product_Name, Unit_Price, Qty_in_Stock }) => {
   htmlString = htmlString.concat(
    `<tr>
     <td><input type='checkbox' onclick='selected(this)' id='${id}' class='products'></td>
     <td>${Product_Name}</td>
     <td>${Product_Category}</td>
     <td>${Unit_Price}</td>
     <td>${Qty_in_Stock}</td>
    </tr>`
   );
  });
  document.getElementById("tbody").innerHTML = htmlString;
 } else {
  document.getElementById("pTable").hidden = true;
  document.getElementById("noProductDiv").hidden = false;}
});
ZOHO.embeddedApp.init();
function selected(element) {
 element.checked ? count++ : count-- ;
 document.getElementById("selectedCount").innerHTML = `${count} Products selected`;
}
function closewidget() {
 if (count > maxRows) {
  alert("Selected product is greater than the maximum subform rows.");
 } else {
  var selected_products = [];
  for (product_element of document.getElementsByClassName('products')) {
   product_element.checked && selected_products.push(productData.find(product => product.id === product_element.id));}
  console.log("returning to Client Script ...", JSON.stringify(selected_products));
  $Client.close(selected_products);}
}


As per the above script, the products are fetched from the "Products" module based on the "Product Category" selected by the user. This information is captured in "search_response" and is added to the body of  widget.html. 
Here,  the code $Client.close(selected_products); will pass the selected products from Widget to the Client Script and close the widget rendered from Client Script. Click here for more details about the variable $Client.
Next step is to upload the zip file of the app folder.
Click here to view the complete code.

2. Upload the zip file as a Widget
  • Go to Setup > Developer Space > Widgets.
  • Click Create New Widget.

  • The Hosting should be "Zoho" and mention the html page of the app folder that you uploaded.
Note: The widget should be of "button" type in order to render through a Client Script.

3. Create a Client Script to render Widget and to add data to the subform
  • Go to Setup > Developer Space > Client Script. Click +New Script.
  • Specify the details to create a script and click Next.
  • The Client Script should render the Widget when the user selects Product Category. So Client Script should have field event on the field "Product Category".
  • On the Client Script IDE, you can see the below details.

  • Enter the following script in the Client Script IDE and click save.

var products_list = ZDK.Page.getField('Product_list').getValue();
if (products_list.length === 1) { // Clear subform if empty row
    !Object.values(products_list[0]).every(value => !!value) && products_list.pop();
}
// Open widget with product category & max. allowed rows based on existing subform data
var selected_products = ZDK.Client.openPopup({
    api_name: 'choose_products', type: 'widget', header: 'Choose Products', animation_type: 1, height: '570px', width: '1359px', left: '150px'
}, {
    product_category: value, max_rows: 25 - products_list.length
});
// Update subform with Selected Products from the widget Popup
if (selected_products.length) {
    selected_products.forEach(product => {
        products_list.push({ Product_Name: { id: product.id, name: product.Product_Name }, Quantity: 1, Unit_Price: product.Unit_Price });
    });
  ZDK.Page.getField('Product_list').setValue(products_list);
}


  • To render a widget from Client Script, use openPopup(config, data)  ZDK. You can specify the configuration details like api name of the widget, title, size, animation type as parameters and specify the data to be passed as 'PageLoad' event data in the Widget. 
  • The response from the widget (i.e user selection) is captured by the variable "selected_products". Then each product (id,name,product_name,quantity and unit_price) is pushed to the list products_list. Finally, the product list value  is updated to the Product Category sub-form using setValue(value) ZDK. 
  • Here is how the Widget gets rendered through Client Script.



We hope you found this post useful. We will meet you next week with another interesting topic! If you have any questions let us know in the comment section.

Click here for more details on Client Script in Zoho CRM.

As we approach the 100th post in our Kaizen series next week, we invite you to share your queries and concerns with us.  We are always looking for ways to improve our content and make it more relevant to our readers.

Please fill out this form to share your thoughts.



Happy Coding!




    • Sticky Posts

    • Kaizen #197: Frequently Asked Questions on GraphQL APIs

      🎊 Nearing 200th Kaizen Post – We want to hear from you! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.

    • Kaizen #198: Using Client Script for Custom Validation in Blueprint

      Nearing 200th Kaizen Post – 1 More to the Big Two-Oh-Oh! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.

    • Celebrating 200 posts of Kaizen! Share your ideas for the milestone post

      Hello Developers, We launched the Kaizen series in 2019 to share helpful content to support your Zoho CRM development journey. Staying true to its spirit—Kaizen Series: Continuous Improvement for Developer Experience—we've shared everything from FAQs

    • Kaizen #193: Creating different fields in Zoho CRM through API

      🎊 Nearing 200th Kaizen Post – We want to hear from you! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.

    • Client Script | Update - Introducing Commands in Client Script!

      Have you ever wished you could trigger Client Script from contexts other than just the supported pages and events? Have you ever wanted to leverage the advantage of Client Script at your finger tip? Discover the power of Client Script - Commands! Commands

    • Recent Topics

    • Hide Inactive Social Sign-In Providers from Login Screen

      Hello Zoho Team, We hope you are doing well. Currently, Zoho One allows admins to configure security policies and enable or disable Social Sign-In options for third-party providers such as Apple, Google, Microsoft, LinkedIn, Yahoo, Twitter, Facebook,

    • [Free Webinar] AI Agents in Zoho Creator - Creator Tech Connect

      Hello Everyone! We welcome you all to the upcoming free webinar on the Creator Tech Connect Series. The Creator Tech Connect series is a free monthly webinar that runs for around 45 minutes. It comprises technical sessions in which we delve deep into

    • Download All Attached Files

      It would be extremely useful to have "download-all" functionality for downloading files attached to a task, subtask, comment, forum post or hosted in the "Documents" section etc. We've instructed our users to zip multiple files prior to uploading, but of course they forget all the time. Having to download lots of files one-at-a-time off a comment or task wastes a lot of time.

    • unable to send message reason 554 5.1.8 Email outgoing blocked

      unable to send message reason 554 5.1.8 Email outgoing blocked

    • Ship via Carrier Not Working Since Commerce Update

      Since the recent update to the Commerce platform, I can no longer use the ship via carrier function. It will take me to the address screen and let me verify them but when I go to save and move tot he next screen it will not do anything. This is happening

    • automations: Can I execute a step on a specific date?

      I have created a form in Zoho forms, and created a contacts list. I have also begun setting up an automation with the intention of sending the form to the contact list on a specific date every month (via email) for the entire year (essentially sending

    • Zoho Expense - The ability to add detail to a Trip during booking

      As an admin, I would like the ability to add more detail to the approved Trips. At present a requestor can add flights, accommodation details and suggest their preferences. It would be great if the exact details of the trip could be added either by the

    • Adding Folders in Android App

      Is it possible to create a new email folder within the Zoho Mail Android app?  Or can this only be done from the desktop version of Zoho Mail? Cheers!

    • Schedule Exports for Regular Project Updates

      Tracking project data often means exporting data at regular intervals. Instead of manually exporting data every time, users can schedule exports for Phases, Tasks, and Tasks in Zoho Projects. These exports can be set to run once, daily, weekly, or monthly

    • Question about custom fields using Pivot Tables.

      I have created a pivot table showing annual revenue of a client and how much payment that client is paying my company. Is there a way using pivot table to add an additional field that subtracts those to fields / shows me a percentage of that difference?

    • Request for Light/Dark Mode

      Would love the ability to switch between Light and Dark mode similar to Zoho CRM. https://help.zoho.com/portal/en/community/topic/introducing-dark-mode-light-mode-a-new-look-for-your-crm

    • Signature field is showing black

      Hello, When customer signed the service form, it is showing as below picture Phone model: iPhone 16 Pro We tried delete and install application, but it not solved. This has on phone of a few person. There is any advice to solve this?

    • Journey Email - Ignored Contacts

      I have a journey setup which simply sends a string of emails over time. For some reason I am getting large amounts of the contacts who enter the first email being ignored and I can't find anywhere in reports or audit logs why these contacts are not

    • Involved account types are not applicable when create journals

      { "journal_date": "2016-01-31", "reference_number": "20160131", "notes": "SimplePay Payroll", "line_items": [{ "account_id": "538624000000035003", "description": "Net Pay", "amount": 26690.09, "debit_or_credit": "credit" }, { "account_id": "538624000000000403", "description": "Gross", "amount": 32000, "debit_or_credit": "debit" }, { "account_id": "538624000000000427", "description": "CPP", "amount": 1295.64, "debit_or_credit": "debit" }, { "account_id": "538624000000000376", "description":

    • Zoho Books - Include Payment Terms as a Custom View filter

      It would be great if you could created a custom view based on Payment Terms. This would be really handy for seeing a list of customers who have credit terms. A workaround is not required. I could do something with a creditor checkbox, but it would be

    • How to update changed purchase account of item in invoice

      I have selected the wrong purchase account for various articles and created invoices. I had to adjust the purchase account in the article afterwards, but the old purchase account is still posted in the transaction-journal of the invoice. To adjust the

    • Help - Zoho CRM notification on mobile (IOS/Android)

      Hello Community! Can I get the IOS/Andoid CRM app to notify me of events, calls, etc. due as I can with MANY other apps?   I am running the free Zoho I would like this to be native to the Zoho CRM app. I do not want to write a sep. mobile app

    • Zoho Books Idea - Include another field in Bank Details for Address

      Hi Books team, Currently use the Description field in the Bank Details to store the bank's address. This works fine but it would be great if you could add another field for Bank Address, so that other notes about the bank account could be stored in the

    • a question about the COQL API v8

      When I specify eight or more values in a WHERE IN clause and execute it, an error occurs. Is there a limit to the number of values that can be specified in a WHERE IN clause? ↓Error select * FROM Vendors WHERE (id in (1, 2, 3, 4, 5, 6, 7, 8, 9)) ↓Success

    • Zoho Books Idea - Bank Details Button on Banking

      Hi Books team, Sometimes I'm asked to share bank details with a customer or a colleague. So I go to the Banking Module, find the correct bank account, click Setting > Edit, then copy and paste the bank details. Wouldn't it be great if there was a button

    • JS SDK 8.0 – TypeError: Cannot read properties of undefined (reading 'getCacheStore') with sample code

      Hello Zoho Support Team, I’m integrating the Zoho CRM JavaScript SDK v8.0 and I’m getting the error below when running your official sample. I tested directly from: https://github.com/zoho/zohocrm-javascript-sdk-8.0/blob/main/samples/create_records_sample/create_records.js

    • Function #55: Convert multiple quotes to single SO using Custom Button

      Hello everyone, and welcome back to our series! In Zoho Books, after a quote is accepted by your customer, it can be converted into a sales order or an invoice. Often, a customer might have multiple quotes, and for easier billing or upon the customer's

    • Time based workflow without edit/action

      Hello I need help solving this problem if possible. We have Deals come into the CRM via Live Transfer which have the field properties: Stage = New Channel = Inbound Some of them don't get answered so we want these to automatically go into our Outbound

    • What's New - August 2025 | Zoho Backstage

      Every month, Zoho Backstage grows with you. These updates aren't just features and fixes, they're about making your workday smoother, your events more impactful, and your attendees happier. We’ve listened, learned, and shaped this release to keep things

    • prevent selling expired items

      Hello. I need to make a constraint on expired batch items not to be sold. Is it possible in Zoho Inventory? if so, then how? Thanks for further help.

    • Product details removed during update from other system

      We maintain our product details in an other system. These details are synchronized with Zoho at the end of each day, through an API. This has worked perfectly sofar. But last Monday, all product codes and some other product data have been wiped during

    • Client Customer

      I purchased a customer user license, but we cannot see the project I added in the customer account. I would like to ask for support on what we should do.

    • Add Ability to Use Zoho Finance Tags

      For Zoho Finance (Books and Inventory), the current actions do not allow us to affect the tags associated with the entities in question (customers, vendors, items, etc.). Please consider adding this functionality into the actions.

    • Embeded Signing doesn't work on Safari Browser

      We have implemented Zoho Sign in our website by using embeded signing, It works perfectly on Chrome. But it fails on Safari, We get stuck on Zoho Sign Page during redirection from Zoho Sign to our website after signing the document, Please let us know

    • Dataprep Webhook Limits and Cannot update column with Dataprep

      I have two problems : 1 - I am using Airflow to trigger my pipeline, and when I tested it, it worked fine a couple of times. However, after that, I received an error: {"code":429,"message":"Request rate limited"}. I didn’t send too many requests — maybe

    • New in Zoho Forms: Google reCAPTCHA v3 for smarter spam protection

      Hello form builders, Spam submissions are one of the biggest challenges when you share your forms online. They not only clutter your data but can also waste valuable time. To help you combat this without making life harder for genuine respondents, we’re

    • Project Management Bulletin: August, 2025

      We’ve touched a grand 19 years since we started pioneering project management solutions with Zoho Projects. What started as a simple one-page interface is now a suite of products with Zoho BugTracker, Zoho Sprints, and our new debut Zoho Projects Plus,

    • Zoho Sign and Zoho Workdrive Integration

      Hello, there. I want to know if it's possible to save a signed document from Zoho Sign in an specific folder for each signer in Zoho Workdrive.  For example: If John Doe signs the document in Zoho Sign I want to save it automatically in a folder named

    • How do you list multiple contacts for a lead?

      My sales team wants to be able to add additional contacts for leads, how do we do that? Is there a different way we should be using the lead / contact functionality? Moderation update (9th September 2025): Our developers have built an extension to achieve

    • Modifying Three Dot Menu Options

      Is there a way to modify the three dot menu options that display in a Report header? They currently display: Show As (List, Calendar, Timeline), Print, Import, Export. I'd like to remove the Show As and Print options, since they aren't applicable for

    • Field Not Updating in FSM Script - Service and Parts module.

      Dear Team, I am reaching out regarding a script I have implemented in Zoho FSM to automate the calculation of the End of Service date based on the End of Sale date in the Service and Parts module. Overview of the script: Fetches the End_of_Sale__C and

    • Zadarma + Zoho CRM Integration – Missed Calls Saved as Contacts Instead of Leads

      Hello everyone, I’m looking for input from anyone with experience using the Zadarma + Zoho CRM integration. Currently, I’m seeing that missed calls are automatically being created as Contacts instead of Leads. From a CRM perspective, this doesn’t make

    • Zoho Books | Product updates | September 2025

      Hello users, We’ve rolled out new features and enhancements in Zoho Books. From PayNow payment method to applying journal credits to invoices and bills in other locations, explore the updates designed to enhance your bookkeeping experience. Integrate

    • How to update Multiple Users field in Quote Module from Deal Module

      Scenario : Deal Module having Multiple User Field (Presales Engineer) which having more than 1 User and through Deluge Script I need to get that Users Details and need to put into Multiple User Field (Presales Engineer) of Quote Module. Note: Both Module

    • Auto-sync field of lookup value

      This feature has been requested many times in the discussion Field of Lookup Announcement and this post aims to track it separately. At the moment the value of a 'field of lookup' is a snapshot but once the parent lookup field is updated the values diverge.

    • Next Page