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

    • Forms - Workflow

      Apologies if this has been asked before. I would like to know if there is a way to setup a form where a customer completes the fields/questions on Page 1 and then it is forwarded to an internal department employee who completes the fields/questions on

    • Using the "Like" operator in Custom Formula

      HI there, Can someone please explain the way to use the "LIKE" operator in an IF statement to compare strings? I have tried the following but am not getting the results I'm after. if( "CurrentStatus" like 'Rejected*','Unsuccessful','Pipeline') Thanks Matt

    • ABA Files payment description

      Hi, is there a way to automate the payment description on the ABA file creation. When you paying many vendors having to put this in each time is very time-consuming. I couldn't see if there was a way to workflow this to automate using deluge.

    • GDPR Contd. - Handling Lawful Bases for Your Customers using Zoho CRM.

      Hello folks,   Continuing from our previous GDPR post, we bring to you the first cut of GDPR centric enhancements that are released for handling lawful bases for your customers in Zoho CRM. For your understanding we have split the entire process into three sections: Identifying Data Processing Basis Updating the Data Processing Basis in Zoho CRM  Consent Management in Zoho CRM 1. Identifying Data Processing Basis The fundamental principle to handle the personal data of your data subjects is to process

    • Upgrade the Lato font to the Lato 2 font

      While there's not a major difference, I noticed that Zoho doesn't use the upgraded Lato 2 font but it instead uses the standard one. Lato 2 enhances the look of letters and numbers when you italicize them, among little things that get tweaked. Is it possible

    • Masked Field Type with Permission-Controlled Visibility in Zoho CRM

      Dear Zoho CRM Team, Greetings, We would like to request a new feature that would enhance data security and access control within Zoho CRM, especially when handling sensitive internal information. Use Case: Our team occasionally needs to store sensitive

    • How to properly setup Databridge on Linux Server?

      Hello guys, i am running a Linux server on which I am installing the Zoho Databridge via command line. The Zoho tutorial ( https://help.zoho.com/portal/en/kb/analytics/user-guide/import-connect-to-data/databases-and-datalakes/articles/postgresql-3-3-2021#1_How_do_I_install_Zoho_Databridge

    • Haven't used banking function for years and now want to reconcile and clean up my account

      I'm in the UK and have been using Zoho Books for my private mental health practice since 2018. Up until recently, I've entered everything manually and not reconciled any items with my bank account. Every year, I run a report for that year and use that

    • invalid element hsn_or_SAC

      Hi, I am trying to record expense in Zoho expense. when submitting I am facing this issue invalid "element hsn_or_SAC" please help me with this. Regards, Abdul Hameed M

    • Plug Sample #14: Automate Invoice Queries with SalesIQ Chatbot

      Hi everyone! We're back with a powerful plug to make your Zobot smarter and your support faster. This time, we're solving a common friction point for finance teams by giving customers quick access to their invoices. We are going to be automating invoice

    • Recap - Desk Story Series

      In our exploration of the Wheels of Ticketing Series, we kicked things off by diving into a fundamental element of Desk Ticketing: the fields. These fields serve as the building blocks that gather essential information about tickets, customers, organisations,

    • Tip of the Week #60– Reduce response time with shared inboxes!

      When customer messages are scattered across different platforms and team members aren't sure who's responding, delays are inevitable. Slow responses frustrate customers and create a poor experience for your brand, especially when expectations are high.

    • Hybrid project management in IT and software development services

      Project management models serve a wide range of audience, however the highest takers for Agile project management methodology are the IT and software services industry. The flexibility to develop and release software iteratively with continuous improvement,

    • Introducing Forms in Zoho Sheet

      We hereby bring you the power of ​forms in Zoho Sheet. ​Now, build and create your own customized forms using Zoho Sheet. Be it compiling a questionnaire or rolling out a survey, Zoho Sheet can do it all for you. Forms is an excellent feature that helps you collect information in the simplest of ways and having it in Zoho Sheet takes it a notch higher. Build Simple yet Powerful forms Building forms using Zoho Sheet is fairly simple. The exclusive 'Form' tab lets you create one quickly. Whether you

    • What's New in Zoho Inventory | January - March 2025

      Hello users, We are back with exciting new enhancements in Zoho Inventory to make managing your inventory smoother than ever! Check out the latest features for the first quarter of 2025. Watch out for this space for even more updates. Email Insights for

    • Overdue payments pending approval max

      I needed to validate update the email to pay for goods sold out, travel expenses and cars and vehicles for office, office supplies, properties purchase etc

    • How do I mass edit time entries?

      Since you can not filter or sort time entries by what has and has not been invoiced (you can only see the icon but not separate invoiced from non-invoiced), I would like all time to initially be entered in as un-billable and I can change to billable as I bill them. (since you can see this separation)  So my question is HOW do I mass edit this? Can it be done?

    • Zoho Booking Page Footer

      Is there any option available to add social media, like LinkedIn, on the Zoho Booking page?

    • Custom SMTP is now available in Zoho Sign

      Hi there! Want to send Zoho Sign emails from your organization's or personal email server? Look no further! Zoho Sign has introduced custom Simple Mail Transfer Protocol (SMTP) for Enterprise users across all data centers. By enabling custom SMTP, you

    • Help with SEO

      Hi There, I have recently published a site and added some Keywords in the SEO settings. Searching Google I currently don't find my site though. When do these settings take effect? In the SEO settings there is also a section "Sitemap" I can change settings for "frequency" and "Priority" What do these settings do? Kind regards

    • Report Level Button

      Currently I couldn't find a way to add a report level button I think currently we can only add buttons/actions for records, but having custom report level button would be really beneficial Usecases Click to import/sync Data from On Prem Systems Click

    • Create collection from start integer to end integer

      I want create some ticket number. Starts at 1 and end at 10. I want the result to be a string 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10. Trying something like this but need the correct way write the start and end part. start = 1; end = 3; sequence = List();

    • Importing Subform Data is Removed in Zoho Creator 6

      Previously It was possible to import Data to the Subform in Creator 5 This basic and mandatory Feature was completely removed from Creator 6 with no Timeline to add support for it How are we supposed to add our data if we want to use Creator? Manually?

    • Function #50: Send Mass emails to your customers

      Hello everyone, and welcome back to our series! We have reached a milestone of 50 Functions, which means that we have automated 50 different tasks in Zoho Books. Every Friday, we have shared a nifty function aimed at either automating a task or streamlining

    • Smart Document Automation:: From Zoho Projects to Zoho Writer – Merge, Edit, and Share

      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

    • How to remove an Instagram post on Zoho Social?

      Hi there, I wanted to delete yesterday's post on all social platform and managed to do so for Twitter and Facebook. I couldn't for Instagram as there is no option for delete. How can I delete successfully?

    • 【開催報告】東京 ユーザー交流会 Vol.2 2025/6/13 CRM Plus/Formsの活用におけるポイントやおすすめ機能を紹介

      ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 6月13日（金）に東京で「ユーザー交流会 Vol.2」を開催し、16名の方にご参加いただきました。ご参加くださった皆さま、ありがとうございました。 この投稿では、当日のセッションの様子や使用した資料を紹介しています。残念ながら当日お越しいただけなかった方も、ぜひご覧ください。 ユーザー活用事例セッション：マーケ・営業・サポートをつないで顧客体験を向上させる！Zoho CRM Plusのおすすめサービス活用事例 Zoho Champion

    • No Real DANE Support

      The issue in https://help.zoho.com/portal/en/community/topic/will-zoho-implement-dane was closed today claiming DANE was implemented. You never implemented DANE correctly, even if you think you did. DANE requires DNSSEC to work properly, you never added

    • Applying Price List to All Customers

      I just created a new price list as we have several items that have volume price breaks. To create my price lists, I followed the instructions in this article: https://www.zoho.com/us/inventory/help/items/price-list.html When it comes to applying my price

    • What's wrong with this deluge code to create a Bill?

      I know that all the data in the map is correct. The line items are pulled directly from a purchase order. // Add the purchase order ID to the bill billPOIds.add(poID); // Retrieve and merge the line items poLineItems = purchaseOrder.get("line_items");

    • 2 Ideas, Clone timesheet entry from monthly view and Notes in Weekly view

      While i love timekeeping I am finding some things slow me down.  Slow to the point of considering writing my own API call to do this. It would be so useful to be able to clone a timesheet entry from the monthly view.  It is somewhat painful to have to

    • Zoho Workdrive API call to find public external Link for a Folder

      Hi all, I can create new external share links for a WD Folder using this API call https://workdrive.zoho.com.au/api/v1/links . This works fine, however if there is already an external link created for a given folder, trying to create a new one fails (which

    • Converting Sales Order to Purchase Order

      Hi All, Firstly, this code works to convert a sales order(SO) to a purchase order (PO) via a button, however I am running into an issue when I convert the SO where the values from the line items are not pulled across from the SO to the PO. The ones in

    • Accessing and Using Formula Field

      Hi There, I created a formula field called 'Day of the Week' in the Leads module that takes the record created time and transforms it into the day of the week. The formula field returns the correct values. However, I am unable to find or use the field

    • 🇺🇸 🇨🇦 🇲🇽 Ask the Experts: A Live Q&A Session

      Session Closed Thank you to everyone who participated in this Ask the Experts session! Your questions, insights, and engagement made it a valuable discussion for the entire Zoho Recruit community. The comment section is now closed, but feel free to browse

    • Request For Quotation (RFQ) module

      Hello, Do you have any plans to implement a RFQ module in to ZOHO Inventory? I would like to chose items that I require a price for, select a number of different suppliers to e-mail and have them submit there pricing online. I would then like to see a

    • Ability to Append or Prepend specific signer name field to all documents in an envelope

      We use templates regularly and have a need to be able to rename the individual pdf documents contained in an envelope, such that a signer's name is appended or prepended (e.g. Form1 - SignerName). This is critical for us, because of how we process documents

    • Export an email as an HTML file?

      How do we export an email in Zoho Marketing Automation as an HTML file? We have an advertising partner that needs our campaign email as an HTML file. We can't find any way to do this. If this is not possible, please explain why. It doesn't make sense

    • Function #30: Display list of associated PO on SO details screen

      Hello everyone, welcome back to our series! Imagine having the ability to effortlessly access and view details of all purchase orders linked to a sales order directly from the sales order itself. Well, today's script is designed to do just that for you.

    • Custom Print Button in Page/Stateless Form

      [Zoho Creator] Unable to Add Custom Print Button to Page or Stateless Form We need the ability to add a custom print button on a page or stateless form in Zoho Creator to print a templated or formatted output (e.g., appointment confirmation, summary slip).

    • Next Page