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

    • Creator portal user do not accept user password upon creation

      I placed a request at Zoho and they are working on it, but I try here too in case somebody has already the answer: Today, sudently, my customers that tried to join the portal were not abble to enter a valid password, even if the password had all the necessery

    • CRM Campaign -> Create Campaign ->Zoho Campaign. Add to Sender Address dropdown options (2024/08/01)

      I'm trying to add different Sender Address and Reply-to Address options to a new campaign created through Zoho CRM. There is one sender and reply-to address available and it is not the account I'm logged in with. The dropdown options do not match what

    • Create new ticket when another specific ticket is closed

      Hi. How can I create a ticket when another specific ticket is closed? So I have a ticket with subject 'Create agreement' connected to the contact of a customer. As soon as I close this ticket, I want that a new ticket is created (connected to the same

    • How can a Zoho Desk Admin access restricted files?

      How can a Zoho Desk Admin access restricted files from Zoho Desk that are not displayed to agents on tickets due to file type restrictions?

    • Need to bundle based on inventory stock not accounting stock

      Cannot create a bundle / composite item until a bill has been received, even if there is available stock due to an item receipt. This should be changed as it is required to make a bundle and invoice the customer before the vendor has billed us.

    • Can we make Transfer Orders based on Physical Stock?

      We are a manufacturing company and prefer to manage stock in "Physical Stock" mode. But if we don't have enough available quantity in "Accounting Stock", we couldn't make Transfer Orders, right? Is there any work around with this issue?

    • Why is my Lookup field not being set through Desk's API?

      Hello, I'm having trouble setting a custom field when creating a Ticket in Zoho Desk. The endpoint I'm consulting is "https://desk.zoho.com/api/v1/tickets" and even though my payload has the right format, with a "cf" key dedicated to all custom fields,

    • Ticket template - Send email to multiple contacts

      Is it possible to set up a ticket template with multiple contacts selected to receive an email, rather than just one contact as the default? We use Zoho Desk to send an email report to a group of contacts every day, and have to manually add each email

    • Zoho desk domain mapping not working

      Hi, I have followed this knowledge base support from your zoho site: https://help.zoho.com/portal/kb/articles/support-customers-from-your-own-domain-domain-host-mapping . First created a sub-domain(support.website.com), then went to zone editor to point "support.website.com" to cname desk.cs.zohohost.com . But it won't work out. What did I lack? Please I need it very much. Please see images below of the result: Please see below images of what I did: 1.)  2.) 3.) Hope to hear from you soon.

    • Zoho Analytics pulling data from Zoho Sheets and Zoho Forms

      It would be smart to have Analytics import data from Zoho Sheets or Forms. 

    • Exporting Presentations with Embedded Integrations

      I am embedding Zoho Analytics charts and tables - how can I export the presentations so that the embedded images show ? At the moment it just shows broken images . *note* I do not need the exports to have the live data or links - just a snapshot of what

    • Embedding Zoho Analytics - is the data always 'live' ?

      When embedding "live" Zoho Analytics data into a template with the intention of creating a monthly presentation - how are the embedded filters saved ? When a filter is applied to a presentation from a template is it then fixed for sharing or will it always

    • Zoho Flow Doesn't Detect Desk Ticket Custom Field Change

      I have a Flow that is configured to be triggered when a custom field on a ticket changes. I also have a Schedule in Desk that runs a script that changes the custom field. When I change the custom field manually in the Desk interface, the Flow runs as

    • Weekly Tips: Track Email Engagement with Read Receipts in Zoho Mail

      While email is a convenient and widely used way to communicate, it doesn't offer the immediate feedback you get from face-to-face conversations or phone calls. When we send an email, there is no way to know for sure if the recipient has acknowledged its

    • Reusable Variables

      I’d like to know if there’s a way to store variables in Zoho Analytics that I can use in metrics or calculations. For example, I have a Currencies table that stores the value of different currencies over time. I’d like to use the value of the US dollar

    • HTML Code + Writer Documents

      Hello, I am in the process of writing a couple of documents in Writer. Both document will have 2 versions each. One version being a freebee that perspective clients can download from my website. The other version will be a paid version, and additional

    • Audit Log: Detailed View and Export for Better Tracking

      Audit log tracks all the events or actions performed by the users and displays them in a sequential order. By default, all users who have admin access can view the audit log. We have added new features to the audit log that will enhance the user experience

    • Display All Admin Roles in Zoho One Admin Panel

      Hi Zoho One Team, I hope you're doing well. Currently, in the Zoho One Admin Panel, we can see Org Admins and Service Admins assigned to specific applications. However, admins assigned at the organization level for various Zoho apps (such as Mail, Cliq,

    • Enable users to create and edit presentations in your web app using Zoho Office Integrator

      Hi users, Did you know that your users can create, edit, and collaborate on presentations from within your web app? With Zoho Office Integrator's embeddable presentation editor, you can easily add these capabilities. Here are the highlights: Create presentations:

    • I can buy a Domine

      I need assistance with an issue I'm experiencing. Whenever I attempt to purchase a domain, I receive a message that says, "We ran into some trouble. Please try again later." I would greatly appreciate any help you can provide. Thank you. Please refer

    • Zoho Customer Statements open item and NOT balance brought forward

      How do I set my customer statements to open item and NOT just the balance brought forward. I would like the customer to see all the invoices outstanding

    • Free Webinar! From click to doorstep delivery | Enhance your ecommerce fulfillment process

      Free Webinar! From click to doorstep delivery | Enhance your ecommerce fulfillment process April 24, 2025, 12 p.m. EDT As your business grows into the ecommerce sector, so do the complexities of fulfillment. From managing real-time inventory to handling

    • Zoho Books Invoice Enable Payment Gateway with Deluge

      I am using this to create an invoice record in zoho books from zoho crm invoices. I want to add the ability to enable online payment gateway for "stripe".  I can not seem to find one article online on how to do this.  Can someone help? invoice = zoho.crm.getRecordById("Invoices",id);

    • Calculating Project Margins and Revenue per Hour in Zoho Analytics Using Data from Zoho Projects and Zoho Expense

      Hello, I would like to know if it's possible to use Zoho Analytics to calculate taxes and margins for the projects available in Zoho Projects, while also including the expenses recorded in Zoho Expense. I’m looking to build a dashboard that calculates

    • Having issue adding email account

      Hi Sir/Madam, I having an issue adding an email account (user and group). We have two organization but I am getting an error while adding the account in both User and group. Yet the account is not there. See attached.

    • UNEXPECTED RESPONSE CODE: 400"

      Getting this on all new flows created with a Zoho Campaigns connection

    • Suburb Categorisation/value

      Hi All, I have a list of suburbs that my company services, they are categorised by value to the business using a letter grade (A,B,C,D). When a lead is created I want the workflow to check the project suburb and then assign the related grade to a new

    • Launching AI-backed product recommendations for ecommerce stores

      As Zoho Campaigns steps into its 11th year, we're taking our first step towards artificial intelligence as part of our ecommerce module. Your emails—be they regular or automated— are equipped to carry unique and targeted product recommendations based

    • Add Custom Text Fields as a component in Dashboards

      Hi Team Idea: Adding custom text fields as components in dashboards. This will allow those of us creating the dashboards to better segment the dashboard into sections allowing a better front user experience where we are showing different categories of

    • FSM API ERROR Code "OAUTH_SCOPE_MISMATCH"

      I am trying to create a contact via the ZOHO FSM API https://fsm.zoho.com/fsm/v1/Contacts I have followed the instructions of the API documentation to Authenticate and Create a contact but I cant figure out what I am doing wrong. Bellow are the steps

    • TaskList at Bottom from API

      When I create a taskList from API the TaskList is always At the Top, I need it to be at the bottom. How can I achieve that?

    • Linkthread domain names - none available

      Hi I am trying to add our domain names but they do not seem to be available but I am pretty sure they would not be taken as yet. Does Linkthread recognise .com.au or .org.au domains?

    • Setting default values in CardScanner app

      We use the Zoho Cardscanner app. Is it possible to set default values. For instance for "Lead source" to set the default value to "Exhibition". Now we have to manually select that for every card we scan.

    • Custom Fields like Discount

      Hi, Is it possible to make a custom field that acts like the discount field in quotes? I would like the option to have the field pop up exactly like Discount but instead of subtracting money it adds money (shipping cost in this case). I would like it

    • "Unable To Join Group Call"

      When trying to join a group call within Trident on macOS, I get a popup that says "Unable To Join Group Call". No other explanation is given. Anyone invited to a call should be able to join at all times, even if the organizer has not joined the call.

    • Effective project development with integration of Zoho Desk and MS Azure

      Dear partners, We are happy to announce that you can now integrate your Zoho Desk account with Microsoft Azure DevOps. This integration provides an effective way to: Manage feature requests Collaborate with teams Streamline development processes Dispatch

    • No-reply email account without taking up a user license?

      I just upgraded our zoho mail account to the paid tier and purchases 7 licenses. When setting up our new users I can't add the 7th one because I have a no-reply email account created to be able to send automated emails from our server. How do I go about having an account like that without taking up a user slot? All it needs is outgoing mail, no receiving or anything else.

    • ¿Por qué no te puedes perder los Workshops de Zoholics 2025?

      Cada año, Zoholics reúne a cientos de profesionales, emprendedores y entusiastas de la tecnología para compartir ideas, aprender unos de otros y descubrir todo lo que el ecosistema de Zoho puede ofrecer. Pero si hay una parte del evento que realmente

    • Fetch Project's Task by Name

      Why is there no way to fetch a projects task by name? https://www.zoho.com/projects/help/rest-api/tasks-api.html#alink1 I have looked in the documentation but didn't find a way to fetch tasks by Task Name Am I missing something?

    • Error when adding an existing user to Zoho Project

      In the Zoho Projects Flow if an existing user is added to the project it results in an error There should be a way to automatically skip adding the user if it already exist in the Project instead of halting the whole Flow

    • Next Page