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

    • WhatsApp integration isn't very useful at all (no workflow support)

      We have set up WhatsApp through Business Messaging. It works, but there appears to be no workflow support for messages that are sent/received! Without being able to trigger a workflow when an inbound message is received, my colleagues would have to manually

    • Zoho CRM 差し込み文書テンプレート if文

      Zoho CRM の差し込み文書のテンプレートを作成しています。 フッターにページが 2ページになる場合は、「次葉へ」と言う文字を表示したいのですが、ページ数による判断はできないのでしょうか？ 現在はサブフォームの行数で判断しているのですが、複数サブフォームを差し込んでいるので、合計何行で2ページ目になるのか把握が難しく、ページ数で判断できればうれしいなと思い、質問させていただきます。 ※行総数はワークフローでレコード保存時にカスタム関数でサブフォームの行数をカウントして数値を保存しています。

    • Record payment: Payment Mode vs. Deposit To and how to "connect" them!?

      How do we set up that when we choose:  "Payment Mode"= Cash, then "Deposit to" is automatically set to Petty Cash, and if we choose  "Payment Mode"= Check, then "Deposit to" is automatically set to Undeposited Checks, and if we choose  "Payment Mode"=

    • Allow split times for business hours feature

      It would be great to be able to set business hours multiple times during the same day. For example: Monday from 9am - 1pm, and then from 2pm - 5pm This would allow calls to be sent straight to voicemail during 1pm-2pm during lunch break.

    • Add Knowledge Base KB Articles to multiple categories

      Greetings, Love you help center system. One item that would be incredibly helpful to many of us would be able to add a single Knowledge Base KB article to multiple categories in our system. It seems it could be quite easy to use a checkbox form, instead

    • Error in formula

      Can someone PLEASE tell me what is wrong with this formula? Formula return type, I have tried string and decimal fn.Year(fn.Now())-fn.Year(${cf_purchase_date}) I keep getting the following error. Incorrect argument type passed for function Year Thanks

    • Sync “Display Author Info” Setting from Zoho Desk to Zoho SalesIQ

      Dear Zoho SalesIQ Team, We’d like to suggest a refinement to how Zoho SalesIQ displays knowledge base articles that are synced from Zoho Desk. Current Behavior Zoho Desk allows us to control whether author information (name, profile picture, etc.) is

    • Respect Help Center Visibility Settings for Knowledge Base Sync Between Zoho

      Dear Zoho SalesIQ Team, We’d like to suggest an important improvement to the integration between Zoho Desk and Zoho SalesIQ with regard to the knowledge base synchronization. Current Behavior SalesIQ offers excellent functionality by allowing us to sync

    • Enhancing Answer Bot's Capabilities

      Wouldn't it be amazing if the answer bot could directly search for answers in our database, FAQs, articles, etc., without needing to display the entire article? without relying on external tools like ChatGPT This way, it could provide concise and relevant

    • Centralize and Streamline Zobot and Flow Control Settings in Zoho SalesIQ

      Dear Zoho SalesIQ Team, We would like to suggest a crucial improvement to the current setup and configuration experience within SalesIQ. Problem Statement Zoho SalesIQ currently offers three primary mechanisms for handling customer chats: Answer Bot –

    • Custom Formula

      Good day, I am trying to create a formula field in Zoho Desk to calculate an age, but I'm having trouble figuring out how to make the formula. This is a formula I found, but it keeps telling me the wrong field name. Can someone please help me? Field name:

    • Click to edit fields with Canvas layout

      Hi, I have integrated new layouts using Canvas and its been going well so far. Although I cant seem to figure out how to change the fields so you can click anywhere on it to select or edit the field. Now a small pencil will appear next to the field you

    • Show Custom CSS Changes in SalesIQ Preview

      Hello Zoho SalesIQ Team, We truly appreciate the ability to customize the chat window using custom CSS via: Settings > Brands > [Select Brand] > Personalization > Appearance > Upload Custom CSS. This flexibility is extremely helpful in aligning the chat

    • Light Agents for External Users

      We are currently on the Zoho One version of desk and cannot create any light agents. We would like to create light agents for external users in order for them to see their tickets and approve changes.

    • Inquiry Regarding Accessing Multi-Select Field in Pivot Chart

      I'm currently working on a project and would appreciate guidance on accessing and utilizing a multi-select field within a pivot chart in Zoho Creator. Could you provide instructions or resources to help me implement this feature efficiently? Your assistance

    • What should I be using Salesinbox or Zoho Mail

      Hi everyone, I again find myself a little confused by the Zoho offering.  I am a long time Zoho CRM and Zoho mail user. About a year and a half ago, Zoho mail had a major update and things like streams were added. We have learned to use the new features, although I am sure not to their fullest.  Now while getting help with an issue that I had with emails associated with Contacts in CRM, I now have just discovered that I have Salesinbox. OK, so it looks pretty cool, but now I find myself again in

    • {"error":"invalid_client"}

      Im sending POST query to https://accounts.zoho.com/oauth/v2/token like this described in https://www.zoho.com/crm/help/api/v2/#generate-access article, but got error {"error":"invalid_client"}. Im first thinking that this my mistake, but after this I

    • Digest Mai - Un résumé de ce qui s'est passé le mois dernier sur Community

      Chers utilisateurs, Encore un mois vient de filer à toute vitesse chez Zoho Community France ! Jetons un œil à ce qu’il s’est passé. Vos données non structurées méritent mieux qu’un simple stockage. Avec WorkDrive 5.0, Zoho vous propose une solution intelligente,

    • Looking to Hire: Zoho Creator Developer for Vendor Dashboard Portal

      We are a Florida-based licensed liquor distributor using Zoho Books, Inventory, CRM, and Analytics. Many of our vendors are also our customers. We’re looking to build a centralized, secure Vendor Dashboard Portal in Zoho Creator that gives access to real-time

    • Create your own convert feature in Zoho CRM | Kiosk Studio Session #7

      In a nutshell: Want to replicate the leads-to-contacts conversion flow for your custom modules? Use Kiosk Studio to build a convert feature in less than one day—with zero code—that enables the following: Conditional approvals Dynamic module mapping Automatic

    • Split View for Zoho CRM : Break down Your Module Data for Smarter Selling

      Hello Everyone, We’re excited to unveil Split View, a powerful new way to explore and interact with your data in CRM For Everyone. In addition to the recent new module views --- Chart View, Timeline View & Grid View, we've added Split View as well to

    • Some website items no longer centered.

      At some point (probably after some Zoho Sites updates) my items on the website stopped being centered. I just noticed it now so unsure when that change happened: Strange as it is - I entered the editor and I can not find the option to move them back in

    • Swipe, Snap, and Submit Instantly with Zoho Expense's Real-time Feeds

      It's time your employees enjoy the smoothest expense reporting experience ever. It's time to switch to Real-time Feeds by Zoho Expense. Upgrade your Zoho Expense experience with real-time corporate card management for the fastest, easiest, and most accurate

    • how to set the recency in segmentation rules in the last X days?

      I just change the segmentation rules recency to be like this: I want score 5 if the deal won time is in the last 30 days I want score 4 if the deal won time is in the last 60 days I want score 3 if the deal won time is in the last 90 days I want score

    • Issue with Schedule Workflows – "Usage Limit Crossed" Error

      Hi Zoho Support, We are currently facing an issue with the scheduled workflows in our Zoho Creator application. We are receiving the following error: "Usage limit crossed" for schedules. However, when we checked the usage statistics for our Creator app,

    • Card Scanner app creating duplicate Accounts

      Hi all, I recently added Card Scanner app by ZOHO on my phone. I scanned several business cards, and realized that there were some newly added Accounts. Let's say there is an Account named ABC (US) CO., LTD in our system already. The app scanned the business

    • Zoho Forms CRM Field Mapping

      Using the Zoho CRM Field in Zoho Forms, there is no direct integration between the Zoho Forms Time field, and Zoho CRM. We use this single field in most of our client-side forms to collect information. Initially reading this request, you might think that

    • How to Improve the Speed of the Website Zoho Commerce

      Is there another way to improve the speed of the website in Zoho Commerce that was created?

    • Free Webinar - Fundamentals of Zoho Sign: Overview and latest updates for new users and evaluators.

      Hello there! Want to get the most out of your favorite digital signature provider? Did you miss our last session on Zoho Sign features but eager to learn more? We have just the thing for you! Join us for the second edition of our free monthly webinar:

    • 【Desk ナレッジベース】　記事自体のフッターのカスタマイズについて

      お世話になります。 サービスのヘルプセンター構築のために、Deskとナレッジベースを使い始めていますが、 構築にあたり以下の質問があります。 ・質問 記事自体のフッターにある「評価」と「共有リンク」（添付ファイル参照）を非表示にしたいのですが、 これを非表示にするのはどうしたらよいでしょうか。 ヘルプセンター自体ののヘッダー、フッターはカスタムできるのですが、 記事そのもののフッターはカスタムできるところが見つかっていません。 もしご存知の方がいらっしゃいましたら、教えて下さい。

    • Timeline View in CRM - a linear way to visualize records over time

      Hello all, We would like to introduce the next phase in our quest to deliver a seamless user experience as part of the CRM for Everyone: the Timeline View. It allows you to visualize your records plotted across a given timeline. You can view the records

    • SalesIQ not loading on mobile

      We have installed the snipped through Google Tag Manager and it's working as it should on PC but the widget is not loading on mobile. Is there something we're doing wrong from our side? Edit: Widget seems to be loading just fine on Android and the problem

    • Unable to make calls at the moment.

      One of our employees has been getting this message all day when trying to make an outgoing call. We use the zoho phone bridge, and all other employee calling works as intended. 

    • Importing multiple Zoho backstage events at once

      Currently it seems it's only possible to import data from one Zoho backstage event into Zoho Analytics using. This means that if you have 10 events, you have to import them all separately into Zoho backstage. What I would like is to import all events

    • How can an employee edit their tax withoholdings / w4

      I have an employee who has already been onboarded and wants to adjust his tax withholdings / W4. I would prefer that employees have access to make this change themselves without relying on an admin. How can they do this?

    • 【Zoho CRM】 「自動メール送信」機能廃止のお知らせ

      ユーザーの皆さま、こんにちは。コミュニティチームの中野です。 今回は「Zoho CRM アップデート情報」の中から、自動メール送信機能廃止についてお知らせします。 Zoho CRMの「自動メール送信」機能は2025年9月30日をもって利用できなくなります。 自動メール送信機能でフォローアップを自動化している場合は2025年6月30日までに 「ケイデンス」に移行することを強くお勧めします。 本記事で言及している「自動メール送信」機能は、こちらの機能を指しております。 ワークフロールールで設定している通知メール送信処理やカスタム関数で設定しているメール送信機能とは異なります。

    • Quick timeline for each field

      Hi, The timeline feature is great, and so is its API. However, both aren't suitable for day-to-day quick fetch of a specific field timeline/history. A very good example of a similar feature can be found with the "show edit history" in Google Sheets. Ideally,

    • How to sync Zoho CRM Quotes with Zoho Books/Finance Estimates or Quotes

      Hi everyone, We’re building quotes in the Zoho CRM Quotes module because of its strong CPQ features and better communication options (multiple contacts, email customization, etc.). However, these don’t sync directly with Zoho Books/Finance for invoicing.

    • [Free Webinar] Building Data Relationships Using Subforms - Creator Tech Connect

      Hello Everyone! We welcome you all to the upcoming free webinar on the Creator Tech Connect Series. The Creator Tech Connect series is a free monthly webinar that runs for around 45 minutes. It comprises technical sessions in which we delve deep into

    • Is it possible for using Zoho Creator as a public application without login?

      Hi there, I recently had a client who was looking at building a learning resource on Zoho Creator. However he had a requirement that course content that he builds may be publicly accessible. My question is that, is it possible to have public pages with

    • Next Page