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

    • API PARAMETER FOR TICKET CLOSED TIME

      Hi, Is there a parameter for filtering tickets by closed time in zoho api, i can see closed time in the API response i get, but can't get tickets by that field while calling. Regards, Anvin Alias

    • Reply to email addresses wrong.

      I have setup my Zoho mail account using my main domain and I also have an Alias setup from a different domain. In Settings - Mail - Compose I have selected to the option "For replies, send using The same email address to which the email was sent to".

    • Meeting integration with Otter.ai

      Would love for an integration with an AI transcription service like Otter.ai to be integrated with Zoho Meeting. Thanks

    • How to close/delete a free creator account?

      I have a free zoho creator account associated with my email address that is not being used.  I want to become a user of another paid zoho creator account but I can not associate with the paid account with the same email.  I assume if I can close or delete the free account I will be able to use the paid account. I have emailed support but no response. Suggestions?

    • Zoho books and zapier causes Invalid data provided

      I have been using zoho books with zapier for over 2 years now, everything was working fine. On September 13th my zaps stopped working. Now on step create sales invoice in zoho books i get an error: Failed to create a create_invoice_v2 in Zoho Books The

    • CRM report

      Is it possible to pull a contacts report that also includes the company industry, as well as the company name? I’m having trouble combining company and contact fields – any help is appreciated. Thank you, Sam

    • Early Payment Discount customize Text

      Hi, I’m currently using Zoho Books and am trying to customize the standard “Early Payment Discount” message that appears in the PDF invoice template. I’ve reviewed the documentation here: https://www.zoho.com/books/help/invoice/early-payment-discount.html

    • Enhancements to Client script?

      Hi Zoho CRM, I've been extensively using Client Scripts to enhance our Deal form experience, particularly for real time validations and auto updating fields based on specific logic. However, I've encountered a challenge regarding permission boundaries.

    • Add views to new CRM UI navigation + Unlimited Webtabs

      Zoho CRM is so close now to being the ultimate business application with the new UI, as soon as this one feature is added. This is probably where Zoho is headed but if it's not I want to BEG for this to be incorporated. What we need is to be able to put

    • E-Mail Distribution List

      How do I create an e-mail distribution list in Zoho Mail?

    • Custom "create meeting" button with more functionality than Zoho currently has?

      I'm looking for a little help/direction in how to do this. Even just some general high level pointers on how this might be able to be done. The current Zoho Meeting Activity functionality is not ideal for my org's workflow. I'd like to try and create

    • Error Code 4: Invalid value passed for JSONString

      Okay, I want to start by saying I know I'm a terrible scripter, so sorry if this is a dumb mistake. I just can't figure it out, even with LLM help. Here's my code: // --- Input Variables --- customer_id = salesorder.get("customer_id"); so_id = salesorder.get("salesorder_id");

    • Organizing contacts/members by company

      I work for a membership organization (representing businesses) and am trying to use Zoho CRM more effectively for managing the points of contact for our members. Currently, our members are listed in our CRM by the primary point of contact's name, but

    • Unable to search in Zoho Email

      I've started using Zoho Email (free version) recently and realized that it doesn't have email search functionality. Am I missing anything here? I've gone through the Zoho tutorial which does show the search bar on the right top of the Zoho UI. But in

    • Response Time Report

      From data to decisions: A deep dive into ticketing system reports Every organization that interacts with its customers should have an established timeframe for how soon an agent is expected to send the first response and any reply to any follow-up messages.

    • Problem : Auto redirect from zoho flow to zoho creator

      Hi there, I've been waiting for zoho team to get back on this for last couple of days. Anyone else have the problem to access zoho flow? everytime I click on zoho flow it redirects me to zoho creator. I tried incognito mode but it still direct me to zoho

    • Zoho - Outlook plugin

      Does anyone know if there is a way to modify the autofill in the Zoho plugin in outlook? When we create a contact, it enters the correct email address and name, but then pulls information from our own signature line to add phone number, address, etc.

    • Zoho Books - Sales Person Information

      Hi Team, On Invoices, Quotes, etc... I can include the Sales Person, but it only shows their name and not their email or phone number. It would be great to have place on invoice templates where we can manage what sales person information should be shows

    • Offline working in Zoho Creator portal

      Zoho's help says that offline working is only available in the Creator mobile app and not in the portal app. But I can see offline options in the portal app too and it seems to work when I test it. My portal users are often in areas where there is poor

    • Fetch Records using Dynamic Criteria

      Hi,  I have a form that builds a filter based on user input.  I need to fetch the records based on dynamic criteria.  How would I accomplish this as there is no eval function? For example: desiredRecord = Form1[dynamicCriteria];

    • Url filter Report date (pivot chart)

      Hello. Is it possible to filter the data in pivot char using parameters in the url? I'm trying but I should not doing very well. Something like: https://creator.zoho.com/.../....../#Report:MyPivotChartReport?MyDate=01-Jan-2012;31-Jun-2012;MyDate_op=58 Saludos

    • Sending gmail to a particular person fails because the address gets changed to "gmaill", with a second "l" typo somewhere

      I send to bob@gmail.com (example) and get an error sending to bob@gmaill.com, only for this one person. Note the extra "l" in the email the system tried to send to, which was not in the address I entered. Can't find a typo in the contact or anywhere else

    • Emoji Support in Bigin CRM

      We request the implementation of emoji support across Bigin CRM. This feature should allow users to seamlessly use emojis in text fields, headlines, and deals. It would enhance communication, improve the visual appeal of records, and bring more personalization

    • Bigin Booking Pages enhancements

      I would like to ask for several enhancements for the brand new (and promising) Booking feature. 1. Add "Contact/Mobile" Field to Booking form We use Mobile as key (id), but unfortunately it is missing from the Booking form, only Home Phone is available.

    • Amount in words in Indian format

      Hi, I had coded the following code to convert amount in words. But in the code in the format of US like million. But i need in Lakh and Crore. So pls suggest ideas r post corrected code string Num2Words(int val) {     val_s = input.val.toString();     th = {"", "thousand", "million", "billion", "trillion"};     // uncomment this line for English Number System     // th = {"","thousand","million", "milliard","billion"};     dg = {"zero", "one", "two", "three", "four", "five", "six", "seven", "eight",

    • What are people using to send Service based emails?

      Zoho Campaigns is for marketing. Users can unsubscribe from these emails. Service based emails need to be delivered and can without the worry of Can-spam act. What are people using to send service based emails? My mailing list is derived from a database

    • Standalone LMS tool

      Will Zoho release a standalone LMS (Learning management System) than can be used by external parties (guest)?

    • Announcing Kiosk 1.1 - Customize screen titles, configure new fields & actions, use values from your Kiosk to update fields, and more.

      Hello all We are back again with more enhancements to Kiosk. So what's new? Enhancements made to the Components Add titles for your Kiosk screens and adjust its width to suit your viewing preferences. Three new fields can be added to your screen: Percentage,

    • An Overview of Dario Schiraldi Deutsche Bank Executive

      Hello Community, Dario Schiraldi is an executive at Deutsche Bank, focused on advancing the firm’s financial services and crafting its global strategic vision. With 20 years of expertise in leadership roles, he has spearheaded successful market acquisitions

    • Emailing a document to WorkDrive

      Does WorkDrive include the ability to upload a document by sending an attachment to an email address? (Books and Expenses include this functionality) If it doesn't is it under consideration? on the Road Map?

    • Allow Changing Appointment Status from "Completed" to "No Show" or Other Valid States

      Hi Zoho Bookings Team, We hope you're doing well. We would like to submit a feature request regarding appointment status management in Zoho Bookings. 🎯 Use Case Sometimes, an appointment is mistakenly marked as Completed, but later we realize that the

    • Zoho One and Tally Integration

      Has Anyone in this forum done any implementation with Zoho CRM and Tally accounting software. If so who have you used and how easy was it?

    • Microsoft PowerPoint files Extremely slow to save

      I and others on my team have noticed that Microsoft PowerPoint documents are extremely slow to save when using WorkDrive. It always takes over 30 seconds to save a file. Word and Excel files seem to save in a typical length of time, but PowerPoint is

    • How can users unblock their blocked Zoho Mail accounts?

      After the reason for the account block (storage exceeded, spam detection etc.) has been rectified, the user can unblock the account from the UnBlock Me page. Account support@edu2review.com  Edu2Review is an education review platform, we rate the quality

    • Adding additional fields for batch information

      Hello, I am looking at adding additional information into our inventory module. we would like to be able to see up to 8 attributes that will be individual & different for each batch (i.e. batch specific information) but currently I seem to only be able

    • Dynamic Pickup List Values using Deluge and Client Script

      I would like to dynamically show Pickup List Values For example we need to fetch some data from an on premise application and display it so they can choose and pick This can be done in Creator but I didn't find anything for CRM

    • Validation Rule for Controlled Stage Movement in Deals Module (Deluge Script)

      For keeping a control over module stage or status, you can use the below deluge script. The below deluge script defines validation control over deals module stages: // Function to validate allowed stage transitions in the Deals module map validation_rule.LeadStatustValidation1(String

    • Pick List Issues

      I have created a pick list that looks at a table in a sheet, it selects the column I want fine. Various issues have come along. The option to sort the pick list is simplistic, only allows an ascending alphabetical sort. Bad luck if you want it descending.

    • Four types of task dependencies

      "Nothing is particularly hard if you divide it into small jobs."                                                                                                                  - Henry Ford Projects, small or large, are driven by simple work units called tasks. Monitoring standalone tasks might look simple but as the workflow becomes elaborate, tasks may start relying on one another. In project management, this relationship between tasks is termed as "Task Dependencies". Dependency between tasks arise

    • 1099 tracking

      Do zoho books offer feature of tracking for 1099's for contractors, etc? Quick books offers this feature and wondered when/if Zoho books will do same

    • Next Page