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

        • 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,

        • 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

        • 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

        • CRM's sandbox now supports the Zoho Desk integration

          Hello everyone, Sales and customer support teams often collaborate to solve tickets and identify pain points. In Zoho's suite of products, sales teams primarily use Zoho CRM while customer support teams work in Zoho Desk. These two tools are often integrated

        • Countries List Global Set- Complete with Phone Country Code and Continent.

          Dear Zoho Team I saw your recent addition to the Global Sets regarding the Countries list and states. While working on it, why didn't you also add things like Continent and Phone Country Code? Also, some ISO codes from some Countries/regions are mis

        • mask Customer phone number and agents cant see customer phone number

          Is there any way we can integrate Zoom Phone with Zoho CRM while ensuring that customer phone numbers remain masked? We need a solution where agents can make outbound calls but cannot see customer phone numbers. Please let us know if there is any solution

        • Zoho Community Digest — Marzo 2026

          ¡Hola, comunidad! Un mes más os traemos las novedades más interesantes de Zoho para marzo de 2026, incluyendo actualizaciones de producto publicadas oficialmente, cambios de políticas y noticias del ecosistema. ¡Gracias por venir a los Workshops de Madrid!

        • Files Uploaded to Zoho WorkDrive Not Being Indexed by Search Engines

          Hello, I have noticed that the files I upload to Zoho WorkDrive are not being indexed by search engines, including Google. I’d like to understand why this might be happening and what steps I can take to resolve it. Here are the details of my issue: File

        • How can we get payment status updates for payment links in Zoho Books using webhooks?

          When we create and share a payment link in Zoho Books, is there a way to know when the payment is updated? Can we use webhooks to get real-time updates for payment link status instead of checking manually?

        • Uplifted homepage experience

          Editions: All editions. Availability update: 17th February 2026: All editions in the CA and SA DC | JP DC (Free, Standard and Professional editions) 23 February 2026: JP (All Editions) | AU, CN (Free, Standard, Professional editions) 27 February 2026:

        • 【Zoho CRM】住所項目のアップデート：構造化された正確な住所入力を実現

          ユーザーの皆さん、こんにちは。Zoho コミュニティグループの中野です。 今回は「Zoho CRM アップデート情報」の中から、住所項目に関するアップデートをご紹介します。 アップデートの概要 これまでの住所項目は、自由入力形式のテキスト欄が中心でした。 そのため、入力者によって書き方がバラバラになりやすく、データの検索やレポート集計が難しいという課題がありました。 今回追加された新しい住所項目では、住所を構造化されたフォーマットで管理できるようになりました。 以下の要素をそれぞれ個別の項目として分割して管理します。

        • Edit a previous reconciliation

          I realized that during my March bank reconciliation, I chose the wrong check to reconcile (they were for the same amount on the same date, I just chose the wrong check to reconcile). So now, the incorrect check is showing as un-reconciled. Is there any way I can edit a previous reconciliation (this is 7 months ago) so I can adjust the check that was reconciled? The amounts are exactly the same and it won't change my ending balance.

        • Choose Component for User Filter

          This filter in the Choose Component for User Filter would be better if had an Order or Group by function. Also, the Specify the default filter values: is very confusing and limiting.

        • Zoho Desk - Event Calendar View

          Hi Desk team, Are there any plans to introduce a calendar or timeline view for Events in Zoho Desk? It would be very helpful if we could see Events visually in a calendar and/or timeline. This is very helpful when desk side support activities need to

        • Re-Apply SLA When Ticket Reopened from Closed Status?

          If you have an SLA applied, timers are deactivated when going to "On Hold" status type and reactivated when going back to an Open status type. What we discovered is when a customer replies to a closed case and it reopens, the SLA is not applied and timers

        • Option to Delete Chats in IM

          Currently, there is no option to delete any chats in IM, regardless of their source.

        • Next Page