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" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.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.
Related Links
Happy Coding!
Access your files securely from anywhere
New to Zoho Recruit?
Zoho Developer Community
New to Zoho LandingPage?
Zoho LandingPage Resources
New to Zoho Survey?
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Bigin?
Topic Participants
Maadhari M
Pablo Silva Osorio
Acezu Shih
Pheranda Nongpiur
Sunderjan Siddharth
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 areKaizen #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 achievedKaizen #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
New to Zoho TeamInbox?
Zoho TeamInbox 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
Design. Discuss. Deliver.
Zoho Show Resources
Get Started. Write Away!
Writer is a powerful online word processor, designed for collaborative work.
Zoho CRM コンテンツ
-
オンラインヘルプ
-
Webセミナー
-
機能活用動画
-
よくある質問
-
Ebook
-
-
Zoho Campaigns
- Zoho サービスのWebセミナー
その他のサービス コンテンツ
Nederlandse Hulpbronnen
ご検討中の方
Recent Topics
CRM Related list table in Zoho analytics
In Zoho Analytics, where can I view the tables created from zoho crm related lists? For example, in my Zoho CRM setup, I have added the Product module as a related list in the Lead module, and also the Lead module as a related list in the Product module.Option to Customize Career Site URL Without “/jobs/Careers”
Dear Zoho Recruit Team, I hope you are doing well. We would like to request an enhancement to the Career Site URL structure in Zoho Recruit. In the old version of the career site, our URL was simply: 👉 https://jobs.domain.com However, after moving toZoho CRM for Everyone's NextGen UI Gets an Upgrade
Hello Everyone We've made improvements to Zoho CRM for Everyone's Nextgen UI. These changes are the result of valuable feedback from you where we’ve focused on improving usability, providing wider screen space, and making navigation smoother so everythingSay Hello to Telephony in Zoho FSM
Zoho FSM now brings complete telephony support so your team can manage inbound and outbound calls without switching tabs. Faster responses, smarter routing, and total call visibility—all in one place. Choose the telephony setup that works for you Zoho’sZoho Sign - Zoho CRM extension upgrade
Hi everyone, We've updated Zoho Sign extension for Zoho CRM with significant internal changes. Impact on existing Zoho Sign extension users Users using the extension without customization If you are using the integration without implementing Zoho Sign'sSent mail sort by date disappeared
Hello, We used to be able to sort the emails by date in the sent folder, but this feature has recently disappeared. Can we bring it back?When will it be possible to edit Subform records via either views or tabular reports?
Hey there, data maintenance often requires mass update of quite a lot of records. While this is a piece of cake via either List view or Zoho sheet view, the same cannot be carried out for subform records yet. When one of the two options will be made available?E-Invoicing in Belgium with Zoho Inventory
Starting January 1, 2026, Belgium is introducing mandatory electronic invoices (e-invoicing) for all B2B transactions between VAT-registered businesses. Invoices and credits notes must be exchanged in a prescribed digital format. How E-Invoicing WorksEmployee ID is not correct in get records api V2 for leave
Hi Team, We are facing an issue when calling the Get Records API V2. The employee.id returned in the response is not the actual employee record ID in Zoho People. As a result, our integration is forced to make an additional Get Record API call for everyFormatting Mailing Labels
I want to use the "Print Mailing Labels" function on the drop down list, but I am not seeing a way to change the formatting on the mailing labels. At the moment, the information that appears on the mailing labels ARE NOT mailing addresses, but randomZoho People. Updating TabularData
I am trying to update tabular data in the record. I always have the same response. I have checked many times. Section ID is correct. May be something wrong with request structure itself. Can someone help me. Body content type: form urlencoded query paramsCanvas View - Print
What is the best way to accomplish a print to PDF of the canvas view? Latest update (27th November 2025): We are excited to announce that the Canvas Print View is now available! We encourage you all to try it out and share your feedback with us. LearnNew to automation - please help
Hi there! We are new to automations in Zoho. We built out one automation campaign and it seems to be firing off for some people but others not. Please advise what's the best practice or if anything we should tweak. Thank you so much!E-Invoicing in Belgium with Zoho Billing
Starting January 1, 2026, Belgium is introducing mandatory electronic invoices (e-invoicing) for all B2B transactions between VAT-registered businesses. Invoices and credits notes must be exchanged in a prescribed digital format. How E-Invoicing worksZia Conversation Summary: Context at a glance for every customer interaction
Hello everyone! Every customer conversation tells a story—but in CRM, that story is rarely in one place. A sales rep moving between multiple leads has to reopen long email threads, check call remarks, and revisit meeting notes just to remember what wasHow to set a fixed width of column/cells
Is there a way to set a 'fixed' width for cells in zoho sheet? I know how to adjust the size of the colums.... but after I past a large block of text into a cell, it expands the cell size again. (yes, I have turned off word wrap) How can I set a fixed width so the cells don't change size each time I add data to a cell? Thanks.Cliq iOS can't see shared screen
Hello, I had this morning a video call with a colleague. She is using Cliq Desktop MacOS and wanted to share her screen with me. I'm on iPad. I noticed, while she shared her screen, I could only see her video, but not the shared screen... Does Cliq iOS is able to display shared screen, or is it somewhere else to be found ? RegardsWorkdrive Oauth2 Token Isn't Refreshing
I have set up oauth for a bunch of zoho apis and have never had a problem with oauth. With workdrive i am using the exact same template i usually use for the other zoho apps and it is not working. All requests will work for the first hour then stops soAdding Reports to Portals
Is there a way to add Reports to portals so only the user can see report templates relevant to them?Single Portal for Multiple Apps
Hello, I'm just getting started with Zoho and I'm very overwhelmed. I am currently using the free trial of Zoho One, but if I can figure it out, I intend to upgrade to the paid version. Zoho One, of course, gives me access to an entire suite of services/applications. One of the things I'd like to do is have a single place for clients (customers?) to log in and view current projects, invoices, contact information, etc. A single login for my clients. A single portal. I've come across documentation【開催報告】 大阪 ユーザー交流会 2025/11/20（木）Zoho CRM Plus 活用のアイデアとデータの“見える化”
皆さま、こんにちは。コミュニティチームの中野です。 11/20（木）に、大阪 ユーザー交流会を開催しました。本投稿では、その様子をお届けします。 当日の登壇資料などもこちらに共有しますので、参加できなかった皆さまもご参照ください。 （Zoho 社員セッションの登壇資料については、11/28(金)に開催予定の東京回の開催報告で共有いたします） 今年2回目の開催となる大阪 ユーザー交流会では、株式会社KDDIウェブコミュニケーションズ 山田さんによる Zoho CRM Plus の事例セッションのほか、「Zohosearch and Smart Bar both missing in Mail
One of the users on my account does not have the search bar at the top right or the Smart Bar at the bottom left of the desktop Mail app. Any ideas how to get those back?Contact custom field in layout
Good day, all, I have an "Extension" custom field in contacts, and would like to display the contact extension in the ticket layout, but I don't seem to be able to. What am I missing? Thanks RudyEvery rating counts: Shaping customer experience
We are back to that beautiful time of the year. It is the season to reflect, be thankful, and appreciate everything that has happened throughout the year. Thanksgiving is a time we connect with our family, friends, and relatives to strengthen relationships,Paging through API results. a major gap in your documentation.
There is no way for me. to get all of my data through a single API call. Typically REST APis have mechanisms for paging through API results. But the documentation for the API I am using: https://desk.zoho.com/DeskAPIDocument#Introduction Has no mentionHow to remove duplicate contacts
Custom Field for Subscription
Hi, I can't find a way to add a custom field (to contain a license key generated from our software) against a subscription? Is the only place to add this information in the Invoice module (as custom field for invoice)? When a customer views his subscription via the customer portal, there appears no way to display a license key for them? The invoice is not the natural place to store a license key for a particular subscription, so where else can this be stored and displayed?Custom View and Custom Fields on Zoho Books
Hi, I have some custom fields on Estimates and Invoices. I also use Custom Views so I can have a lot of information at a glance. I want to include my custom fields as columns in my custom views of estimates / invoice, but it looks like is not possible.Cannot Access Subform Display Order in Deluge
As highlighted in this community post, we still have to deal with the significant limitation of not being able to access the user-sorted order of subform rows through Deluge. This creates a major disconnect between the UI capabilities and backend automation,Dropdown data depends on filters in another field.
In my quote form I have a lookup field called Reseller that pulls from Accounts. I would like it to pull from Accounts, but only those accounts with an account field 'Type' where that is 'Reseller'. Does anyone know a way to do this? Similarly, I'd likeIs it possible to adjust the web browser tab title (when a ZoHo Desk ticket is opened)
Hi All, When I open a ZoHo Desk ticket in a web browser, the tab title (text that appears at the top of the browser tab) uses the logic: *company icon picture* (xxxx) #ticket number - company name See below (highlighted in red) for reference. CompanyAdd Attachment Support to Zoho Flow Mailhook / Email Trigger Module
Dear Zoho Support Team, We hope you are well. We would like to kindly request a feature enhancement for the Mailhook module in Zoho Flow. Currently, the email trigger in Zoho Flow provides access to the message body, subject, from address, and to address,Collections Management: #7 Common Mistakes during Payment Collection
Payment collection may appear straightforward in most cases. Still, as your customer base expands and transaction volume increases, it becomes clear that even small inefficiencies can lead to delayed payments, increased support load, or even revenue loss.Recruit paid support?
Hi all, Could anyone who has paid support package advise if it provides value for money with regards to support response times? Exploring the idea as unfortunately when we have faced issues with Recruit it has been a 7+ day timescale from reporting toUnusual activity detected from this IP. Please try again after some time
When i try to create new addresses on my account i am getting this error, it has been 24 hours now and i am still getting this error can anyone helpRead webpage - MSXML2.ServerXMLHTTP
I have the following VBA script, put together from various sources (mainly zoho forum/help/support, so it once worked, I guess): private Sub GetListOfSheets() Dim url As String Dim xmlhttp As Object Dim parameters As String Dim html As String range("B1").valueSortie de Zoho TABLE ??
Bonjour, Depuis bientôt 2 ans l'application zoho table est sortie en dehors de l'UE ? Depuis un an elle est annoncée en Europe Mais en vrai, c'est pour quand exactement ??Rename Record Summary PDF in SendMail task
So I've been tasked with renaming a record summary PDF to be sent as part of a sendmail task. Normally I would offer the manual solution, a user exports the PDF and uploads it to a file upload field, however this is not acceptable to the client in thisLimitation with Dynamic Email Attachment Capture
I've discovered a flaw in how Zoho Creator handles email attachments when using the Email-to-Form feature, and I'm hoping the Zoho team can address this in a future update. The Issue According to the official documentation, capturing email attachmentsRecruit API search
Hi all, Attempting to call the search api endpoint from Postman using the word element as mentioned in api docs Search Records - APIs | Online Help - Zoho Recruit When making the call to /v2/Candidates/search?word=Saudi receive response of { "code": "MANDATORY_NOT_FOUND",Next Page