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

    • Hide Admin Only settings

      It would be nice if the setup menu items and settings weren't visible to non-admins. Seems like there is some confusion with users going through setup pages but not having permissions and getting an invalid permission error.

    • Zoho Projects API fails to update integrated field

      I would like to update via API a Projects' project custom field, which is an integrated_field with Zoho CRM Accounts module. I identified the custom field identifier via the GET custom fields info api call, as described here. The custom field has id "UDF_TEXT1".

    • Using Zobot with ChatGPT Assistant Function to Trigger API Call (e.g., Weather Info)

      I am currently integrating Zobot with an OpenAI ChatGPT Assistant using function calling. The goal is to let the Assistant trigger specific API actions based on user queries — for example, fetching the current weather when a user asks, “What’s the weather

    • How to identify a ticket merge through Webhooks?

      The ticket merge functionality moves all Threads and Comments from one Ticket to another. I want to identify this action to correctly apply these changes on my application end. Currently, my application only receives a Ticket_Update notification for the

    • Native SMS Integration in Zoho Desk

      I’d like to request the addition of native SMS integration within Zoho Desk. While email and chat are still widely used, SMS has become a critical channel for fast, effective customer support, especially for urgent or time-sensitive issues. At the moment,

    • Share Projects with Vendor Zoho Projects Portal

      I have a vendor/reseller of my services. They private label my services. My portal is branded. Can an individual project be "shared" or the data sync with another portal? I believe that this can be done with CRM.

    • Timentry and Support Plan Relationship

      Timentry and Support Plan Relationship A customer can buy multiple products and request different SLAs and support plans for each product. We can enter different support plans and define the credit. The scenario I want to happen; - To reduce the credits

    • Issue with ticket replies via Slack: '+' symbols replacing spaces in emails

      Hello, support team! We're experiencing an issue when replying to tickets directly through Slack. When the reply is sent to the email, spaces are being replaced by '+' symbols. This makes the message harder to read and understand. Is there any solution

    • Allow 2 logos for Branding, one for Light Mode and one for Dark Mode?

      Our logo has a lot of black text on it. If we leave the background transparent, per recommendation of Zoho, when a user is viewing a file and turns on dark mode, our logo is not really visible and looks really weird. It would be really great if we could

    • Android notifications not working

      I've set push notifications to 'on' in ZohoMail for android settings but nothing doing. Can anyone help? I do use a VPN.

    • Email Templates - Increase Width

      The email templates created in CRM do not seem to allow to widen the margins.  When the template is dropped into an email, the copy is centered in the email.  Is there a way to increase the width or the margins so the text simulates a normal email?

    • my clients are not receiving mails

      Hi, My clients are not receiving my mails sent . may we know the reason My dns server and imap settings are perfect

    • zoho mail and crm is very slow

      I have recently employed Zoho in our organisation. Even after taking high speed internet, mail and CRM takes many minutes to even load. Its really slow and faces lot of downtime.

    • How to use if_case with expressions other than equals

      I'm trying to define a formula column that implements logic like this case statement would: case when numfld1 is null then null when numfld2 > 0 then 100*numfld2 when numfld2 < 0 then numfld2 else 0.0 end In formula columns, the docs say you need to use

    • Create global project dashboard for all users

      Would like to be able to create a custom dashboard for projects with certain widgets that are default for all new projects.  right now, I have to modify each project dashboard per project per user.  This is not practical.  

    • Inline images are not shown on iPhone

      When I add an image inline it gets displayed on a Zoho's computer software or web browser, but not on Zoho's iPhone app - the image appears to be broken and cannot be copied neither saved. What's the problem with displaying images inline when reading

    • Kaizen #186 : Client Script Support for Subforms

      Hello everyone! Welcome back to another exciting Kaizen post on Client Script! In this edition, we’re taking a closer look at Client Script Support for Subforms with the help of the following scenario. " Zylker, a manufacturing company, uses the "Orders"

    • Viewing Live data

      Where can I see the live data that is sent from the device?

    • Canvas templates can now be shared with different CRM organizations

      ----------------------------------------Moderated on 14th February, 2023------------------------------------------- Dear all, This feature is now open for all users in all DCs. To learn more about importing and exporting canvas templates, read our help

    • CRM to Writer Mail Merge Preview not working

      When performing a mail merge from CRM to writer the preview function does not work. I get the following error. I am a Zoho one user on a ChromeOS. I have been successfully using mail merge from CRM to Writer about 4 years. This error seemed to coincide

    • Show Call History During a Blueprint Transition in Leads Module

      Hi all, I have a Blueprint set up in the Leads module with a transition to Reattempt Call, which updates the lead status to Attempted Contact. I’d like to know if there’s a way to show the call history or at least a summary of how many call attempts have

    • How to delete more than 100 leads at a time.

      We are a call center and we need to upload fresh leads daily.  Is there any way to delete all leads only at once.  Currently we are deleting 100 at a time. Please anyone who can help. Thank you.

    • The Next Chapter for CRM for Everyone: Moving from Early Access to Phased Rollout for Customers

      #CRM25Q1 Hello Everyone, Until now, CRM for Everyone has been available in early access mode exclusively for users who opted to try the new version. We are now transitioning to a phased release, starting with the basic edition. We are thrilled to announce

    • Canvas for related lists

      Hey, we would like to customize our related lists. For us, it would make more sense to present the data from an assigned record vertical instead of horizontal. Can we get a related list Canvas view?

    • ACR Phone mobile app for logging phone calls into Zoho CRM

      ACR Phone is an Android app recording voice calls with additional features such as blacklist, cloud upload, call log and more. Use the ACR Phone extension for Zoho CRM to generate Leads and Contacts with the voice recording attached right after your phone

    • How can I throw an error / terminate the flow from within a custom function?

      As the subject says. I would like to be able to terminate a flow from within a custom function if certain conditions are not met. I know I could hook a decision box to the output of my custom function and check return variable, but hoping there is a more

    • Multiple Zoho Attendees in a Customer meeting

      We are having constraints with having to log duplicate meetings when we have 2 Zoho users attending a customer meeting. What are the options to resolve this? You can add participants, but you cannot report on them. What can be done to avoid creating so

    • Password change restriction

      Can the administrator restrict users from changing their email password?

    • MS PowerApps Custom Connector

      Has anyone successfully connected to the API from MS PowerApps? The OAuth2 seems impossible to use from a platform like this.

    • Zdk-cli

      As i have tried to login to zdk cli as it returns this error ✔ Success! Logged in as JAYANTHAN ✖ Error during initialization of zdk api supported only in sandbox environment

    • Trying to do commission tracking with zoho crm, can i do a Lookup against multiple fields in a module?

      So i'm still designing my zoho one crm as i come over from salesforce. One of the things i'm trying to build is a commission tracking module. At some point i'll probably hire someone to help with custom code, I'm just proof of concepting it. I"m not sure

    • Customer Portal Zoho Desk | Sort ticket list

      Hello, If you view the ticket list inside the desk portal (https://xyc.zohodesk.eu/portal/de/myarea?departmentId=xyz) all tickets are displayed depending on the filters: department "my tickets" / "team tickets" status group/type channel My questions:

    • Customer/item(s) bought view

      Hello In Inventory/Customers/Transactions tab, how do I see what it is the customer actually ordered/bought without having to open each SO? Our customers buy a number of items thoughout the year. I've look at each transactions drop down, and no-where

    • ERROR: Product type cannot be changed for Items having transactions.

      I have mistakenly added a product type as goods for an item that was a digital service. Now when HSN/SAC became mandatory, this brought my attention to this error I did. So I tried changing the product type but it displayed this error message Product

    • Inventory Asset vs Finish Goods vs Work in Progress please explain or help me choose

      New to this so please if you can help in any way I would really appreciate it. So here we go. I make and sell and item which is made out of bunch of other items. (Composite Item). Now one of the parts that the item is made from is also a composite item.

    • WorkFlow to Update Custom Field in Sales Order with Tracking Information from Shipment of that Sales Order

      Hello All- I'd like to update the sales orders with the tracking information I enter in the shipping document. What is the proper variable to get the tracking information out of the shipping document? See attached.

    • ZOHO Desk-Enable Ticket Notification sound

      Hi, I answer the helpdesk tickets for Sevenstar. How can I enable the Ticket Notification sound when I receive a new ticket?

    • Batch Tracking Enhancements In Zoho Inventory

      Hello users, We’re excited to announce that we’ve taken batch tracking to a whole new level in Zoho Inventory! We’ve made it more accessible and easier to use than ever. Here’s a quick look at the improvements: 1) A New Way To Create or Modify Batches

    • Workflow not triggered by custom function field update

      I have a simple workflow that triggers when a field is updated on a Deal page. It works fine when I "manually" update the field via "edit" on that Deal page. It does NOT however work or trigger when that same field is updated with a custom function. I

    • Version history for Zoho CRM Functions

      Hi Zoho Support, I am wondering, there is no topics been posted for requesting the Zoho CRM Custom Functions Version history. It would be great to have mandatorily needed feature in Zoho CRM custom functions. Is there any work going on for this feature.

    • Next Page