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

    • Kaizen #152 - Client Script Support for the new Canvas Record Forms

      Hello everyone! Have you ever wanted to trigger actions on click of a canvas button, icon, or text mandatory forms in Create/Edit and Clone Pages? Have you ever wanted to control how elements behave on the new Canvas Record Forms? This can be achieved

    • Kaizen #142: How to Navigate to Another Page in Zoho CRM using Client Script

      Hello everyone! Welcome back to another exciting Kaizen post. In this post, let us see how you can you navigate to different Pages using Client Script. In this Kaizen post, Need to Navigate to different Pages Client Script ZDKs related to navigation A.

    • Kaizen #210 - Answering your Questions | Event Management System using ZDK CLI

      Hello Everyone, Welcome back to yet another post in the Kaizen Series! As you already may know, for the Kaizen #200 milestone, we asked for your feedback and many of you suggested topics for us to discuss. We have been writing on these topics over the

    • Recent Topics

    • More Workflow Triggers

      We utilize a lot of workflows in our organization. Recently we've identified two use cases where we would like a workflow to run a function. Upon further checking, the workflow trigger wasn't available, or the only option was to run the workflow more

    • サブフォームアップデート 静的サブフォームについて

      昨年のアップデートにある「静的サブフォーム」の詳細についてご存じの方はおられませんでしょうか？ Zoho CRM - 2024年10月〜12月のアップデート https://www.zoho.com/jp/crm/blog/q4-2024-update.html 画像をみると項目を固定できるようですが、2025年5月現在、こちらの USデータセンター環境では設定箇所がみあたりません。 設定方法や設定箇所などご存じの方おられましたら共有いただけると幸いです。

    • IP Address List > Sigma

      We have developed a ZohoCRM extension that utilizes API calls to our server from Deluge scripts and Widgets. Our API server has IP restrictions in place. To ensure successful communication, we require a list of IP addresses utilized by Zoho's platform

    • Have One Custom Function Run After Another Custom Function Finishes - ZoHo Desk

      Hello, From what I'm seeing in ZoHo Desk. If there are multiple custom functions that run when a ticket is initially created, the custom functions seem to run simultaneously. Is there a way to have one custom function finish before starting another custom

    • email templates are a mess with fonts

      Any time I edit a template or adjust the content of an email while using it the fonts change. Previewing does no good as it appears one way but is sent another. for example .. this was made using Tomaha 2nd size with NO BOLDING. and this is what my client

    • New Style for multilevel list numbering

      Hi, in my country most of legal contracts are numbered in top level as First, Second.. (Primero, Segundo, Tercero...). I suggest include this style for multilevel lists. Thanks in advance.

    • integration with Notion

      Hi. I'm tryng to use zapier for syncing notes between Zoho and my Notion Database. But when creating a zap with their models, I get an error wih this kind of message : Step 1 - New Note Card in Notebook in Zoho Notebook request to https://notebook.zoho./%7B%7Bsel_dc%7D%7D/api/v1/notification/filtered/register?JSONString=%7B%22resource_type%22%3A%22NOTEBOOK%22%2C%22filter_type%22%3A%22ID%22%2C%22filter_value%22%3A%22lovap7e4ebb0fdbaf4ac697d9218619d32fbf%22%2C%22action%22%3A%22UPDATE%22%2C%22url%22%3A%22https%3A%2F%2Fzapier.com%2Fhooks%2Fstandard%2F19820952%2Fcf840faec6aa42c5acdf1f5775131ec6%2F%22%7D

    • Is A Coloured Picklist with Dynamic Automation possible?

      Hey All, Just wondering if it is possible to setup a coloured dynamic picklist, Example below. Automating colour for ticket age based on creation date, So it is dynamic and changes as the ticket ages? 24 Hrs > Green 48 Hrs > Orange 72 Hrs > Red

    • Enable Mixed Channels with Employees, Guest Users, and External Users

      Hi Zoho Cliq Team, We would like to request the ability to create a channel in Zoho Cliq that includes all three types of users: Internal employees (organization users) Guest Users (non-Zoho users joining via guest chat) External Users (users from other

    • Associate email to deal and multiple contacts to deals

      Hi any news in how to associate emails to deal and to varios contacts in Bigin CRM? This feature would help in having deal and conversation all in one place so that when we open the deal or contact we have all the information in regard to deal that we

    • Chequered lines in notebooks

      Can the notebooks also be used with chequered lines or only with ruled lines? Or is it only available in blank? Thanks for the info! Greetings Andreas

    • How to add/remove tag to a ticket with function?

      Hi, I have had to create a function in Zoho Desk. However, it appears that the syntax differs from that in CRM. I realized that it is necessary to add organization ID in some commands what is not necessary when you create a funciotn in CRM. Could you

    • ERROR CODE554 5.1.8: unable to send message reason 554 5.1.8 email out going blocked

      Dear Zoho Mail Support, It's been nearly 24 hours and we still can't send emails. Our outgoing emails are blocked with the error message "554 5.1.8 Email Outgoing Blocked." This restriction is and will severely impact our business operations and causing

    • Zoho Desk Onboarding Assistance - How to do bulk taging

      Hi How to apply a particular tag to multiple tickets in one go.

    • New Assembly Screen - Doesn't Search by SKU

      When one wants to make an Assembly by clicking the plus sign from the "Assemblies" tab, the first step is to enter the Composite Item that one wishes to assemble. Logical, but the problem is that one cannot search that by SKU, only product name. This

    • CRM Client Script Buttons

      Hello,  Client Script ZDK list button functions, but I am not sure how to interact with them. I tried a few methods of getting the API name for a custom button, but no luck. Any ideas where the button API names are stored?  Also, custom buttons must be

    • Announcement - Custom Function Series

      Hi folks! One of the key attributes of Zoho Books that we're really proud of is the ability to automate your routine accounting tasks in an efficient manner. For most businesses, accounting would involve a set of repetitive tasks that consume a good chunk

    • Zoho CRM Create Client script using Custom Buttons

      Client script has become quite sophisticated and it's really useful. There is a missing simple functionality: To create script should be able to be called in the details page using a custom button. If we have this feature for Field Event, shouldn't we

    • Client Script event on any field of a Detail page

      Hi everyone! I'd like to trigger a Client Script when a user modifies a field - any field - from the Account Details page, how can I do this? I don't want to trigger it on a specific field, but on all of them. Thanks in advance!

    • Move Quote/Deals from a Contact to Another

      In our business contacts often move to different accounts, and it is simple to reassign the contact, but not so easy to move their quotes/deals to another contact at the account they are no longer with. Looking to see if there is a function to move quote/deals

    • Feature Request – Support for Saskatchewan PST Self-Assessment in Zoho Books

      I’d like to suggest a feature enhancement for Zoho Books regarding Saskatchewan PST (SK PST) self-assessment. Currently, when filing the SK PST return using Zoho Books’ return generator, there is a field labelled “Consumption Tax”, which is intended for

    • Connect and Engage On the Go: How Zoho SalesIQ's Mobile App Empowers Sales Teams?

      In sales, timing is crucial. It makes a huge difference. What if a prospect is checking out your pricing page? Or a high-value lead revisits your business' website or mobile app while you're at lunch? You can’t afford to miss that opportunity, and you

    • Any timeline for these features?

      Hello! Was wondering if there was a timeline to for the following features: Increased API Access for automations. The Rules are nice, but really need more automation, such as adding things to CRM, automating task creation, forwarding emails, etc. "negative"

    • Projects Timesheets integration with Quickbooks

      When will Zoho Projects Time-sheets be integrated with Quickbooks? This will make us move to Zoho for all business needs (except for Quickbooks)

    • Unable to send a message to a contact from Zoho CRM

      From menu Contacts I choose a contact, on the right vertical menu i have five different choices: Add a potential, Add an activity Add an event Add a call Send a message. All af them works exept "Send a message". If i click on it I don't get nothing, no

    • Customization in PDF templates for custom modules

      I'm facing some difficulties when it comes to the custom modules in zoho books: 1) Is there any way to get the item table field for my custom module? It doesn't show up in the dropdown when trying to add a new field. 2) I was trying to somehow get 1)

    • Formación: Workshop de Zoho CRM y Servicio al Cliente

      Tu oportunidad para transformar tu forma de trabajar con Zoho Zoholics 2025 está pensado para ti, que quieres llevar tu uso de Zoho al siguiente nivel y aprovechar al máximo tu subscripción. Una de las experiencias más potentes de la agenda de Zoholics

    • Sorting alphabetically a collection in a Lookup

      Hello, In a lookup that looks at other lookups (!?), I had to make the following script to limit the list appearing in that lookup : ListeDispo = Offre_de_produits[Quantite_offerte > 0]; input.Produits:ui.add(ListeDispo.Produit_OFFRE.getall()); Works

    • Edit response and integration

      We have a zoho form that our employee starts and submits, and then a day or two later, they "edit their response". I have the zoho form integrated with the Salesforce crm. I submitted a response and it made a new record in the proper module. But when

    • Zoho Developer Hangout (ZDH) – Episode 18 | Zoho CRM Client Script for Efficient Sales Process

      Hello everyone, A streamlined sales process isn’t just a nice-to-have—it’s the engine that powers lead generation, builds stronger customer relationships, and closes deals faster. But what if you could take your CRM beyond the basics to actually help

    • Mobile no already in use

      When trying to bring up my email on another Zoho account I get asked, as a security measure, to add a mobile number. I have added a number before, but I tried again only to be told that the "Mobile number already exists", but I cannot proceed further.

    • error in making eway bill

      at the time of generating eway always a pope appers to enter the valid state code as state is auto gnerated while creating new customer

    • Need Feature to automatically fetch the registered GSTN Address of the AP Vendors

      Hello Zoho Need Feature to automatically fetch the registered GSTN Address of the AP Vendors and update the Zohobooks Vendor profile automatically so as to avoid manual address updations. Please do the needful here Thanks

    • Plug Sample #13: Display CRM Products as Dynamic Carousels in Your Chatbot

      Hi everyone! We’re back with another simple yet powerful plug to level up your chatbot experience. With the SalesIQ-CRM integration, you already have the ability to create leads, contacts, and deals directly within your CRM from SalesIQ, and view complete

    • Weekly Tips: Don't Delete, Just Archive

      For a business that relies heavily on email for communication, a cluttered inbox can be quite challenging to manage. Some emails can take up significant space in your inbox, making it difficult to navigate to other important emails. While these emails

    • Problema de sincronización de zoho mail con cliente Outlook

      Estoy presentando retardos en recibir los correos de Zoho en mi cliente Outlook a veces tarda mas de 20 minutos a pesar de haber llegado a la web no llega al cliente de escritorio y muchas veces debo cerrar el cliente y volverlo abrir para que llegue

    • Issue Updating URL Field with WorkDrive Link

      Hello, I’m working on a form with a file upload field. After uploading a file to WorkDrive, I fetch the public file link and update a field in the form with it. Workflow: When using the single-line text field ("File_URL"), the link is updated correctly

    • Should I Set Up Subdomain for Email Sends?

      Hi there, our team just bought a dedicated IP for our email sends. We send more than 100k emails/month. Because we face deliverability issues and also because of the mass sends, we decided to get a dedicated IP. My question is, should we set up subdomains

    • Incoming Email Not Coming Through

      Hi Zoho Team, I’ve recently set up my domain-based email with Zoho and everything appears configured correctly. However, I’m currently unable to receive any incoming emails. Could you please assist me in checking the following: MX records are set properly

    • Blocked: Reason 554 5.1.8 email outgoing blocked

      Hello, we have an issue while sending e-mails; whole organization with about 150 users is blocked "Unable to send message reason 554 5.1.8 email outgoing blocked", our domain is "ancient.global" Please help.

    • Next Page