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

    • Serial Numbers.

      I generated serial numbers for items and there is no way to generate more serial numbers that the number of items being "sold" or created. This is annoying as how does one know what serial number they left off with when they go to receive or sell this

    • Ensure every user starts right with Welcome Email Templates

      Adding a new user to your organization extends beyond account creation–it requires delivering the right information at the right time to ensure a productive start. New users typically require key details upon joining, such as login instructions, security

    • How to change the format for phone numbers?

      Mobile phone numbers are currently formatted (###) ###-####.  How can I change this to a more appropriate forms for Australia being either #### ### ### or (#)### ### ###?

    • Adding Images to a Quote in Zoho CRM

      We are currently preparing to use Quotes in Zoho CRM and we are building out our Quote templates.  We came across an issue of not being to add Images of the products to the Quote - specifically in the body of the Quote templates.   This is a problem,

    • IMPORTANT: It doens´t show full article name on search - Should add line break

      When we search for articles, it doesn´t show the full name. There should be a line break so the user can see the full article name, otherwise the user can´t know if that´s the article he/she is looking for. This is very important, otherwise the user has

    • IMPORTANT: It doesn´t search for letters with portuguese characters.

      Some of my articles have for example the word "vídeo". But if I search for "vídeo" it doesn´t find them. If I search for "video" it does find them. Idealy, it should find the articles either way. But if I have to choose, it would be better to find the

    • How to hide Activity Side Panel

      How do you hide the activity side panel? Clicking on the link and reviewing the activity does not remove it and it does not seem to timeout. I have any activity that have been listed there since January. Thank you.

    • Need a Universal Search Option in Zohobooks

      Hello Zoho, Need a Universal Search Option in Zohobooks to search across all transactions in our books of accounts. Please do the needful Thanks

    • Zoho Mail Android app update: UI revamp

      Hello everyone! We are excited to share that the first phase of the Zoho Mail Android UI revamp is now live. In this update, we have redesigned navigation bar at the bottom to quickly access the Email, Calendar, Contacts, and Settings modules. Also, the

    • Add Support for Authenticator App MFA in Zoho Desk Help Center

      Hello Zoho Desk Team, We hope you are doing well. We would like to request an enhancement related to security for the Zoho Desk Help Center (customer portal). Currently, the Help Center supports MFA for portal users via SAML, JWT, SMS authentication,

    • Resubscribe with Zoho Campaigns

      Hi, I am new to Zoho Campaigns and sent a campaign to a contact list with only my email address. I wanted to see what the footer links did, so clicked unsubscribe and now can't include my email address into any more campaigns. I don't have a sign up form on my website to resubscribe and can't find how to resubscribe anywhere else. Can you help?

    • Add a way to connect Log360 Cloud logs with Zoho analytics

      Hi, Several month ago Log360 Cloud was added to zoho one - and this is great. But as far as I see there is no prebuilt way to connect Zoho analytics to the logs we have in Log360 Cloud. Please add a prebuilt connection like we have for so many other zoho

    • Dynamic Multi-Staff Selection for Ad-Hoc Bookings

      Summary Allow customers or internal schedulers to select specific staff members at the time of booking, with Zoho Bookings automatically surfacing only the time slots where all selected members are simultaneously available. Current Behaviour Zoho Bookings

    • Share Edit while in Workflow

      There are times that while a writer document is in the middle of a workflow the user that's responsible for that stage of the workflow needs to bring in other people to work on the document. Currently there is no way for the user to be able to allow other's

    • How can I use the API to add a drop-shipping address to a sales order for one-time use?

      I need to be able to add a drop-shipping address for one-time use to a sales order via the API. Adding every such address to the contact (customer), then feeding the shippingaddress_id into the sales order, is not an acceptable approach; we have some

    • Auto sync Photo storage

      Hello I am new to Zoho Workdrive and was wondering if the is a way of automatically syncing photos on my Android phone to my workdrive as want to move away from Google? Thanks

    • Major journey crash and not loading. Zoho Marketing Automation

      Hi all. Last night (19MAR, 2026) Marketing Automation for a specific journey completely crashed, and since the crash the specific journey has failed to load at all (blank journey canvas, no journey appears, no menu accessible) but other separate journey's

    • Izettle or Sumup Integration for Zoho Books.

      The Stripe & Square clearing works great in Zoho Books. Any further integrations planned in the future for Izettle or Sumup? These card processors are very common for taking payments with a card reader.

    • Is anyone experience missing functions in the new UI until hard refresh?

      The set of functions including search is almost always missing upon loading an app in the new UI. If you refresh, the functions return. (see second screenshot) Anyone else experiencing this?

    • Mail Search should allow grouping by conversation like Gmail.

      Having switched from gmail I have found the search function hard to use. Mostly because mail is not grouped by conversation in search. If I search for a word when looking for a conversation had with someone then sometimes 10 emails will come up from the

    • Server-based Appication API access for Social, Sites, Flow, Pages.

      Hello, I am trying to hook up API access for a number of apps and I have hit a wall trying to add these scopes to the API feed. We cannot find the correct way to list the scope for these Zoho apps; Social, Sites, Flow, Writer. Error on web-page comes

    • Zoho Landing Page "Something went wrong" Error

      Hello, Every time I try to create a new landing page, I receive a "Something went wrong" error with no explanation. I cannot create any new pages, which means we cannot use this application. I did create one landing page successfully over a month ago,

    • Sync desktop folders instantly with WorkDrive TrueSync (Beta)

      Keeping your important files backed up and accessible has never been easier! With WorkDrive desktop app (TrueSync), you can now automatically sync specific desktop folders to WorkDrive Web, ensuring seamless, real-time updates across devices. Important:

    • Zoho → ShipStation Integration – Sales Order–Driven Fulfilment Workflow

      Hello All, I’m reaching out to explore the best way to integrate a shipping tool into our inventory which will speed our process up. We are looking to integrate ShipStation into our existing order-to-fulfilment workflow, as we’re keen to standardise on

    • Newby Questions - Vendors, Customers, and Income vs. Other Income Clarifications

      Q1. For Deposits, there does not seem to be an option for "Income". "Other Income" is an option however. What is the process to add the option to assign a deposit to type "Income"? Q2. In many cases Vendors and Customer are the same. Vendors may purchase

    • Zoho Booking - TIN vs ATIN & ITIN

      Zoho Booking Vendors allows for TAX ID values of SSN, EIN, ATIN an ITIN. There is no option for TIN. What is the method to properly add TIN to the list of taxable values for companies? For reference: Social Security Numbers (SSN) Individual Taxpayer Identification

    • Bank Feed shows redacted description numbers (xxxx)

      Hi All, Is there any way to change this behaviour? Either Zoho or Yodlee is redacting important numbers from the transaction description, preventing us from being able to easily recognise and reconcile transactions. For example, a transaction with a description

    • Handling large product migrations in Zoho?

      Hi everyone, How do you usually manage large product catalog migrations (10K+ SKUs) into Zoho One? Main concerns I’m thinking about: Avoiding downtime Preventing data loss Keeping supplier and product relationships intact Do you prefer bulk imports or

    • Reassign Partially Saved Entries

      Hi, I would like to be able to go to Partially Saved Entries and like the option to delete them I would like the option to multi-select and be able to reassign them to another user to complete (Such as when a user has left the company). Thanks Dan

    • Preventing auto-redirect to Parent Record on Save...

      Our users often create records from the related list on th left side of the screen. They click the blue "plus" button to create the record. This is handy, but for some modules, or situations, they would like to remain on the record AFTER clicking "Save",

    • Introducing Version-3 APIs - Explore New APIs & Enhancements

      New Update - The end of life timeline for V2 APIs has now been extended to 30th June, 2026 Happy to announce the release of Version 3 (V3) APIs with an easy to use interface, new APIs, and more examples to help you understand and access the APIs better.

    • Correlated subqueries not supported in Zoho Analytics. This creates huge limitations

      Running into a major limitation in Zoho Analytics: correlated subqueries simply don’t work, even in completely standard SQL patterns inside a JOIN. Example: LEFT JOIN "Bills" b ON d."Id" = b."Deal ID" AND EXISTS ( SELECT 1 FROM "Bill

    • Unknown table or alias 'A1'

      I would like to create a subquery but i am getting the following error: Unknown table or alias 'A1' used in select query. This is the sql statement:  SELECT A1.active_paying_customers, A1.active_trial_customers, A1.new_paying_signup, date(A1.date_active_customers), 

    • Feature announcement - Introducing recipient authentication via Didit in Zoho Sign

      Hi everyone! Zoho Sign already integrates with trusted providers like IDology (US), eID Easy (EU), and Stripe Identity. Today, we're excited to add another powerful option: Didit. Some benefits of using Didit: Unified ID verification Streamlined eKYC

    • CRM x WorkDrive: File storage for new CRM signups is now powered by WorkDrive

      Availability Editions: All DCs: All Release plan: Released for new signups in all DCs. It will be enabled for existing users in a phased manner in the upcoming months. Help documentation: Documents in Zoho CRM Manage folders in Documents tab Manage files

    • Super Admin Logging in as another User

      How can a Super Admin login as another user. For example, I have a sales rep that is having issues with their Accounts and I want to view their Zoho Account with out having to do a GTM and sharing screens. Moderation Update (8th Aug 2025): We are working

    • Regarding the integration of Apollo.io with Zoho crm.

      I have been seeing for the last 3 months that your Apollo.io beta version is available in Zoho Flow, and this application has not gone live yet. We requested this 2 months ago, but you guys said that 'we are working on it,' and when we search on Google

    • Message as bot

      I would like to be able to send a Cliq message truly as a bot. the current implementation of this function, while it sends the message as a bot it sends that message inside a chat from the user how authenticated the flow cliq connection instead of directly

    • Using a custom single line External ID form as merge fields in templates

      Hey everyone, We're looking to integrate a few external systems better with our Zoho CRM, and we had hoped to use external fields for this purpose. In this case, it would mean being able to use our own inoice system's invoice numbers are a direct id compatible

    • Build an approval management system with Custom Modules

      Dear users, Task management is at the heart of project management. But not all tasks are created equal. You can have your tasks reviewed before any work begins, to improve transparency or stay within budget or as part of your process. Zoho Projects allows

    • Next Page