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

    • External calls & email notification limits

      Salut, I was doing some testing of SMS and Email notification yesterday, on the development environment, and got an error due to External calls exceeded. I know that my plan has 100 email & external calls limit, but in my billing page, I do not see those

    • How to get custom estimate field to display on existing or new services?

      I am using FSM. I recently added a new custom field to Service Details to help categorize my services. I can see the newly added field as a column on the service list view. However, when attempting to update an existing or create a new service, I don't

    • How to turn off notifications for shared mailbox?

      It seems like a pretty common use case for shared mailboxes is getting notifications that are relevant to multiple people. That type of email tends to be high-volume and not time sensitive, the type of thing you check once a day to see if anything is

    • Problem using for each in subform

      I have a subform in one of my forms, and sometimes I have to use a for each statement in this subform. Now, my problem is, I've seen it suggested everywhere that the syntax is supposed to be:  for each var in SubformField Every time I tried this doesn't work for me, so I have to use: for each var in input.SubformField It isn't exactly a problem, but, let's say it's on the 'on user input' action of one of my fields, if I need to edit this action for any reason, when I click on it, it removes the input

    • Lookup field display in Zoho Analytics

      Hello, I think I am missing something very obvious, but I can't figure it out: I have 2 lookup fields in my "Deals module" -> One for the account that we have the project with and one for the beneficiary account. Both fields refer to the "account name"

    • ZOHO Reports is not Working !

      This error is coming up: Please fix it ASAP. Sorry!! Unable to display this page Sorry, an unexpected error occured when performing this operation. The error has been logged and will be looked into. It would be of great help if you could provide us with additional information using the ''Feedback'' link at the top of this page. 1. The error has been logged and will be looked into. 2. It would be of great help if you could provide us with additional information using the feedback link.

    • Comment gérer vos colis et expéditions dans Zoho Inventory

      La logistique a évolué afin de permettre l'optimisation des commandes à travers la planification et l'exécution - de la réception de la commande à la livraison. Un système de gestion des colis présente plusieurs avantages. Livraison dans les délais prévus

    • Zoho Cliq 4.0: Zoho Cliq Android TV application

      Zoho Cliq is a powerful communication and collaboration platform that allows teams to stay connected and get work done from anywhere, at any time. One of the latest additions to its suite of tools is the Zoho Cliq android TV app, designed to make it easier

    • Zoho Bigin | Adding users to a deal in bigin

      Hi, One of our ongoing POCs required adding users to a deal in Bigin. I found that we cannot add individuals using custom fields when we have an Express license. Is there any way to do it?

    • How to Send Automatic Warning Email After 3 Late Arrivals in Zoho People?

      I’m looking to set up an automation in Zoho People where a warning message is automatically sent to employees who have 3 or more late arrivals within a specific time period (like the past 30 days). Here’s what I’m trying to achieve: Monitor employee check-in

    • Is it possible to set create deal checked by default when converting a lead?

      In our company whenever a lead is converted we make a deal. It is a pain to have to check the box every time. I would prefer if it was just a default behavior and the box wasn't even there. But it would be fine if the box could be checked by default.

    • Is it possible to use filters in zohosite.

      Is it possible to use filters in zohosite. Example: we uploaded video, audio, pdf in one page. If I want to see only the video. Then, I will select the video which is shown in the filters.

    • Poor Search Results on Zoho CRM

      The search on Zoho CRM is quite poor. Salesforce has now published a new search, when will get this on Zoho? https://help.salesforce.com/s/articleView?id=data.c360_a_hybridsearch_index.htm&type=5

    • Getting error while while deleting from Activities Object

      I am trying hit this endpoint: - DELETE https://www.zohoapis.in/crm/v2.1/Activities?ids=725820000001141076%2C725820000001143056 HTTP/1.1 But getting the below error: - {"code":"INVALID_REQUEST_METHOD","details":{},"message":"The http request method type

    • Unveiling Zoho CRM's New User Interface - The NextGen UI

      Hello Everyone, Last Wednesday, May 14th,2025, we announced the public release of Zoho CRM For Everyone, our most significant update yet. This release brings a modernized CRM experience with a redesigned user interface, new capabilities for cross-functional

    • Product Updates in Zoho Workplace applications | April 2025

      Hello Workplace Community, Let’s take a look at the new features and enhancements that went live across all Workplace applications this April. Zoho Mail Filters for incoming emails in Shared Mailbox Simplify the management of incoming emails in your Shared

    • Deluge script for purchase receive

      Trying to create purchase receives.... receive.put("purchaseorder_id",poId); // purchase order associated ... receive.put("line_items",itemList); result = zoho.books.createRecord("purchasereceives", orgId, receive); info result;...... {"code":9,"message":"Purchase

    • Renew an expired subscription

      Hey Zoho officer, My subscription was expired yesterday, but I did not notice until just now. How can I renew the subscription even it is expired? The website is really important for our publicity. So I hope I can still review the domain and website. Thanks!

    • How to normalize CRM module when integrating with Survey?

      This question is about the problem with many-to-many relationships and Survey. One of the things our organization does is track people in our program and their jobs. We get new information from the people three times annually through Zoho Surveys. Survey

    • ZOHO CRM reverting contacts details

      Hi! Anyone else had a problem where +- at 20:00 NZT email addresses and company details reverted back to the ones that was previous changed? We had about +- 30 odd notification come through last night and had to go and change all back manually.

    • Announcing Zoho Community Developer Bootcamps in India – Extensions

      Hey everyone! We're back with another line-up of Zoho Community Developer Bootcamps in India! Following the success of the first leg of bootcamps on Extensions, we're now ready with the second leg. These bootcamps focus on empowering developers of all

    • ZOHO Sheet View for Activities

      Hello I am beginning to look at importing previous events into activities as utilizing events as timeslips for engagements, we have added fields such as duration, billable, etc. However to use Events on a regular basis would require the ability to use

    • Custom Serial numbers in Inventory tied to customers

      Hello, We have both software and hardware serial numbers that we need to track for active customers in the field. We do not know the serial numbers for the software until the customer buys it as its not a stock item but something we order and deploy for

    • Issue with inventory and shopify

      Hello! We're having some issues with Inventory not synchronizing all our products with our shopify store. We've tried multiple times to synchronize them. We have multiple locations and it seems to just be getting a part of the inventory. When we sell

    • Automatic Pick LIst

      The pick should have the feature to send you to the FIFO location and tell you from wich bin you should get the product. Depending on FIFO LIFO or what we choose

    • Picker users

      Hi FOr bin location we are starting to use Android app. The users are allowed to chance the asignee, but they are the Asigneed persons. We should have the avility to choose or setup these fields.

    • Zoho Inventory MobileApp compatible with barcode scanners such as Zebra

      Hi, Although the Zoho Inventory App is working with a scanner mode taken directly through the cell phone which I do not consider it as efficient, I would like to know when are you planning an update on the app so it can be compatible with bar code scanners

    • More Payment Gateways For South Africa

      Hello, please add more payment gateways that cater for South Africa to the Zoho ecosystem. Yoco - pay now with card (integrated but there is a problem) Others to consider Payflex.co.za - pay now with card or pay later using credit from payflex Float.co.za

    • Sync Zoho Docs and Google Drive

      Sync Zoho Docs and Google Drive -  how can I do it?

    • Is it possible to link a CRM field or Zoho User to a ticket auto assign function.

      Dear Support, I have a unique situation at our company. So I know it might be able to link a ticket to the client account owner from the CRM. However, is it also possible to link an email field, username or other field in the CRM to a new ticket created

    • Drill Down - Pivot Table

      Is there anyway to have drill down options in pivot tables like in the chart function?

    • Allow Zoho form to send to one of our ogranizations groups

      All emails from the form submission are being held for moderation. I have permissions set to organization members, and I think I have the forms setup in our DMARC

    • Kanban view - which modules support this view?

      Recently (a few days ago), we started exploring Zoho Recruit and like to use Kanban view to visualise the data in different modules. I just found out from emailing Zoho Support that they need to enable Kanban view for different modules (why?). Which modules

    • Email notification for followers

      Is there a way to enable email notification for followers of a support ticket? ie: Ticket #123 is owned by Agent#1, Agent#2 adds themselves as a follower. Whenever ticket #123 receives an email from the customer, Agent#1 receives an email. Agent#2 would

    • Remove the dot menu and + sign on sub form

      If I don't want the user to be able to add more entries on a subform, am I able to remove the dot menu and the + sign?

    • Writing Checks to Employees for Reimbursable Expenses

      I couldn't find a way to write a check through books or expense to an employee for reimbursable expenses. The expense created an entry in the system with a debit (expense) credit (liability). I entered a bill and used the liability account so it would

    • Peppol Malaysia API

      Hi Zoho Books, my country Malaysia will going to implement "Peppol" (E-Invoicing), starting 1 Jul 2025 for all businesses. The government intends to provide API for accounting app. The workflow involves creating an invoice from accounting app, triggers

    • Error "The SMTP server requires a secure connection or the client was not authenticated. The server response was: 5.5.1 Authentication Required"

      Hi, I'm trying to send an email via the SMTP server using C# code but getting the following error: "The SMTP server requires a secure connection or the client was not authenticated. The server response was: 5.5.1 Authentication Required" I know the username

    • Free webinar! The Zoho Sign Masterclass: The basics, latest features, and mobile apps

      Hi, Are you new to Zoho Sign or looking to brush up on its capabilities? This webinar will help you master Zoho Sign from the ground up, covering everything from the basics to the latest features. Whether you're an individual managing personal documents,

    • Home and Reports Tabs Not Loading

      Hello, I've been trying to view the home and report tabs since yesterday but the same issue persists. While the Home view appears, the data will not load (see screenshot). The Report view does not load at all. Clicking the tab elicits no response; the

    • Next Page