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!




    Access your files securely from anywhere

        All-in-one knowledge management and training platform for your employees and customers.






                              Zoho Developer Community



                                  Bootcamp
                                  Community
                                  Pricing
                                  Webinars
                                  What's New
                                  Integrations
                                  Contact Support
                                  Contact Sales
                                    Zoho Survey Resources
                                      Features
                                      Survey Templates
                                      Integrations
                                      Community
                                      iOS Mobile Surveys
                                      Pricing
                                      Android Mobile Surveys
                                      Insurvey Blogs
                                      Insight Blogs
                                      Tips & Tricks





                                                  Latest Feature Updates

                                                    • Desk Community Learning Series


                                                    • Digest


                                                    • Functions


                                                    • Meetups


                                                    • Kbase


                                                    • Resources


                                                    • Glossary


                                                    • Desk Marketplace


                                                    • MVP Corner


                                                    • Word of the Day


                                                    • Ask the Experts




                                                        Zoho SalesIQ Resources

                                                              • Sticky Posts

                                                              • Kaizen #198: Using Client Script for Custom Validation in Blueprint

                                                                Nearing 200th Kaizen Post – 1 More to the Big Two-Oh-Oh! 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.

                                                              • Kaizen #226: Using ZRC in Client Script

                                                                Hello everyone! Welcome to another week of Kaizen. In today's post, lets see what is ZRC (Zoho Request Client) and how we can use ZRC methods in Client Script to get inputs from a Salesperson and update the Lead status with a single button click. In this

                                                              • Kaizen #222 - Client Script Support for Notes Related List

                                                                Hello everyone! Welcome to another week of Kaizen. The final Kaizen post of the year 2025 is here! With the new Client Script support for the Notes Related List, you can validate, enrich, and manage notes across modules. In this post, we’ll explore how

                                                              • 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


                                                              Manage your brands on social media
                                                              Access Zoho Social

                                                                Zoho Pagesense Resources


                                                                    Zoho TeamInbox Resources

                                                                      Zoho DataPrep Resources


                                                                        Zoho CRM Plus Resources

                                                                          Zoho Books Resources


                                                                            Zoho Subscriptions Resources

                                                                              Zoho Projects Resources


                                                                                Zoho Sprints Resources


                                                                                  Qntrl Resources


                                                                                    Zoho Creator Resources



                                                                                        Zoho CRM Resources

                                                                                        • CRM Community Learning Series

                                                                                          CRM Community Learning Series


                                                                                        • Kaizen

                                                                                          Kaizen

                                                                                        • Functions

                                                                                          Functions

                                                                                        • Meetups

                                                                                          Meetups

                                                                                        • Kbase

                                                                                          Kbase

                                                                                        • Resources

                                                                                          Resources

                                                                                        • Digest

                                                                                          Digest

                                                                                        • CRM Marketplace

                                                                                          CRM Marketplace

                                                                                        • MVP Corner

                                                                                          MVP Corner







                                                                                            Design. Discuss. Deliver.

                                                                                            Create visually engaging stories with Zoho Show.

                                                                                            Get Started Now


                                                                                              Zoho Show Resources

                                                                                                Zoho Writer

                                                                                                Get Started. Write Away!

                                                                                                Writer is a powerful online word processor, designed for collaborative work.

                                                                                                  Zoho CRM コンテンツ



                                                                                                    Nederlandse Hulpbronnen


                                                                                                        ご検討中の方




                                                                                                                • Recent Topics

                                                                                                                • Task Details on task template

                                                                                                                  When creating a task template in settings that task details seem to be missing. Is it not possible to set the details of a task, such as the priority, type, reminder settings, and custom field values?

                                                                                                                • Building Toppings #3 -Testing and publishing Bigin toppings

                                                                                                                  Hey Biginners! In previous forum posts, we discussed what a Bigin topping is and explored the Bigin Developer Console's features. In this post, we're going to create a topping from scratch and discuss how to test and publish it. Our topping will automate

                                                                                                                • markdown files?

                                                                                                                  How can I import a markdown file into a note?

                                                                                                                • Mail to Zoho Notebook

                                                                                                                  In the Instuctiosn I faound as email add@notebook.app In my account I see add@eu.notebook.app What is correct please

                                                                                                                • Auto-Invite Users to Portals in Zoho CRM based on Conditions

                                                                                                                  Hello Everyone, You can now automate portal invitations in Zoho CRM with the new Auto-Invite users feature in Portal management. No more manually enabling portal access one by one. With this enhancement, you can automatically send invites for users to

                                                                                                                • Growth You can Count On: Zoho Billing's 2025 Journey

                                                                                                                  As we wrap up 2025, we’re reflecting on a year rooted in steady progress and meaningful growth for Zoho Billing. Every enhancement we have introduced was built to support scalable and reliable billing growth for your business. From launching the Enterprise

                                                                                                                • Need help with creating workflow with Bigin and Clickup

                                                                                                                  Can you please help me with this? I am trying to create a workflow in Zoho Flow wherein a bigin Pipeline deal moves to Decision Closing, it will create a task and subtasks in Clickup, under the condition/filter that the Deal name contains the word Social

                                                                                                                • [Webinar] Automate generation of wills, trusts, POAs, and other estate planning documents with Zoho Writer

                                                                                                                  Managing the lifecycle of the estate planning documents such as wills, trusts, and POAs, from client intake to final storage, can be complex and time-consuming. Join our live webinar to learn how Zoho Writer transforms this process by automating document

                                                                                                                • Create / Update Rule in TeamInbox when record is updated in ZohoCRM using flow?

                                                                                                                  I'm currently evaluating options and trying to work out if the possible scenario is possible; If a record in ZohoCRM is updated, take 2 of the fields from that - lets call them 'OrderRef' and 'OrderTo'. Using flow, if a record is added or updated, add

                                                                                                                • Plans to allow more columns of monitoring, and monitoring not only your own channels?

                                                                                                                  Are their any plans to allow more columns of monitoring, and monitoring not only your own channels? Here's why - I'm sure I'm not alone in that we sell other brands products, so not only am I interested in my own brand social channels, but also the social

                                                                                                                • Unwrapping the best practices for the Zoho Desk mobile app: Part 1

                                                                                                                  In focus: Empowering the field and frontline customer support representatives Imagine having to carry your computer everywhere to respond to customers, handle escalations, and update your process. This series presents you with efficient tips to handle

                                                                                                                • dealing with post dated cheques

                                                                                                                  Hi, can you help me please the best way to deal with this We sell an item of three months duration that is paid for with post dated cheques in monthly stages example - item is sold £3000 Cheque 1 is for £1000 due at time of sale (say Sept) cheque 2 is dated 25th of next month (Oct) cheque 3 is dated 25th of next month +1 (Nov) Now, with invoice number one it's simple - i send a standard invoice as usual But with the other two here's what i want zoho to do next month i want it to send an invoice on

                                                                                                                • Bug Report: "Name A-Z" sorting fails when Note titles start with an Emoji

                                                                                                                  Hello, I recently migrated from Evernote (~2600 notes across 23 notebooks). I use emojis at the start of my note titles for visual organization. The Issue: When I set the view to Sort by: Name (A to Z), the sorting logic breaks for any note starting with

                                                                                                                • Copy & Paste not working

                                                                                                                  I could create and save 10 new documents but when I go to copy and paste content (just text) into them, only 1 of 10 would save the content. It would appear to save the content but when I go back into the documents, they are empty.

                                                                                                                • Currency for Petty Cash

                                                                                                                  Currencies for Petty Cash should be available

                                                                                                                • editing/applying online payments

                                                                                                                  We have customers who pay part or all of an invoice and then cancel their service and want the payment as a credit to future work. It would be ideal if we could make it an excess payment and then void the invoice. I can't make it an excess payment because

                                                                                                                • Contacts per department

                                                                                                                  Hello, Is it possible to limit Contacts to a Department? Thanks

                                                                                                                • This site can’t be reached mail.zoho.com took too long to respond

                                                                                                                  In my office at any system, we couldnt able to login zoho email. it shows " This site can’t be reached mail.zoho.com took too long to respond". please fix it soon.

                                                                                                                • Can send email from zoho mail, but can't receive any.

                                                                                                                  Hi, My domain is sattvameditationresort.com. I've updated MX records with those of Zoho. But i can't send any mails to this email id from gmail. I have checked the MX status with MXTOOLS, its showing the correct entry either. The error is as shown below:

                                                                                                                • My domain did not activate

                                                                                                                  Hi, my domain (apsaindustrial.com.ar) did not activate, and the phone verification message never arrived. Please would you solve this problem? Thanks.

                                                                                                                • Host not found?

                                                                                                                  Howdy! So i'm trying to add my custom domain for with the mail server. I have 100% control of my DNS and have tried every single option (TXT, CNAME, and even HTML) multiple times, ensuring i did it properly, to no luck. I get the same error message every

                                                                                                                • Auto End Chats After Customer Inactivity

                                                                                                                  Hello Everyone, I may be missing something, but is there a way to auto-end chats when a customer has been inactive for an amount of time? I have several operators (we use a shared set of account with schedules for people... that's another story) but at

                                                                                                                • Report on opportunities showing only the last note added.

                                                                                                                  Hi I need to create a report that shows the most recent note added to each opportunity. This is so management can see what the latest update is according to the assigned salesperson. One workaround is to use the status field but this implies added manual work and mistakes as the salesperson would have to copy the existing status to a note before adding the latest status... otherwise the activity history would be lost. My current workaround is a report on Notes with Opportunities as the related module.

                                                                                                                • Please add Zelle as an online payment option

                                                                                                                  Hello, I would like to request Zelle be added to the online payment service providers for Zoho Invoice. Considering how ubiquitous Zelle has become as a way to pay people via the major banking institutions, I feel like many freelancers would benefit from

                                                                                                                • Getting Project Template List using the REST API

                                                                                                                  I am trying to confirm that I can use the REST API to create a project using a project template. The API documentation indicates this is possible by providing the Template ID, but it is not clear at all how to get a list of available Project Templates

                                                                                                                • How to display the CONTACT ID in the Contact page

                                                                                                                  Hi, I've seen this conversation below and it is exactly the same question I'm raising now, but unfortunately the last message is not solved https://help.zoho.com/portal/community/topic/show-contact-id-while-editing-contact-form I need to show the ContactId and I don't know how to do this. The last message included in the conversaton shows the way but not it is not completed. "I am sorry by default we do not have the option to show the record ID for the contacts in the field in a record. When you

                                                                                                                • How to change margins in templates

                                                                                                                  Hi, I'm new to Zoho Campaigns, and am trying to figure out how to adjust the margins within an email template.  The default margins make the text go all the way to the edges of the page.  Please advise.

                                                                                                                • Create Canvas list view templates from images powered by Zia

                                                                                                                  Currently available for all paid editions of Zoho CRM in the US, EU, IN, JP & CN DCs. Designing a personalized CRM interface just got even easier. In today’s fast-evolving digital landscape, AI is transforming the way we work by automating complex tasks

                                                                                                                • Painfully Slow Zoho mail

                                                                                                                  Since yesterday Zoho Mail seems to have starting functioning very slowly and having a few bugs. It's slow to open mails, slow to send, slow to change between email accounts. Sometimes clicking on a particular folder (eg Sent folder) stops working and

                                                                                                                • "Wrong password or login" Problem to configure Zoho on MAIL App on my Macbook

                                                                                                                  Hi, I'm having problems to configure my e-mail on my MAIL App(Macbook pro). My e-mail is hari@trespontoum.net Actually was working perfectly, and still working on my Iphone. My MAIL App prompt me that my login or password is wrong. I tried to change 3

                                                                                                                • "User already exist in your org"

                                                                                                                  Hello, I've just read a discussion about this issue, which didn't solve my problem. I'm trying to add the following emails: sales@kiss-my-boutique.co.uk returns@kiss-my-boutique.co.uk orders@kiss-my-boutique.co.uk I'm getting an error message each time I try and add them. None of them are primary or secondary emails and none of them have been created as users before. I know this as when I try and login and do 'forgot my password' all I get is an error message saying 'user invalid'. Please advise.

                                                                                                                • Operation Not Permitted

                                                                                                                  Hi, I have problem in adding user after verifying the domain but it seems like error appeared which is "operation not permitted". For your information, I had delete other domain before did it.

                                                                                                                • Email forwarding setup fails

                                                                                                                  I'm trying to set up email forwarding from my Zoho email to my gmail address. I followed the directions to set up email forwarding here: https://www.zoho.com/mail/help/email-forwarding.html. I did only steps 1-6. After doing this, rather than setting

                                                                                                                • Shopify store email issues- Not getting emails

                                                                                                                  Hi We have migrated from Microsoft outlook to Zoho back in March, we have a shopify store, the domain is hosted on namesilo, not shopify, I have seen some people here complaining about not getting emails from customers who fill out the contact form on

                                                                                                                • Invoice Discount Account

                                                                                                                  Is there a way to change the account used for Discounts applied to an invoice? The current Discount account (ZB native account) type is an "Income" type. I would like to change it to "Other Income", but that is not possible, I am assuming because it contains

                                                                                                                • Need Inactive accounts to be visible in Reports in Zoho Books

                                                                                                                  I N=need Inactive accounts to be visible in Reports in Zoho Books to do recons of the accounts but when i see the same they are not visible in the Accountant - Account Transactions report

                                                                                                                • javax.mail.authenticationfailedexception 535 authentication failed

                                                                                                                  Hi, I am facing 535 authentication failed error when trying to send email from zoho desktop as well as in webmail. Can you suggest to fix this issue,. Regards, Rekha

                                                                                                                • Phantom Opening Balance

                                                                                                                  While experimenting w/ creating a composite item, Zoho added funds to Petty Cash and added Bank Account equal to previous day's balance. I'm unable to undo the adding of funds. Attaching screenshots of both bank account and petty cash transactions.

                                                                                                                • Importing customer comments and multiple shipto addresses

                                                                                                                  I am evaluating Zoho Books and have most of my data imported with two exceptions: (1) Import customer comments - in my current system I have several comments of different types, and I need to bring these into Zoho. Preferably Books customer records, but

                                                                                                                • Detailed Account Reports - Add Running Balance

                                                                                                                  When one clicks into an account from a report (say P/L or Balance Sheet), the default reports have the Debit, Credit, and then the Amount. The Amount column (last one) is duplicate information. It would be far better and fit more peoples' use cases if

                                                                                                                • Next Page