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

    • Cannot add new mail client

      Hi Guys, I've just got a new laptop and am trying to set up Outlook to connect to my Zoho account. No matter what I do, I cannot connect I'm using IMAP for incoming mail, it's enabled in my account settings, and I'm using the setting shown on the account

    • Zoho CRM to Zoho Projects Workflow {"error":{"code":6831,"message":"Input Parameter Missing"}} connecting

      void automation.Untitled_Function(String ProjName) { resp = invokeurl [ url :"https://projectsapi.zoho.com/restapi/portals/" type :GET connection:"zohoprojects" ]; info "Portal API Response: " + resp; portalId = null; if(resp != null) { if (resp.containsKey("portals"))

    • Zoho mail Virus Scan Virus Detected (but I checked it with VirusTotal)

      Dear all, since this morning we can;t send any attachments out. Zoho says there is a virus in it, but clearly there is not when I checked the file on VirusTotal.com. Please help us out!

    • Cant receive emails

      Hi, I just created an account and went through all steps. Everything has been set up from my end, but Ive sent a test mail to the newly created email address, but it never arrived. Can somebody please help me? Thanks!

    • Multi-column sorting

      Is multi-column sorting a planned feature for CRM? We are needing to sort by one column and then subsort by another column. I am just wondering if there is a planned feature that will allow this?

    • 　【Zoho CRM】サブフォーム内にあとから追加した数式項目を一括して計算させる方法

      皆様のお知恵を拝借いたしたくご相談させてください。 【状況】 任意のタブにすでにサブフォームが設定されており、そのサブフォームを含め、既に数千件のデータが存在している。 【実施したいこと】 新たに数式項目をそのサブフォームに追加して、入力済データのレコードも含めて、その数式項目の計算結果を反映させたい。項目の更新で数式項目をサブフォームに追加しただけでは計算されません。 【わかっていること】 任意のタブのサブフォーム外にあとから数式項目を追加した場合、数式項目を追加しただけでは当然数式項目の計算結果は反映されませんが、以下の方法を実施すると数式項目が計算されます。

    • My Zoho Mail Account Has Been Blocked for Sending Email - Block Type: Mail Outgoing blocked

      Hi everyone... My Zoho Mail account has been blocked for long time... Until now, I cannot sending outgoing email. I was already try to contact Zoho customer support, but there is no reply from them. This is notification which appear on my zoho mail account...

    • Task reminder with custom function

      Hello! I am trying to create a custom function to add a task. With you guys helping, I could create a function but I could not set the reminder. Anyone knows how to add a reminder?  Thank you for your tips!

    • Zoho Books GST enabling issue.

      Without knowing I have created a Branch in Zoho Books, Now I am trying to enable GST option but is disable? Is there anyway to enable the GST Button?

    • Add a Calender view in Zoho CRM

      I would like to ask if it's possible to add a calendar view to a custom module in Zoho CRM. Is this feature planned for future development? It would be extremely helpful for us. I’d like to allow my users to view the data visually in a calendar layout,

    • Make the edit fields hover in Canvas View look the same as the Detail Page

      The edit field UI in the Canvas View is not consistent with the standard detail page UI. For some modules we have Canvas views, for some we don't. We don't want it to look differently. We want it to look like one system.

    • Can't Find or Use Saved Replies in Inbox Module

      I'm an Admin user on Zoho Social, and I've created a few saved replies under Inbox Preferences > Saved Replies. However, when I go to the Inbox module to respond to a message, I don't see any option to insert or use saved replies. I've checked that: I'm

    • Episode II: Begin Your Automation Journey in Zoho Desk with Deluge

      To travel to another country, you need a passport. But that's not enough, you also need a visa, flight tickets, and, most importantly, a mode of transportation. Without these, your journey cannot begin. Similarly, custom functions in Zoho Desk are essential

    • How can I capture the Cliq channel name from Deluge Script?

      I am working on a chat automation with a third party tool called Make.com. Using a webhook I am relaying information from the Bot I have created in Zoho Cliq to Make.com Webhook. I am using the Mention Handler of the bot in Cliq to relay information like

    • Backstage Roadmap to Most Requested Features

      Please provide insight as to ETA for the following: 1. Backstage integration with Zoho Showtime, seems like a no-brainer.       1.a. Why does OnAir look eerily like Showtime integration we must 'pay extra for'? 2. Backstage Integration with Zoho Subscriptions

    • How to know number of days between Deal Stages?

      Hi Team - how do I know the number of days between Deal Stages? I have a Deal blueprint and I want to know the number of days it takes the Deal to be on Stage 3 to Stage 8? I can't seem to create a report for that. Our Deals have 11 Stages and our Purchasing department is in charge of Stage 3 to Stage 8 and I want to know the number of days it takes for them to complete their stages?

    • How To Change Open Activities View in Canvas?

      Hi all, I want to have my open activities have this view, but I cannot see how to make it look this way in Canvas. Not only that, but there isn't a way to rearrange the Standard view in Canvas, either. What I want (this is in the Standard layout): What

    • Queries in Custom Related Lists

      Hello everyone, We hope you’re having a great day! A while ago, we introduced Queries in Zoho CRM to help you dynamically fetch data from CRM modules or even external sources—right within your CRM interface. Many of you have already used Queries with

    • Mass emails - Allow preview of which emails will receive the email based on the criteria

      Feature request. Please allow us to view and confirm the exact recipients of the mass emails based on the criteria we've chosen before sending. It can be quite sensitive if you send the mass email to some wrong accounts accidently, so it would be great

    • Customers not receiving emails

      So, a little backstory, we have been using Zoho Forms for the past eight years. And when we initially started, we would have email notifications be sent from inside Zoho Forms after a submission. We recently started using Zoho CRM as we wanted a better

    • Sum Total of various fields in child module and add value to parent module field

      Hi! Having trouble with a custom function, im trying to calculate the total of all the rent and sqm fields of our offices in Products module and have them transfer to the parent module Location. The API names are as below: Child module Products = "Products"

    • Automate your status with Cliq Schedulers

      Imagine enjoying your favorite homemade meal during a peaceful lunch break, when suddenly there's a PING! A notification pops up and ruins your moment of zen. Even worse, you might be in a vital product development sprint, only to be derailed by a "quick

    • Mails to Deals

      Hi everybody. We are using ZOHO CRM connected to ZOHO Mail and we have a big trouble, which our ZOHO partner is not able to solve. Zoho CRM automatically connects received emails to last edited live Deal of the same Contact. For us this logic is very

    • ICICI Bank integration

      Why the ICICI bank integration has been disabled? We opened the ICICI bank account only for integraton with Zoho. It is taking lot of time to do manual payments using file upload method. When will be the new ICICI bank integration enabled in India?

    • Google Drive

      How to add more modules in google drive as I don't want Zoho space? TIA

    • Ajust quantities in another form based on subform, on form submission

      Hello, I have an Order form with a LineItems subform. The LineItems subform has many lookups that import data from various other forms. I want to deduct the quantity offered in one of those other form, called Offer. In another application I used the following

    • Workdrive connection in Zoho CRM not working

      Hi, in https://crm.zoho.com.au/crm/orgXXXXXX/settings/connections i have set up the connection for WorkDrive which is pretty much setting up the name and the scopes. But I get "WorkDrive API test response: {"errors":[{"id":"F7003","title":"Invalid OAuth

    • Best Way to Update Subscriber Preferences for an Existing List?

      We currently have a mailing list of over 43,000 contacts in Zoho Campaigns, and we’re looking to segment our list based on subscriber content preferences—things like Free Webinars, Local Training, Store Specials, and New Product Announcements. We’d like

    • You are forced to store/manage custom functions redundantly | Any solutions?

      Hello there, you are forced to store code (custom functions) redundantly if you want to use the same functionality in multiple departments. I don't understand that you can't define global functions. When I make a change to a function I may have to do

    • Integrating Zoho CRM with Quickbooks Enterprise?

      Does anyone have any experience of integrating Zoho CRM with Quickbooks Enterprise?  The Zoho pages refer to the Quickbooks Premier edition, and I wanted to know if the same works with the Quickbooks Enterprise version.

    • in Desk - Why can't I find where to enable multi-branding?

      I'm looking at the knowledge base article & it says to go to settings / general / rebranding / multi-branding. But there's no multi-branding there!

    • How to undo a reconciliation?

      I need to update the "Expense Account" field on a bunch of expenses that I've already reconciled.  However, the system will not allow this field the be changed since it is reconciled.  I haven't found a way to remove the reconciliation status for the

    • Zoho support Can not send invitation email to portal user

      I try to use Zoho support but have a problem. I don't know why. - When a customer sign up at the portal user they don't receive the invitation email. - When I go to contact manu, choose 1 user and click invite --> they don't receive the invitation email.

    • remove()function to remove characters

      Hi there, I'm trying to use the remove function to remove characters from a variable. I have a Lead source that comes in as [Google] or [Facebook] etc. in Flow I need te to remove the square bracket. Tried a function that looks something like this: string

    • Sharing files without download option

      Hi Team     We want to share folders and subfolder which has files(doc, .PPT , excel and PDF) in zoho Docs. When we share the directory to a member in the organization or external to the organization There are able to download. How do we prevent users from download. Regards Krishna V.K

    • Basic Lookup Field Update Function

      Hi! So I have no idea what I'm doing in Deluge but I need to get a custom function to run On Create or Edit that sets the value of a Lookup Field based on the contents of another field. Seems simple enough, but I have looked through dozens of other similar

    • Weekly Tips: Schedule Your Emails with Zoho Mail

      As a business, it is recommended to consider the best time to send an email, taking into account the recipient's time-zone or their work hours to have your email on top of their inbox. Sending an email when your recipient is most likely to check their

    • Data Source Request : More Zoho Marketing Automation and Zoho Pagesense

      I'm currently trying to replicate the reports shown in ZMA for stats over time for individual forms. The reports exist only in ZMA, but I want to use in wider company presentations and can't find the relevant data in Analytics : Example I also note that

    • Zoho Mail - support email

      Hi I sent an email to support more than 48 hours ago and still have not heard back! What's up? How long am I supposed to wait for a replay? Thanks

    • Syntax for <criteria> field in zoho.crm.searchRecords() function when the value to check against is a variable?

      I want to search for records in the Tasks module whereby the value of a field (called field1) matches the value stored in a variable in the Deluge script (called variable1). From the sample code in https://www.zoho.com/deluge/help/crm/search-records.html,

    • Next Page