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

    • Add Attendees to Session months before the Event

      I need to manually add Attendees to Sessions right away for an event that's taking place in 6 months so that the Speaker can communicate with them in advance of the event. How can this be done?

    • Override Auto Number field?

      We are preparing to migrate from Salesforce. In Salesforce, we auto-generate a unique number on our Opportunities (Potentials). If the Opportunity results in a contract, we use that unique number as the Contract number. There are some situations where

    • Switching hosts while meeting is occuring

      We had a team meeting in Zoho Meetings this morning, but the person listed as the host had to leave the meeting early. We looked for an option to set me to host, but didn't see the option, and we incorrectly assumed that it would be like Zoom in that

    • Refund Form Can’t Reverse “Bank Charges” Line — Throws Off Reconciliation

      Zoho, When we pay a vendor, the Payment screen lets us add a “Bank Charges” amount (we post a $1 processing fee there). Perfect. But on the Refund popup there’s no matching field, so the refund can only return the net expense. If our processor sends back

    • Trigger for Validation Rules

      Currently in Zoho CRM we can set a trigger for workflows, blueprints etc in a custom deluge function But Validation Rules are missing For example if I run a custom function to update a record, it bypasses the validation rules It would be really beneficial

    • ZOHO Desk blocking emails from creating tickets

      Hi We have been noticing some issues since last week ZOHO Desk is not creating a ticket which is still in our affiliate mail box.

    • how to install desk

      how to install desk

    • How to turn off ability to share Knowledge-base article with social networks

      Is there a way to deactivate the link at the bottom of a Knowledge-base article so that it can not be shared via Facebook or Twitter?

    • Automatically Hide Unauthorized Sections from Agent Interface in Zoho Desk

      Hello Zoho Desk Team, We hope you're doing well. We’d like to submit a feature request regarding the user experience for agents in Zoho Desk who do not have permission to access certain sections of the system. 🎯 Current Behavior At present, when an agent

    • Is there a way to prevent a user from removing a payment method on a live, recurring subscription?

      As it stands, if you allow users to remove payment methods, they can do so on live subscriptions. This leaves the sub without a payment method. The user should be able to REPLACE the card with a new one, but not remove all payment methods. We have had

    • Assistance Required: Report Export to Excel and WorkDrive Upload via Deluge

      I'm working on automating a scheduled workflow in Zoho Creator that needs to run weekly. The goal is to: Export a report from Zoho Creator in Excel (.xls or .xlsx) format, and Upload the exported file to a specific folder in Zoho WorkDrive using a Deluge

    • Useful enhancements to Mail Merge in Zoho CRM

      Dear Customers, We hope you're well! We're here with a set of highly anticipated enhancements to the Mail Merge feature in Zoho CRM. Let's go! Mail Merge in Zoho CRM integrates with Zoho Writer to simplify the process of customizing and sharing documents

    • How can I see the actual copy sent to the specific contact?

      I have setup a journey in Marketing Automation and created addition of contact in a specific list as the trigger, emails are sending to the contacts, but I can't see the actual copy sent to any specific contact in the list. Please guide me, where can

    • Client Script for Task Module

      When do we expect the client script for the tasks module?

    • Formula Fields inside of Blueprint Transitions

      We would like to have formula fields inside of blueprint transitions. We type in currency fields and would like to see the result inside of a formula field. Our use case: Send out a price for XY 1. Filling out cost fields 2. See gross profit

    • inventory based on bills and not physical stock

      Hello, I have noticed a very annoying issue with zoho books/inventory. I use composite items. If I have an sub assembly item on back order, I am unable to make up the composite item, even when I have received the goods and it is in my stock. I have to convert the PO into a BILL in order for the item to show as 'Accounting Stock'. The problem is that the supplier Invoice is not shipped with the goods, but can follow even a week later. So I have to make the bill have a 'dummy name and number' until

    • Using Zoho Inventory for managing Item compatibilities

      Use case: Using Zoho Inventory for managing (as an example) aftermarket car parts, where a single part can suit many makes, models and years. How do most businesses assign and manage compatibility for each part? Do ZI users typically do this using multi-select

    • Unable to enter manual journal entries in AR/AP.

      Hi there, i am facing some problem relating to AR/AP. I want to make some entries in AR/AP through manual journal. for example. some time I send cash 500 to Mr. A (Customer) for any purpose and then after 2 or 3 days Mr. A returned back 700 to me and

    • Questions regarding WorkDrive

      Here are my questions regarding WorkDrive: Does WorkDrive have a limit on the number of downloads? What will happen if a file is downloaded excessively? Does WorkDrive have any restrictions on download speeds? Are there any limitations on downloading

    • How to record tips from customers

      I run a cleaning service business and on occasion customers include a tip with their check payment. How can I record the amount paid for service and the tip separately? Any amount over the invoice is looked at as an overpayment and suggest a credit note

    • Multi-currencies in Zoho Books

      I'd like to request multiple currencies in Zoho Books. I have customers paying in USD, CAD, CNY. I need to bill customers in these currencies too. I can set up a base currency, and then set up a exchange-rate table to convert these currencies.

    • I want refund of Zoho standard subscription on WEB payment

      Hi, Kindly help to refund the WEB payment made on 13/07/2025 for Zoho standard annual subscription. I didn't find the software useful for my project. Regards

    • Is Conditional display of field(s) possible in a Canvas Customer Portal?

      Is Conditional display of field(s) possible in a Canvas Customer Portal? How?

    • View Linked Subscription on Invoice list

      When looking at the list of invoices in billing is it possible to see the subscription that an invoice is for. This would allow you to see if it's a subscription a customer is behind on, or they simply haven't paid a one time invoice.

    • Recording Credit Card Fees when Recording Payment for Bills

      It seems I am unable to record credit card fees when paying a bill. I pay close to 100% of my bills with a company credit card via online portals. I'm happy for the CC fess to be recorded as Bank Charges but it will not allow that field to be used if

    • Workerly/Zoho One Pricing

      Hi What is the pricing model that is suppose to be as a Zoho One user? If i use the services of a freelancers or temp workers (Sometimes for a few hours a week/month), I need to purchase a zoho one license for each of them as well as workerly licenc

    • DKIM

      I have my DKIM in Titan, which is another email service provider. I get this notification on my portal. What shall I do? ( Improve the deliverability of emails sent from Zoho Social by adding DKIM (DomainKeys Identified Mail) records to your DNS settings.

    • Show All Notes For A Single Record

      I would like to be able to view a list of all Notes for a particular record. We can add several (unlimited) Notes for the Leads, Contacts, Accounts and Potentials records. The subject line and some of the note content for up to 10 notes is visible on the first page. You can select the arrow to view additional notes in the list. I would like a button next to the New Note button that says View All. This would bring up a printable list of all notes listed in descending order by Modified Time (newest

    • Zoholics Europe 2025: Build Smarter with the Zoho Creator Low-code Workshop!

      Why should you attend? This year, Zoholics Europe 2025, Zoho’s official user conference, is your opportunity to connect directly with the teams behind the tools you use every day. Don’t miss one of the most requested sessions: dedicated, hands-on workshop

    • Assigning multiple roles to a user in Creator

      Hi I find we can assign only one role and permission to an user in creator. There is a requirement to assign multiple roles and corresponding permission to one user. Is there any solution or workaround for this? Refer the screenshot below

    • 【Zoho CRM】ウィザード機能のアップデート：セクション要素の追加

      ユーザーの皆さま、こんにちは。コミュニティチームの中野です。 今回は「Zoho CRM アップデート情報」の中から、ウィザード機能のアップデートをご紹介します。 ウィザード機能に新たに「セクション要素」が追加されました。 各ウィザード画面内で項目、テキスト、サブフォーム、ウィジェット要素などをより柔軟に整理できるようになりました。 セクション要素とは？ ウィザードの中で、関連する項目や要素をひとつの「サブエリア」 としてまとめられる新しい構成要素です。 セクション要素活用メリット 入力内容やプロセスによっては、より細かな構造や階層化が求められる場合があります。

    • Edit PDFs from within your web app using Zoho Office Integrator

      Hi users, We are excited to introduce PDF editing capabilities in Zoho Office Integrator. You can now open, edit, and collaborate on PDFs from within your web app—in addition to documents, spreadsheets, and presentations—and save them in your configured

    • Zoho Recruit > Job Opening Module> Editing, Deleting, Adding (Fields)

      Hello All In the Job Opening Modules How do i go about deleting the Positing Title or changing to Job Title or can i hide it from all? I want to add a Look Up User Field, however when i select the look up field i do not see that Can i have the industry

    • Can you create a lead without assigning an owner?

      Here is the question I have:   Is there a way I can create a bunch of leads without assigning it an owner?   What I want is for my salespeople to pick and choose their own leads without me assigning them..   right now all leads are owned by me because

    • Bug - Incorrect example in the documentation

      I found an issue in the Zoho API documentation. The example "Sample Request" on this page is incorrect — it shows the example for "Get Email Attachment Info" instead of "Get Email Attachment Content". Wrong example: curl "https://mail.zoho.com/api/accounts/12345678/folders/9000000002014/messages/1710915488416100001/attachmentinfo"

    • Power of Automation :: Dynamically generate Tasklists based on values selected in Task Custom Fields

      Hello Everyone, A custom function is a software code that can be used to automate a process and this allows you to automate a notification, call a webhook, or perform logic immediately after a workflow rule is triggered. This feature helps to automate

    • WhatsApp Enhancements to Boost Customer Engagement

      We're excited to introduce a series of powerful enhancements to the WhatsApp integration in Zoho FSM, making customer interactions faster, smarter, and more actionable—right from your Zoho FSM interface. Here’s a quick rundown of what’s new: Try It Out

    • Store reviews module just got smarter in Zoho Apptics

      Hello, Apptics community! Every app deserves better visibility in the marketplace, and reviews play a crucial role in improving your app's App Store Optimization (ASO), rankings, and credibility across stores. That's why we've rolled out a set of enhancements

    • Try CRM for everyone button in the way of workflow

      Please consider using the bottom bar for offers. Using the top bar for offers like "Try CRM for everyone" really gets in the way of my day to day workflow.

    • Include EVERYTHING in Language Files

      Hey, we are building out a system, that needs to be translated. The language files lack a few things though. 1. Blueprint names 2. Canvas View elements like tab names Please include everything into these files, otherwise it's not really a multi language

    • Next Page