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 do i add another purchase information heading?

      i would like to add another section right here to enter an amount which then link directly to the cost of goods sold account

    • Help with Zoho CRM API Integration in C# WinForms (Token Generation Issue)

      Hi everyone, I need your help with integrating the Zoho CRM API into a C# desktop application. My goal is to build a WinForms app in Visual Studio that does the following: Fetch the full list of client projects (module: Deals) and display them in a searchable

    • Can we share the URL of My zoho Sheets on other websites?

      Hello everyone? I have sheets on Zoho and I want to share them on other websites like daraz, homeshopping, gepco duplicate bills, etc. I don't have much knowledge about online sharing question forums? I am a student and have a short survey about online

    • Add Support to Upload Inventory Items with Categories or Enable Separate Upload for Inventory Categories

      Currently, Zoho Inventory does not support uploading new items along with their parent and sub inventory categories using the item import feature. This creates challenges for businesses with structured inventory hierarchies when trying to upload items

    • in zoho books while categorizing need to add new name in category by replacing expanses how to edit or make changes need assistance

    • Tip of the Week #62– Use @mentions to loop in teammates.

      Ever been stuck on a customer query because you needed input from someone else on your team? Maybe you were unsure about a refund policy or needed help answering a technical question. So you forward the message … and wait. Or worse, you forget to follow

    • Suggestions for Kiosk Functionality Improvements in Zoho People

      Hello Zoho Team, I’d like to share some feedback and suggestions regarding the Kiosk functionality in Zoho People, as there are two important points that affect user experience and compliance: Visual Confirmation of Check-In Status It would be extremely

    • Needs Separate Permissions levels for Record Attachments

      Currently in Zoho Books Record attachments are tied to the general permission level For example if a role don't have the delete permission level they cannot delete the attachment as well If a role doesn't have the edit permission they cannot upload the

    • Zoho Books integration with Google workspace

      How do I integrate Zoho books with Google Workspace? The steps outlined on the Zoho help sections do not correspond to the actual user interface in Google Workspace. Zoho books is installed on admin level for all users, all users can access it from the

    • Fields of Look up in Custom Modules

      We need to create a custom module in Books for Proforma Invoices Now I created a Custom Module and added a Table and in the table added a lookup field and chose Items Now I want Specific fields of the item such as Tax, Item Cost etc but it only displays

    • Share work items across projects and users

      Hello everyone, We're thrilled to introduce a new feature in Zoho Sprints: "Share work item" Collaboration across projects and users is now easier with the introduction of the Share work item feature. You can now share work items with users who are not

    • Payment Terms Changing Upon Invoicing

      Hello! Our standard payment terms for 95% of our customers are Net 30, and all of our customers that these terms apply to have that setting n their customer profile. However, over the last week or so, when an invoice is generated the majority of these

    • How do I get a refund for email seats?

      Hi, I've been using Zoho for awhile and have been paying for 2 seats. Recently, I created another 9 seats, but I also found out that Zoho does not support cold emails, so these 9 seats created for this purpose became useless. It's within 24 hours that

    • Work Orders / Bundle Requests

      Zoho Inventory needs a work order / bundle request system. This record would be analogous to a purchase order in the purchasing workflow or a sales order in the sales cycle. It would be non-journaling, but it would reserve the appropriate inventory of

    • Narrative 1 - The significance of a business account

      Behind the scenes of a successful ticketing system - BTS Series Narrative 1 - The significance of a business account Setting up a proper business account is a crucial step that is often overlooked when launching a ticketing system for your service company,

    • Changed hosting for domain, Zoho mail stopped working.

      I have changed hosting fro my domain and from that time my zoho email stopped working

    • we need to add a Customer Number field to the PDF document templates

      Hello everyone. We are currently using Zoho Inventory for our small business operations and have found it to be a valuable tool. However, we’ve encountered a specific requirement: we need to add a Customer Number field to the PDF document templates (such

    • Joining Two Reports

      Hello Guys, I have three modules: - Orders - Custom module - Clients - Contacts - Basic Pay I am using the order module to store the revenue share amount for each order which will be paid a sales rep The Orders are child or clients so I am pulling a report

    • Power of Automation :: Notify users Automatically when @Mentioned in Tasks Description

      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

    • Recording a payment in foreign currency not allowed

      Hi, my base currency is CHF. I made an invoice in EUR, which have been paid with an extra amount (which are the fees I guess). When I record that payment from the invoice page, I can select the EUR bank account. But the amount received is above the invoice

    • Introducing WhatsApp integration and quick editing capabilities in Zoho Sign

      Hi there, Zoho Sign already helps users collect signatures via email and SMS, and we're happy to announce that you can now send documents and authenticate recipients right through WhatsApp. Some of the key benefits include: Communication with recipients

    • Order Wise Expense Tracking and Reporting Possible?

      Hi, We are a manufacturing firm and take up several orders at the same time. Each order will be associated with a single sales order and then once completed to a single invoice. When recording expenses, is it possible to associate each expense with a

    • Zoho Flow Needs to Embrace AI Agent Protocols to Stay Competitive

      Zoho Flow has long been a reliable platform for automating workflows and integrating various applications. However, in the rapidly evolving landscape of AI-driven automation, it risks falling behind competitors like n8n, which are pioneering advancements

    • Layout Rule Fields Appear in "Verify Details" Pop-up — Confirmed Working

      Hey everyone — just wanted to share a quick discovery. I created a Layout Rule in the Deals module that makes two fields show up (and required) when the stage is set to Closed Won or Closed Lost — one pick list and one text field. To my surprise, those

    • Can you please let us know how we can use Zoho for multi store?

      Hello Team, Can you please let us know how we can use Zoho for multi store because when we connect our plugin to Zoho and we create a product and then on another store when we create product with same name then product already exist error occurs, so how

    • Zoho One Home Dashboard - My Tasks (Projects) & My Overdue Work Items (Projects) have no data.

      The title basically covers the situation. I've set up the dashboard cards, and for a while, they were showing data. Now, they are both blank. Is anyone else experiencing this, or has anyone else experienced this, and if so, is there a fix?

    • Zakya - Release in North America?

      At Zoholics it was pitched like Zakya was already released in North America. However, when looking for it I couldnt find it. There isnt an integrated app available in Zoho. I figured maybe it was being released at Zoholics. Now over a month later, its

    • Custom Field Mapping in Outlook

      I have 10 custom fields in Zoho is there a way to create and map them to the outlook contact?

    • Custom module - change from autonumber to name

      I fear I know the answer to this already, but thought I'd ask the question. I created a custom module and instead of having a name as being the primary field, I changed it to an auto-number. I didn't realise that all searches would only show this reference.

    • Enhanced Zoho CRM and Office 365 calendar synchronization features!

      Dear customers, We're excited to share some significant improvements to our Office 365 calendar synchronization features, aimed at providing you with more control and a more personalized experience. What’s new Choose your Office 365 calendar: During the

    • Problemas de usarmos no Brasil

      Somos usuários a exatamente um ano do Zoho Recruit, agora migramos para o Zoho One. Temos enfrentado por diversas vezes problemas da ferramenta não estar realmente preparada para funcionar corretamente na lingua portuguesa. Problema esse não específico

    • CERTIFICADO DIGITAL - BRASIL

      Olá, Temos o ZOHO ONE e no Sign vemos de forma simples a assinatura digital, temos nos BRASIL certificado digital, de no CERTISIGN homologado pelo GOVERNO do BRASIL, há possibilidade de gerar a assinatura diante deste certificado?

    • Zoho Duplicate Reference Numbers

      I have 2 accounts through zoho. On one account if I enter a bill with the same number as a previous bill I get a warning message saying that there is already a bill with this number. However on the other account I do not get this message. How do I turn

    • integration between Zoho Site and Zoho Learn

      integration between Zoho Site and Zoho Learn so that when a user registers on the Zoho Site, their account is automatically created in Zoho Learn!! the use case i have pro plan in zoho site and zoho learn and i have puted the zoho learn domain in zoho

    • Automation #6 - Prevent Re-opening of Closed Tickets

      This is a monthly series where we pick some common use cases that have been either discussed or most asked about in our community and explain how they can be achieved using one of the automation capabilities in Zoho Desk. Typically when a customer submits

    • Not able to list or add contacts

      I am not able to get a list of contacts via api request. Tickets for example are listed via api even without orgId, so it shoud be similar. What is missing to reach the requirement. My aim ist to add a contact via API and then add a ticket with the contact

    • See contrat information from an account under the ticket

      Hi there, How can I program something to display created and selected contract on the ticket itself so my agents see it and can support correctly according to the contract and SLA ? Thank you :)

    • Weekly time log view

      The Weekly Time Log view is pretty nice. My users really like it when I show it to them. They like being able to pin ongoing tasks. Anyway, it's sort of hard to find. It is grouped with the Add Time Log button as a pull down. In my opinion, it should

    • Any Impact of Amazon Listings API on E-commerce Integration?

      Amazon sent the following message about changes to their APIs. Our only Amazon app / integration is Zoho Inventory's eCommerce for Amazon US, so the message below in bold gives us concerns about if Amazon's warning is referencing Zoho's Amazon US integration.

    • Working with Products that are non-tangible

      How does one create a 'service' in products? Is there a way to disable inventory functions for things like Sofware as a service? The services module doesn't look to be much help either. Not sure how to do this in CRM

    • Next Page