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

    • Disallow CLOSE if tags field is empty

      I want to introduce a mandatory condition that NEW tickets (not prior closed tickets) cannot enter the CLOSED state without first having an entry in the tags field. Is there a way I can do this?

    • Central de Ajuda - Restringir visualização de tickets

      Estou tentando configurar o Zoho Desk para que determinados usuários dentro de uma mesma conta consigam visualizar apenas os tickets criados por usuários específicos dessa conta — e não todos os tickets ou apenas os seus próprios. Até onde sei, existe

    • Business Hours with lunch break

      Our business hours are: mon - fri 08:30 - 13:00, 15:00 - 18:30. How can I handle the lunch break? If I use 8:30 - 18:30 it obviously breaks SLA. Thanks

    • Ask the Experts 21: Power up your support game with Zoho Desk Automation

      " In every business, there are tasks to automate, Zoho Desk helps with features that integrate Assignments to manage tickets and teams to align,Macros for quick actions and workflows to streamline Contracts and schedules to hold things tight, Plans run

    • If leads are assigned to a person before 4:00 PM and the stage is "Fresh Lead", then an email should be triggered at 4:00 PM to all assigned users. If leads are assigned after 4:00 PM and the stage is

      If leads are assigned to a person before 4:00 PM and the stage is "Fresh Lead", then an email should be triggered at 4:00 PM to all assigned users. If leads are assigned after 4:00 PM and the stage is "Fresh Lead", then the email should be triggered the

    • Multiselect lookup in subform

      It would be SO SO useful if subforms could support a multiselect look up field! Is this in the works??

    • Tasks as calendar events? What about a way to verify a meeting actually happened?

      I'm not sure how to best ask this, but i'm looking to add some guard-rails into zoho for the end-user. However for guardrails to be effective they can't really add extra steps for the end-user. i.e. every step that's added for the user, is another place

    • Attachments should sync between Zoho Finance in CRM and Zoho Books

      It would EXTREMELY helpful and practical if the attachments added to an invoice via Zoho Finance in CRM synced with the invoice updates in Zoho Books. Currently, attachments to an invoice updated in CRM DO NOT appear as attachments when viewing the same

    • Introducing a new home page view and UI enhancements for Dashboards

      Hello everyone,  In CRM, the home pages provide a quick view of the various happenings in a business with the help of dashboards. The home pages also help to organize one's and the team's day's work. There are three views in the home tab: Classic User's

    • Call result pop up on call when call ends

      I’d like to be able to create a pop up that appears after a call has finished that allows me to select the Call Result. I'm using RingCentral. I have seen from a previous, now locked, thread on Zoho Cares that this capability has been implemented, but

    • Data Template Amending

      Hi, is it possible to remove data templates once you have applied them in Workdrive? Also, once I have added a new field to a data template can I mass update multiple files who have already been allocated that template and amend just that one added

    • Zoho Flow y subformularios de Zoho CRM

      Buenas tardes, En mi empresa vamos a empezar a usar los subformularios de zoho crm pero estos los voy a tener que rellenar con zoho flow ya que va a ser el encargado de rellenar dichos campos del subformulario. El problema es que a la hora de intentar

    • Recurring Invoices

      We are looking at moving our invoices to ZOHO Billing, I have started the trial period and like that I can et up for four different companies. The one feature we need which is mentioned in the documentation is Recurring Invoices so we can send our Rent

    • Implement Meeting Polls in Zoho Bookings

      Dear Zoho Bookings Support Team, We'd like to propose a feature enhancement related to appointment scheduling within Zoho Bookings. Current Functionality: Zoho Bookings excels at streamlining individual appointment scheduling. Users can set availability

    • Zoho Projects App update: Arabic and Hebrew language support

      Hello everyone! In the latest version(v3.10) of the Zoho Projects iOS app update, we have brought in support to access the app in RTL(Right to Left) languages (Arabic and Hebrew). Note: RTL is yet to be supported on the Calendar and Gantt charts modules

    • I want to cancel @mention group in the notes in Zoho CRM

      Hi Everybody, I want to prevent people from mentioning a specific group in notes in Zoho CRM. We have one group called Team Sales, and although we've asked users not to mention groups, they still mention the group name. My workaround is to change the

    • Kaizen #193: Creating different fields in Zoho CRM through API

      🎊 Nearing 200th Kaizen Post – We want to hear from you! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.

    • How to install node packages in Zoho Creator cloud functions

      I wanted to create some functions which requires node packages like axios, fetch, multer etc., How and where can i install the node packages in Zoho creator to use it in Zoho creator Nodejs function.

    • Session "Ask Me Anything" Zoho France - Le 26 Juin 2025 14h à 17h (en Français

      Chers Utilisateurs, Vous cherchez à mieux comprendre Zoho CRM ou Zoho Desk ? Nos experts seront disponibles pour répondre à toutes vos questions lors de notre session Ask Me Anything. Rejoignez-nous ici pour en discuter en ligne. Pendant trois heures,

    • Option to Crop Existing Agent Image in Zoho One Directory

      Hello Zoho Team, We hope you're all doing well. We would like to request a small but useful enhancement to the Zoho One Directory. 🎯 Current Limitation At present, the system allows cropping an agent image only during the initial upload of an agent's

    • Introducing Sub-Accounts in Zoho Books!

      Hello Everyone, Sub-Accounts is LIVE! Yes, you read it right. The much needed and most requested feature is now live in Zoho Books. The sub-accounts feature in Zoho Books will help you to classify your accounts further which will give you a more detailed view of your accounts while running reports. You can create sub-accounts for the below Accounts: Asset Cost of Goods Sold Expense Liability Fixed Asset Other Asset Other Current Asset Long Term Liability Other Current Liability Other Liability Other

    • Sesión "Ask me anything" Zoho en Español - 26 de junio de 2025, de 14:00 a 17:00 (en español)

      ¡Hola Comunidad! ¿Quieres entender mejor Zoho CRM o Zoho Desk? Nuestros expertos estarán disponibles para responder a todas tus preguntas durante nuestra sesión "Ask me anything". Puedes comentar este artículo y durante tres horas, nuestro equipo estará

    • UI Update: We've Reorganized Invoice Settings

      Dear users, We’ve reorganized invoice settings to offer you a streamlined and intuitive experience when managing your subscriptions. Starting from 2 July 2025, subscription-related invoice settings will be accessible from a new page called Billing Preferences

    • Marketer’s Space – Automate Subscription Management for CRM Contacts Using Workflows in Zoho Campaigns

      Hello, marketers! Welcome back to Marketer’s Space. In this week’s post, we’ll look at how to simplify subscription management using Workflows for contacts synced from Zoho CRM in Zoho Campaigns. There are multiple ways to assign topics to your contacts:

    • WhatsApp to shift to per-message billing from July 1, 2025

      Greetings Recruiters, If you’re using WhatsApp to connect with candidates through Zoho Recruit, there’s an important pricing change coming up that you’ll want to plan for. What’s changing? Starting July 1, 2025, WhatsApp is moving away from conversation-based

    • Implement full RTL support in Zoho Cliq, including text alignment and character positioning, regardless of the interface language.

      Dear Zoho Cliq Support Team, We are writing to request a significant enhancement to the current RTL language support within Zoho Cliq. Currently, while Zoho Cliq allows users to input text in RTL languages, the text alignment remains LTR, resulting in

    • Email Alerts with Affected Flow Details When Deprecating Modules in Zoho Flow

      Dear Zoho Flow Team, We would like to request an enhancement to the module deprecation process in Zoho Flow. 🧩 Current Limitation: Currently, when a module is deprecated by the Flow team: No email notifications are sent. There is no automated way to

    • are there Url parameters to group records in the report/view?

      There are URL parameters to filter records in target report.  Is there any way to group records in report by certain field, using URL parameters or embed report parameters? Or any other workaround, apart from creating second report for dofferent grouping?  Aim: I want to provide user a quick link to re-group embed report by different fields.

    • Setvalue() client script not working

      I have created a client script on the load the record(detail view page). I wanted to populate some default information in the single line field. for that I created the client script. below is the script: var field_obj = ZDK.Page.getField( 'Designation'

    • Power of Automation :: Automate Deal Status Update in Zoho CRM upon Project Completion.

      Hello Everyone, A Custom function is a user-written set of code to achieve a specific requirement. Set the required conditions needed as when to trigger using the Workflow rules (be it Tasks / Project) and associate the custom function to it. Requirement:

    • Leverage the power of Zia (AI) to create Marketing Projects in Zoho Marketing Plus

      Hey everyone, Zoho's advanced AI assistant, Zia, now works with OpenAI to offer personalized marketing activity suggestions for your marketing projects in Brand Studio. With information such as your campaign's objective, duration, marketing channel types,

    • Use Zoho Flow to Supercharge your Zoho FSM Integrations

      We are thrilled to announce that Zoho FSM is now included in Zoho Flow - Zoho’s powerful no-code integration platform. With this, you can connect Zoho FSM with your most-used applications—without requiring technical expertise. What does this offer? Zoho

    • Zoho Flow triggers not working

      Hi , I have set up a flow which triggers when a new record is created in a Zoho Creator app. This flow works great when I initiate the flow with  "test and debug". However the flow does not trigger in live mode.  I have tested all the connections used

    • Can you sync your Apple Calendar with Bigin Activities/calendar?

      I've searched everything I can find and nothing is coming up... I've got a number of things in my calendar for the future, and it would be easiest if I can sync between them to update my availability for my booking page (also syncing the other way would

    • How to track salesiq on google analytics without GTM

      Hello! We had to move the installation of the SalesIQ widget from GTM to directly do it in our wordpress site. The SalesIQ widget was being blocked by Adblockers which caused a lot of our visitors to not be able to see it. This issue was fixed from deleting

    • Custom Module Count

      We are on Zoho One. CRM says that the three modules which support Zoho Sign integration are "custom modules." Do these count against the 200 custom modules permitted by the One access to "enterprise-level" CRM features?

    • Marketer's Space: Bookmarks by Zoho Campaigns

      Hello Marketers, In this week's Marketer's Space, we'll look at a simple yet powerful feature that makes a big difference in your workflow: Bookmarks. Bookmarks is a built-in feature in Zoho Campaigns that enables you to create a personalized library

    • I need a custom AI Chatbot to be integrated with ChatGPT to Handle Customers inquiries

      I need a custom AI Chatbot to be integrated with ChatGPT to handle Customer inquiries, and save the data to Zoho CRM as a Leads, Also to schedule a demo with clients and more options

    • User Management > Agents request

      I have a few suggestions for the Agent page: 1) Please add a way to filter Full agents. The list currently shows Light agents as an option but sometimes it would be helpful to view only the full agent licenses or non-light agent. 2) Add the ability to

    • Mandate Assessments in Zoho Recruit's Candidate Application Form

      We're excited to announce the Include Assessment option for the Candidate Application Form, which lets you display the pre-screening assessment associated with the job opening along with the application form fields. This ensures that every candidate applying

    • Next Page