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

    • Funcionalidades y configuration ZohoDesk

      Creo que no estoy sacando el provecho adecuado a la application quisiera solicitar una capacitación al respecto

    • How to call Functions and perform Write Operations using Page Scripts?

      Hi everyone, How to call a function from a Zoho Creator application within a Page Script, also how to perform write operations (adding or updating records) using page scripts?

    • Connecting Airwallex in Zoho Books

      I have a question. I’m trying to connect our Airwallex account to Zoho Books, but the integration does not seem to work. Could you please guide me on how to properly connect Airwallex? I need to see the expenses also, since it only shows the profits now

    • Questions Regarding Helpdesk & SalesIQ Customization and Email Setup

      Hello, I hope you’re doing well. I have a few questions regarding Helpdesk and SalesIQ: Can the emails sent to customers via helpdesk tickets be fully customized — including signature, subject line, and other elements? Also, is it possible to send these

    • Button Duplication when emails forwarded or replied

      When I create a new email template in campaigns and send it out it looks fine to all the users, however if that email is then on forwarded or replied to then all buttons within the email duplicate.  See below The one on the left is the original one.

    • Workdrive backup and default storage selection

      Hi community, I have been informed by Zoho that workdrive will be the default storage mechanism for crm and projects. These 2 Apps seem to have different design on how they interact with workdrive for storage. 1. Crm: seems to have files saves at the

    • Ask the Experts 27: Onboarding and managing support reps

      Hello everyone, We are back with our Ask the Experts (ATE) series for 2026. This year, we bring experts to help you address customer support challenges using Zoho Desk. For our first ATE, we are getting into the human side of customer support. "Every

    • Introducing Rollup summary in Zoho CRM

      ------------------------------------------Moderated on 5th July'23---------------------------------------------- Rollup summary is now available for all organizations in all the DCs. Hello All, We hope you're well! We're here with an exciting update that

    • Enhancements for Currencies in Zoho CRM: Automatic exchange rate updates, options to update record exchange rates, and more

      The multi-currency feature helps you track currencies region-wise. This can apply to Sales, CTC, or any other currency-related data. You can record amounts in a customer’s local currency, while the CRM automatically converts them to your home currency

    • Marketer's Space: Why your open rates suddenly drop to zero?

      Hey everyone—welcome back to another post in Marketer's Space! If you regularly track the performance of your campaigns, open rates are probably one of the first numbers you check after sending an email. So it can be quite alarming when a campaign suddenly

    • Bulk upload images and specifications to products

      Hi, Many users have asked this over the years and I am also asking the same. Is there any way in which we can bulk upload product (variant) images and product specifications. The current way to upload/select image for every variant is too cumbersome.

    • I'd like to Import Contacts for an SMS Campaign, but they don't have email addresses.

      I've got a contact list of about 4000 contacts. Some only have mobile phone and not email. Can I still import the contacts?

    • How to sync overtime from zoho people to zoho payroll

      Hi everyone, I’m currently setting up Zoho People with Zoho Payroll. While configuring the sync, I noticed I can only fetch Employee Profiles, LOP (Loss of Pay), and enable the Employee Portal. I can’t seem to find a way to automatically pull Overtime

    • Bulk Associate Tasks/Task Lists to Milestones (Similar to Issues)

      Hello Zoho Projects Team, We hope you are doing well. We would like to request an enhancement regarding Milestone management for Tasks in Zoho Projects. Current Behavior: In the Issues module, it is possible to select multiple issues and easily associate

    • Is Zoho Sites still actively being developed?

      Hello, Is Zoho Sites still actively being developed as part of the Zoho ecosystem? I noticed that the What's New page (https://www.zoho.com/sites/whats-new.html) does not show any updates since Q1 2025. We were considering migrating our website from Squarespace

    • Adding new data to the sheet with most recent data being added to top row.

      I am using a form that I built from within sheets.  When the form is submitted, is it possible to have the data entered in (for example) row 2 (since row 1 is the heading) instead of being added into the next available row which should be hundreds of

    • need a packing list feature

      In our business, goods listed on an invoice are packed in separate boxes and shipped off. for e.g. an invoice may have 10 items. each item could then be packed in different boxes depending on qty of each item. this packing list is as important as the invoice for purposes of shipping documents.  Request you to add this feature asap.

    • Editing Item Group to add Image

      I did not have the image of the product when the Item Group was created. Now I have the product image, and would like to associate/add to the Item Group. However the Item Group Edit functionality does not show/allow adding/changing image. Please hel

    • Zoho CRM Queries Now Support Databases and Cloud Data Sources

      Hello everyone! We're thrilled to announce a major enhancement to the Queries feature in Zoho CRM! Queries now support a broader range of external data sources, allowing you to fetch live data and combine it with CRM records, all using a unified query

    • Re: Application Architecture in Zoho Creator — A Platform-Specific Deep Dive

      A recent community post on application architecture made some excellent points about planning architecture early in Zoho Creator projects. The core message is right — Creator applications have a habit of growing organically into maintenance nightmares,

    • Introducing a smarter, faster, and more flexible charting experience

      Hello Zoho Sheet users, We're delighted to share the latest news about a major update to charts in Zoho Sheet! The new version supports dynamic data ranges, granular styling options, faster loading, and other interesting enhancements that allow you to

    • Zoho Bookings - Feature Request - Services Which Include A Resource and Consultant

      Hi Bookings Team, My feature request is to have the ability to add Consultants and Resources to Services. Use case: Your business provides first aid training and there are certain equpment you require to provide the half day training. There are only specific

    • Assign Meeting in records

      It would be nice to be able to "call and assing" meetings from a record, for example from a Deal. Right now - calendar is synced with CRM - meetings show in calendar - you can go in each meeting and assign it to a record It would be nice to be able to

    • Sincronizar eventos de Bigin en Zoho Calendar (Zoho Mail)

      Hola Me gustaría poder sincronizar mi Calendario de Zoho (Mail) con los eventos de Bigin. No veo la opción disponible.

    • Sales Receipts in UK Free tier

      Is Sales Receipts available in UK Books, specifically at the Free tier? None of the options from the help pages are available to me.

    • My client requires me to have custom pdf file names to except payment for invoices, how can I customize this before emailing.

      Hello! I love the program so far but there are a few things that are standing in the way. I hope you guys can code them in so I can keep the program for years to come. My client requires I customize the pdf file names I send in for billing. Can you please

    • Migrate different zoho subscription to zoho one

      Dear We have different zoho subscription we need to migrate it to zoho one. Currently we are paying for zoho email, zoho expense, zoho payroll etc under different admin We need to move it too zoho one flexlible plan for all my employees

    • Bigin use in hospital- Human Med or Veterinary

      I am looking for users who are in either human or veterinary medicine and use the CRM specifically for referral management tasks. Are you using the basic version? How many users update the CRM and is it effective? Did you pay for additional customizations?

    • Standardize email communication with Signature Template

      Maintaining a consistent and professional signature across all outgoing emails is essential for any organization. However, when users manage their signatures individually, it often leads to inconsistencies like varying formats, missing designations, or

    • Zoho Books: tax is not automatically pulled from product-data anymore - why?

      Hi, until a short time ago, you could set a default taxrate for each product/item. This taxrate automatically appeared each time the item was chosen in an invoice or quote. Why does this not work anymore? The field is still there at the product record,

    • Setting up property management in Zoho Books

      Hi, I run a property management business that manages property complexes. There are multiple owners, some owning more than one property on the same complex. My role is to manage the fees they pay for maintenance of common areas, such as the swimming pool

    • Zoho Creator to GMAIL API Setup - Where Do I Begin?

      Does anyone know how to connect Zoho Creator to Google Workspace (Specifically GMAIL?) We have FLOW setup and working fine to send emails via GMAIL, but Flow doesn't accept file attachments which is a major problem. So, we need to be able to send an email

    • Kiosk Page Refresh

      We have a Kiosk running from a button in contacts to update values and also add related lists, which works great, but when the kiosk is finished the page does not refresh to show the changes. Is there a way to force the contact to refresh/update when

    • Setting GC session variable programatically in a website

      Hi! Is there a way now to programatically set session variables from a website for a Guided Conversations? The current available methods are dependent on react-native.

    • Ticket Merge Error

    • Refresh frequency

      Dear Zoho Team, I really, truly appreciate that Zoho Books gets frequent updates. As a matter of fact this is how a good SaaS company should stay on top. However, I feel that I have to hit refresh almost every day. This was exciting at the beginning but

    • Update application by uploading an updated DS file

      Is it possible? I have been working with AI on my desktop improving my application, and I have to keep copy pasting stuff... Would it be possible to import the DS file on top of an existing application to update the app accordingly?

    • Two-factor authentication (2FA) Log-in Problems

      The Two-factor authentication (2FA) Login on my passwords doesn't match , so it wont accept login I'm down to my last backup code.

    • Remove my video

      Hi, How can I remove my video so that I don't have to see myself. It's weird so I always remove my own video from what I see but cannot find this feature here. Thanks!

    • Client Script: Any plans to add support for multi-select field with onChange

      Client Script is fantastic and the documentation lists multiselect form fields as unsupported. Just wondering if there are any plans to make this a supported field. https://www.zoho.com/crm/developer/docs/client-script/client-script-events.html 2. Field

    • Next Page