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

    • Rebrand your CRM with the all-new custom domain mapping setup

      UPDATES TO THIS FEATURE! 19th Jan, 2024 — Custom domain mapping has been made available for portal users in Zoho One and CRM Plus. 23rd June, 2023 — Custom domain mapping has been made available for all users, in all DCs. Hello everyone! We are elated

    • authentication

      We cannot connect via IMAP. We are receiving the following error: Error: You are yet to enable IMAP for your account. Please contact your administrator (Failure)

    • Bad User: Authenticated but not connected

      Zoho CRM cannot send/receive emails and it appears as if it may be an api configuration change either via Zoho or MS. Does anyone have information on how to fix this error message? I am admin on all my accounts. Zoho and MS are blaming each other.

    • Edit email address that appears on invoice

      Hi How do I change the email address that appears on invoices, it is showing the email address that i used to sign up to zoho with but I want to change it to another email address that we use for accounts. also is there a way to edit the position of a

    • Zoho Tasks - Add Sorting by Priority

      We are able to Group by and Filter by Priority but for some reason we can't Sort by Priority on the Task lists. Please allow for sorting by priority if the current view is not grouped by priority.

    • Zoho People > Candidate Form > error Editable Primary Lookup is needed to set add permission

      Hello All I have try to turn on the add feature in the candidate form It show the error Editable Primary Lookup is needed to set add permission What is missing from my side?

    • 6 time-saving tips for working with tables in Zoho Writer

      Tables have always been the best way to represent data. They help you structure and categorize information systematically and present them in a simpler way. While tables in Zoho Writer are easy to implement, some tasks might not be that obvious.  Here are some time-saving tips to help you work better with tables in Zoho Writer:    1. Insert Multiple Rows / Columns in a Table Adding more rows and columns is the most common action performed while working with tables. Instead of using the Table tab,

    • Add Built-in "Partner Finder" / "Contractor Directory" Tab to Zoho Desk Help

      Hi Zoho Team, We hope you're doing well. We would like to request a new feature for the Zoho Desk Help Center: A built-in, configurable "Partner Finder" / "Contractor Directory" tab or section, similar in concept to your own Zoho Partner Finder at: 🔗

    • Can't get sender adress to work

      Hi, I am having some trouble getting the sender adress to work for responses on tickets. I would like to configure a sender adress that is different from the zohodesk emailadress that is normally used. These are the steps I have followed: 1. Add a new

    • Question Regarding Deleted Reports in Zoho Desk Analytics

      Dear Zoho Desk Support Team, I hope this message finds you well. We have a question regarding the Analytics module in Zoho Desk, specifically related to deleted reports/dashboards. We would like to understand the following: Is there a recycle bin, recovery

    • Add an option to start zobot when user clicks the Chat with Us button

      I would like to have an option to start the zobot when user clicks on "Chat with us" button when chat widget is maximized that way visitors could see first the homepage and decide which channel they would like to use to connect, or to see the quicke help

    • Zoho Books - Feature Request - Provide "Show PDF View" toggle on Invoice records

      I have noticed it is possible to activate or deactivate the PDF preview on some records but not all. This would be very helpful on Invoices when a custom template is being used and the PDF preview does not represent the output file. Not available on:

    • Incorrect Handling of XLSX data

      Trying to import an XLSX schedule of bills into Zoho Books I ran across the problem of date formatting. To replicate: Build a CSV file with bill dates in whatever format you like and import it - this should work if you match the "dd/MM/yyy" etc. format

    • Disable Smart Filters By Default

      The smart filters "feature" is causing confusion for Zoho Mail users. New emails should be delivered to the inbox unless they have specifically opted to redirect them somewhere else. People don't understand that new emails might be waiting in a random

    • Adding Columns to Reports

      Hi, Is it possible to choose fields to be added as columns in the reports? Thank you.

    • How do I automatically assign the project owner for all tasks in Zoho Projects?

      I have been researching for days on how to automatically assign all the tasks to the project owner on creation of the project in Zoho Projects. I have been having to go in and manually change all the task owner from 'unassigned' to the owner of the project

    • CRM Kiosk - Action for GetRecords

      I have a Kiosk screen with GetRecords and want to use the selected records in a custom function. My particular case is to set a lookup value on the selected records. Generally speaking though, I want to work with the selected records in a function. I

    • Email for customer to provide payment information

      Is there a way for customers when you set up a subscription to get an email that prompts them to put in their billing information to start their subscription? Also, can you show the subscription in their portal?

    • Unable to display field label from a hidden Single Line Textbox in Description

      Hi folks, I'm unable to display my hidden field, e.g. ${zf:SingleLine4} , in my description. I'm pre-filling this hidden Single Line Text box via "Field Alias - Pre-fill URL" settings. I noticed that my decimal form fields work, e.g. ${zf:Decimal}, and

    • Lookup fields

      Is there any way to add Lookup fields to Zoho FSM -- I do not see the option but I see default lookup fields in different modules

    • Zoho Analytics - Bill Table

      Hi I am new to Zoho and mainly work in Books. Recently learned of Zoho Analytics and am exploring it to create reports that would be useful for me. For example, I want to create a bills cash forecast by week for cash flow planning. When I start to create

    • Creating a tax - amount table in Analytics

      Hi everyone, I would like to create a report in Zoho Anayltics that creates the tax and amounts in a table. I have been able to create a report that shows me all the tax accounts, but I can't get it combined with the amounts of the accounts. Is there

    • Is it possible to do custom domains on test accounts that use saml setups?

      In Zoho Billing, Is it possible to do custom domains on test accounts that use saml setups for the customer portal?

    • I’m facing an issue while trying to upload a PDF file to a custom file upload field within the Leads module via the Zoho CRM API.

      Hi Zoho Team, I’m facing an issue while trying to upload a PDF file to a custom file upload field within the Leads module via the Zoho CRM API. I am able to manually upload a PDF into this field through the UI. I am also able to upload files as attachments

    • No chat option

      Chat option is not available in Android app.

    • How to add custom templates in zoho sheets mobile

      How can I add custom templates in Zoho spreadsheet mobile?

    • Order Items

      Hi .. We have to implement orders with line but each line should have a separate record and not as a subform, does anyone have experience with that kind of solution what is the best practice for that kind of thing Thanks

    • Trello: Invalid Client - Client ID passed does not exist

      Hello, I am trying to authorize the Zoho CRM power-up in Trello but always land on the following page: I tried adding a trello client to the Zoho API console but this generated a different client ID to the one in the link of the page in the above picture.

    • Zoho Sprints - Q2 updates for 2025

      Hello everyone! We’re excited to share the latest updates from Zoho Sprints for Q2 2025! This quarter, we rolled out a few highly-requested features designed to enhance collaboration and time management across your projects. Here's a look back at the

    • CRM Email Insights Not Working - Status not Changing

      I used to be able to see if a customer opened/read an email in CRM, but I no longer get those status changes inside their record. I have everything enabled and I am sending the email from CRM. The experience center has the status' enabled as well. Any

    • The use of Ticket statuses

      When your support team mark a ticket "Closed" before I had a time to check what your team has done on the ticket - I have to consider this as you consider the ticket closed even if I dont consider it closed. Which automatically produce a negative sentiment.

    • "Replace" an existing version of CRM

      Hi all, I have a question, I saw an article about this once, but I now cannot find it. I am working with a client who has had their CRM in Zoho One built and extensively modified. But it is non-functional now, and rather than try and unpick the system,

    • Data Import From a private PostgreSQL RDS Instance

      Hello All, I feel like the problem I am experiencing has been seen before; however, I am having a difficult time finding any solutions. Hoping the community has some insights. I am trying to import data from a PostgreSQL RDS instance that is behind an

    • Assistance Required: Authentication Error When Sending Credit Application Form

      Hi, I'm encountering an error message that states: "Authentication unsuccessful – the user credentials were incorrect." This occurs when I attempt to send the credit application form to our customers. I've attached the form I’m trying to send for your

    • Missing Fields in Lead Conversion Mapping

      I’ve been using Zoho CRM since 2013 to manage leads and convert them into contacts and jobs. When I convert a lead to a customer, I create a new contact and a job. Previously, this process automatically transferred key information from the lead to the

    • Allow selection of select inactive users in User data fields

      Hello, We sometimes need to select a previous employee that has an inactive account in the User data field. For example, when doing database cleanup and indicating actions are done by a certain employee that weren't filled out when they were part of the

    • Connection to Zoho One

      My org has a Zoho One account, which includes Zoho Social. We are wanting to try linkthread. However, I want to make sure it is set up properly from an account perspective, as I have accidentally created Zoho accounts separate from Zoho One when I didn't

    • Ticket Automatically Created from Closed Chat

      Is there a way to prevent a ticket being create for every chat.... or at the very least have it automatically closed.

    • IMPORT INVOICES CSV

      Hi, Impossible to import invoices in Zoho books with a csv file. I have also tried with the template. My topic keeps getting closed but I did not get any answer Is there an issue with this fonctionnality ?

    • Related Lists in Email Templates

      Hi Zoho team, I would love to see a feature where related list information can easily be added to an email template (instead of mail merge). I have a client who books flights for their customers. They do this through a Flights module so all booked flights

    • Next Page