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

    • Trying to setup a record to automatically create on a weekly basis

      Hello all, I need multiple records to be automatically created on a weekly basis. What I'm trying to accomplish is, I have a maintenance database where I track when I work on IT related systems. Every week on the same days I perform backups on systems

    • Subform Zoho Form to Creator

      Hi, I would like to be able to retrieve the values of a Zoho Form subform to create an entry for each in Zoho Creator. To send from Form to Creator, I use Zoho Flow. I have a custom function, which should normally retrieve each field value then create

    • SEO for your Zoho Sites Website

      Join our live webinar to learn how to use Zoho Sites' SEO tools to boost your website's ranking. Our product specialist will demonstrate everything you need to know about optimizing your web pages to make them search engine friendly. Register here for free: https://www.zoho.com/sites/webinars/

    • Can we turn off archiving views?

      Is there a way to turn off view archiving? Some views aren't used regularly, and archiving may force us to recreate them.

    • Desk Contact Name > split to First and Last name

      I am new to Zoho and while setting up the Desk and Help Center, I saw that new tickets created or submitted from the Help Center used the Contact Name field. This would create a new Contact but put the person's name in the Last Name field only. The First

    • Multiple Selection/Select All for Approvals

      I have a suggestion from users regarding Approvals. In our environment, our Regional Managers can receive multiple requests for Approval or Rejection. They find it tedious to approve (or reject) each individual record. They would like to have a way to

    • Last Name / First Name

      Hello , My company adds contacts on a "Last Name , First Name" basis. We've noticed that when viewing accounts there is no " , " (comma). It's VERY misleading. I have set the custom view to show "last name" "first name" instead it joins them both and

    • Grouping payments to match deposits

      Is there a way to group multiple invoice payments together so they match credit card batches and grouped deposits in the bank account? Basically, we are creating invoices for each of our transactions, and applying a payment to each of the invoices. Our payments are either credit cards or checks. We want to be able to group payments together so when our bank account reflects a credit card batch made up of many transactions, or the deposit we took to the bank that has multiple checks from different

    • What takes from the inventory quantity

      There are several options SaleOrders, PurchaseOrders, Invoices... which ones disminish the Inventory quantity of the product? Does the change occurs online?

    • Post on behalf of employees as well as business socials

      Is there a way to give our sales team access to social to add their own LinkedIn accounts, so that when we schedule business posts, we can also post on behalf of them at the same time so they don't have to repost etc.

    • [Free Webinar] Enhancing your dashboards with JavaScript widgets in Zoho Creator - Creator Tech Connect

      Hello Everyone! We welcome you all to the upcoming free webinar on the Creator Tech Connect Series. The Creator Tech Connect series is a free monthly webinar that runs for around 45 minutes. It comprises technical sessions in which we delve deep into

    • Quickbooks Online Customer Creation Code

      Hi! I'm looking for code that will automatically create a quickbooks customer account when clicking on a button located directly within Zoho CRM - Contacts Module. Here's what I have and I can't seem to figure it out. xxxxx is our company id which we

    • High cpu load on client side by process sessionaudit.exe

      Hi, as stated above. This happens every time with different clients. Now, the first thing I have to do after making the connection is to go to taskmanager on client computer and kill the process 'sessionaudit.exe' If I don't their cpu is very high and

    • Zoho carbon footprint

      Hi, I am calculating the carbon footprint of my company and would like to include the use of Zoho, because it is core to the company's operations. Do you know the carbon footprint of using Zoho? This for example could be emissions from using Zoho for

    • How Do I Refund a Customer Directly to Their Credit Card?

      Hi, I use books to auto-charge my customers credit card. But when I create a credit note there doesn't seem to be a way to directly refund the amount back to their credit card. Is the only way to refund a credit note by doing it "offline" - or manually-

    • Zoho CRM Appointments and Services

      The Appointments and Services modules are nice but very limited. Is there any chance that Zoho will make these more customizable or expand the fuctionality? Appointments Allow "Appointment For" lookup to the Deals module. For us and I'm guessing others

    • Configuration de la signature de messagerie dans zoho crm

      bonjour, j'essaie d'ajouter une image de signature mais en cliquant sur l'icone image, rien ne se passe. merci de m'aider :)

    • Rebrand your CRM with the all-new custom domain mapping setup

      UPDATES TO THIS FEATURE! 19th Jan, 2024 — Custom domain mapping has been made available for portal users in Zoho One and CRM Plus. 23rd June, 2023 — Custom domain mapping has been made available for all users, in all DCs. Hello everyone! We are elated

    • How to record Staff payment and receipts

      I'm a bit new with zoho so I have few questions its great if anyone here can help I work for a logistic company, every 1-2 months we transfer a lump sum $A to drivers so that they can pay for fuels or they can buy some tools. So my questions are - What

    • Inappropriate Removal of Features

      It's the first with any software where I am experiencing that an existing customer has some of his exiting features removed. Moreover, new Zoho One users are paying less than us. Is this going to be Zoho's "normal behaviour". If so, it is going to be

    • Issue Saving Workflow Rule – "Unable to Process Your Request" Error

      Dear Zoho Recruit Support Team, I am experiencing an issue while trying to integrate a new rule into a workflow. Specifically, I am setting up a Follow-Up workflow for applicants, where a user is assigned based on specific requirements. However, when

    • Chat function not working properly

      Ever since upgrading to plus, the chat is all messed up. it is coming up behind the web page so that I cannot see what I'm typing and cannot read replies. I can only see the bottom of the text box at the bottom of the page, and then it is blocked. I've

    • Analytics report issue

      Hey, does anyone know why suddenly our Analytics report goes blank whenever we add a field from the contacts module? It shows when adding fields from all other modules. Thanks.

    • Zoho One Dashboard is not loading.

      Hi, Is anyone else experiencing a problem with the Zoho One Dashboard not loading? We started seeing the screen below on Friday afternoon and support has not responded regarding the same. Zoho One team, what's going on?

    • User Filter for Dynamic Date Dimensions in Zoho Analytics

      One challenge I frequently encounter is the need to create multiple versions of the same report—one for yearly data, another for quarterly data, another for monthly, and so on. While this works, it leads to unnecessary duplication, making maintenance

    • Remove attachment from ticket

      Hello, When we receive e-mails from our customers, lots of those e-mails contain attachments with sensitive information, which we need to delete from the ticket after using it. It is forbidden for our company to store these attachments, due to security reasons.  Is there a possibility to delete an attachment from a ticket in any way? It is necessary for us that this possibility is available. Thanks in advance, Yorick

    • When converting a lead to an account, the custom mandatory fields in the account are not treated by zoho as mandatory

      In my Account module I have a number of custom fields that I have set as mandatory. When I enter a new customer as a new account they work, I can't save the record without populating them. However when I convert a lead, my CRM users are able to save the

    • [Client Script] How to get selected related record Id

      Hi Zoho, I set an client script button in related record list. We would like to fetch the selected record id/field for further action. But I don't know how to get the selected id. If there is not possible to get related record info, then what does the

    • need help to set up feeds to Zoho books with CRM Perks plugin

      Hi there, I need help setting up feeds with the CRM Perks plugin. It is supposed to send various feeds, like orders, payments, etc., from Woocommerce to Zoho Books. I have been trying so hard but seem to be too thick to get it done :-( For months, I worked

    • Write-Off multiple invoices and tax calculation

      Good evening, I have many invoices which are long overdue and I do not expect them to be paid. I believe I should write them off. I did some tests and I have some questions:  - I cannot find a way to write off several invoices together. How can I do that,

    • How to make a ScreenPop with Customer Information

      Hi, I need open a customer sheet when I receive a call on my pbx. I have a client on my PC that are able to open a web page with a specific url. How can I leave open the Zoho CRM application and search for a customer? Thank you in advance, Mauro

    • Simple Deluge Script

      Hi. I'm brand new to functions but I'm trying to create a script to convert a date field in Meetings to a written format. For example, instead of 02/05/2025 8:00AM, I'd like to convert it to Wednesday, February 5, 8:00 AM. My Date field is the API Name

    • Send emails directly via Cases module

      Greetings all, The ability to send emails from the Cases module, which users have been eagerly anticipating, is now available, just like in the other modules. In Zoho CRM, Cases is a module specifically designed for managing support tickets. If your organization

    • Problem with delivery status in delegate account

      Hello, We have a problem with delivery status in "sent" folder in delegate account. Some messages has no status, some messages has "waiting" status, Some messages are delivered, some messages are delivered wit delay, some are not delivered. Conclusion:

    • Zoho Projects - Custom Objects

      Hello, is there the ability now, or in the near future, to add custom objects to Zoho Projects? The requirement here would be to have the ability to track change requests to a project's budget. The idea here is to have the ability to create a custom Object

    • Create Package From A Picklist

      Dear Zoho, Can it be made possible to create a package from a picklist? The reason our company makes a picklist is for that to become a package Our sales orders have 600-1000 items I hope that makes it clear that it's hard to delete 990 items when we

    • Enable Organization-Wide reCAPTCHA Settings in Zoho Forms

      Hello Zoho Forms Team, We appreciate the existing security options for Zoho Forms, including Google reCAPTCHA v2 (checkbox) and reCAPTCHA v2 (Invisible). However, we have a major usability concern: Current Limitation: Right now, CAPTCHA is a form-specific

    • Store Google reCAPTCHA Site Keys & Secrets in Zoho Forms

      Hello Zoho Forms Team, We appreciate the support for Google reCAPTCHA v2 (checkbox) and reCAPTCHA v2 (Invisible) in Zoho Forms. However, we have a significant usability concern regarding the current implementation. Current Limitation: Every time we want

    • Ho to restrict access to row level to Zoho Analytics users

      Let me explain the scenario we are trying to achieve. We have an online system our team members work with. On it we have 6 users that manage data from different areas (North, South, East and West). We would like to transfer this information to a Zoho

    • Add Support for Google reCAPTCHA v3 in Zoho Forms

      Hello Zoho Forms Team, We appreciate the security measures currently available in Zoho Forms, including Zoho CAPTCHA, Google reCAPTCHA v2 (checkbox), and reCAPTCHA v2 (Invisible). However, we would like to request the addition of support for Google reCAPTCHA

    • Next Page