Kaizen #174 : Client Script Commands

Kaizen #174 : Client Script Commands

​

Hello everyone!

Client Script Commands feature is a highly anticipated functionality that enables users to trigger Client Scripts anywhere within Zoho CRM, extending the scope of client script beyond standard pages and events. In this Kaizen post, we'll explore how to implement and utilize this feature effectively.

In this post,

 

  1. What are Client Script Commands?

  2. How to create and use Client Script Commands?

    1. Using Command Palette

    2. Using Keyboard Shortcuts

  3. Scenario - 1

  4. Solution

  5. Scenario - 2

  6. Solution

  7. Summary

  8. Related Links

 

 

1. What are Client Script Commands?

Client Script Commands feature is another dimension of Client Script that enables users to trigger them anytime and anywhere in CRM, extending their event-driven functionality beyond just specific modules and pages. This functionality can be accessed through custom keyboard shortcuts or a command palette, making it easier for users to perform repetitive tasks quickly

2. How to create and use Client Script Commands?

Create a command by specifying the Category as Commands (instead of module) while creating a Client Script.




Check this documentation for more details.

To trigger a Command, you can use one of the following ways.

A. Using Command Palette
Click on the Command Palette icon in the footer of CRM and select the name of the Command that you want to trigger.



B. Using Keyboard shortcuts

You can also link each of the Commands to a shortcut key and trigger a Command using that designated shortcut key. Each user can set specific shortcuts based on individual preference and use them to trigger a Command.
Check this documentation for more details.

3. Scenario - 1

At Zylker, a financial company using Zoho CRM, Sales Advisors need a quick way to calculate EMI during customer phone calls. The solution should allow seamless access to an EMI Calculator from any page in Zoho CRM.

4. Solution

To achieve this in Zoho CRM,  you need to create a Widget for EMI calculator and create a Client Script Command.

A. Create a Widget for EMI calculator

  • Install Zoho CLI, and follow the steps given in this document to create the Widget app folder. Then update the html, javascript, and css code as per your requirement.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="loan-calculator">
      <div class="top">
        <h2>EMI Calculator</h2>
        <form action="#">
          <div class="group">
            <div class="title">Amount</div>
            <input type="range" min="1000" value="30000" max="50000" step="500" class="loan-amount" id="loanAmount" />
            <div class="slider-label">$<span id="loanAmountValue"></span></div>
          </div>
          <div class="group">
            <div class="title">Interest Rate</div>
            <input type="range" min="5" value="6" max="100" step="1" class="interest-rate" id="interesRate" />
            <div class="slider-label"><span id="interesRateValue"></span></div>
          </div>
          <div class="group">
            <div class="title">Tenure (in months)</div>
            <input type="range" min="6" max="100" step="1" value="12" class="loan-tenure" id="tenureMonth" />
            <div class="slider-label"><span id="tenureMonthValue"></span></div>
          </div>
        </form>
      </div>
      <div class="result">
        <div class="left">
          <div class="loan-emi">
            <h3>Loan EMI</h3>
            <div class="value">123</div>
          </div>
          <div class="total-interest">
            <h3>Total Interest Payable</h3>
            <div class="value">1234</div>
          </div>
          <div class="total-amount">
            <h3>Total Amount</h3>
            <div class="value">12345</div>
        <div class="right">
          <canvas id="myChart" width="400" height="400"></canvas>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.min.js"></script>
    <script src="https://live.zwidgets.com/js-sdk/1.2/ZohoEmbededAppSDK.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

 

  • Click here to view the complete code.

  • Once you have added the code, upload the zip file by following the below steps.

  • Go to Setup > Developer Space > Widgets.

  • Click Create New Widget and Fill in the details.

 

  • The Hosting should be "Zoho" and mention the html page of the app folder that you uploaded.

 




Notes

Note:

The widget should be of "button" type in order to render through a Client Script.


B. Create Client Script Commands.

 

  • Configure a Client Script Command by specifying the Name and Description The Category should be Commands. Click Next. Click here to know how to configure a Client Script.

 

  • Enter the following script and click Save.



     ZDK.Client.openPopup({ api_name: 'emi_calculator', type: 'widget', header: 'EMI Calculator', animation_type: 4,  height: '750px', width: '500px', top:'100px',left: '500px' }, { data: 'sample data to be passed });



 

  • Here "emi_calculator" is the API name of the Widget,

    • Type is Widget,

    • Header is EMI Calculator,

    • animation type is 4 where the popup slides from the bottom.

    • The other parameters are optional and has default values as shown in the image.

  • Here is how the EMI Calculator appears as and when the salesperson needs. The user can either click on the Command Palette Icon at the footer or use a keyboard shortcut as per his convenience to open the calculator.


  • In the above gif, the keyboard shortcut is cmd O.

  • To customize the keyboard shortcut,

    Go to Setup → General → Personal Settings. Select "Motor" from the Accessibility Tab and Click "View Shortcuts" as shown in the below gif.



4. Scenario - 2

At Zylker, an international wholesale company using Zoho CRM, salespeople need a quick way to check real-time gold rates from different countries while discussing bulk orders with retailers. The solution should provide seamless access to updated, region-specific gold rates directly within the CRM interface to assist with accurate pricing decisions during customer interactions.

5. Solution

To achieve this in Zoho CRM, you need to create a Widget for EMI calculator and create a Client Script Command.

A. Create a Widget for gold rate

Install Zoho CLI, and follow the steps given in this document to create the Widget app folder. Then update the html, javascript, and css code as per your requirement.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
 <script src="https://live.zwidgets.com/js-sdk/1.2/ZohoEmbededAppSDK.min.js"></script>
<div class="container">
      <div style="display: flex;">
        <label for="country" style="width: 70%;font-weight: bolder;">Today's Gold rate:</label>
        <select id="country" onchange="updateGoldRates()" style="width: 30%;">
            
            <option value="USD" >United States</option>
            <option value="INR" selected>India</option>
            <option value="GBP">United Kingdom</option>
            <option value="AUD">Australia</option>
        </select>
      </div>
 
      <table id="goldRatesTable">
          <thead>
              <tr>
                  <th>Type</th>
                  <th>Rate (Per Gram)</th>
              </tr>
          </thead>
          <tbody>
             
          </tbody>
      </table>
  </div>
 
  <script>
      const goldRatesData = {
     };
 
      const symbol = ['₹', '$', '£', 'A$'];
 
      async function getLiveData (currency) {
        var myHeaders = new Headers();
        myHeaders.append("x-access-token", "goldapi-4wvh4nslzb5p0d5-io");
        myHeaders.append("Content-Type", "application/json");
 
        var requestOptions = {
          method: 'GET',
          headers: myHeaders,
          redirect: 'follow'
        };
 
        let response = await fetch(`https://www.goldapi.io/api/XAU/${currency}`, requestOptions);
        let res = await response.text();
      
        let data = JSON.parse(res);
 
        let desig;
        if(data.currency === 'INR'){
          desig = symbol[0];
        }
        else if(data.currency === 'USD'){
          desig = symbol[1];
        }
        else if(data.currency === 'GBP'){
          desig = symbol[2];
        }
        else if(data.currency === 'AUD'){
          desig = symbol[3];
        }
        goldRatesData[`${data.currency}`] = [
              { type: '24K Gold', price: `${desig + " " + data.price_gram_24k}` },
              { type: '22K Gold', price: `${desig + " " + data.price_gram_22k}` },
              { type: '18K Gold', price: `${desig + " " + data.price_gram_18k}` }
            ];
 
      };
 
      async function updateGoldRates() {
          var currency = document.getElementById("country").value;
          console.log("Event:: ",currency);
          const country = document.getElementById('country').value;
          const tableBody = document.querySelector('#goldRatesTable tbody');
          tableBody.innerHTML = ''; 
 
          await getLiveData(currency);
          if (country && goldRatesData[country]) {
              const rates = goldRatesData[country];
              rates.forEach(rate => {
                  const row = document.createElement('tr');
                  row.innerHTML = `
                      <td>${rate.type}</td>
                      <td>${rate.price}</td>
                  `;
                  tableBody.appendChild(row);
              });
          }
      }
      updateGoldRates();
 
      ZOHO.embeddedApp.on("PageLoad",function(res){
        document.getElementById('msg').innerText = res.data;
      });
 
      ZOHO.embeddedApp.init();
    </script>
  </body>
</html>

  • Once you have added the code, upload the zip file by following the below steps.

  • Go to Setup > Developer Space > Widgets.

  • Click Create New Widget and Fill in the details.

  • The Hosting should be "Zoho" and mention the html page of the app folder that you uploaded.

 

B. Create Client Script Commands

  • Configure a Client Script Command by specifying the Name and Description and click Next. Click here to know how to configure a Client Script.

 


Script

ZDK.Client.openPopup({ api_name: 'goldrate', type: 'widget',header: undefined, animation_type: 4, 

 height: '350px', width: '300px', top:'100px',left: '500px' }, { data: 'sample data to be passed' });

  • Click here to know more about openPopup().

  • Consider that the user has created the shortcut CMD G to trigger Client Script.

  • Here is how the Gold Rate appears as and when the salesperson used the shortcut keys CMD G.


6. Summary

We have seen,

  • how to use Client Script Commands

  • how to create keyboard shortcuts for Commands

  • how to view Widget as a popup using Commands

 

7. Related Links

    • Recent Topics

    • Validation Rules Trigger on Untouched Fields

      In Zoho Desk, validation rules trigger for ALL fields during an update—even fields that weren't modified in the current edit. This behavior is fundamentally different from Zoho CRM and other Zoho products, where validation rules only apply to fields actually

    • How to work with getFieldNames formdata functions ,Any Examples

      I don't find any example showing usage of getFieldNames. Where do i find .is there any Help documents available

    • Zoho Notifications - Received two notifications for one message and none for the other

      We had a client reply to a ticket twice in one minute. The ticket owner received two emails for the second message but none for the first (which was crucial content and unfortunately was therefore missed). I'm assuming this created a race condition -

    • What is the difference between "Reply" and "Public Comment" in a ticket?

      Hey, my company is thinking about switching to Zoho Desk but we do not understand the difference between the "Reply" and the "Public Comment" feature. When should we use which? And why? What is the difference between them? Thank you for your help! Kindest

    • Tasks View for Opportunity/Jobs does not indicate "Related To" account

      How can ZoHo be setup so that when a task is created for an Opportunity, the subject automatically lists the underlying account? Right now, it's impossible to link the Account to the task when the task is created from the Job.  Therefore, the open task view is inadequate.  And it's a lot of maintenance to have to manually add the account to the subject...defeating the purpose of "Automated" workflow. 

    • can i show alert when i finish running the function?

      how i can show alert inside the custom function or popup notification. when i use alert inside the custom function it show this error Error at line number:  2 'ALERT' task can be used only in on load, on validate and on change actions ​

    • CRM calendar not syncing with Zoho Calendar

      The sync is not happening: This is my Zoho Calendar CalDAV synced with Outlook This is my Zoho CRM Calendar (sadly empty ...) I have enabled CalDAV Access. In Zoho Calendar, I have set up APP Calendar sync like this: What else can I check? Thank

    • Pipeline in Custom Modules

      I love the way the Sales Pipeline looks and functions with reports. I would like to add the save pipeline features and visualization to a custom module, however, I only see that these pipelines are only available for the Deals module. Is there a way to add pipelines to custom modules?

    • Cannot associate event with other objects when creating?

      I am attempting to associate an Event with one or more other objects when creating it via the API. According to the API docs, the "Related_To" property is a jsonobject even though the description says "Provide the details about the entities the event

    • How to disable subform records dynamically

      Hi Everyone I have a requirement to dynamically disable or hide subform fields based on certain criteria. However, the code I tried didn't work as expected. It either disabled or hid all the fields in all subform records or none at all. What I actually

    • Client Script Operate Timeout

      Hi Zoho, I have set a client script that use for ( i =1; length < i , i++) to fetch all of the product in order I have an order have 30+ products, seems this script will be stopped when it is checking rough 10 + products because of timeout (may be). May

    • Why and When to Manually Regenerate Reports?

      What is the protocol for needing to regenerate reports?  It is very confusing when data in reports pulls correctly sometimes, but are inaccurate other times.   Why is report regenerating necessary at all - can the report function not read the live data as inputted into the forms?  We have built lots of reports and it is very tedious and time consuming to have to regenerate the report before each use of that data to make sure it is accurate.  Is there a way to know when a report should or shouldn't

    • Import template from Zoho Writer

      I am trying to import a mail merge template - tried to import direct from my .docx file on my hard drive and the formatting went all over the place. I then imported the .docx file in my Zoho Docs and then fixed up the formatting within Zoho Writer. Can

    • Button Duplication when emails forwarded or replied

      When I create a new email template in campaigns and send it out it looks fine to all the users, however if that email is then on forwarded or replied to then all buttons within the email duplicate.  See below The one on the left is the original one.

    • Enhancements to Custom Connectors in Zoho Creator

      Hello everyone, At Zoho Creator, we believe in providing you with the necessary tools to achieve a well connected ecosystem of apps. Our Custom Connectors feature is a testament to this, enabling you to integrate with a wide range of external services

    • AutoScan Not Working Since April -Support says it with engineering

      Hi there, Autoscan has not been working on my account since April. Without this feature, completing expenses reports is laborious and error-prone. I keep asking for updates seeing as this is a critical feature, but told that it's being looked into and

    • Zoho books bulk update for invoices

      Hi Zoho team, Why only 25 invoices can be bulk update at a time. I am booking 800 to 900 invoices in a month. Please increase this limit? Please dont tell that you dont have enough request for this task. 25 limit for bulk update is too much low

    • Querying CloudSQL using NodeJS?

      How can I query CloudSQL over nodejs? Are there any rest apis from which I perform Select Queries in the data of a Workspace? In the v1 we had C#, Python, Java for CloudSQL Now I only see Java? I am confused about the overall API of Analytics, there any

    • Rename Record Templates in Zoho Creator

      Hi Team, I need to rename the Record Templates based on the name of the employee which i have configured in Zoho Creator Deluge Script. How to do this one? // Attachments :template:PDF_ECF:Exit_Clearance_Form input.ID as PDF

    • Les Zoholics 2025 sont de retour

      Bonjour à tous, Préparez-vous pour deux jours exceptionnels au cœur de l’écosystème Zoho ! Nous avons le plaisir de vous convier à Zoholics France 2025, un événement dédié à l’innovation, à l’expertise et à la communauté Zoho. Au programme : • Présentations

    • Salutation

      Hey there, I want to make an indvidual salutation. It is possible to use if statements in the email templates? For exampe: When is male then wirte "Dear Mr." else write "Dear Mrs." Thanks David

    • Personal Expenses

      I have reviewed the board and found a few scenarios like mine however not exactly so sorry if this is a re-post.  I just recently joined Zoho Books and had to go through 2000 transactions manually which took FOREVER. So the dilemma that I am facing is that I have attached my personal and business checking cards to my account because it was not until half way through 2015 that I decided to open up a business account as an independent contractor.  When I first started my account I placed the opening

    • Not receiving instagram verfication emails

      Hi- I'm not receiving Not receiving instagram verfication emails.  I have seen other users having the same issue and your answer was to contact instagram.  But instagram no longer has a support email.  

    • Change work hours per day for employees

      Hello, Is there a way to modify the work hours per day for employees in Zoho projects? This would be helpful for resource allocation to more accurately see when an employee who works 35 hours a week vs 40 hours has a full schedule. Thanks.

    • PROBLEMA AL CONECTAR EL DOMINIO

      hola buenas tardes hoy estoy tratando de crear mi registro y no me deja conectar el dominio  me dice que el dominio ya está vinculado a una cuenta y la verdad no tiene conectado el dominio a ninguna cuenta  tengo acceso al hosting y cpanel que se compro pero al revisar los dns estan apuntando al mismo hosting del panel  del proveedor del domini ... como hago para poder crear la cuenta con ese dominio, incluso cree un registro pero no  me deja vincularlo el dominio es integrasoft.co agradezco me ayuden  

    • Delay in delivery of emails

      I'm experiencing random delays for emails sent from Zoho account. Headers show that the message reached mx.zohomail.com almost instantly, followed by a delay of anywhere from 3-15 minutes (and counting). Please confirm whether this is a system-wide

    • Zoho Mail not working. Constant OTP

      Firstly, my emails have been playing up for over a year. They are struggling to send and I have to press Send a few time to make them going. They mostly hover with a loading note saying Sending. I emailed Zoho and they got it working, but now it is doing

    • Zoho Mail Storage Usage Discrepancy – Incorrect Storage Reporting

      Dear Zoho Support Team and Community, I previously raised a concern about inaccurate storage usage reporting in Zoho Mail but did not receive a clear or satisfactory response. To investigate further, I meticulously calculated the storage used by all folders

    • What Is ZOHO-Workplace? Why was I charged?

      Hi, Today my PayPal account was charged $12.72 for ZOHO-Workplace. The transaction ID is 15S32484H3826544W. What is this charge for? It is the first time I am seeing it.

    • Building a custom site

      do we have an option in Zoho to build custom sites like adding custom functionalities? want to make a site like https://trackscourier.com/jnt-tracking-ph/. Is it doable? Please assist.

    • Missing Payload Details

      Hi All, Does anyone know how to fix missing webhook payload data in the next step of the flow? Payload comes into the webhook -- All details here When i go to use the webhook data in the next step -- the majority of the payload data is missing

    • Numeric options in Decision

      Zoho really needs to add options for numeric comparisons in the Decision action. These are the ones that should be implemented: Greater than Less than Greater than or equal to Less than or equal to Equal to (although this is actually handled already)

    • Supercharge your VoC analyses with data from anywhere: Modules are now sources for VoC

      Dear customers, We hope you're well! Your customers talk about your brand, praise your service, criticize your offerings, or promote your business—literally from anywhere on the internet—and it has become strategically necessary to factor in all possible

    • Nouveautés Zoho Flow - Intégration SAP S/4HANA et SAP HANA

      Bonne nouvelle! Deux applications très attendues dans la galerie d’intégrations de Zoho Flow sont désormais disponibles : ✨ SAP S/4HANA ✨ SAP HANA Que vous gériez des opérations d’entreprise ou des systèmes de données, ces intégrations vous permettent

    • Record/edit view to pop-up simultaneously with button click from report of a different form

      I have two forms: Form A & Form B. Form B contains all of the same fields of Form A, plus a few additional fields. I've created a button in the report view of Form A that creates a new record in Form B and populates all the applicable fields, (I've posted the code I used below), but visually nothing happens on the screen. If I want to finish filling out the remaining fields in Form B, I have to navigate to the report and open the record. How do I get this new record to just pop-up when I click the

    • How to get NSE/BSE Stock Prices in Zoho sheets?

      I've been looking for a function that provides me with the NSE/BSE listed stocks price in Zoho Sheets like GOOGLEFINANCE in Google sheets, but I found none. Please help if there is any way to het stock prices?

    • INVOICE DONT HAVE AN INCOME ACCOUNT FIELD TO POST TRANSACTIONS

      INVOICE DON'T HAVE AN INCOME ACCOUNT LIKE THE EXPENSE ACCOUNT FIELD IN THE EXPENSE MODULE. PLEASE CAN YOU TELL ME WHAT TO DO TO ADD THIS FIELD AND FUNCTION TO POST IT TO THE RIGHT INCOME ACCOUNT. THANK YOU VERY MUCH

    • Error in Deluge script, but all should be OK

      I get an error when using the following deluge script (sensitive info changed with ***). This script should parse a projectnumber out of the subject or body text and put it in a custom field of the ticket. The error: Validation failed for the condition

    • Problems with clipboard paste into ticket comments

      Problem as title. Using Chrome get to paste contents of clipboard but submit gives 'you've exceeded the character limit of 30,000 for this comment' irrelevant of actual number of characters. Edge just pastes txt 'undefined' irrelevant of actual contents of clipboard All other areas of Zoho desk work fine with clipboard paste (i.e. new ticket description) it's just comments on existing tickets that seem to have problem. Was all working fine until early yesterday (14th) Client is Windows 10 Pro 1803

    • Mapping Issue

      since, Tickets are already mapped with the Requestors and when we map Requestors with Organization, then Tickets are not visible under that Organization. Kindly solve this issue.

    • Next Page