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 can I mark an account as VIP or similar for special treatment?

      I'd like to create a visual enhancement to mark an account as VIP in a way our agents can't miss it. What is your suggestion? Thanks!

    • Is there a way within Desk to allow for this timeline overlapping?

      We're encountering an issue where contract timelines for the same client at the same location might overlap or follow each other sequentially. Since a single client can have multiple contracts, and we offer various contract types, is there a way within

    • how can I change the font when I answer a ticket in zoho desk? thanks

      how can I change the font when I answer a ticket in zoho desk? thanks

    • Lookup fields can't be used for anything important

      Hi It seems the lookup fields are mostly.... informative, you can at most link stuff between modules... You can't use lookup fields in blueprints, you can't use them in layout rules or anything... It that correct?

    • Is it possible to add HTML or a button on email templates in Zoho Desk?

      Hello team, I am working on getting the best use out of Zoho Desk. I have noticed that when you hit 'reply' on a ticket, it comes with a small 'survey' to the recipient saying something like 'how would you rate your experience with us?'... so my question,

    • Is it possible to add buttons on email replies to internal team members?

      Hello everyone, I am currently trying to set up some workflow rules to trigger when a ticket is created. I have noticed there is a button that can be added to email templates when sending email alerts from workflow rules, for example ${Cases.SUPPORT_PORTAL_BUTTON}.

    • Widget function call not working – need help

      Hi everyone, I'm building a widget for Zoho CRM and trying to call a Deluge function from it using ZOHO.CRM.FUNCTIONS.execute, but it's not working. Here’s what I did: I created a Standalone function in Deluge. I'm calling it inside ZOHO.embeddedApp.on("PageLoad",

    • Item bulk update

      Why is there no "pruchase rate" to select in the field selection ? We have far more purchase increases than we have selling price amendments !

    • Can't lock timezone in new Zoho Bookings

      Hi, since the new Zoho Bookings has been changed, I cannot seem to lock the timezone in for the meetings. I have set the working hours and location, but when I got on the link, it automatically gives me slots in my timezone. I want to lock it for an in-person

    • Can we customize the default client-facing icons?

      Is there any way to customize the client-facing icons that display in the Zoho Bookings UI?  For example, I'm using the Default page theme and would like to modify the default icon that is shown beside "Service."  The icon currently being shown looks like a baseball hat to me (see attached screenshot) which has no relevance to my business or clients. It would be great if Zoho could provide a different, more generic icon (perhaps a bell icon to represent service?) or better yet allow the icons to

    • Multiple team members to access one office PC

      Hello, We have a high-performance PC in our office that we use for resource-intensive tasks. All team members need to remotely access this PC from time to time. However, when I enable remote access for myself through Zoho Assist, the PC does not appear

    • Zoho Bookings API, timezone is not recognized when passed

      Has something changed? Time zone is being passed through API but it is NOT being recognized. response is not showing time zonetime that was passed through request. This is an URGENT issue as it is preventing bookings! Seems like this is due to a recent

    • Zoho Bookings: How to set a limit for maximum bookings per day?

      Let's say I have 1 hour slots OPEN for an entire day. What if I want all of the OPEN slots to turn OFF if/when I hit a certain number of total bookings for that day? I usually only want a total of 5 appointments to be booked but I'm not sure of the exact

    • Zoho Booking API to update service for Assigned Agent

      Hi there, I have been testing and looking at the Zoho booking API for the Assigned Agent update from Zoho CRM for a long time. There is only a Fetch service request, but no updated Assigned Agent options. Does anyone know how to do that? PS: I can use

    • Zoho Accounts and Book Keeping candidate required

      Urgently required data operator who can do following tasks: Purchase Bill Entry Sale Bill Entry Bank Entries Cash Book entries 40-75 entries per days

    • Cancellation waiting list - Zoho Bookings

      Is it possible to have a waiting list in case I got a cancellation it can be filled automatically with people on this list? 

    • Zoho Bookings Integration with Make.com

      Dear Zoho Bookings Support Team, We are writing to request a new integration between Zoho Bookings and Make.com, a leading automation platform widely used by Zoho users. Current Integration: We acknowledge the existing integration with Zapier, another

    • Different Page Numbering

      I want the page numbers not just 1,2,3... but i,ii,iii,iv,... or even I,II,III,IV.... How can I do this?

    • Leads Should Support Business-Centric Structure for B2B Use

      We’re a B2B company that generates leads for other businesses and often engage with multiple contacts within the same company. For years, we’ve struggled with Zoho CRM’s limitation of requiring a Last Name field for leads. For example, if we’re pursuing

    • Zoho AI Translate – No Support for Hebrew?

      I want to use Zoho AI Translate, but I see that it does not support Hebrew. Since Zoho supports multiple languages, I was hoping this function would also work with Hebrew. Is there any plan to add Hebrew support in the near future? Or is there an alternative

    • Equivalent domains

      Need a settings feature for adding/modifying/deleting domains that use the same login service. The feature can also suggest some popular sites that use shared credentials to access domains under their control. For example: amazon.com and its local variations like amazon.in. For example: gmail.com and google.com. LastPass has this feature.

    • Can't verify DKIM key?

      So basically I just wanted to verify the email on my domain so it doesn't showup as spam in other people's inboxes. So I did what Zoho told me to do, it was to verify a DKIM key. I created the key with the address, added the correct information to the TXT file in my domain's DNS settings, tried to verify it and it keeps saying 'Verification failed'. I tried it more then once, I reset the DKIM key, and for some reason it just won't verify. Either it's me being impatient or this thing isn't working.

    • Forecast performance analysis

      Last modified on 15/05/2023: Performance analysis in forecasts is now available for all Zoho CRM users in all DCs. Note that it was an early access feature available only upon request. As of May 10, 2023, it is rolled out for all Zoho CRM accounts. Find

    • Deleting Records Older Than 14 Days

      I have a form called vacancies that contains a field "status_date". I need to create a schedule that runs once a week and if the status date is > 14 days it deletes that record.  I would appreciate anyones help.  -Aaron 

    • I need open my email in Zoho from oulook account

      Hi Can you help me to solved this First, I’m unable to access my email account via Outlook. Second, when I send any email from my Zoho account, it doesn’t reach Gmail inboxes. Thank you for your support

    • Default value for Subject field in Case module

      I would like to add a default value to the Subject field in a custom module based on the Case module. Since this field is mandatory, I can't use a workflow rule that adds a default subject if the field is left empty. So I would like to display a default

    • Zoho Payroll's USA and KSA editions are available in Zoho One!

      Greetings! We’re excited to share that Zoho Payroll, currently available only in India and the UAE, is now introducing the KSA (Kingdom of Saudi Arabia) edition and the USA (United States of America) edition, and these editions are now available in Zoho

    • Zoho books and venmo

      Hi, Is there a way to hook Venmo into zoho books? I have a Venmo business account and want to be able to sync that. I know you can do it with the paypal integration but I dont want to use paypal for the fees and that doesnt allow me use/integrate my current

    • Create custom field using API.

      Hi Zoho Support, can we create the custom field using Zoho API? Thanks, Parth Moderation Update: I'm locking this post as the feature has now been implemented. Please refer to the help link provided in the comment below.

    • I don't really understand leads in the campaigns tab on Zoho CRM

      Good morning, fellow CRM users. I am having quite a hard time understanding the leads in the campaigns tab. In this particular campaign in the screenshot below, we sent out emails to our mailing leads through Zoho Campaigns, and the data is linked back

    • what is the header code and footer code, do you provide it for my website

      I am unable to understand few terms in making website, i need your help in header code, footer code, face book pixel integration etc..

    • Zoho DataPrep

      Zoho DataPrep is not updating the dataset. I post the updated dataset in Zoho WorkDrive under the same file name. (I delete the old file and upload the updated file with the same filename.) Zoho DataPrep is supposed to pull the dataset from Zoho WorkDrive,

    • Zoho Assist Unattended Access prevent my Windows 10 Pro business computers to sleep (ever)!

      Since I begin my trial period of Zoho Assist (Unattended Access) for business, I have sleep mode issues on all my business computer. In fact none of the sleep delay worked or even if I manually click the "Sleep" button into the Start Menu... After using the "powercfg -requests" command from Microsoft to troubleshoot sleep issues, I see that Zoho was responsible to all my sleep issues. Of course after uninstalling Zoho Assist Unattended Access from my test computer, the sleep mode returned to normal

    • zoho notebook won't let me sign in on arch linux

      just gives me an eternal loop when i try to sign in within the app. signing in with google does the same, showing the blank white screen in browser at the same time

    • Where to find User Performance Page in CRM?

      Hi all Just googling answers to another forum post I've just put here when I found this page; https://help.zoho.com/portal/en/community/topic/forecast-performance-analysis-public-early-access-2023 It shows this User Performance Page screenshot. I can't

    • Zoho Payroll: Product Updates | April 2025

      At Zoho Payroll, we’re always working to make every payday feel effortless. And sometimes, that means listening closely to your unique needs. This month, we’ve focused on adding features that give you the flexibility to pay your employees based on your

    • How to mass update member status in a CRM Campaign?

      Does anybody knows how to mass update member status of the contacts (or leads) associated to a campaign. I can click on a campaign record and go to the Contacts in the Related List fields but then it shows only 10 contacts per page at once. It is hard

    • CRM API w/ Self Client (Administrator): You do not have sufficient permission to associate this record. Contact your administrator.

      I am using the CRM API and am having an issue creating a contact. I've successfully created a contact linking to an existing account by ID, but then when I created a separate test account (which succeeded) and tried to create a contact linked to that

    • I need to know the IP address of ZOHO CRM.

      The link below is the IP address for Analytics, do you have CRM's? https://help.zoho.com/portal/ja/kb/analytics/users-guide/import-connect-to-database/cloud-database/articles/zoho-analytics%E3%81%AEip%E3%82%A2%E3%83%89%E3%83%AC%E3%82%B9 I would like to

    • Allow non admins to create folders

      I want to allow users in my company to create their own reporting based upon selected Datasources, however they currently can't create folders to save their work in. This can only be done by admins, which seems excessive. Is this possible ?

    • Next Page