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

    • 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

    • 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

    • Feature Reqeust - Include MPN In Selectable FIelds

      I have noticed that the MPN is not available to show in the list view of Items. Please consider adding it as EAN, UPC and ISBN are all available, so it doesn't make much sense to exclude this similar option. Thanks for considering my feedback.

    • Experience effortless record management in CRM For Everyone with the all-new Grid View!

      Hello Everyone, Hope you are well! As part of our ongoing series of feature announcements for Zoho CRM For Everyone, we’re excited to bring you another type of module view : Grid View. In addition to Kanban view, List view, Canvas view, Chart view and

    • Windows Desktop Application for Bigin

      I'm finding the need for a standalone Bigin desktop app for Windows users. Most of my daily work is done through a browser, so I often have several open tabs while working with customers and checking product information, etc. With Bigin currently only

    • Set another Layout as Standard

      We created a few layouts and we want to set another one to standard:

    • Salesforceに添付ファイルを格納したい

      お世話になっております。 Salesforceに添付ファイルを格納したく、カスタムオブジェクトに連携し、 「ファイルのアップロード」項目を設けました。 実際、エラーもなく送信出来たのですが、実際生成されたカスタムオブジェクトのレコードを見ると、どこにも添付ファイルがありません。仕様として、この添付ファイルはSalesforceのどこに格納されるのでしょうか？ 今回作りたいフォームは、複数の書類を添付するため、Zohoformのファイルアップロード項目「本人確認書類」「源泉徴収票」などの項目を、Salesforce側にも設けた「本人確認書類」「源泉徴収票」という各項目にURLリンクとして紐づけたいと思っておりました。

    • Knowledge Base article lists

      Is it possible to adjust the number of articles that are visible under a category of the Knowledge Base portal? Currently it looks like by default it populates about 5 articles before it puts the "more" option at the bottom. Looking to see if I can extend

    • Discrepancy in Contracts with Fields list/Layout

      The Support Plan field on the layout isn't in the fields list. What am I missing?

    • Migrating all workflows to another Zoho account

      We are going to transfer into another company, and we are going to get new emails and new Zoho accounts. Is there a way to migrate (or save in some sort of external file) all presets and settings that we have on this account? That includes primarily workflows,

    • Edit The Newsletter

      There doesn't seem to be the ability add a title and a caption below the button. Can this be done?

    • Unable to Delete Items – No Visible Transactions but Error “Items which are a part of other transactions cannot be deleted…”

      Hello Community, We are using Zoho Inventory for our business and encountered a persistent issue that is preventing us from deleting certain items. The message shown is: “Items which are a part of other transactions cannot be deleted. Instead, mark them

    • Keyboard UX for Assemblies

      The new Assembly module has a counter-intuitive behavior that ought to be corrected. When an Assembly is ready to be entered, there are two options given, the blue-highlighted "Assemble" and the gray "Save as Draft". This correctly implies that the normal

    • landed cost-need help with different currency under the same bill

      I’m having trouble recording landed costs in Zoho Inventory/Books. My purchase order is in CNY, but the landed cost (freight) I pay is in USD. Zoho forces everything under the same bill to use one currency, so I can’t enter the landed cost in its actual

    • Improved Functionality PO Bill SO Invoice

      Hello, I need to enter over 100 items, it's frustrating to scroll a few item rows and wait for more to load, then scroll again. It would be nice to have buttons that scroll to the top or bottom with one click. Furthermore, these items I'm adding are VAT

    • Generate a link for Zoho Sign we can copy and use in a separate email

      Please consider adding functionality that would all a user to copy a reminder link so that we can include it in a personalized email instead of sending a Zoho reminder. Or, allow us to customize the reminder email. Use Case: We have clients we need to

    • I would like to request a new feature or setting for SalesIQ.

      Hello Zoho Team, I would like to request a new feature or setting for SalesIQ. Currently, when a user opens our contact widget and clicks on the "Chat with us" option, it opens a standard chat window that remains empty until either the user types a message

    • In Zoho inventory Converting sales return to cerdit note from using Api from Creator Error details: {"code":-1,"message":"Invalid Sales Return ID."}

      In Zoho inventory Converting sales return to cerdit note from using Api from Creator Error details: {"code":-1,"message":"Invalid Sales Return ID."} this is button Function used in the Creator map Inventory.Create_Credit_note(int CRE_ID) { return_value

    • Zia should track how customer relationships evolve over time

      Here's a feature idea that I've been thinking about The Problem Zia is great at analyzing individual interactions email sentiment, call transcription, best time to contact. But here's what it can't do: tell you how a relationship has evolved over time.

    • FSM integration with Books

      Hi, I have spent a few months working with FSM and have come across a critical gap in the functionality, which I find almost shocking....either that, or I am an idiot. The lack of bi-directional sync between Books and FSM on Sales Orders/ Work Orders

    • Next Page