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

    • Contact Segments with multiple CRM modules

      Hello, We have a somewhat unique setup in our system involving various components: Contacts, Accounts, Deals, and a couple of custom modules named Properties and Audit Logs. We're looking to implement a notification system via SMS and Email specifically

    • Cannot reorder fields in Page Layout in Expenses and Purchase Requests

      It is very inconvenient that the custom fields in Page Layout cannot be re-ordered. The only way is to remove the fields and re-create them; however, it is impractical. This would affect the reports and dashboards we are having. Not able to re-order the

    • Having issues with creator, flow and calendar

      So I have made a creator app when engineer puts in the date and time for when they are going to out on site , this then passes the calendar data to flow and then should populate the inputed data to the calendar. So If use${system.zf_current_date_time}.

    • Problem when forwarding emails

      When I want to forward an email received through Zoho, the layout changes: Buttons are cut Pictures change size Text changes alignment (left/right/center) Is this a common problem in Zoho? Thank you, Suzannah 

    • View Audit Trail field

      The Audit Trail feature is great, but its data is only available to admin users. It would be really great to have a system field "Audit trail" that we can add to the detailed view of a record. This would allow supervisors, directors and etc. to quickly track what changes have been done by whom for each record. It is a current feature from a client of mine and while it's probably possible to hard code it, since this data is already available in Zoho, I would be surprised to hear how hard it would

    • Recuring bills payments

      I've entered recuring bills that are auto drafted from my account monthly. Can I set up the recuring payment or do I continue to manually do it monthly?

    • Automatically assign Contact Roles to a Deal

      Hi guys, Is there a way to assign multiple Contact Roles to a Deal via a workflow or similar? Thanks

    • on submit of creator form then record is create in Zoho crm purchase module then on automatically task want to create in the crm

      on submit of creator form then record is create in Zoho crm purchase module then on automatically task want to create in the crm

    • Zoho CRM Webinar – Automate everything across Customer Journeys in CommandCenter 2.0

      How efficient is your current CRM automation setup? As customer journeys become more dynamic, it's common for data and actions to get scattered across teams and modules. This leads to broken processes and inconsistent customer experiences—especially across

    • Changing employees email address

      How do I change an employee's email address? I am an administrator on the account but it says that I am "not allowed" to do it?

    • MULTI-SELECT LOOKUP - MAIL TEMPLATE

      Dear all how are you? We need to insert data from MULTI-SELECT LOOKUP in a email template, but I can't do that, when I'm creating the template I can't find the field to insert it. is there any solution? PVU

    • Changing the owner of a call

      Am I correct in my conclusion that I cannot change the owner of a call in Zoho? The field does not show up in the screen, nor can I make it show up as the systems does not give me that option. I cannot "mass update" it either. I tried it, but Zoho refuses to change the name of the owner. Please help out: how do I change the owner of a call.

    • Global Fields

      Just like Global Sets for Picklists, we would like to have global fields for any kind of field. Three things that should be saved globally: 1. The Existence of the field 2. The Name and 3. Association with a module should be set up in a respective place

    • Introducing Screen Share with Audio

      Share your entire screen or just the chrome tab with audio for more engaging presentations. Your audience will hear sound just like you do, whether it's a video, demo or any other content. This is ideal for training sessions, team meetings, and client

    • Need Help Preventing Overselling in Zoho Inventory

      Hi fellow Zoho Inventory users, I'm reaching out for advice on managing inventory control in our growing business. We've recently encountered situations where sales orders get confirmed despite insufficient stock, creating operational challenges. Our

    • Tip #53: Populate and search values from tables using Table Lookup

      Qntrl supports tables to store organization-related data and access it easily. Data stored here can be populated and displayed in orchestration using Table Lookups. This helps organizations list sizeable data in dropdown or multiselect dropdown fields

    • Introducing more AES digital signature options in Zoho Sign

      Greetings! Zoho Sign has continually strived to partner with trust service providers across the globe to give you complete security and confidence, so you can e-sign documents no matter where you are. We've recently partnered with IgniSign, a trust service

    • Shuffling between one note to the next

      I usually start all my notes per interaction with a contact with the date and then a little detail. But when I search for it it only see a small portion of the note and can't immediately tell which contact its associated with. can we make the note content

    • Important Update: TRAI Mandates New SMS Header Format

      Hello everyone, We have an announcement regarding a new regulation by the Telephone Regulatory Authority of India (TRAI) that affects all application-to-person (A2P) SMS services. Starting on May 6, 2025, TRAI has mandated that telecom service providers

    • Preview generation in progress for days

      I uploaded a video file to Zoho webinar. The file has been showing Preview generation in progress for days. Pls help, why is not approved?

    • Workdrive Upload Notification

      Is there a way to be notified when someone externally has uploaded files to a folder? The "Unread" tab is really worthless because it shows all files from every directory on the system. I just need an email (or bell at worst) that says "someone has uploaded into <foldername>".

    • Workflow for "Expenses" module?

      Hi there, over the last 2 years, Zoho Expense has seen tremendous growth and we are happy with it. But, sometimes it is frustrating to see things are being implemented halfheartedly, or so it seems. For example, There is the possibility to create workflows

    • Markup instead of discount??

      Is it possible to have the discount field on an invoice or estimate be a markup instead? It's the very same functionality that I am looking for - to be able to markup an individual item by either a $ or a % and have that cost added (instead of subtracted) to the item cost.  Currently, I use the tax feature to accomplish this, but it's very awkward to have "Markup 15%" listed after the subtotal. Plus, if I want to markup items at different rates, I end up with several "markup" lines in the totals

    • Allow Mapping of Zoho Desk Knowledge Base Categories to Multiple Departments in Zoho SalesIQ

      Hello Zoho Team, We hope you're doing well. We would like to request an enhancement to the Zoho SalesIQ integration with Zoho Desk, specifically regarding the way Knowledge Base (KB) articles are mapped and displayed across departments. Current Limitation

    • Announcing new features in Trident for Windows (v.1.27.4.0)

      Hello Community, Trident for Windows is here with exciting new features to elevate your communication and enhance productivity. Let’s dive into what’s new! Smart Sign-in. You can now sign in to Trident with Smart Sign-in. With this new addition, you can

    • Add Lookup Field in Tasks Module

      Hello, I have a need to add a Lookup field in addition to the ones that are already there in the Tasks module. I've seen this thread and so understand that the reason lookup fields may not be part of it is that there are already links to the tables (

    • Time Entry : Auto fill fields Hours minutes seconds

      Hello world, Do someone know a script (for workflow rules) which fill automatically fields hours spent, minutes spent, seconds spent when we fill Executed time and End time Formula should start from (End time - Executed time) Thx in advance

    • Zoho Forms - edit the settings of the Zoho CRM field to change the integration with CRM

      I've created a Zoho CRM field in my form to pre-populate selected CRM details into the form, following the instructions here https://help.zoho.com/portal/en/kb/crm/integrations/zoho/zoho-forms/articles/zoho-forms-crm-integration#Step_2_-_Add_Zoho_CRM_Field_in_the_form

    • Ability to add notes to an appointment and add notes/attach docs to a consultation

      As an idea for the future, it would be helpful to be able to add notes to an existing appointment--there is a place to add notes for the customer, but I don't see one for the appointment. It would also be helpful to be able to add notes or attach documents

    • Im trying to white list domain dynamically in zoho desk extension

      Im trying to white list domain dynamically in zoho desk extension. But it show error Error: {errMsg: 'No entry found in plugin-manifest whiteListedDomains for requested URL'} syntax "config": [ { "displayName":"Shopify Admin API access token ", "name":

    • Zoho Payroll: Product Updates for India - May 2025

      This May, we are glad to unveil new capabilities in Zoho Payroll that simplify your payroll activities. Here's the list: Let Employees Choose Their Tax Deduction Method for One-Time Payments Calculate variable earnings based on percentage of CTC Carry

    • Bulk Update Tasks/Task Lists/Milestones

      Is there a way to bulk update tasks/task lists/milestones? We have several projects that are in the same template, and our staff complete them tasks at a time - and would like to go in an bulk update all related tasks/task lists/milestones at once. But you can't do this. I remember in an old version you could export your tasks, update the excel doc and reimport. But it doesn't seem like that option is available anymore. Can someone provide a solution/idea? Otherwise we are spending a lot of time

    • Sync failed: Invalid Date value

      Hi, I have a local .sqlite database. After importing one table through the Databridge, and produced my dashboards, I cannot sync. I get an error regarding the date column: [Line: 2 Field: 4] (2018-07-12) -ERROR: Invalid Date value The data found at the

    • Office 365 is marking us as "bulk"

      All of a sudden (like a couple of days ago) all of our customers who are on Office 365 are getting our mails in their junk email. This is not the case with Gmail or other random mail servers, nor between us. We got a 10/10 score on mail-tester.com. Also,

    • Zoho Assist

      Hi, We are using zoho assist unattended access in some windows server 2012 and recently the agent lets you connect but not let you do anything on the remote machine. Sometimes you can click on something but nothing happens. There's a issue with this new

    • Modify workflow from "ON CREATE & EDIT" to "ON CREATE" only

      Salut, Is there a way to easilly change my choice of trigger of workflow from on create & edit to on create only, or do I have to re-do the whole worklow from scratch ? Sylvain

    • Access custom modules via API?

      Is it possible to access a custom module in Zoho Inventory via the API? I can not find any reference to this in the API docs.

    • Welcome to the Zoho Service Plus community

      Hey everyone, We are excited to welcome you to be a part of the Zoho Service Plus community. Here's a quick overview of what Service Plus is all about and how the community can help us work together. What's Zoho Service Plus? Zoho Service Plus is a unified

    • Restrict Zoho Cliq Webinars and Announcements to Admins Only

      Hi Zoho Team, We hope you're doing well. We would like to raise a feature request regarding in-app announcements in Zoho Cliq, such as the recent webinar popup about the Cliq Developer Platform: While these announcements are useful, they are not always

    • Share Notebook with group created in Zoho One

      I have created a group in Zoho One for a section in my company. Is it possible to share a notebook with that Zoho One Group? Currently, it seems only possible to share to emails. Unfortunately for large teams, this will mean we are constantly having to

    • Next Page