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

    • Fetch Project's Task by Name

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

    • Error when adding an existing user to Zoho Project

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

    • Cannot Trigger Purchase Receive Flow from Both Books and Inventory

      I have created a flow for Zoho Inventory Purchase Receive Normally the purchase receive is created in Inventory, but sometimes the Purchase Receives gets created in the Books the the flow doesn't trigger Is there a way to trigger the flow whether the

    • New VAT Rate for South Africa

      Hi, When will the new VAT Rate be implemented as it is from 1 May 2025, and how will updates etc happen. Will there be a global update function. Thanks

    • South Africa VAT increase from 1 May 2025

      Hi Will Zoho Books automatically update the VAT settings from 15% to 15.5% or must it be done manually? The VAT rate is increasing to 15.5% on 1 May 2025, and supposedly to 16% in 2026. Regards Uwe

    • Power of Automation :: SLA for Tasks

      Hello Everyone, In this 'Power of Automation' series, we are focusing on the feature "Time-Based Workflow Rules for Tasks." Workflow rules help project managers organize tasks in a project by setting criteria and actions that meet the project requirements.

    • Restrict Payment Methods

      Allow us to restrict certain payment methods specific for each customer.

    • Widgets in People 5

      I'm trying to add a button widget in one of our test sites, created using the Zet-CLI Tool. When I host the Widget externally it runs fine, making a call to a UK Government API and downloading some json and displaying a table of data. If I try to host

    • Convert a message on Cliq into a task on Zoho Connect

      Message actions in Cliq are a great way to transform messages in a conversation into actionable work items. In this post, we'll see how to build a custom message action that'll let you add a message as a task to board on Zoho Connect. If you haven't created

    • Zoho mail not working after Domain expiration and renewal

      Need help getting email working after an accidental domain expiration. Domain has since been renewed.

    • eway Bill - Import (Good / Material)

      As we Importer of goods , for That first we Generate PO then , Payment, then after We create Bill of Entry  After Bill of Entry Anywhere (99%) cases material that arrived to port that comes to warehouse / factory for that Eway bill , we have to create

    • In zoho creator I have Category form it has category name field Once Enter category name , category code want to Auo create on submit of the form

      In zoho creator I have Category form it has category name field Once Enter category name , category code want to Auo create on submit of the form Code Create Format first letter of product with number of product on this category Example: I have one use

    • Let's Talk Recruit: Meet Zia, your all-in-one AI assistant

      Welcome back to our Let's Talk Recruit series! Today, we are going to meet Zia, your all-in-one AI assistant. Let's delve into Zia's capabilities and explore how it takes tedious, time-consuming tasks off your plate. What is Zia? Zia is your AI companion

    • Zoho ONE Inventory and Zoho FSM

      Zoho ONE Inventory sees a warehouse just as a warehouse. You have to be a ZOHO ONE usher for example to use a warehouse like counting stock while you have to buy a warehouse as an Add one separately from ZOHO ONE Inventory to use it for ZOHO FSM In ZOHO

    • Export all of our manuals from Zoho Learn in one go

      Hi, I know there's a way to export manuals in Zoho Learn, but I want to export everything in one go so it won't take so long. I can't see a way to do this, can I get some assistance or is this a feature in the pipeline? Thanks, Hannah

    • How to Mass Delete 26K leads ?

      Hi, can anyone tell me how I can mass delete 26K leads please? Thanks Colin

    • 【Zoho CRM】サブフォームのアップデート

      ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 今回は「Zoho CRM アップデート情報」の中からサブフォームのアップデートをご紹介します。 サブフォームは、複数の行項目をまとめて管理できる副次的なフォーム/表です。例えば、営業チームがCRMのサブフォームを使って顧客の注文を管理する場合、商品名・価格・納期などの情報をまとめて入力できます。 ただし、このサブフォームのリスト自体が長くなると、スクロールが必要になり、画面上で確認する際に情報を把握しづらくなることがあります。 この課題を解決するため、サブフォームの列で「複数列のピン留め」と「項目列の幅の調整」の2つの新オプションの使用が可能になりました。

    • Is there a way to Prefill A Subform in Zoho Forms?

      By The Grace Of G-d. Hi, Is there any way to prefill a subform? Using URL Parameters or something else?

    • Updating Auto Numbers

      I'm removing a suffix from my auto number that's related to my customer record. I would like it removed from all existing customer records but I don't want to change the number before the suffix. If I tell it to update existing records, will it overwrite

    • How to add categories?

      How to add categories? I don't know if it is possible to create categories of the services, for example if the reported issue is a printer problem, hardware, email account, etc. I have only seen that the ticket is chosen if it is a complaint, question,

    • Zoho CRM in Microsoft Power Automate Custom Data Connector

      Hello, I have set up a custom data connector in Microsoft Power Automate. It is a connector to retrieve Zoho CRM data. I am pretty certain that I have entered the OAuth 2.0 authentication information correctly. However when I test the Get request https://zohoapis.com/crm/v2/leads.

    • Client Script: new value not set after calling setValue() - what's wrong?

      I'm new to Javascript and Zoho Client Script, though I have experience developing applications in C and Java. I have been trying to figure out why my code doesn't work and would appreciate help from the community to point out what's wrong. For my current

    • Sorry! we encountered some problems while sending your campaign. It will be sent automatically once we are ready. We apologize for the delay caused.

      Hello. Lately we are having problems with some campaigns, which show us this error message. Sorry! we encountered some problems while sending your campaign. It will be sent automatically once we are ready. We apologize for the delay caused. We can't find

    • ZOHO not recognizing mx records

      My domain hosting lapsed, and upon reactivating I had to recreate all my DNS records. ZOHO is not recognizing my MX records, but IS recognizing my SPF, DMARC, etc. Mail is being delivered to ZOHO just fine, but when I attempt to send I get a "relaying

    • mail rejected because of sender's SPF record issue

      We recently started hearing from customers that email is bouncing with the error: 550 5.7.23 Sender's SPF Policy Failure We cannot reject email because sender's DNS record is wrong. We need to accept mail in most cases. How do we fix this (because clearly

    • No fue posible enviar el mensaje;Motivo:554 5.1.8 Email Outgoing Blocked.

      Hola! quiero enviar un correo electronico desde mi casilla de correo " tallerenproceso@zoho.com" y no me permite, porque dice: " No fue posible enviar el mensaje;Motivo:554 5.1.8 Email Outgoing Blocked." lei que otros usuarios le daban respuesta de almacenamiento,

    • BLOQUEO DE POP-ENTRANTE

      Solicito con urgencia su apoyo, la cuenta dnanez@mirandacorredores.pe tiene problemas con el correo entrante. Tiene habilitado la opción POP en ZOHO y maneja sus correos con la herramienta Outlook, sin embargo no puede recibir ningún correo ya que aparece

    • Renew expired domain

      Hi My domain expired in early September. I tried to renew it but to make the transaction was an error. In the control panel, the renewal option does not appear. It happened more than 1 month and already I'm having problems with mail. When I go to a site

    • Print Email without Header Information - How?

      How do we print an email without printing the header? More and more vendors are emailing us invoices embedded in the email - not as an attachment. However, because the email print function automatically prints the email header, the invoices are split

    • Metrics available in Canada ?

      Hello, For the portal, the metrics looks empty for me. It says something like "no portal to display". Do I have to do something special to get it started or it is just not available yet for Canada ? Sylvain

    • In Zoho Desk, is there a way to see a list of comments that I've been tagged in?

      Thanks in advance!

    • Tracking product & invoice margins and costs

      We currently use Zoho Invoice and looking to understand how other people manage their product costs, margins, reporting etc. How do you know how much a particular job/invoice has made you and the costs involved? We have over 100,000 SKUs so not sure how

    • ZOHO ONE Inventory and ZOHO FSM

      Zoho ONE Inventory sees a warehouse just as a warehouse. You have to be a ZOHO ONE usher for example to use a warehouse like counting stock while you have to buy a warehouse as an Add one separately from ZOHO ONE Inventory to use it for ZOHO FSM In ZOHO

    • Get custom field value using deluge

      Hi everyone, I'm trying to get the value in a field using deluge in Desk, but i have i couldn't find an answer anywhere, this is my code : response = zoho.desk.getRecordById(OrgID,"tickets",TicketID); info response.get("cf_supplier");

    • Zoho Mail + Godaddy + Other Hosting how to configure

      Hi, I have taken zoho mail subscription, domain registered on godaddy and hosting taken from other hosting provider. So I have updated third party hosting nameserver on godaddy So now unable to add DNS records in Godaddy. Please give the solution.

    • how to enable multi DC option in my organization tenant that using zoho sign to give chance to any external users from any DC to sign our docs?

      how to enable multi-DC option in my organization tenant that using zoho sign to give chance to any external users from any DC to sign our docs?

    • automatic follow up alerts if potential stage doesn´t change in a certain period

      I want to control the whole sale process through setting a different Lead status or Potential Stage each time the lead or potential reaches a certain milestone in the sale process. The idea behind that is that a change in the lead status or potential stage triggers rules which have tasks that move the sales process forward. For example, if a Lead asks for a quotation, the Lead owner will set its status as "converto to potential", which triggers a rule that has a task attached to convert the lead

    • How to set up ‘Adjusted Revenue’ in Zoho Books?

      Hello, I have a marketing agency where I typically offer social media management and advertising services to local clients on a retainer/monthly-recurring basis. One of my core services include Ad Spend (we call it Digital Media Buying), which contributes

    • Aliasing Tables in Reports

      I'm trying to build a Query Table in Zoho Reports using my Zoho CRM data, and I'm running into this error:   Whenever a table alias is defined, kindly use table alias name before the respective columns used in SELECT query I'm trying to create a query table that joins several aliases of the Contacts table to the Opportunities table.  For example, an Opportunity has a Primary Contact, a Referral Source, a Primary Liaison, and an Agent.  All four of these are represented in the Opportunities table

    • Close task from list view

      Hi everyone, I’m trying to find a way to streamline task management in Zoho CRM. Specifically, I want to know if it’s possible to add a button directly in the list view of the Tasks module one button per task that allows users to close a task without

    • Next Page