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

    • Include EVERYTHING in Language Files

      Hey, we are building out a system, that needs to be translated. The language files lack a few things though. 1. Blueprint names 2. Canvas View elements like tab names Please include everything into these files, otherwise it's not really a multi language

    • A way to create kits (groups of items) that do not require bundling and are added to an order as the individual items

      We are evaluating moving off of Sage BusinessWorks (which handles accounting, order entry, inventory control, accounts receivable, etc) to Zoho Books/Inventory. One of the things we heavily use is a feature called Kits, which allows creating a group of

    • Allocating Salesman To Customer

      Hello, please add a feature to allocate a salesman to a particular business customer/account. Regards

    • Shipment

      I have 70 shipments Out of which 40 delivery date are updated( since it is live tracked) 30 numbers i need to update manually. How to do it in bulk?

    • arabic not printing

      Qatar has a legal requirement to have invoices in English and Arabic. When writing invoice fields in Arabic, they don't print. Why?

    • How to show Order Number/SO Ref on Invoice emails

      When creating a sales order or invoice we have an option to input an order number or ref# (see attached images). For the Sales Order email template we can add a placeholder for the SO_REF. However, for the Invoice email template there's no option to reference

    • Specify in-line image size in question

      I have an image inserted into a file upload type question. I can click and drag the corner of the image to make it larger or smaller, but I would like to manually input the dimensions I need. No matter what size I make the image in photoshop before uploading

    • Can you limit who creates tags?

      Hi there, I'd like to find out if it's possible to limit which Agents create tags on Zoho desk. Thank you. 

    • Sudden Layout Issue After Last CSS Update for ZML (Temporary Fix Inside)

      Hi, Our clients have noticed today that every section laid out with ZML suddenly shows an unwanted top padding/blank space that interrupts the user screens. It appears that Zoho has changed the default CSS for the .zcp-col.zcp-panel-rowtype-auto element.

    • Customer paid excess. How do I record payment?

      A customer has paid me Rs. 7150 which is in excess. The amount due is Rs. 5388 I owe them Rs. 1762 back which I will be transferring to their account tomorrow. How do I get this entered into Zoho Books? I'm a little lost. :) Rishi

    • Tabular View Report | Scale To Fit Screen

      Please add the option to scale Tabular View reports to fit the screen. I constantly have to adjust the column size of Tabular View reports to fit various screen sizes and it just looks messy. You can see in the screenshot below there is a blank gap after

    • Why Server error in creatiing Landing Pages

      Hi Zoho Team, pls see my screenshot and tell me, what's wrong. Thx

    • Tip 31: How to make a field in a Zoho Creator form mandatory based on criteria

      Hi folks,   I'm sure most of you are familiar with the Mandatory property available in our form builder. It enables you to ensure that your users enter an input in a required field. If they don't enter an input in that field, they'll be unable to submit

    • Bulk update account type when adding a bill

      Hi I've only been using Zoho Books for a short while but I'm impressed so far, keep up the great work. One minor issue I'm coming up against is when creating a new bill from a scanned document (supplier invoice). In some cases, the supplier invoice could

    • How to start fresh after many years of using Zoho Books without deleting everything and creating a new organisation?

      Hi, I have used Books since 2016, but never reconciled with my bank account. I was thinking of trying to go back and fix that, but I don't just don't have the time it would take. Instead, I'd like back up my old records and start anew. What is the best

    • How do I modify the the incoming/current call popup? I can modify other call pages but not that one.

      I want to modify the incoming and active call popup on the crm to include customer relevant information, such as purchase history or length of relationship. Under modules and fields, I don't seem to see active call as a choice to modify, only the main

    • Canvas: Add Sections to Detail View

      Currently it is only possible to add fields to a canvas detail view. This makes Canvas hard to maintain, because everytime we add a field to our system, someone needs to go into the canvas view and add it there as well. This leads to additional work and

    • Automation#32:Auto Add New Portal Users to the Help Center User Groups

      Hello Everyone, Introducing a custom function that automates the process of adding new portal users to Help Center user groups, making user management effortless! By default, Zoho Desk allows you to assign new portal users to groups manually. But with

    • Cannot delete old accounts

      Hello, I try to delete old accounts from CRM, but it won't permit, saying documents are still linked to them. I searched in CRM and BOOKS, found some documents and deleted them, but still CRM won't delete them. Any idea how to do that ? I have a lot of

    • Offline mode on Android TV app?

      Hello! Is there a way to use Zoho Show offline in the Android TV app? I have an Android TV based projector, and I travel with it, and don't want to have to rely on a steady internet connection when giving a presentation.

    • Choice-based Field Rules on Global Lists

      Hi, The new Choice-based Field Rules should also be able to work with Global Lists not just local lists. Thanks Dan

    • Tip #36- How to use Survey in Zoho Assist to capture valuable feedback from remote sessions- 'Insider Insights'

      The survey feature allows technicians and customers to share their valuable feedback, contributing to the improvement of remote service quality. After the completion of a remote session, technicians and customers are prompted to fill out a survey form,

    • Narrative 3 - Comprehending User Management

      Behind the scenes of a successful ticketing system - BTS Series Narrative 3 - Comprehending User Management User management in a ticketing system includes important aspects of how administrators oversee user access, roles, and permissions. This process

    • Product Details's Description is lost

      Hi CRM lost its description in Product details subform. Can you make some test before deploy any update?

    • Sent items with shared folders

      Hello, this is in some way in between a problem and an idea.  When sharing folders (which is actually not any close to a shared mailbox...) the person which the folder has been shared with can access that folder and can send emails when delegation is

    • Zoho Bookings Issues We are facing

      Hi team, Here are list of issues we are facing with Zoho Bookings when migrating from other platforms. Sorry there is a lot but the bookings app need to be functional and practical for people to actually use it and not-cause MORE problems by being so basic and not customisable to each business.  1: SMS reminders for staff  There should be time limits on these reminders to make them useful. EG. if a new booking comes in more than 4 hours from now we don't really need to get a reminder, however if

    • Run workflow on data import in Creator 6

      How to run a workflow on data import in Creator 6?

    • Multi Day booking for resources

      I have following business-case: Rental for Tablets. Customer should be able to select how many device for how many days he'd like to rent. Same as a car rental for multiple days. Is this possible with Bookings on the current version?

    • Add Usage & Voting Analytics for Knowledge Base Articles in Zoho SalesIQ

      Dear Zoho SalesIQ Team, We appreciate the current integration between Zoho Desk and Zoho SalesIQ that allows knowledge base articles to be synced and displayed to users directly within the SalesIQ chat interface. One valuable feature already available

    • Real-Time Alert or Status Indicator for WhatsApp Connection Issues in SalesIQ

      Hi Zoho Team, We’d like to request a feature enhancement in Zoho SalesIQ related to WhatsApp integration stability and visibility. Recently, we encountered a critical issue where our WhatsApp bot stopped responding to messages without any warning or alert

    • Customization of Chat Transcript Emails in Zoho SalesIQ

      Hi Zoho SalesIQ Team, I hope you're doing well. We would like to request the ability to customize the email template that is sent to clients when they request a chat transcript from SalesIQ. Currently, when a client clicks the button to receive their

    • Import from Linkedin

      Please provide a way to enable importing contact information for Contacts and Companies from Linkedin? Thanks

    • The ability to format text fields, ie when data is number or currency

      Hello, I have spent some time trying to determine how to accomplish this but it appears to be impossible. I want to merge a currency field from CRM into a PDF document. The CRM data shows $1,234, but when zSign gets the data it shows 1234 in the text

    • Tip of the Week #64– Customize your sidebar for a more focused workflow.

      When your shared spaces start filling up with too many views, it gets a little harder to zoom in on what really matters. You find yourself scrolling more than working, and the things that need your attention? They’re often buried down below. Custom sidebar

    • Zoho Social - Queries about GST invoices and subscription

      Hi, I am going to purchase the Zoho Social tool with a yearly subscription. So, can you please help me with my below queries: 1. How I get the monthly GST Invoices? 2. What is the process of subscription? 2. How to cancel a subscription?

    • Sales IQ needs to capture both first and last names

      Sales IQ chat only has one field for name. When this then syncs with Campaigns, the field populates the "last name" field in Campaigns. However most people fill in the "name" field of Sales IQ with either their full name or their Christian name. This

    • Multi-Card Selection and Cross-Zobot Copy-Paste Functionality

      Dear Zoho SalesIQ Team, We’d like to suggest a productivity-enhancing feature for the Zobot builder in Zoho SalesIQ: the ability to select multiple cards (modules) at once using a selection area, and then copy-paste them either within the same canvas

    • Personal Link / Meeting ID

      with zoho meetings do I have my own personal link to my 'meeting space' ? I have an email template in Zoho CRM which confirms people's appointment with me, I would like to include the link to my Zoho Meetings so that they have it in advance. How do I

    • Ability to Initiate WhatsApp Template Messages in Zoho SalesIQ Without Preexisting Chat

      Hi Zoho SalesIQ Team, I hope you're doing well. I understand that with the WhatsApp integration in SalesIQ, clients can contact us via WhatsApp, and we can use WhatsApp templates to send messages outside of the 24-hour window by reopening an existing

    • Making money out of Zoho Sheets - How?

      Hello, Suppose I come up with a brilliant Zoho Sheet that I want to sell to other people, can I do this? How? Thanks.

    • Next Page