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

    • Zoho say my domain seems to be already associated with another account

      I created a website on zoho and associated my domain (bompescado.com) on it. You can see the A record and CNAME are working to it. Now I need to associate the same domain as webmail, but when I try it return with: " This domain name seems to be already associated with another account. If you own this domain, please contact us for assistance." Im following the advice and conctacting you to say I've not been associated this domain on zoho before.  What do I need? Well, I need you manually remove it

    • Mass Print Attachments from Selected Records in Custom Module

      Dear Zoho CRM Team, We’d like to request a feature enhancement regarding the handling of attachments. Use Case: We have a custom module that stores invoices uploaded by our affiliates. Currently, we need to open each record individually to print these

    • how to integrate zoho bigin to wordpress website ?

      hello , i want to integrate zoho bigin to wordpress webiste , can anyone help me with the tutorial ?

    • Surely it's time Inline editing from views

      I think the first request I found for in-line editing from grids was approximately 12 years ago - that post was locked because it was suggested Zoho sheetview solved the problem. However, it's now 2024, and in-line editing from grids is just a basic expectation.

    • Issue with POST request creating Calls in CRM

      Hello, I am in the middle of integrating some 3rd party Call center API with Zoho CRM and going through our logs I see some discrepencies. We sometimes get an error: {"data":[{"code":"INVALID_DATA","details":{"api_name":"Call_Duration","json_path":"$.data[0].Call_Duration"},"message":"Please

    • only lastname as index(?) field in custom module

      Hello, I have a small problem. I have created a custom module. The data records are only labeled with the last names. Also in the lookup etc.... It's stupid if you have different first names with the same surname. Then I only ever see the surname. In

    • How to read content out of File (Excel, Zoho Sheet, CSV) and iterate through rows

      Hello, I'd like to be able to iterate through all the rows in a CSV or Excel/Zoho Sheet file to perform actions on them. How is this possible in Flow? Thanks in advance! Best regards, Sven

    • Import CSV file into Zoho CRM using Zoho Flow?

      Is there a way to automate the import of contacts from Zoho Flow to Zoho CRM? I have a csv file on a remote server that I would like to pull off and import/update on a schedule.  I know you can do it with Zapier but I would like to stay within the Zoho

    • TDS Filing

      Is there any option for automatic 26Q and 24Q filing in Zoho books. Even Tally has this option. Why don't Zoho has this ? Is there any customisation available for this ?

    • Sorry to inform you that currently we cannot access the subform fields through writer deluge (zoho.writer.mergeAndSend).

      This is the premium support answer from zoho. It means we cannot merge and send thru deluge related records (sub forms) items... Has anybody suffered from the same ordeal ? DO you have a workaround ? If not can you vote for this feature to be added to

    • Quotes

      Has anyone figured out how to automatically upload a quote that was signed via Zoho Sign and insert it directly to that leads file and push it through the pipeline to proposal signed status?

    • I wan to schedule a meeting report From previous Thursday to this thursday of this week on Every 6 pm want to recive this report in zoho CRM

      I wan to schedule a meeting report From previous Thursday to this thursday of this week on Every 6 pm want to recive this report in zoho CRM. How I Can achive this in Zoho CRM.

    • Importing a contact with a linked product

      Hi, I'm trying to import my contacts from an excel spreadsheet and each of those contacts have fields that relate to products. Is there a way that I can import the contact with their linked product? Some of the contacts in my spreadsheet have multiple

    • CRM - Workflow Rules to be applied and work across modules

      Hello, It seems that you can't use workflow rules in CRM to work across modules, is this correct? I need a customer account status to be changed IF there have been no new deals or new quotes in the last 6 months. I can't see this is possible? I can create

    • Auto assign account owner

      hi, i need to auto assign leads and accounts to an owner by rules. i have created all the territories i need, and all territories have their owner. but when i want to auto assign a new or an existing account to a user by the rules of territories, only

    • How do I enter phone extensions?

      How do I add a phone extension correctly so that when I dial the main number it will pause and dial the extension of the contact I want to talk to Greg

    • How do you make tabs and place certain leads in them?

      I am trying to figure out how to make a tab for my Florida contacts, California contacts and New York contacts. I make a new view named "Florida Leads" but when I click on it, ALL of my leads pop up in the same view... Is there a way to move leads into different categories? Thanks, Wayne

    • Boolean Fields in Mail Merge Displaying as Checkmarks

      I'm really liking the new mail merge functionality. It's replaced the Zoho Sign extension for us. One problem I've seen is that boolean operators (i.e. Checkbox fields) in CRM merge as "True" or "False". This looks a little ugly in my final document —

    • Web to lead form not working

      I am starting to use this Zoho product (3 users for free) to see if it really does what it should prior to making a purchase decision. One of the important parts of the ZOHO CRM is the ability to create a web form that auto generates a lead. We have set

    • Is this a valid email from Zoho or a scam?

      Hi, I received an email advising me to update MX records for Zoho mail. Is it legitimate? Thanks, Nelson. Dear Admin, You may know that your domain (eg, yourcompany.com) has an MX record that points to an email server configured to process email for your domain. We have noticed that some of our customers have used Zoho IP address (instead of DNS server name) in their MX records to specify the mail server. This is NOT recommended practice. Vendors will sometimes change IP addresses for number of valid

    • Search on Postcode criteria not working properly

      Hi there, I used to be able to do an advanced candidate search on 'Postcode starts with' and then enter the first two letters of the UK postcode.  So if I used CH then it would bring back candidates in CH1, CH2, CH3 etc.  This seems to have changed in the last week so that it now only brings back postcodes that exactly match CH only.  I tend to use this search criteria extensively so need a fix for it asap please.

    • Quotes vs Invoices vs Sales Orders

      We have the need to create either quotes, invoices or sales orders for services we provide to clients for our sales team to present to them.  However, we are confused in the purpose of each and which we should choose.  Could someone explain the difference in them? Also, with these, we will have setup costs for our clients and then fixed monthly costs.  For instance, we have services that are one-time services at $997 and then we have others that are monthly only ($250 per month).  In addition, we

    • Tip 14: How to iterate a set of Deluge code a specific number of times.

      Hello folks, As you might already know, recursive functions are used to perform a particular action a specific number of times. We had explained this in detail in our Tip #2. Similarly, there is another way in which you can iterate a set of Deluge code 'n' number of times. All you need to do is to create a List and use the For each index task to iterate it for a specific number of times.    Here are a few use cases where this would be useful to you:  To create 'n' number of duplicate records for

    • Can't set conditional layout rule on lookup field in Zoho CRM

      Namaskaram Zoho CRM team,      Usually any fields of module except mandatory fields can be hide using conditional layout rules.  But that can't be set on lookup fields event that is not a mandatory fields.  Many users are in need of that.   Crafted with

    • Online Calculator

      Created a public shipping volume calculator for my website visitors to use. its pretty cool when you combine the power of zoho sheets and the web experience. I chose zoho because our users dont need to login or created acct like google doc users. this is great because ppl will accept the technology more without resistance. you can see the online calculator here: hxxp://www.dblusa.com/dbl_calculator.php peace! RSA

    • All about Users in Zoho Projects

      To form a functional team, businesses should define different types of users in their team. Businesses can be effectively managed by inviting users to various roles. And, the person who has the administration privileges can invite or add users to various roles in the project. Two types of users Before going into the steps to add users to your portal or project, let's understand the different types of users:  Portal Users - Users who work for the projects in your team.                      ~ Portal

    • Zoho Projects API 100 requests/2 min. Limit

      Hi Requesting clarification on the API documentation. "You can invoke or call an API for 100 times in a span of two minutes. If you invoke more than 100 times, the particular API request will be locked for the next 30 minutes. " Does this limit apply

    • Calendar Connection Enhancement

      Hello everyone, Greetings from the Bookings team. We're here to announce an important Calendar enhancement that will roll out soon. Let's take a look at what's being changed. Improved and more straightforward UI The Calendars UI is undergoing a complete

    • Bookings to CRM - New Events and Contacts

      Hello, I have an issue with appointments taken by clients from a Zoho Bookings page. Previously when an appointment was reserved, if there were no client created in Zoho CRM, it would create it in the CRM through the integration between both platform.

    • Generating Discount Coupons for Zoho Bookings

      Hi, Is there provision to generate Discount Coupons for appointment bookings? I could not see that in the settings and this is very much needed. Please suggest us. Thanks

    • How do I remove mail hosting?

      I have a problem, I can't remove mail hosting. I need to remove them to cancel my domain, but it's imposible to cancel or remove the mail hosting. Please I need help urgently to resolve this problem.   Thanks

    • Notes created in mobile app not syncing with web notebook

      I have created certain notes in a new notebook in mobile app. The new notebook is also created using mobile app and when I logged in through web I am unable to see notebook that I have created using mobile app. there is no trace of notes in which i have created in mobile app on the web even after days of creating in mobile app This is not the case vise-a-versa. the notes and note book created on web are accessible on mobile app on real time.  this is very inconvenient and big demotivating factor

    • Desk - CRM Integration: SPAM Contacts (Auto Delete)

      SPAM contacts is a useful feature, but when the CRM sync is used, it is very frustrating. When a contact is marked as SPAM on Desk, I wish to do the same on CRM. When a SPAM contact is deleted, I would like it deleted from CRM. The feature looks half-baked.

    • No more IMAP/POP/SMTP on free plans even on referrals with NO NOTICE

      Outraged. Just referred a colleague to use her domain (not posting it publicly here) to Zoho, just as I have other colleagues, clients, friends. Expected the exact same free plan features as I have and as everyone else I ever referred got. I was helping

    • Mac Thunderbird zoho e mail account issues

      I have issues with a user account on thunderbird e mail client who suddenly does not receive emails, when you click get messages we get an error "sending of password for user ......did not succeed, mail poppro.zoho.com responded service unavailable" after

    • PASSWORD

      Hello, I'm Joyce, my client used zoho for password sharing, he did share the canva but once I clicked on it it will not automatically log-in, instead I need to log-in again. My question is my boss log-in first to his gmail and use his gmail to log-in

    • Kaizen #195: Frequently Asked Questions on Bulk Read API and Bulk Write API

      🎊 Nearing 200th Kaizen Post – We want to hear from you! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.

    • admin problem

      i can't to reach for the panel that i will create another mail to our company account i have admin access but i can't reach the panel our Company name Scale point my mail asmaa@dcalepointhub.com please can you help me Thanks

    • 554 5.7.1 : Recipient address rejected: user [username] does not exist

      Hi, I mistakenly altered my shopify email settings (where my domain is managed), but immediately reverted them, however now I have a strange email issue. I can send emails just fine, but cannot receive them. I have tried all troubleshooting steps but

    • Legit email address?

      Hello, I received emails from zohoadmin@biznetvigator.com with a password expiry notice. is that a legitimate email?

    • Next Page