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

    • Introducing the Zoho CRM Lead Magnet plugin for Wordpress

      In this digital era, websites are the most important source of leads. That means your CRM system should be well integrated with your website to contextually capture each and every visitor to turn them into a lead. Introducing the Zoho CRM Lead Magnet plugin for WordPress.  The plugin lets you to: Create webforms using Zoho CRM forms/ Contact form 7 plugin Embed them in your website hosted using Wordpress Automatically capture leads into Zoho CRM with zero attenuation. Not only is the integration

    • Team Modules in Zoho CRM: Empower Every Team, Break Silos and Boost Collaboration

      Hello Everyone, The ultimate goal of every business is to achieve customer delight—and achieving customer delight cannot happen with the effort of a single person or team. At Zoho CRM, we believe that it’s a shared mission that spans across your entire

    • Trying to integrate gmail but google keeps blocking Zoho access for integration??

      hi i am trying to integrate a gmail account so can track/access business emails this way. I have followed the instructions but after selecting my email account it gets re-routed to this message (screengrab below) Can anyone advise a way around this or

    • Zoho Projects - Give Project access to developer (external)

      We have a client using Zoho Projects and would like to invite several external users and assign the Projects because the Project tasks are outsourced to other companies. What is the best way to give access to external Users and is there any limitations

    • Introducing the Germany Tax Edition !

      Whether you're operating within Germany, trading outside the country, or dealing with customers within or outside the EU, our new Germany Tax Edition makes navigating the complexities of VAT management a cakewalk. Our Germany tax edition allows you to

    • Centralized Organization Information Management in Zoho One

      Dear Zoho One Support, I'm writing to propose a feature that would significantly improve the user experience and streamline data management within Zoho One. Current Challenge: Currently, managing organization information across various Zoho One apps requires

    • Including attachments with estimates

      How can attachments be included when an estimate is sent/emailed and when downloaded as a .pdf? Generally speaking, attachments should be included as part of an estimate package. Ultimately, this is also true for work orders and invoices.

    • Add Hebrew Support for Calendar Language in Zoho Forms

      Dear Zoho Forms Team, Greetings! We are using Zoho Forms extensively and appreciate its versatility and ease of use. However, we’ve noticed that the Calendar Language settings currently do not include Hebrew as an option. We would like to request the

    • Company centric layout

      Hey everyone, I want to have an "account-centric" Zoho, where the main part is the "Account" and other parts like "Contacts", "Deals", "Projects" are linked to this "Account". Tricky part is, that I have different layouts for different departments, and

    • CRM HAS BEEN SOOO SLOW For Days 05/15/25

      I have fantastic Wifi speed and have zero issues with other websites, apps, or programs. It takes an excruciatingly amount of time to simply load a record, open an email, compose an email, draft a new template, etc. Am I in a subset/region of subscribers

    • Announcing Zoho Community Developer Bootcamps in India – Catalyst by Zoho

      Hey everyone! Following the success of the first set of bootcamps on SalesIQ Zobot and Extensions last year, we're ready for the next set of bootcamps—this one dedicated to Catalyst by Zoho! These bootcamps are aimed to empower developers to build, scale,

    • Introducing the Zoho Show Windows app

      Hello everyone! We’re excited to announce the launch of the Zoho Show app for Windows! You can now create, access, collaborate on, and deliver presentations right from your desktop. The Windows app brings you all the powerful features you’re familiar

    • New Action Requests

      Hi, Is there any chances to get the new actions requested at all? I have made a few requests but never heard back from Zoho about them. I assume that developing them take time but is there any support that can provide some update? Thanks

    • Workdrive - copy permissions

      I am trying to customize sub folder, which I understand fully from below https://help.zoho.com/portal/en/kb/workdrive/team-folders/manage/articles/customize-folder-permissions-in-a-team-folder#Customize_permissions_during_folder_creation However I want

    • US military addresses

      When we have a client with a US military address having them fill in a form is a problem Zoho forms doesnt acommodate them correctly. It doesn't make sense for me to have to create a secondary data model for military addresses. I have placed some links

    • Introducing 'Previous' and 'Next' operators for enhanced date-based filtering

      Hi everyone, We are excited to introduce to you two new operators - Previous and Next - for your date and date time fields in filters as well as in custom view. For starters, let’s say you want to filter records based on Created Time: Previous 6 months:

    • Same users on different accounts

      I have an issue I need help with. Whilst trialing ZOHO CRM I created the following: Account1 using myname@myorganisation.com.au and 2 personal emails Account2 using a personal email and 2 users sales1@myorganisation.com.au and sales2@myorganisation.com.au

    • Multi-Sort Functionality, Projects List

      It is proving so hard for us to manage any kind of decent view into our Active list of projects (which now hovers between 150 and 225 at a time).  In addition to my other suggestion here (which hasn't had any activity in a year), I'd like to suggest that

    • Power of Automation :: Automatically update the Work hours of a task based on Custom field Value

      Hello Everyone, A custom function is a software code that can be used to automate a process and this allows you to automate a notification, call a webhook, or perform logic immediately after a workflow rule is triggered. This feature helps to automate

    • Zoho Sites is unusable

      What a terrible user experience sites is buggy and incredibly slow with creating site.  it hangs with please wait with spinning circle A LOT.  can't add blog page  can't add logo (yes it's not larger than 500 pixels) can't even add a new page It either does nothing (with no error message as to what is wrong) or you get the darkened screen with the please wait with the spinning circle that never goes away...I've even left it for 5minutes or more just to see if it was slow or just doesn't work...and

    • Why the home page "Income and Expense" graph only shows some Expense Accounts but not all

      I see that the graph only shows expenses from some Expense Accounts. Why and how can I change that? I'm new to Zoho Books and accounting. Thank you!

    • Introducing Seamless Communication with WhatsApp Integration in Zoho Recruit

      Hello everyone, We are thrilled to announce that we have just launched an incredible new feature in Zoho Recruit that will revolutionize your recruitment process. With the integration of WhatsApp into Zoho Recruit, you can now seamlessly connect with

    • how do i add a hyperlink to a ticket submitted to zoho desk via zoho forms integration?

      hi there! my team uses zoho forms to collect information needed to complete a ticket. we use the zoho forms integration with zoho desk. two of the fields capture urls that the submitting teams fill out in the public facing form. when the ticket reaches

    • If Formula with Abs and Now included!

      Hi all, Having a bit of trouble with an If formula when creating a formula field with currency return type. This is what I've got: If(Now()>=${Agreement History.Rent Review Due}, '${Agreement History.Holdover Price}', 'Abs(${Agreement History.Rent Achieved

    • Sent mail blocked because of Domain/IP Reverse lookup conflict.

      Whenever we send an email through Zoho to one particular email server, all of our emails get blocked as spam because the sending domain does not match the server sending it according to the email header. I contacted the company blocking us and this is what they say: "The error is saying that your outgoing email server's IP address does not match the server name of the email server record for your domain. We do a reverse lookup on all the incoming email to make sure it is coming from a legimate source.

    • Weekly Tips: Avoid Duplicate Email Copies with Zoho Mail

      In everyday work environments, it is common to receive the same email multiple times when you're CC'd individually and also included through a group email address in the same message. This can overwhelm your inbox and make it harder to keep track of important

    • Please don't remove the option to modify tax.

      Hi, I saw that the option to customize tax will be removed. This is VERY PROBLEMATIC for US companies who ship to different states because each zip code in the USA has its own tax rate for a single product. This is an awful idea. Please don't take this

    • Zoho Connect App (Android)

      Hello Zoho Connect team, I've encountered a recurring issue with the Android version of the Zoho Connect app and would appreciate your assistance. I have created a group that includes both internal and external users. Everything functions as expected

    • Zoho CMR - How can we remove Public View in any module ?

      Hi Zoho  How can we remove some Public View in any module (or one by one) ? I read something about hiding but that's refers to Creator and I'm not there yet. :)  Thanks! Robert

    • ZohoOne suite

      Hi, i am trying to set service for managed service offerings, I was wondering if there was a way to manage that? I would be the service manager and have a company I would be managing as well. any help would be much appreciated. I have seen that different

    • 連絡先リストへの表示項目表示表示

      連絡先をリスト表示した際に、各連絡先に紐づく関連トピックや、配信リストをリストに表示させることはできますか？ できるのであればその方法を教えてください。

    • Format any date to match the user's locale settings with this Client Script

      A common problem in Zoho Client Script is a user's date format. On Create/Edit pages, Zoho will only accept a date if it matches the user's locale. Even if the date is in a correct format, or Zoho date format, user's can't save a record if the date format

    • Block incoming emails by shared mailbox

      Good morning, I will explain my problem to you At the moment I am making users open tickets only via email I would like users to send messages from their personal mailboxes and not from shared mailboxes I would also like if the ticket was generated by

    • Zoho Desk to Jira > Automatic Creation ?

      I've set up the integration for Jira and Zoho Desk, but when I create a test ticket as a customer nothing is sent to Jira automatically - is this correct ? I can manually link to Jira using the "More Actions", but I was expecting the issue to be created

    • Comparing 2 collections to make an action

      Salut, I have a customer form with a main phone number, and a secondary phone number. I have another form, a calendar, with a paste of the main phone number. I want to send a SMS to both phone numbers when the calendar event happen. I use the following

    • Automate Ticket Assignment to Contact or Account Owner Using Custom Action

      Teltroz Inc specializes in data science, data analytics, and big data technologies. Serving a wide range of customers from large to medium-sized businesses, security has been their top priority. The firm uses Zoho Desk to enhance their business operations,

    • how to remove email headers from Zoho Desk emails and replies from customers?

      I'm testing Zoho Desk at the moment ant noticed some very annoying with the emails that go back and forth, the email headers are always included on the conversation in the web interface and the customer also receives emails with these readers showing

    • File Upload and Add via API

      I've been attempting to upload to via the Files api and I have been hitting the wall with actually getting the file to attach. What type is the API expecting ? Base64 Encoded ? When I do I get a 414 Error. I would appreciate your help as I am currently

    • Add Pinned Tickets to top of queue

      As an IT Helpdesk, we have some tickets where they will need to be looked at daily over a week or 2, and the ability to pin a ticket to the front/top of the queue would be handy as we can be reminded to take a look, rather than placing them on hold and

    • Holding Shift to keep selected tickets

      It is annoying trying to change the category of tickets and then closing them. You have to select them one by one, no way to 'hold down left click and drag your mouse down to select multiple'. Once you have selected them and you change the category, you

    • Next Page