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

    • App Crash on MacBook Pro

      Hi Zoho, I am still struggling to keep Zoho Notebook stable on my Mac platform. I have sent in a couple of crash logs and I am making sure I have the latest version from the Mac App store. I love this application and really want to get it stable. The

    • Automating Sales Order Confirmation & Picklist Generation in Zoho Inventory

      Hi everyone, I’m looking to automate the sales order creation and confirmation process in Zoho Inventory, along with the automatic generation of picklists with bin-level details. Here’s what I need: Sales orders should be automatically created and confirmed

    • Spotlight series #7: Path animation

      Animating objects on your slide helps make your presentations lively and interesting. Animations add movement to an otherwise static deck, which helps grab your audience's attention. While you can animate your objects' entry and exit, or use animation

    • Zoho Forms to Zoho Projects

      Can Zoho Forms be used to collect task details and automatically create a new task under a specific project in Zoho Projects upon submission?

    • campaings flagging domain error but crm says OK

      campaings flags error with domain buy crm says notig wrong - this is new, help

    • Zoho Books - Currency Conversion

      I am trying to convert all the transactions into another currency such as converting multiple currencies into global USD Currencies. How Can I do this ?

    • Changing Default PDF Name

      Is it possible to change the default name of a PDF? As of right now, all of my quotes are named 'QT_$QuoteNumber' (i,e: 'QT_19803471298374) - would it be possible to change this to: '$CompanyName - $AccountName - $QuoteNumber' for instance?

    • Singup Form Embed code won't load

      I created a new signup form, and can't seem to get the code to load in to make it usable. It is constantly stuck with the loading image. The only code I can access is the iFrame code.

    • Workflow : Update a multiline text field

      Hello, I'm creating a workflow to update a multiline text field. But it looks like I only can format my text as a one-line. How can I format the text to multiple lines ? Thanks

    • how to prevent double entry

      How to set up a form so that someone cannot fill it out twice or more Thanks a lot

    • "The data you have entered already exists" when trying to create contac@mydomain.com

      Hi all, Our domain is ananasjuicebar.com. Working as admin in the control panel: When I try to add the email account "contact@ananasjuicebar.com" I get the error: "The data you have entered already exists" I've tried creating a new user or creating a new group with this address associated. To my knowledge this address has never been added and I can also not find any reference to it. (Shopify used this address to send customer notifications BEFORE setting up Zohomail.) Any ideas? are there any restrictions

    • Incoming Emails Are Delayed by 20 Minutes

      Emails are showing up in my Zoho email 20 minutes after they were received. Is Zoho having problems with their servers at the moment? This started happening about 3 weeks ago.

    • Sharing shreadsheets

      My wife and I each have zoho accounts. If She creates a spreadsheet and shares it with me using my email that is associated with my account, zoho shows a warning that I do not have a zoho account and the only way I can access this file is via the link

    • Filter Vendors/Suppliers from Campaigns

      We are unable to filter out our vendors/suppliers from any mass campaigns we send out. When synching our CRM contacts within Campaigns, we are unable to map the "Vendor Name" field. We have tried to create a segment from our all contacts list but to no

    • Field Validation and Profile restrictions bypassed using Mass Actions

      We have a Validation Rule that prevents ticket closure if the "Subcategory" field is blank. This has been working fine, but recently we noticed a few tickets per day somehow being closed without a "Subcategory". Upon further investigation we found the

    • Any Companies using HubSpot for Marketing integrated to Zoho CRM ? - Looking for Feedback

      Our company is using HubSpot for Marketing looking at moving from our presently working Z-CRM to hubspot for CRM. I am looking for any companies that are successfully integrating HubSpot Marketing functions with Zoho CRM. Upsides/Downsides/Effort/etc.

    • Customize Thank You message for native forms

      While it allows me to add a personalized message when completing a form, it would be nice to be able to customize the title (Thank You) and the button text (Close). In my case, the page is in Spanish, and those texts are in English, so I can't edit them.

    • Customize forms validation for native forms

      I'd like to be able to edit and/or translate the validation messages of a native form. My page is in Spanish, but the messages appear in English, and I couldn't find a place to edit what I want to display. Perhaps they can be edited when adding fields

    • Add picklist in subform lookup

      Hello, I am trying to rewrite a script that works on a from as parent form, to the same form when is is a subform. Here is what I did in the form itself : RefCat = Offre_de_produits.distinct(Categorie_OFFRE); clear Categorie_LIGNE; for each Record in

    • Ticket layout based on field or contact

      Hi! I want to support the following use-case: we are delivering custom IT solutions to different accounts we have, thus our ticket layouts, fields and languages (priority, status field values should be Hungarian) will be different. How should I setup

    • Looking for basic script structure course

      Hi, I am not a programmer, but try to learn on my own. I get a lot of good advises in this forum, and thanks, but I tend to ask the same questions since I do not remember comparable answers I already received. Is there a basic course of "scripting structure"

    • How to let only account-bound products visible to users

      Hello friends, I'm trying to leave only the Products linked to the accounts visible to Zoho Portal users. If the user clicks "All Products," they can open tickets incorrectly for products that do not belong to the account that are registered. Is it possible

    • RTL Support on iPad

      hi I have this issue that when I create notes on my android app [in hebrew] all the text is aligned correctly to the right because I’m typing in Hebrew. But then when I open it up on my iPad, everything is suddenly aligned to the left and there is no

    • No sync

      I have amended a note on my PC, startet syncing but on the smart phne sync starts und runs for minutes. The note amendment ist not shown, but when I go to version the new version is shown but not possibility to accepte the new version

    • Dark mode

      Because the whole world talks about it and iOS also will get this option. Please make a real dark mode happen. It is very cool to switch the navigational color, but the content always stays in light colors.

    • Compliant SQL?

      I am a Microsoft Access developer. At the moment I am downloading tables from Zoho into an Access database to create join queries that I am unable to do in Zoho. I am doing this because Zoho doesn't seem to fully support all SQL statements that Access

    • Assign existing general timelog to a task

      Hello, is there a way to assign a General timesheet log to a task? I.e. I have the following General log: General | Log name | 01:30 I'd like to assign it to a task: Task name | Log name | 01:30 Thank you

    • "Error while processing" when I try to send an e-mail

      Several times today when I have tried to send an e-mail it tells me that there is an "error while processing." What's that about?

    • E-Mail auto-complete for deleted contacts

      I am having contacts pop-up in auto-complete when I start to type a letter in the TO address line. These e-mail address have been deleted from my contacts. I also have deleted all e-mails from/to these e-mail address but still there address is showing

    • How to validate Rich Text in Zoho Creator! Urgent!

      Hi members, Recently I just started to use Rich Text field. Now I have a requirement where I need to validate to ensure this Rich Text field must contain a value. Meaning must contain something. I use the below script if(input.Rich_Text == null) { alert

    • Public send to group address?

      Am I doing something completely wrong or is it not possible for the public to send to a group email address? For example support@domain.com? I'm able to send from support@domain, but am not receiving emails to that address? Thanks for any help!

    • What to Add in the Redirect URIs for Zoho Books Integration with Make.com

      I'm currently setting up an integration between Zoho Books and Make to automate my accounting processes. However, I'm stuck on the Authorized Redirect URIs part and could use some help. As part of the OAuth authentication process, I need to configure

    • Allowing workflows to execute as an admin

      Workflows currently seem to execute with the permissions of the logged in user. This is a problem for most of the forms we have where we have hidden fields that perform business logic. If we restrict the permissions of these fields so users can't view

    • Announcing Trident desktop app for Zoho Mail & Zoho Workplace users

      Hello Community, I hope you are doing well and staying safe. As you know, our Mail & workplace teams have been constantly working on adding more value to our offerings to ensure you and your organization continue enjoying your Zoho experience. As part

    • Announcing new features in Trident for Windows (v.1.25.8.0)

      Hello Community, Trident for Windows is here with exciting new features to elevate your email communication and enhance productivity. Let’s dive into what’s new! Accessing delegated mailboxes. Mailboxes delegated from the Zoho Mail web app can now be

    • Images in Zoho chat

      When I add an image to my chat, it just doesn't work, for the other participants it shows a blank image, like it's missing.

    • Custom Function to Format Phone / Mobile numbers in Australian Standard format

      So I got sick of phone numbers being formatted incorrectly and Zoho not doing anything to standardise phone numbers to meet E.164 formats. So I went and coded my own function to fix this. And figured I'd share with the community This is specifically for

    • Download pricebook products & details - not just pricebook creation date & name

      We're looking to download a copy of a pricebook and its associated products & book prices (as we have several offices in different countries selling the same products), however, when using the export feature under Data administration it only gives me

    • Output product SKU in ecommerce

      Hi how do I display the product SKU on the page can I place the SKU variable on the layout to output the SKU value.

    • Support for Digital Goods/Products and password protection

      Hi! Some companies sell product licenses or digital products directly, these licenses are unique for each sale that later allow you to download a ZIP file with a passwod-key that can uses the same license code (for example, a market report) or, failing that, is used in the product such as an authentication in the software or a request. It would also be interesting those who sell in subscription mode and can be integrated with Zoho Subscription. Thank you

    • Next Page