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

    • IMAP Connection Issue – "Disconnect called before connection setup" (Zoho + Freshdesk Integration)

      Hello, Since April 25, 2025, we are facing a critical issue with our Zoho Mail integration with Freshdesk. Incoming emails are no longer being received in Freshdesk. Freshdesk Support has confirmed that their system is trying to connect to our Zoho mailbox,

    • Cannnot find criteria tab

      We need to be able to segment contacts based on an account view or field. The online help shows a screen with three options: Under Sync Details there is All Contacts; Custom view; Criteria.  The latter is missing from my screen.  I need it. I also want to know if I delete contacts from campaigns, will they still remain in CRM? 

    • Dial Charts in Analytics using field values for colored ranges

      Hey all! It would be supremely helpful if we could use field values for ranges in Analytics for dial charts. We currently display an analytics report to our sales team showing how close they are to reaching the next tier for commission payouts. We update

    • South Africa Tax Edition is now Available!

      Managing taxes just got easier for field service businesses in South Africa! With Zoho FSM's new South Africa tax edition, field service businesses operating in South Africa can now effortlessly stay compliant with local tax regulations. Easily manage

    • Bulk user onboarding for Cliq Channels in a jiffy

      As developers, we frequently switch between coding, debugging, and optimizing tasks. The last thing we want is to be burdened by manual user management. Adding users one by one to a channel is tedious and prone to errors, taking up more time than we could

    • Issues with Dashboard Filter and KPI in Zoho Analytics (CAGR)

      Hi everyone, I'm trying to build a CAGR (Compound Annual Growth Rate) KPI in Zoho Analytics, but I'm running into some issues with filter synchronization. Here's the scenario: I created two test reports: One that filters results from 2021 to 2025. Another

    • Adding Product Photos through Import or In Bulk

      I am about to add about 1000 products in the CRM. I am shocked that there is no way to add product photos through the Import feature. I'll be spending days adding product photos.... Very dissapointing. Anyone know of a work around to add product photos

    • Announcing Multi-language Support in Zoho FSM

      Zoho FSM now speaks your language. The much-awaited multi-language support is now available in Zoho FSM. The following languages are supported in Zoho FSM: Dutch (Nederlands) English - United Kingdom English - United States French (français) French -

    • Quiz of the Day on Dashboard

      Hi team, Is it possible to enter a feature for enabling a widget as a quiz for the day. This widget can have one question popping up daily from the list of some pre-fed questions and the employees need to either type a response or can select from a multiple-choice

    • Canvas Button Vanished

      I have a button that has mysteriously vanished. It shows in the canvas builder but then is no where to be found in the actual record and before you ask, yes I have tried to access through incognito mode and same issue.

    • Multiple Tabs in the Dashboard

      Hi team, Can we enable an option to add multiple tabs in a dashboard? This will help to group the content to be displayed to employees and make it more usable and user-friendly intranet space.

    • Function #6: Calculate Commissions for paid invoices

      Zoho Books helps you automate the process of calculating and recording commissions paid to sales persons using custom functions. We've written a script that computes the commission amount based on the percentage of commission you enter and creates an

    • IMAP as a source option in Dashboards

      Hi Team Can I request IMAP be added as a source option for running a report or creating a KPI in dashboards. I have selected all options and my IMAP linked emails are not showing, I can only check these by going to emails in a contact. Thankyou Josh

    • Canvas responsive preview in different browser window causes re-authentication/verification

      I'm trying to design a view in Canvas. I am testing in a tab with a desktop view, and another tab (on my same desktop/IP) with a responsive view of an iphone. Every time I refresh, it boots me out of the previously used tab. If I forget to refresh the

    • Can I add external account to Zoho PageSense?

      Hello, I would like to ask you about adding external users to projects in Zoho Pagesense. I can add only users from my organization. Is any solution for adding as we have in The Zoho Projects clients accounts?

    • Import subform entries conveniently in CRM

      Dear All,   Subforms have always been crucial for associating additional data with CRM records. You can easily associate line items with parent records and keep track of various details related to your records. We're pleased to announce that we've introduced

    • Cómo convencer a tu manager para venir a Zoholics 2025

      ¿No estás seguro de si a tu manager le convence que asistas a Zoholics 2025? ¡No te preocupes! Aquí te damos algunos argumentos clave que te ayudarán a convencer a tu manager de que participar en este evento es una inversión tanto para ti como para la

    • HTML Email in Zoho Books

      Is it possible to create custom html email template in zoho books. 

    • Can you change the width of a template, and/or the size of images we upload to the template?

      my images look good in preview, but are then skewed when sending email. Also, are image sizes "fixed" by which template is being used? Thanks in advance. CV

    • Tip of the Week #53 – Use Zia writing assistant !

      Ever find yourself typing out a quick reply or discussing something with your teammates, and a tiny typo slips through? Or maybe you’re aiming to refine your writing for better clarity and context? That’s where Zia steps in , Zoho's AI powered writing

    • Sheet View for Reports

      Hi - is there any plan to make a "Sheet View" function for reports??? It would be a huge improvement. Moderation Update (30th April 2025): We have a separate post discussing the same requirement. Please follow the below post to stay updated on the progress.

    • When adding or editing a contact in contact tab, the contact or edits cannot be seen in mail tab for up to 24 hours

      When reporting this as a bug, I was informed that it can take up to 24 hours for a newly added or edited contact in the Contacts section to become usable in the Email tab—whether through autocomplete or when selecting recipients via the To button. Frankly,

    • Power of Automation :: SLA for Projects

      Hello Everyone, In this post, we would like to highlight the feature "Time-Based Workflow Rules for Projects" Workflow rules help project managers organize tasks in a project by setting criteria and actions that meet the project requirements. Zoho Projects

    • RouteIQ for Zoho FSM

      Beste, Zou wel top zijn dat we een RouteIQ hebben voor FSM aangezien we constant moeten zien wat de beste route is voor onze monteurs. Nu moeten we een speciale aparte programma hebben om de beste route te berrekenen voor onze monteurs aangezien de planning

    • Let's Talk Recruit: An approval process with zero follow-ups

      Welcome back to our Let's Talk Recruit series! Today, the topic of discussion is the Approval process. We’ll discuss how approval workflows function in recruitment, explore real-world use cases, and show how automation in Zoho Recruit can streamline approvals

    • Block certain emails from creating tickets

      Hi there! We get a lot of tickets into Zoho desk from people emailing our support email that feeds into Zoho. We have created some 3rd party accounts using our support email and we get notification emails from these accounts. These emails create tickets.

    • Customer Statement Templates

      Hi  In know that Credit Note Templates have already been proposed but I would also like to see Customer Statement templates as well please. Thanks Gene

    • Where to find org ID and department ID?

      Hi there All the existing info on this seems to be incorrect or out of date. It's not in my URL, it's not in the developer space > APIs anymore like was suggested in some other forum posts. How do I find it?

    • Turn off Knowlege Base Follow options and Follower lists

      Is there a way to hide or turn off the option in the Knowledge Base for users to follow specific departments/categories/sections/articles? If not, is there a way to turn off the public list of followers for each of those things? Otherwise, customer names

    • Zoho desk not sending call reference to user

      Hi, I am using zohone desk and have setup the call logging email address but sadly users are not getting a call reference notifying them that the call has been logged also can't see the updated call when it is going through faces. My question is, is there

    • Display CRM account field on Zoho Desk Ticket

      I have linked a custom CRM Account field for "Customer Care Lead Advisor" with Zoho Desk Accounts. I know the data has synced correctly as I am using this field for some automations based on this lead advisor field. When viewing a ticket that is linked

    • What is the difference between a template and a snippiet

      Hi there, I am currently working on optimising our service desk and improving the consistency of our responses. I have come across two tools that appear to help do this, templates and snippets. I was wondering what the similarities and differences are

    • Is there a way to set up templates for commonly occurring issues on Zoho Desk

      Hi there, We have recently migrated our service desk over to Zoho. I was wondering if there is a way we can set up custom templates for specific requests that we commonly get from our customers. Example: Customer often requests a password reset. There

    • Missing "Created_Time" Field in Zoho CRM API Search Results

      Hello, I've noticed that the "Created Time" field is visible in the Zoho Canvas view for my Accounts Module. However, I'm unable to retrieve this field's value via the Zoho CRM API. Specifically, when using the /search endpoint for the Accounts module,

    • Problem connecting social accounts and file upload

      I have two brands that I manage in Zoho, each with their own social profiles. I didn't have any issues for the first few months, but recently the Instagram for one got disconnected and no matter what I've tried, it won't reconnect. If I go into the settings

    • Marketing Automation Emails Going to Spam

      Google is trapping all the marketing automation emails in spam. My domain has a perfect reputation and it looks like Zoho has a low reputation which is sending it to spam. When I pull the email out of spam and click on a link in the email, I get this

    • Invalid OAuth Token When Using Zoho CRM API with Postman

      We're in the process of integrating Zoho CRM with our Django backend and currently testing the API endpoints via Postman. I've forked Zoho's official CRM REST API collection in Postman for this. Steps Taken: Created a Self Client via Zoho API Console:

    • Device Credentials

      Connection Credentials for my device. Where is this displayed in the application.

    • is there a better way to routinely export my project timesheets?

      Hi there, I am somewhat happy with how Zoho books handles time.  One thing that is missing is more user driven control over my data.  I have a workflow where I constantly need to give customers feeds of work done.  So I pick a project, and would ideally

    • Zoho Flow - Create CRM Meeting - Expected input type is jsonobject

      I'm trying to use the Create Module Entry action in Zoho Flow to create a meeting in Zoho CRM. The participant field is throwing an error during debugging: "Zoho CRM says "Invalid input for invalid data. The expected input type is jsonobject." I've tried

    • Next Page