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

    • How to Sync Desk KB and Sales IQ KB?

      Hi, we have just started to use Desk and are using the SalesIQ Chat. Ideally I'd like to use the 'FAQ' feature on chat (which uses SalesIQ KB) and also allow our customers to use the self-service KB that comes with Desk. Unfortunately they are two different

    • Need help! Unable to send message; Reason: 554 5.1.8 Email Outgoing Blocked.

      Hi Zoho team My account name is senpai.atelier, it’s been few days I can’t send Emails with the same error messages. I’ve raised the issue to support@zohomail.com that doesn’t respond to my query. I wonder if you may help troubleshooting soon.

    • Zoho arrives to Spam on all Microsoft Accounts (Outlook, Hotmail, Microsoft 365)

      I believe this is a very serious issue. All my email accounts in Zoho arrives straight to SPAM. Thing is, a lot of clients rely on email arriving to Inbox, specially on Microsoft Accounts since it is used a lot both for business and personal email sending.

    • Registeration

      I just added the TXT code. What next?

    • Cannot receive password protected zip files

      Hello, I cannot received a password protected attachments. Also all my members in the same domain has the same problems. Can you please help me? Best regrads

    • ERROR 554 5.1.8 Sender Address Blocked code(554)

      We have an email with Zoho ( comercial@bruiser.com.br), but, when we try associate the account in GMAIL, the server shows this message:  554 5.1.8 Sender Address Blocked code(554) I see this error appear when the limits of returns exceded 10 messages,

    • How do I associate pricebooks to a customer?

      I setup a few pricebooks, that worked fine. But now the only thing I can do with it, when I enter a quote or sales order, I can select which pricebook to use, but I have to do this product by product every time I add one. Is there a way to connect a pricebook

    • Zoho mail stopped receiving emails

      Our email are stopped to receive outsider email. i have checked the DSN, it's pointed to ZOho mail. Can anyone help me to fix this issue urgently? Thanks

    • send email from web application

      Hello, I'm experiencing an issue with sending emails from my web application. Here are the configuration parameters currently in use: ini Copia Modifica quarkus.mailer.from=noreply.sedis@mondonovo.net quarkus.mailer.host=smtp.zoho.com quarkus.mailer.port=465

    • Custom CSS in Zoho Form

      Hi, Please let me know, how we can add custom css in Zoho Form.  Thanks

    • Zoho Recruit

      Getting this issue

    • Missing Email

      We recently started using ZohoMail we migrated our users from google workspaces. The migration process seemed to have gone smoothly however not all emails are showing in the inbox folder. For example: If I sort the inbox folder from old to new. (Oldest

    • Client Script Quality of Life Improvements #1

      Since I'm doing quite a bit of client scripting, I wanted to advise the Zoho Dev teams about some items I have found in client script that could be improved upon. A lot of these are minor, but I feel are important none-the-less. Show Error on Subform

    • Account blocked after accessing via VPN

      All my accounts are blocked after using a VPN. I have submitted multiple support tickets without response. It’s critical that my email be restored asap Can you please provide a way to unblock my accounts

    • Exchange Rate Updates

      Hi, It would be great that when you work with multiple currencies, the exchange rate updates automagically every day (as seen on Zoho Books) or at least that when you create/update an opportunity the exchange rate could be manually updated, or maybe both!

    • Courses without signup

      Can I create "real" public courses where no signup is needed?

    • Espace Sandbox – Votre environnement de test sécurisé dans Zoho Projects

      Zoho Projects propose un sandbox sécurisé pour tester des configurations, des personnalisations et des modifications sans compromettre les données en production. Note : Disponible avec le plan Enterprise le plus récent basé sur les utilisateurs (y compris

    • Descargas en learn

      Buenos dias, yo en mis cursos para no tener que cargar los archivos que utilizare en las lecciones decidi utilizar la opcion de bloques para añadir un enlace de mi workdrive con el video que deseo para que sea todo mas organizado, pero hay un problema.

    • Mail delivery

      I initially had a problem sending any outgoing mail and was able to fix it on my own, given Zoho support never got back to me. However, despite being able to send emails now, none of my mail to different Gmail addresses are arriving, and they are not

    • Mermaid Support & Zoho Learn

      Hi Zoho Team, I’m currently working with Zoho Learn and was wondering if there’s any way to add support for Mermaid syntax to create flowcharts, sequence diagrams, and other visual elements within articles or lessons. Mermaid is widely used in technical

    • Blocked due to VPN

      Hi My account outgoing mails and IMAP access have been blocked due to using a vpn being interpreted as suspicious logins. I’ve tried to mail support but not sure if this is also blocked. This is extremely frustrating as I’m using a vpn because I’m travelling

    • reset admin access.

      I am a user under the domain @lanutraceuticals.com. I do not have admin access. Kindly let me know the administrator contact or help me reset admin access.”

    • Unsubscripation booked domin

      Kindly Un subscription booked domain

    • How to change Super Admin

      Good Day, Can someone kindly guide me on how to change the super Administrator. I have tried many times but could not succeed.

    • Events disappearing in Calendar

      To reproduce the bug: 1.- Add a new event in Calendar 2.- Type any name for the Event 3.- Click "Create" 4.- The event appears 5.- Click on the event to open it 6.- Optional: Edit the event 7.- Click OK 8.- After two seconds, the event disappears Now, click on another day and then come back to the inserted event's day. The event appears.

    • Mail transfer to a contact with multiple accounts

      Hi, Since we can only associate one email for a Contact across Zoho, would it be a problem if we want to merge our mailbox in the future? For example, Mr. Jones is the main POC for 5 accounts, once we merge our mail where would the messages go-- is it

    • @mention not working in Mail

      Am I missing something? When trying to forward a message there is a hint you could do this also by "@mention" at the end of the message. When typing (for example) "@s.." there should appear addresses from my contacts, shouldn´t it? But nothing happens! So what can I do? Best regards and thanks for any help in advance! JH P.S.: Sorry for my bad English.

    • Enable Zia-Powered Deluge Assistance and AI Agent Without Mandatory OpenAI Integration

      Hi Zoho Creator Team, Hope you're doing well. We’d like to request a feature enhancement related to Zia's AI capabilities in Zoho Creator, particularly regarding Deluge Assistance and the AI Agent. Currently, as shown in your documentation (Generate Deluge

    • Zoho Sign community meetup series - India

      Hello everyone! Zoho Sign is a comprehensive digital signature application tailor-made for Indian businesses with unique features like Aadhaar eSign, eStamping, USB/PFX signing. We are now excited to announce our first meetup series for Zoho Sign in India,

    • Product Updates in Zoho Workplace applications | June 2025

      Hello Workplace Community, Let’s take a look at the new features and enhancements that went live across all Workplace applications this June. Zoho Mail Slideshow view for inline images in Notes View all your inline images added in a notes in a effortlessly

    • Assign multiple vendors to the same product

      Guys, My business often purchase the same product from several vendors (based on price and availability). Is it possible to assign more than one vendor to the same product? I saw this same question in this forum, from some time ago. Is this feature available or, at least, in Zoho's roadmap? If not, is there any trick to solve my problem? Without this feature, I simply cannot manage my company's inventory, limiting very much the use of Zoho CRM. Waiting for your reply. Leonardo Kuba Sao Paulo / Brazil

    • Is there as way to shut off the invitation when you set up a new user?

      Is there as way to shut off the invitation when you set up a new user?  I would like to get all my users in the system, my org structure set up and tested, etc, BEFORE I invite the users.  I did not see a way to shut of the automatic invitation email.  The only way to get around it is to set up the users with no Email ID.  However, when you do that - you get into the problem of not being able to update a user's Email ID (which makes NO sense whatsoever).  If I set up a user with an incorrect email

    • Manage Engine login issue

      App not available The app you're trying to access isn't yet available in the in data center region, where your account is present. To use ManageEngine, you can sign up for a new account in another data center region. Learn How Go to Zoho accounts Please

    • Zoho Creator - users "Name" Column

      Hi, When you add user to an application inside Zoho Creator, the system generate an account name for it. We don't have the  ability to change this name. According to Zoho creator Support (Case:11523656) : "The values displayed under 'Name' column of 'Users & permissions' section, is actually the respective account's username and not the actual name specified on the account. Usernames are system designated based on the account email address and cannot be modified from your end." We need to have the

    • Zoho Assist Unattended - devices disappearing

      Hello, I've recently introduced a new model of laptops into our environment (Lenovo Legion). We are experiencing an issue where only the latest installed agent - laptop is visible in Assist. This issue does not appear with our Dell inventory. Example:

    • Searchable email tab in Bigin

      Hi team, Could I please request a feature update, to be able to search emails within the email tab of Bigin. We have large correspondence with some agents and it would be very helpful if we are able to search from this section:

    • The silent force behind great customer service

      Customer service is known to be a demanding role. Customer service agents are expected to bring empathy, clarity, and human connection to every voice call, chat, and remote session, even if the situation requires some time for customers facing stressful,

    • New From Email in Zoho Desk

      Dear ZohoSupport, We are trying to establish a new From Address in Zoho Desk but we are facing difficulties. When trying to use the smtp.office365.com SMTP Server, after clicking the Save and Verify button, the Authentication Failed error pops up although,

    • Option in pipeline deal to select which hotel or branch or store if client has more than one local store

      Hi, I would like to know if there is an option in the deal pipeline to select which hotel, branch, or store a deal is related to—if the company has more than one location. For example, I have a client that owns several hotels under the same company, and

    • Aggregate SalesIQ Knowledge Base Interactions into Zoho Desk Knowledge Base Dashboard

      Hello Zoho Desk Team, We hope you're doing well. We’d like to request a feature enhancement related to the Zoho Desk Knowledge Base dashboard and its integration with Zoho SalesIQ. 🎯 Current Limitation When customers interact with knowledge base articles

    • Next Page