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

    • 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.

    • New features and improvements in Desk's integration with Zia powered by GPT 

      Hi everyone, We’re pleased to announce several new enhancements in Zia Powered by GPT integration. These updates bring more customization options, improved response generation, and additional language support. Below is an overview of the enhancements

    • Painéis do Zoho CRM ajudam na Gestão Comercial?

      A gestão do departamento comercial é uma questão fundamental para qualquer empresa. Uma boa gestão proporciona previsibilidade, alinhamento e melhores resultados. Acredito que todos que adquirem uma plataforma de CRM buscam uma gestão ágil e eficiente

    • Adding transferwise.com as an online payment method

      Hi, I am not a fan of using Paypal or google pay, can we look at introducing transferwise.com as a payment method as i think it will work better in the corporate world. https://transferwise.com/ Cheers

    • How to Bulk-Update Sales Orders in CRM

      Hi - I need to bulk update existing sales orders with dates from our ERP of when the sales orders were created. I made a date field on the Sales Order module where I want to insert that data. I can't Mass Update because I am not updating the fields to

    • How do mass change start date and end date?

      You can mass do everything else, so maybe I'm missing something. But if I have a bunch of tasks and want to assign multiple tasks within a date set, how do I do that without doing them one by one?

    • Announcing New Features in Trident for macOS (v.1.2.0)

      Hello Community, Trident for macOS has quite a few new features that will improve your business email communication. Let's take a quick look at them. Creating templates Earlier, you could save email drafts as templates in Trident. With the current update,

    • Products in time entry

      Morning, Is there a way to add the product field to the time entry layout? Giving us the ability to identify a product per time entry. Thanks Rudy

    • Zoho.eu and U.S. Cloud Act? Can U.S. request Zoho.eu data?

      Given the current political situation in the U.S. and possible near future implications for data privacy and security, I am curious about Zoho’s obligation to comply with the U.S. cloud act or other U.S. requests for private customer information from

    • Zoholics Europe Awards

      We're excited to announce that at this year's Zoholics events across Europe, we're holding customer awards for the first time ever! This is your chance to shout about the amazing things you've created, connected, or achieved with Zoho's developer application!

    • Why "balance due" for the VOIDED INVOICE is not zero?

      We wonder why the "balance due" for the VOIDED INVOICE is not zero? For example our case, we issued invoice for a client for MYR1000, then after client request for cancellation. Client haven't make payment yet. So we marked the invoice as void. We think

    • Format handling error

      Hi, I'm having an issue when merging a document using a custom function when with decimal numbers. In my template preview, it's seems correct ,but when I do the merge and attach the file to a record, all types of docs aren't displaying the number correctly.

    • Announcing New Features in Trident for macOS (v.1.20.0)

      Hello everyone! Trident for macOS is here with interesting features and enhancements to elevate your workplace communication and productivity. Let's take a quick look at them. Change the "From" email address easily. When composing or replying to an email,

    • Announcing new features in Trident for Windows (v.1.27.6.0)

      Hello Community, Trident for Windows is here with exciting new features to elevate your email communication. Let’s dive into what’s new! View and manage .pst files. A .pst (Personal Storage Table) file is an Outlook Data Storage file format for storing

    • Email limit reached

      I'm assessing whether zoho crm will work for our startup, however I tried to send emails to my leads and after 12 emails got the notification that email limit has been reached. That is ridiculously low. Whats wrong and how can you fix that. I am still

    • Importing Into Zoho CRM

      Do you have a list in Excel that you would like to import into Zoho CRM? If your administrator has not restricted your ability to import, the process is fairly easy to accomplish, but understanding the options can make everything go smoother. First you may need to prepare the spreadsheet Remove any extra rows from the top of the spreadsheet, like titles or blank lines. Row 1 should be the column headers. Row 2 should be where the data starts. Make sure that there is a column for any required fields

    • Analyze the Name of the Deal Owner and Created by

      I need to display the Name of the User who created a deal and the Deal Owner. Since both fields are lookups to the same table (Users), it defaults to the user record of the Deal Owner and I cannot display the name of who created it. I can generate the

    • Date Import Problems

      I'm trying to import products from csv/xls files, but I can't get the Sales Start Date field to import. I know the import is working because all the other information is imported, but the Sales Start Date field is left empty. I think it must be a format

    • Canvas and Related lists

      Hi, As much as I like canvas, when adding in a asection with related lists,it doesnt mimic the same functionality as the standard view within the CRM e.g left hand panel will show the module and total number of records. Is there a way of indicating this

    • New Search Function

      Hey Team, The search function updated in our CRM about a week ago, so I assume it was an automated update across Zoho. It no longer displays leads/deals etc in Chronological order so that the most recently created or updated is the first to display which

    • Problem with the "Search" function

      Hi, I've been using Workdrive for a few days and lately, the files I added in Workdrive don't appear in the search. It looks like my latest files aren't indexed. Are you aware of this issue ? 

    • Getting error "invalid warehouse_id" when trying to update any transaction in Zoho books

      I got a message from Zoho saying that the Warehouse and Branch has been merged into one category "Locations" Once I migrated to this setup I was no longer able to edit any invoice / create creadit notes - got an error saying "invalid warehouse_id" I never

    • Return "kit_quantity" when fetching Kit items via "List all the items" API call

      I have been appreciating the new Kits feature quite a bit, it is exactly what we were looking for in Zoho to solve many pain points. However, there is 1 problem I am running into and that is the fact there is no stock information that can be pulled for

    • Automating Pricing in Zoho Inventory Based on Brandline Quantity

      I am currently setting up my Zoho Inventory system and would like to implement an automatic pricing feature for sales orders. We have created a custom field called "brandline" for our items. All products with the same brandline value should have the same

    • Tags with Zapier

      Maybe I'm missing something....I hope so... Using tags for triggers is a key need.  This prevents us from having a ton of different lists. I am trying to find out how to add a tag using zapier when someone makes a purchase....but it doesn't seem to be

    • Print & PDF Support for Composite items

      There needs to be a way to print a composite item showing all the components, qty & images.

    • Build custom AI solutions with Catalyst’s QuickML capabilities in CRM

      Hello everyone, We’re thrilled to announce an improvement for our Zoho CRM Enterprise users: the ability to create custom AI solutions using Catalyst’s QuickML directly from Zoho CRM. As you may already know, Zia, Zoho CRM’s AI-powered assistant, offers

    • We cant create a custom function

    • Live webinar: Power-up your business presentations with Show's add-ons

      We all spend a good amount of time building presentations for meetings, reports, and pitches. But even with good content, slides can sometimes feel basic or less engaging. That’s where having the right tools helps. With Zoho Show’s add-ons, you can embed

    • Contractor recruitment

      We mainly supply contract staff, so there is an end point to when they are 'Hired'.  The problem we have is that once we have marked the candidate as 'Hired' there is no way that we can change their status afterwards without 'unhiring' them against the job. We need to be able to hire people for a fixed period of time, after which they would become 'available' again.  How do we go about doing this?

    • Writer very buggy and glitchy after only a few minutes of use... oh my.

      I am finding Writer to be very buggy and glitchy while using it. I've tried it in Firefox, Chrome, Safari... all Mac. Complete words get deleted on backspace (probably a feature, but disconcerting and bad design, esp. if you just want to delete a couple

    • How can I use the API to add a drop-shipping address to a sales order for one-time use?

      I need to be able to add a drop-shipping address for one-time use to a sales order via the API. Adding every such address to the contact (customer), then feeding the shippingaddress_id into the sales order, is not an acceptable approach; we have some

    • 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.

    • Next Page