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 #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.

    • Kaizen #226: Using ZRC in Client Script

      Hello everyone! Welcome to another week of Kaizen. In today's post, lets see what is ZRC (Zoho Request Client) and how we can use ZRC methods in Client Script to get inputs from a Salesperson and update the Lead status with a single button click. In this

    • Kaizen #222 - Client Script Support for Notes Related List

      Hello everyone! Welcome to another week of Kaizen. The final Kaizen post of the year 2025 is here! With the new Client Script support for the Notes Related List, you can validate, enrich, and manage notes across modules. In this post, we’ll explore how

    • Kaizen #217 - Actions APIs : Tasks

      Welcome to another week of Kaizen! In last week's post we discussed Email Notifications APIs which act as the link between your Workflow automations and you. We have discussed how Zylker Cloud Services uses Email Notifications API in their custom dashboard.

    • Kaizen #216 - Actions APIs : Email Notifications

      Welcome to another week of Kaizen! For the last three weeks, we have been discussing Zylker's workflows. We successfully updated a dormant workflow, built a new one from the ground up and more. But our work is not finished—these automated processes are

      • Recent Topics

      • Can 1 Zoho CRM instance sync with 2 Zoho Marketing Automation instances?

        Can 1 Zoho CRM instance sync with 2 Zoho Marketing Automation instances?

      • Can I add Conditional merge tags on my Templates?

        Hi I was wondering if I can use Conditional Mail Merge tags inside my Email templates/Quotes etc within the CRM? In spanish and in our business we use gender and academic degree salutations , ie: Dr., Dra., Sr., Srta., so the beginning of an email / letter

      • Zoho mail account ownership transfer

        We recently took over another company and have assumed responsibility for its Zoho account, including Zoho Mail and all related services. We would like to formally transfer ownership of this account to our organization. Could you please outline the complete

      • Email Authentication is Failing

        I'm trying to setup gitlab with email authentication. I used the following configs picked up from: https://docs.gitlab.com/omnibus/settings/smtp/ gitlab_rails['smtp_enable'] = true gitlab_rails['smtp_address'] = "smtp.zoho.com" gitlab_rails['smtp_port']

      • DMARC reports for mail I didn't send: how to deal with?

        I know the enthusiastic amateur's bare minimum about e-mail; am able to set up a Thunderbird account and know the basic acronyms. I have a Zoho Mail account connected to my domain, and have set up SPF, DMARC and DKIM successfully according to Zoho's instruction

      • ms

        Email set up for communication

      • Fix the speed

        It takes ages to load on every step even though my dataset is quite small.

      • Image field in custom module

        Hi guy, Is there any hope of adding a custom image field in the custom module? We created a custom module to keep track of assets, and it would be helpful if we could attach an image to the record. Thanks Rudy

      • Deluge Function to Update Custom Field

        I'm trying to get a Deluge function (which will run as part of a Schedule in Desk) that retrieves all tickets with the status "Recurring" and updates the custom field checkbox "cf_recurring" to "true". Here's what I have, which doesn't work: searchValue

      • "View ticket" link is broken

        The "View ticket" link in our Zoho ticketing system confirmation emails is broken (please see attached). Impacts ability to update/review details, and, refresh recollection at a later date. Any help would be much appreciated.

      • import data from Apollo.ai into zoho crm via zoho flow

        I might be asking this question in the wrong forum. We use Apollo.ai to find potential new leads for our business, there are around 10000 leads that we have initially found. We have an Apollo.ai account but just to do searches, we dont use it as a crm.

      • Can't Figure out Books and level 2 payment data

        Hello, I am having trouble figuring out how to collect level 2 payment data as required by my payment gateway. Last month it cost us almost $5000 in fees because of this. We are invoicing our clients with books and they pay through the link in that email

      • Woocommerce Line Item Information

        I'd like to add each line item from a Woocommerce order to a zoho creator form record. The line items are found within the line items array, but I'm not sure how to get each item out of the array? Any help would be much appreciated.

      • How do I fix this? Unable to send message; Reason:554 5.1.8 Email Outgoing Blocked.

        How do I fix this? Unable to send message; Reason:554 5.1.8 Email Outgoing Blocked.

      • Disable Smart Filters By Default

        The smart filters "feature" is causing confusion for Zoho Mail users. New emails should be delivered to the inbox unless they have specifically opted to redirect them somewhere else. People don't understand that new emails might be waiting in a random

      • ME SALE ESTE ERROR: No fue posible enviar el mensaje;Motivo:554 5.1.8 Email Outgoing Blocked

        Ayuda!! Me sale este error al intentar enviar mensajes desde mi correo electronico de Zoho! Tampoco recibo correos pues cuando me envia rebotan. Ayuda, Me urge enviar unos correo importantes!! Quedo atenta MAGDA HERNANDEZ +5731120888408

      • Zoho Mail not working

        Zoho Mail not working

      • I can't add a new customer in Zoho invoice? Anyone had this issue before?

        Ive been using Zoho invoice for over 6 years. Today I wanted to add a new customer to send an invoice to but it doesn't save when I try to access it from the pulldown menu when you go to send a new invoice.

      • Spreadsheet View click & focus issue in Arabic (RTL) localization

        Hello Zoho Support Team, I am facing an issue in Zoho Creator Spreadsheet View when using Arabic localization (RTL). Scenario: My app supports English (LTR) and Arabic (RTL). I created a Spreadsheet View for a form. In English, everything works correctly.

      • Ghost email notification on a form

        Hello, We have recently encountered an error where I can not see a email notification set up for a form which I am currently the owner, although neither the form nor the notification were created by me. However, neither can the Super Admin access the

      • bulk edit records and run internal logic

        hi there is few logics in manner "it this than that" logics work well when i edit entry openning it one by one (via workflow "on add/edit - on success" , for custom field "on update/on user input") but when i try bulk edit records - logic does not work.  how can i turn on logic to work as programmed - for mass editing records via bulk edit?

      • Limitations on editing a message in Cliq

        Hi I've checked the documentations and there's no mention of how many times a message can be edited. When trying with code, I get various numbers such as ~1000 edits or so. Please mention if there's a limit on how many times one can change a message via

      • email address autocomplete

        Is there a way to eliminate certain addresses from showing up in auto complete when entering an address? Many old and unused addresses currently show up, many of which I would like to get rid of. Thanks

      • How to use MAIL without Dashboard?

        Whenever I open Mail, it opens Dashboard. This makes Mail area very small and also I cannot manage Folders (like delete/rename) etc. I want to know if there is any way to open only Mail apps and not the Dashboard.

      • How can i download and secure all my mails from the archive folders?

        Hi, i would like to download all my mails from my archive folders and secure it on my external HDD. Is this possible? Thx. amir

      • How to open filtered report in popup using Zoho Creator Deluge?

        First report: There is so many records in Report, If I click one record, pop up is occur. Second report (Pop up): there is also so many record data, and this pop up is also Report, not Form. First report: It has got "Sales Order" field. when I click any

      • Can you default reports/charts to report the current week?

        Our data table maintains two years of data. Management wants certain report to automatically filter the report to the latest calendar week. I know I can do this manually with filters but I want the report to automatically default to the latest calendar

      • Rendering PDF to view on page

        My company upload lots of PDF files onto Zoho. But every time we open it, it downloads the file instead of viewing it on the web page. Does Zoho allow uploaded PDF files to be rendered to view on web page yet? I've been trying to use <embed> or <object> but it cannot be loaded.  (similar thread: https://help.zoho.com/portal/community/topic/how-to-open-a-pdf-file-of-a-view-in-preview-mode)

      • Overlapping Reports in Dashboards

        It's rare, but occasionally it would be a good feature if I were able to overlap reports, either fully or partially in the Dashboards. Also, then having the ability to move objects to the front or rear, or make them transparent/translucent would be good

      • Feature request - pin or flag note

        Hi, It would be great if you could either pin or flag one or more notes so that they remain visible when there are a bunch of notes and some get hidden in the list. Sometimes you are looking for a particular name that gets lost in a bunch of less important

      • Admin guide: Handling Mailbox Settings for better user management

        Managing day-to-day email scenarios, such as supporting users with multiple email addresses, ensuring uninterrupted email access during employee absences, enabling secure mailbox sharing, and enforcing organizational security and compliance, can be challenging

      • Cisco Webex Calling Intergration

        Hi Guys, Our organisation is looking at a move from Salesforce to Zoho. We have found there is no support for Cisco Webex Calling however? Is there a way to enable this or are there any apps which can provide this? Thanks!

      • Designing a practical Zoho setup for a small business: lessons from a real implementation

        I recently finished setting up a Zoho-based operating system for a small but growing consumer beauty business (GlowAtHomeBeauty), and I wanted to share a practical takeaway for other founders and implementers. The business wasn’t failing because of lack

      • DKIM (Marketing emails) UNVERIFIED (Zoho One)

        I'm having a problem with Zoho One verifying my Marketing Email DKIM Record for MYFINISHERPHOTOS.COM. I have removed and re-entered the ownership, DKIM (Transactional emails), SPF and Marketing DKIM and all of them come back verified except the DKIM (Marketing

      • Zoho Recruit Community Meet-up - India

        Namaste, India. 🙏🏼 The Zoho Recruit team is hitting the road—and we 're absolutely excited behind the scenes. Join us for the Zoho Recruit India Meet-up 2026, a morning designed to make your recruiting life easier (and a lot more effective). Date City

      • Generate a Zoho Sign link

        From time to time I get a response "I never received your you e-document for electronic signature" is there a way to generate a Zoho Sign link to share.

      • Is it possible to create a word cloud chart in ZoHo Analystics?

        Hi there, I have a volume of transaction text that I would like to analyse using word cloud (or other approcah to detect and present word frequency in a dataset). For example, I have 50,000 records describing menu items in restaurants. I want to be able

      • How to Fix the Corrupted Outlook 2019 .pst file on Windows safely?

        There are multiple reasons to get corrupted PST files (due to a power failure, system crash, or forced shutdown) and several other reasons. If You are using this ScanePST.EXE Microsoft inbuilt recovery tool, it only supports the minor corruption issue

      • [Webinar] A recap of Zoho Writer in 2025

        Hi Zoho Writer users, We're excited to announce Zoho Writer's webinar for January 2026: A recap of Zoho Writer in 2025. This webinar will provide a recap of the features and enhancements we added in 2025 to enhance your productivity. Choose your preferred

      • How to drag row(s) or column(s)?

        Hi. Selecting a row or column and then dragging it to a new position does not seem to work. Am i missing something or this is just not possible in Zoho Sheet? Cheers, Jay

      • Next Page