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

    • How to Track Inventory Usage from Zoho FSM to Zoho Inventory?

      Hi everyone, We’re currently working on integrating Zoho FSM with Zoho Inventory, and we’ve encountered a challenge we’re hoping the community can help us understand better. Here’s the context: When we create a Work Order in Zoho FSM that involves parts

    • View subform entries without viewing a record in Zoho CRM | Kiosk Studio Session #8

      In a nutshell Have you ever wanted to take a quick peek at a record's subform? Examples might be invoiced items in an invoice, ordered items in a sales order, or purchased items in a purchase order. Let's say you're viewing your list of invoices in Zoho

    • Transforma tu Inventario: Control Inteligente y Funciones Clave en Zoho Inventory (Spanish Webinar)

      ¿Tu empresa necesita mayor trazabilidad y control en almacenes? Conoce cómo gestionar tu inventario con eficiencia y automatización... ¡y descubre las sorpresas que trae Zoho Analytics! Participa en nuestro webinar gratuito en español, este 19 de agosto

    • Mails are not being sent from custom Deluge function

      We are having troubles to implement sending Invoices / Sales_Orders etc. automatically using following deluge script: attachment_template_id = "aaaa"; record_id = "bbbb"; mail_template_id = "cccc"; //NEW aproach fileUrl = "https://www.zohoapis.com/crm/v8/settings/inventory_templates/"

    • Currency transition

      We are using Zoho CRM in Curacao, Dutch Caribbean. Our currency is currently the ANG. Curacao will be transition ing from using the ANG (Antillean Guilder) to using the XCG currency (Caribbean Guilder) on March 31st 2025, see: https://www.mcb-bank.com/caribbean-guilder.

    • Notes and Attachments visibility can now be restricted based on profiles

      Dear All, We hope you're well! We are here with a quick update about Notes and Attachments profile permissions. In the past, a record's Notes and Attachments were visible by default to all users with record access. However, as notes and attachments can

    • Zoho webinar--hard for agencies

      So, this is just a dive into our use case, and why we've been disappointed in Zoho webinar. We are a small marketing agency, and we wanted to add webinars to the services we provide, as many of our clients want to learn to use them as part of their content

    • Celebrating Raksha Bandhan with Zoho Desk: A Bond of Trust, Protection, and Service

      Raksha Bandhan, celebrated across India, symbolizes the sacred bond of protection and affection between siblings. “Raksha” means protection, “Bandhan” means bond or knot: together, it represents a knot of care and security. On this occasion, we'd like

    • Banking > Import statements with a csv file

      Good morning, I am regularly using the "import statement" option to match my transactions. I've been using csv files produced by my bank online and was able to import my transactions. Until now. Thank you for your help for fixing this ! Alex.

    • Has anyone successfully added Microsoft Graph API Oauth2 as a connection?

      I'm having trouble getting Microsoft Graph API created as a connection in zoho crm. Has anyone successfully added Microsoft Graph API Oauth2 as a connection? My issue is not necessarily on the Zoho side, but understanding how to set up the Microsoft side

    • Syncing Timesheets between Projects and Desk

      All users able to see their own timelog entries from all apps in one place, synced immediately. All managers able to view total/all time entries from one place. This is something that has come up for us and multiple clients. Example: we have a client

    • Spell Check default language

      Hello All, Is it possible to set the Spell Check default language? I can't find it in the settings. Thanks a lot! Levente

    • Zoho Backstage 3.0 - Boostez vos événements avec des outils malins

      Zoho Backstage vous accompagne dans l’organisation d’événements réussis, avec des outils qui simplifient la planification, optimisent l’exécution et renforcent la connexion avec votre public. La version 2.0 a apporté une nouvelle interface, plus de flexibilité

    • Portal user activity reporting

      Aside from the metrics section in the admin dashboard, is there a way to view/create reports for portal user activity? Im looking for a more granular option to see exactly what users are utilizing the portal. Thanks!

    • Automation #11 - Auto Update Custom Fields with Values from Emails

      This is a monthly series designed to help you get the best out of Desk. We take our cue from what's being discussed or asked about the most in our community. Then we find the right use cases that specifically highlight solutions, ideas and tips to optimize

    • Admins to set Agents Picture

      Admins should not have to rely on agents to set a nice profile picture for them. Admins get the headshot pictures from HR and should be able to upload and set their picture, not rely on them to: 1) upload a picture at all 2) upload a good picture 3) upload

    • Time Tracking Reporting and Billing

      I wish for the time tracking module to be enhanced further. Currently it is independent of Support Plans and Contracts. Support Plans and Contracts are also mostly separate. We need a better dashboard of this with the ability to natively mark billed or

    • Enhanced Email Signature Folding

      We have departmental signatures setup which are great, however, when viewing ticket details, it gets very overwhelming when scrolling though threads and conversations where you scroll past ten different signatures of your own team, then ten signatures

    • How to add formatting in zoho.cliq.postToUser(...) message?

      In a CRM Deluge function, I'm trying to use the message formatting guidelines given here: https://www.zoho.com/deluge/help/cliq/posting-to-zoho-cliq.html#message-formats My message is: message: #Title text. The result in Cliq is: #Title text. (no large

    • How to add line breaks in zoho.cliq.postToUser(...) message?

      In a CRM function using Deluge I'm sending this message and attempting to add some line breaks but they are ignored. Is there another way to add these breaks? My message: message: New urgent task\nDescription \nThis is a fake description.\n A new line?

    • Zia Agents/End of Day Reports

      As a manager or owner it would be nice if Zia analyzed today's (or this week's tickets) and gave an end of the day report to management team. - what important tickets were worked on or submitted today? - what agents were unproductive today and answered

    • Project Cost Tracking

      I see there are questions/concerns that Zoho doesn't track costs to a tasks in a project. We are a manufacturer and are in the early stages of tracking costs to project. I would like to expand out the COGS Chart of accounts in Books and record costs via

    • How to record if the payment made is return due to transaction failed.

      So there is Bill of $2000, and a payments made transaction to clear the bill. The amount is actually deducted from bank account. However, a few days later, I found the bank returned only $1750 cause there are $250 bank service charge for this failed transaction.

    • Help Center Customization UI

      The customization screens for the help center needs the UI improved. It looks straight out of 2004. The Zoho Desk normal UI is great. All it takes is uniform fonts and colors across all parts of the tool... I compare this to Zendesk Guide.

    • Este domínio já está associado a esta conta

      Fui fazer meu cadastro na zoho e quando digitei meu domínio recebi essa mensagem que meu domínio estava associado a uma conta que eu nem faço idéia de quem seja. Como que faço pra resolver isso? Atenciosamente, Anderson Souza.

    • I need some help in Expenses Per Diem Policy

      this is my script written for restricting the PerDiem Components. Say if Lodging and Per Day Allowance both is selected from Per Diem Page then the report should gets auto rejected. When Im trying to executing it says the following error {"code":11,"message":"The

    • Adding Photos to Dashboards on Zoho Analytics

      I am creating a dashboard to showcase data from survey results from focus groups. I am creating a focus group participant profile tab where it is filtered by the name of the participant and showcases information about them using KPI widgets. I am running

    • What is the difference between Retainer invoice and Advance Payments?

      Retainer invoice seem like they are just advance payments with extra details. Instead of creating a Sales Order with order details, a retainer is created. It feels like they are a workaround to link advance payments with sales orders. Is there any advantage

    • Exporting record notes in bulk

      Hi team, Is it possible to bulk export the notes attached to a record? i.e to a CSV file or otherwise. Our use case is exporting all notes for our lead/account/Deal records. We have another system we'd like to import these notes to but I can't seem to

    • Field customization

      Hi Team Good day! I am a commission agent who sell and purchase goods from vendors, while in purchasing invoices I am not able to deduct the expenses such as commission and other expenses on actual amount. Kindly help me to customize the invoice based

    • vendors / customers with 2 different address and gst no

      Why can't we have option for more than one address and depending on the state option for more than 1 GST no. ? We have customers / vendors PAN india with different addresses and GST no. for different states.

    • Error: Invalid Element gst_no, Invalid Element gst_treatment, Invalid Element place_of_contact

      so i am creating a new contact post request and i want add gst infomation when amount is above 50000 and if pass gst info in request body then i get this errors > Error: Invalid Element gst_no, Invalid Element gst_treatment, Invalid Element place_of_contact

    • Add multiple Billing Addresses under one GST number

      My client owns multiple businesses in various locations but they all come under one GST. Is there a way to add multiple billing addresses for the same GST? Managing this by adding multiple Shipping addresses is not an option. The client wants the GST

    • Zoho Mail API - Upload Attachment

      https://www.zoho.com/mail/help/api/post-upload-attachments.html I followed the steps from the API documentation and wrote a backend in JavaScript to send emails. Normal emails are sent without any problems. However, I can’t send emails with attachments.

    • Unable to create custom fields for shipment order

      I'm unable to create custom fields for shipment orders, even though the custom fields are set up correctly. A request to the following endpoint: https://www.zohoapis.com/inventory/v1/settings/preferences/customfields?organization_id=${ZOHO_ORGANIZATION_ID}&entity=shipment_order

    • Kaizen #202 - Answering Your Questions | Testing and Using REST APIs in Widgets

      Hello Developers! Welcome back to a fresh week of Kaizen! Thank you for your active participation in sharing feedback and queries for the 200th milestone. This week, we will look at the following queries related to widget: Widget Testing Using REST API

    • Introducing the 'Send as Email' option on the Zoho Desk iOS mobile app

      Hello everyone! In the latest version(v2.10.2) of the Zoho Desk iOS app, we have brought in support for the 'Send as Email' option while creating a ticket. This feature enables you to reach out to the customers by sending outbound emails. The emails are

    • Zoho Forms Not Loading on Website – DNS Resolution Error

      Dear Zoho Support Team, User ID : 20069458731 We are experiencing an issue with the Zoho Form embedded on our website (https://vitel.com.tr/satis-destek-formu/). The form is not loading, and the following error message appears in the browser: “forms.zohopublic.eu

    • Data backup retention question/

      My zohocrm subscription gives me 2 full data backups per month. I have a scheduled backup configured to run twice a month. I just went to download my backup and i can't find it, it ran about 9 days ago... From what i can tell with google zoho only keeps

    • Basic Apple Watch App

      Sometimes I leave my phone behind. I will get push notifications that tickets are updated etc.. It would be nice to at least view them and do a few basic functions. reassign. public reply. private comment.

    • Next Page