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

    • Availability of the Custom Sort Order feature for Windows and Mac platforms??

      Notebook Team, I hope this message finds you well. I am reaching out to inquire about the current status and planned updates for the Custom sort order feature within your application. A year ago, it was mentioned that this feature is supported on iOS,

    • Have you checked your Email headers for DKIM Failure?

      Have you taken a look at your email headers for DKIM failures even with DKIM set up properly? I've had DKIM successfully set up for many months. My account currently shows Email Verified and Authenticated. Big green check marks. Email Relay is also showing

    • Wizard Form

      I would like the option to create a wizard that works when you create a record and contacts that are already in the CRM captured with a web 2 lead form (field data inserted in to the wizard).  Having the option to create up to 3/4 segments per screen

    • Pivot Table - Zoho Analytics

      I'm creating a Profit and Loss chart in Zoho Analytics using the Pivot Chart feature. While Net Profit can be calculated using the total value, I also need to calculate and display the Gross Profit/Loss directly within the chart. To do this, I need to

    • Fetch function not working for CRM Contacts

      I've created a flow that checks if a contact exists in CRM (based on form input), and if it does, then it updates one of the fields for the contact. In my test, the fetch function correctly identifies that a contact exists (based on email address), but

    • Clone a project

      To whom it may concern, I did a quick search of the forum and found nothing relating to this idea, so am posting fresh. The service that our company provides means that we follow an essentially identical process for each new job, and this includes the time frames for each stage. Ideally we would have a complete "template" project, with all the task lists and tasks in place with associated start dates, due dates (and by extension, duration) and - most importantly - the dependencies between tasks so

    • Add Sequential Processing Option in Zoho Flow

      Hi Zoho Team, I hope you're doing well. We would like to request a new feature for Zoho Flow: the ability to configure a flow to run in Sequential Processing mode — meaning, each instance of the flow waits until the previous execution is fully completed

    • Zoho Sign URL cannot be embedded in an iframe on the React side.

      The Zoho Sign URL cannot be embedded inside an iframe within a React application (or any web application) because Zoho enforces a Content Security Policy (CSP) that explicitly prevents iframe embedding from external origins. When attempting to load the

    • Zoho CRM Developer Series - Queries

      Hey everyone! We’re excited to invite you to our next Zoho CRM Developer Series focused on Zoho CRM Queries, happening on June 5, 2025 and June 26, 2025. Whether you're working on CRM customizations, integrating with third-party services, or just curious

    • Can Clients have Access to their record Attachments in Client Portal

      Is there a way to have allow clients access to attachments in their client portal? Attachments is currently hidden in the client portal and I cannot find a way to allow client access. Thank you!

    • Canvas: how can I edit theme?

      This says "Theme Colours", and I would like to edit theme colors (and styles ala CSS). How can I edit these "Theme Colours"? I'm a software developer, so just point me in a direction where I can alter code if needed.

    • CRM For Everyone - Bring Back Settings Tile View

      I've been using CRM for Everyone since it was in early access and I just can't stand the single list settings menu down the left-hand side. It takes so much longer to find the setting I need. Please give users the option to make the old sytle tile view

    • are Zoho Meeting and Zoho Webinar two separate products?

      hey all, i'm new to Zoho One and I'm trying to figure out what's the best platrofrm to do a Webinar for my subscribers. I see that Meeting have a Webinar option, but i see there's also a separate product (?) called Zoho Webinar. Are these two actually

    • Very Worst Experience = Screen sharing was Awful. There is a huge lag. I switched to Google meet, with same network speed, there is no lag at all.

      Very Worst Experience = Screen sharing was Awful. There is a huge lag. I switched to Google meet, with same network speed, there is no lag at all. Requesting you to work on your improvements. Otherwise this will give a very poor experience. Thanks,

    • Enable Native Zia Integration in Zoho Mail Without Requiring OpenAI API Key

      Hello Zoho Team, We hope you're doing well. We would like to request a feature enhancement for Zoho Mail's integration with Zia, specifically concerning the AI-powered capabilities like: Auto-complete sentences Generate email content Summarize email Currently,

    • Email policy not working?

      Hi, I created an email policy called "default", under which I created a "default" entry for the access items (the third icon with the key). I've set everything to "ON" (POP, IMAP, ActiveSync, etc.). But then when I create a new user and check it in Mail

    • One notebook is on my Android phone app, but not on Web or PC app.

      This problem started in stages. At first my phone was occasionally failing to sync. Then I noticed two things added to my Phone App. One was an existing notebook had a new cover, and the other was a new Note Card with an odd text in it. These were only

    • Admin Training

      Hello, I would like to get admin training on Zoho Projects. Has anyone had success in finding a class or resource for something like this? Are there any partners out there that offer this kind of training?

    • Why can't we change or delete the first page of a Zoho PDF?

      I've noticed that it's not possible to move or delete the first page of a Zoho PDF, why is that?

    • Latência

      Estou com bastante latência 200ms em São Paulo Brasil para o endereço mail.zoho.com, e email demora para carregar as vezes trava como está por ai ? segue print sabem se é normal ? ping

    • How to change the module for contact sync from Accounts to Accounts & their Contacts?

      Hi, My ZOHO CRM integration is broken and pushing the errors for sales orders and invoices, the error message is: "The customer associated to this record is not linked to module chosen in the current contact sync configuration." So, Now I'm trying to

    • Top Menu Disappeared from Blog Page

      Hi, Our top menu disappeared at Blog Posts page. However, it's still visible any other page on the website. I attached two screenshots, so it can be understood clearly. How can we bring back top menu? Thanks, K.

    • VOIP integration

      I emailed this question to rishi but never got a response. I notice when I mouse over phone number it has a link to launch into SKYPE. We dont use SKYPE we use Xlite SIP client. Is it possible to change that link to launch our client API? If so how? If not any plans to make that VOIP integration customizable?

    • Add "Ask Zia" Functionality for Report Creation in Zoho Desk

      Hi, How are you? We’ve noticed that Zoho CRM offers a very useful feature called "Ask Zia", which allows users to enter natural language prompts to generate reports quickly and easily using Zia's AI capabilities. Currently, Zoho Desk does not support

    • Compensation | Salary Packages - Hourly Wage Needed

      The US Bureau of Labor Statistics says 55.7% of all workers in the US are paid by the hour. I don't know how that compares to the rest of the world, but I would think that this alone would justify the need for having an hourly-based salary package option.

    • I can't use zoho in my personal computer

      Facing error on monitor Oops! An error occurred

    • My Zoho Account Not Working, Suddenly its stoped

      Hello Team, our company email account is not working, we are not receiving email. Website: www.urgentdubaivisaonline.com Email: social@urgentdubaivisaonline.com

    • MX verification

      Dear All I face a difficulties to verify MX records in my domain alfagrouptrading.sk it is since two days. records are correct and I am waiting for 48 hour I send email shown in the error message with no reply.in addition, it supposed to be propagated

    • I'm not receiving emails.

      Hello. I'm having an issue in which I am able to send emails using my zoho mail, but I seem to be unable to receive them. please help.

    • Change zoho email address

      I am displeased with the email address I created. It's too long.

    • Departments Limit

      There is a limit of departments that i can have on zoho desk?

    • How to create a form using both contact and account fields?

      I am sending a prefilled form from CRM with fields mapped, to update records in CRM. If I link the CRM field to the Contacts module, the Account Name field doesn't come up as an option in CRM. If I added it under Related Fields, my understanding it would

    • Boost your Zoho Desk's performance by archiving tickets!

      The longer your help desk operations are, the more likely it is to accumulate tickets that are no longer relevant. For example, ticket records from a year ago are typically less relevant than currently open tickets. Such old tickets may eventually lead

    • Are Zoho Help Center Email Notifications Customisable?

      Hi, I would like to find out if the Zoho Help Center email notifications can be customised to add our own styling and branding? These are the notifications that get sent when a client adds a new topic, adds a comment, signs up to the help center, etc?

    • Sharing and Converting Custom Reports Across Departments in Zoho Desk

      Hello, We initially started using Zoho Desk with a single department (Department "A"), which included multiple teams. Nearly a year later, we identified several limitations that led us to create three additional departments ("B", "C", and "D") with replicated

    • Delivery note from order or from offer

      Hello, in our company and in a lot of companies in Italy, the standard workflow is (in order): 1) Offer 2) Customer order 3) Delivery note. We can have also more delivery notes in one month. 4) Invoice at the end of the month from delivery note (so only

    • Sesiones 1:1 en Zoholics España 2025

      Una de las experiencias más valoradas por los asistentes a Zoholics son las sesiones 1:1 con nuestros expertos técnicos. Este 2025, las traemos de vuelta con aún más fuerza: cada entrada a Zoholics España 2025 incluye una sesión individual gratuita de

    • "The email sending domain must have an active and functional website so that we can proceed with the review."

      I've requested the approval of my account, and got the following response back: "The email sending domain must have an active and functional website so that we can proceed with the review." This is absolutely false. The website I have provided has been

    • Upload File via email

      Will there be an option to upload a file via email?

    • How to use milestones and task lists effectively

      I am trying to use Zoho Projects for my development process. My goal is to manage project status and provide reports to the customer. I am developing an app (2 apps to be precise: 1 for Android and 1 for iOS) I originally thought my milestones would be: 1. Analysis and Design 2, Android Development 3. iOS Development 4. Web Console Development 5. Quality Control 6. Deployment But then I needed a tasklist before I created a task so it was sort of duplicated with tasklists being a superfluos duplicate

    • Next Page