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

    • Unable to invite contacts

      Hi! I'm unable to invite contacts as end-users from my trial account. The green pop-up displays "Invited succesfully" but the email never arrives, nor the re-invitation - even though it's "sucessfully" as well. Tried with several e-mail accounts, even

    • Set expiration date on document and send reminder

      We have many company documents( for example business registration), work VISA documents. It will be nice if we can set a expiry date and set reminders ( for example 90 days, 60 days, 30 days etc.,) Does Zoho workdrive provide that option?

    • Refresh Page Or View After Workflow-Triggered Rule

      Good Morning, Is this feature that's discussed on this CRM thread available on Recruit? https://help.zoho.com/portal/en/community/topic/refresh-page-or-view-after-workflow-triggered-rule

    • Forward, attach, or flag email to an open ticket.

      Hi, when resolving customer requests through tickets in Zoho Desk, it is very common to receive emails from suppliers or third parties in Zoho Mail accounts or email groups that are not registered in the system. Is there any way to forward these emails

    • Need help adding Zoho Vault License

      "Proceed" is grayed our when i try to add 5 more license on our Zoho Vault account. Thanks

    • 'call for best price' option

      Hi guys, Pricing of items that we sell to end-customers changes often, so I don't want to put up a 'static' price, but would like to have the option to 'call for best price', or what-ever the best wording is.. Has anybody got a suggestion on how to do

    • Modifying product search in invoice field

      Hello, I imported my product list in Books. Since I have many products with the same name, but with different order units, and that Books doesn't permit same names in items, I used ID's number has product name, and put the product name in the description.

    • How do I embed the webinar into a webpage?

      All I can seem to do is embed the signup form. This is cheesy. Surely they must have fixed this by now, right? How do I do it?

    • 404 Error When Using record_cursor in ZOHO.CREATOR.DATA.getRecords (js api)

      Iam working on fetching all records from a Zoho Creator report using the Get Records API (V2.1) with the following recursive function: js CopyEdit // Recursive function to fetch records using record_cursor from the response function fetchAllRecords(recordCursor

    • Add haptic feedback when QR / barcode is scanned

      Hi, One of my user has a Creator App and scan QR codes. He suggests a haptic feedback is a great addition to validate that the QR code is effectively scanned and inserted in to the field. He is using an iPad for scanning. Thank you !

    • Input list of records in Lookup

      Salut, I have 2 scripts that input list of records in a lookup. The first on works fine, the second one doesn't and I do not know why. The only differences, is that the first one input in a lookup a list of records from an actual lookup field, and with

    • In line code commenting in Deluge

      A request to enhance readability: currently you can add 'in line' comments for Deluge code, but after you save and reopen, the comments are moved down to the new line. i.e. info "test response"; //this is a info statement for a test response gets changed

    • Delete purchase order

      Buenos días, quisiera su ayuda para retirar los documentos adjuntos, ya que necesito iniciar sesión nuevamente para la venta de unos vehículos.

    • Zoho One Groups and Departments - how are they used ?

      I've seen that Zoho One has the ability to create Groups and Departments, however they don't seem to do anything ? There is no ability to pick up these same groups in ; Zoho Analytics, Zoho Forms, Zoho Vault for just starters . Why aren't the Zoho One

    • Automate Note Creation for Service Appointments

      Hi Latha, I hope you're doing great. Thank you for your continued support in helping resolve previous issues — it's truly appreciated. I'm currently working on automating another workflow using Deluge in the Service_Appointment module. Specifically, I

    • Date & Time Field | Minimum 24 hour notice.

      I'm trying to use Zoho Forms to build a booking request form. I have the date and time field selected as the field users can select their booking time for. My issue is I need a minimum of 24 hour notice for each appointment. I have it sent to only future

    • I can't understand Quiet Mode

      I want to set my Zoho mail notifications to only show during set times. I only want to see my notification pop-ups from 9am-5pm Monday-Friday. Or, in another words, I don't want to receive pop-up notifications between the hours of 5pm and 9am and for

    • Add subform record on data import

      I have some data pulled from analytics. I also have a "Projects" form with an "Assignments" subform linked to the "Assignments" form (not a blank form). Now when I edit a Project record, I can add new assignments manually and it will add the records in

    • Update Main Form Date with Most Recent Subform Submission Date

      Hello, I have a field in my main form (equipment info) with the "date of last equipment inspection". I have a subform (equipment inspection) That wheen submitted for a piece of equipment I would like the submission date of the subform (equipment inspection)

    • Need Help with MX Record Verification

      Dear Zoho Mail Support Team, I’m setting up Zoho Mail for my domain "nexiumdynamics.com" and have already added the MX, SPF, and DKIM records as instructed. The domain DNS is managed through Odoo. However, the MX record verification on Zoho Mail is still

    • ¡Participa en los Zoholics Awards 2025!

      ¿Tu organización utiliza el software de Zoho de una forma innovadora? ¿Has logrado resultados dignos de noticia con nuestras aplicaciones? ¿O tienes un caso de uso especial de Zoho que te gustaría compartir con el mundo? Si es así, ¡este es tu momento

    • Email Stuck in "Retry Queue" – Host Not Reachable

      Hello everyone, I’ve been encountering an issue when trying to send emails. Although the email appears in my Sent folder, it doesn’t reach the recipient, and I see the following status: In Retry Queue Temporary failure when delivering email to the recipients.

    • Identify, Qualify and Retarget Potential Leads Using Zoho SalesIQ & Campaigns

      Finding the right leads can often feel like guesswork. Because not all your website visitors are worth targeting — some may just be browsing, while others may have landed in there by accident. So how do you filter out the noise and focus on those who

    • Don't Receive Email

      Hi, I would like to report a problem . One of registered email in my organization is info@kedata.id . that email is used to register into MongoDB atlas. But for that case, i have a problem which the email of verification code from MongoDB atlas haven't

    • Laravel - Failed to authenticate on SMTP server

      For some reason, I cant send e-mails from my Laravel app Error: Failed to authenticate on SMTP server with username "myuser" using the following authenticators: "LOGIN", "PLAIN". Authenticator "LOGIN" returned "Expected response code "235" but got code

    • Custom View Row Limit?

      Is there a way to view more than 5 rows on a "Custom View" component on a user's homepage? I didn't see an option when creating or editing it. I'd like to be able to show the users 10 tasks at a time if possible.

    • Unable to import canvas template to canvas forms

      I'm unable to import exported canvas template to canvas form, the canvas form not recognizing the template code plus the canvas import prompt title is (Create your own form page) instead of import, find the attached screenshot Please advise

    • Remote Control Functionality During Screen Sharing in Zoho Cliq

      Hello Zoho Cliq Team, We would like to request the addition of remote control functionality during screen sharing sessions in Zoho Cliq. Currently, while screen sharing in Cliq is very useful, it lacks the ability for another participant to take control

    • Power of Automation :: Automatically Approve/Reject the associated timelogs of Issues

      Hello Everyone, A custom function is a software code that can be used to automate a process and this allows you to automate a notification, call a webhook, or perform logic immediately after a workflow rule is triggered. This feature helps to automate

    • Zoho Desk iOS and Android app update: Attachment restriction

      Hello, everyone! We are excited to introduce an option to restrict uploading certain attachment types on the Zoho Desk app. This feature allows you to specify the types of attachments are allowed to be uploaded and shared within the Zoho Desk. This can

    • Zoho CRM Outlook integration: no option showing up even after installation

      I followed the instructions on this page to install the add-in: https://help.zoho.com/portal/en/kb/crm/integrations/microsoft/ms-outlook-add-in-for-zoho-crm/articles/outlook-add-in-for-zoho-crm#Understanding_the_add-in But I don't see the options in Outlook

    • Portal URL Not Working?

      When I view my Company Profile, it shows my portal URL as being not created although it has been.  For example my profile shows the following:  https://meeting.zoho.com/a/..  The directory name that I chose is missing and it appears that I need to create a new Portal URL although one already exists for my organization. When I try to visit the URL that I previously created, I receive a "Page Not Found" error.

    • Improve user efficiency with Automated reminders

      When it comes to business, keeping up with the deliverables is imperative. Automated reminders help you just with that, allowing you to set up notifications that are automatically triggered to your workspace users to remind them about important updates,

    • Setup Outlook for domain email address fails

      I am trying to setup outlook for one of my domains email addresses and I am unable to add the account in Outlook I get "Operation could not be completed" errors. I am using the imap.zoho.com 993 for incoming and smtp.zoho.com 465 for outgoing email. I

    • Free webinar alert! Empower Customer Experience in a Changing World with Zoho Desk and Zoho Workplace

      Hello Zoho Workplace Community! We’re back with another exciting webinar—and this time, it’s all about delivering exceptional customer experiences. Join us for "Empower Customer Experience in a Changing World with Zoho Desk and Zoho Workplace," where

    • Portal permission for report only

      Hello, I have a hard time setting portal permission for my users. I have a form that is an order subform for items. I use that subform to create a filtered report for sellers to see their own orders, but at the same time I have to give them access to

    • How to modify query from a DataBridge Connection

      Hello, I just installed the new DataBridge tool to import data to our Zoho Analytycs account from our local database. It works well so far, and data gets sync every day. The only issue that I found is that we do not know how to modify the query that imports

    • Tip of the Week #55 – Assign roles to inbox members

      Ever heard the phrase, "Right people, right access"? That’s exactly what you can achieve in Zoho TeamInbox by assigning roles to your inbox members! In any team, not everyone needs the same level of access to your shared inboxes. Some members may need

    • iOS 18 is here! Discover the enhanced Bigin app with iOS 18, iPadOS 18 and macOS Sequoia.

      Hello, everyone! We are excited to be back with new features and enhancements for the Bigin app. Let us take a look at the new iOS 18 and iPadOS 18 features. The following is the list of features covered in this update: Control widgets. New app icons.

    • Fourth Insight - The power of Multi-Layouts

      The Wheels of Ticketing - Desk Stories The power of Multi-Layouts In the previous insights, we have established that layouts are the foundation for a ticketing system, and fields are the building blocks for the same system. Fundamentals of layouts Fields

    • Next Page