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

        • 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

        • Access invoice custom modules data from API

          Hi, I am using $url = "https://www.zohoapis.eu/invoice/v3/invoices"; $opts = ["http" => [method" => "GET",header" => [ "Authorization: Zoho-oauthtoken $accessToken", "X-com-zoho-invoice-organizationid: $orgId" ] ] ]; From my app to retrieve the invoices,

        • It would be very helpful to be able to use variables in the formula columns

          Currently, variables can be used only in aggregated formulas. It would be great to be able to use them in regular formulas as well

        • Bulk Update API

          I’m reaching out to see if anyone has updates on the bulk records feature release. We’re eager to leverage this functionality for our operations, but until it becomes available, our current API call limits are proving to be a bottleneck—even after upgrading

        • Proper syntax for filtering Added_Time in the URL using functionality-based URLs

          I haver intermediate knowledge of functionality-based URLs. I say that because when I use them, it is never straight forward with me. Sometimes it works first try, and sometimes I spend hours exploring to find the proper syntax. link to operators: https://help.zoho.com/portal/en/kb/creator/developer-guide/others/url-patterns/articles/functionality-based-urls#List_of_operators_and_their_constants

        • AI that checks text content quality and for plagiarism

          Hello, A client has a requirement where the users will be typing in content consisting of multiple paragraphs in Creator. The text box will be checked for plagiarism and also for its quality. What would be the best approach for that?

        • 404 Error When Using record_cursor in ZOHO.CREATOR.DATA.getRecords (js api)

          Iam working on fetching all records from a Zoho Creator report using the Get Records API (V2.1) with the following recursive function: js CopyEdit // Recursive function to fetch records using record_cursor from the response function fetchAllRecords(recordCursor

        • Reusable Variables

          I’d like to know if there’s a way to store variables in Zoho Analytics that I can use in metrics or calculations. For example, I have a Currencies table that stores the value of different currencies over time. I’d like to use the value of the US dollar

        • Linking Purchase Orders to Task budgets

          Hi, We are a construction company within the mining industry. Our projects usually have fixed budgets (Cost budgets per task). Is it possible to link Purchase Orders to task budgets? I know you can link the Purchase order to a project, but this is not

        • Introducing prompt builder in Zoho CRM

          We’ve introduced a new way to put Zia’s generative AI to work—right where your teams need it most. With the all new prompt builder for custom buttons, you can create your own AI instructions to generate tailored content, suggestions, or summaries across

        • Create Tasklist with Tasklist Template using API v3

          In the old API, we could mention the parameter 'task_template_id' when creating a tasklist via API to apply a tasklist template: https://www.zoho.com/projects/help/rest-api/tasklists-api.html#create-tasklist In API v3 there does not seem to be a way to

        • Facing issue in getting data through api calls

          I have send data of users and want to get the data oof users but facing issue with one field for that I want help

        • invokeURL to change custom field

          I have a deluge script that currently runs as a Schedule. It works exactly as intended, however I've recently been informed by Zoho that there's some mechanism in place to block changes made by a script when it runs on a schedule from being detected by

        • How to stop workflow running twice on a record

          Hi I have a workflow as below Trigger: Lead record is created/edited - Repeat this workflow whenever a lead is edited is NOT TICKED Condition: When Lead Stage is MQL Action: Reassign Lead, Create Task If the Lead goes into stage MQL, and then it changes

        • Customize the ticket ID for enhanced ticket tracking

          Hello everyone, Ticket IDs in Zoho Desk are the unique reference numbers that are assigned to tickets when they're created. Agents generally use the ticket ID to locate a particular ticket and to reference a ticket in conversations and feeds. When customers

        • FSM Function not executing

          Good Afternoon, all I am working on a workflow function in FSM and yesterday it was working fine. Now today when I select "Save & Execute" it does nothing. I even tested it with just a info statement and it is not executing. Any help would be greatly

        • DKIM cannot be enabled for the domain as no verified default selector present

          Can't get the DKIM working. May you please check my account (nksy.us) to see what's wrong?

        • Boost collaboration in your sales process with Team Selling and Deal revenue's Split—empowering your Zoho CRM for smarter teamwork!

          This feature is currently available for the AU and SA DCs. It is being rolled out in a phased manner and will be available to all users shortly. Hello everyone, As you may all know, closing a deal is rarely a one-person effort. It often involves multiple

        • Create modules using natural language prompts

          Hello all, We’ve introduced a new enhancement to Zia that allows you to create custom and team modules in Zoho CRM using plain language prompts. Why this enhancement? Creating a custom module traditionally involves multiple steps—choosing field types,

        • Suggesting enhance for criteria based data-sharing rules

          I suggest that, for user fields, the logged-user system variable could be used. This would allow the user, for example, to access records in which he/she is mentioned in a specific field, other than the owner. Thanks! Eduardo

        • How to sync read mails to GMail?

          Hello I am testing Zoho TeamInbox but I have an issue with my connected GMail account. Whenever I read a mail in TeamInbox or even reply to it, the email stays as "unread" in GMail. Is this normal behaviour? I thought that with the 2-way sync of IMAP

        • Look up field and show or hide section based upon selection

          Hi there, I am looking to show or hide a section within the opportunities module based on the value of the selection in the look-up field. This feature does not seem to be there Is there a workaround, and is this option coming in a future release? Thanks

        • eway Bill - Import (Good / Material)

          As we Importer of goods , for That first we Generate PO then , Payment, then after We create Bill of Entry  After Bill of Entry Anywhere (99%) cases material that arrived to port that comes to warehouse / factory for that Eway bill , we have to create

        • Import of Bank Statement DO NOT work - Date Mapping issue - Basic Feature Issue Becoming Serious Pain

          Hello, Yes, This is True. Importing Bank Statement feature is Not working as Intended. Facing few issues. Specially regarding the Mapping of Date field format. No matter how many times, we create a Case with Support team, they are NOT supporting in proper

        • Approval Workflow for Purchase Orders Abrir

          The requirement is , that all purchase orders greater than or equal to 5000 go through an approval process from certain people, but within books I only see that the approvers can be by levels or any approver but we cannot enter a rule like these. Can

        • How to see and amend Primary Clients easily

          Hi, i'm trying to make some reports on the clients we do projects for. However, i'm seeing a lot of "unknown" clients in the Zoho Analytics report. I suspect that these projects have not been assigned well and this needs to be corrected. Where can i easily

        • ZOHO NEEDS TO CREATE AN OPTION TO PASS CREDIT NOTE AGAINST SALES RECEIPT

          Zoho needs to find a way to pass credit note on sales receiptS. Creating a dummy invoice is causing major issues in tallying our sales figures and compliance with tax authorities.My system is tied to tax agencies and trying these options causes major

        • INTERGRATION OF ZOHO BOOKS PREMIUM PLAN AND ZOHO INVENTORY STANDARD PLAN

          Hello. I was using Zoho Books premium plan with 3 branches and has been working well until I purchased Zoho Inventory Standard plan. Now my 3rd branch location has been deactivate din Zoho Premium. how can I solve this please since I use all the locations

        • Exporting Templates

          I have just spent 2 hours creating a project template for a Netsuite configuration, and want to share it with other Zoho Projects users - who have a different account. Is there any way to do this?

        • It's time to say goodbye to Zoho Recruit for me.

          Hello, I have been a Zoho Recruit user since 2013. The tool has evolved, with a better UI, new features and so on. The pricing is still a great asset too. BUT, that being said, important features are not coming fast enough. I tried to share my point of

        • Automation#34: Schedule Guided Conversations (GC) Based on Business Hours

          Hello Everyone, Welcome to this episode on configuring your Guided Conversations (GC) based on your business hours. In our previous episode on Guided Conversations, we covered how to set up GC to enable offline support. This time, we'll guide you through

        • Download PDF from File Field with the name in another single line field

          Hi I am storing a PDF file in a File Field of a Form using Zapier automatically. now i need to download that file and set its file name as per the value stored in a single line field in that form. ANy turnout for that Thanks

        • Custom Module missing SDK function fetchRelatedRecords(...) in a Client Script

          Good day, We have added a new module with a Multi-Lookup relation to Contacts.  When we tried to use the fetchRelatedRecords(id, related_list_api_name) function to get Related Records it is missing for our new custom module. https://js.zohocdn.com/crm/5124797/documentation/DotSDK/Modules.html

        • TeamInbox and Desk Integration is Broken

          I use the TI -> Desk integration a lot. Today, it broke, again. When I go to create a Ticket from TI, an error message on a red background is shown "oops something went wrong". Checking the developers console on my browser, there are many 500 errors relating

        • Couldn't connect to host, port: wordpress2224249.home.pl, 143; timeout 10000

          Hey, i get a error up "Couldn't connect to host, port: wordpress2224249.home.pl, 143; timeout 10000" But i tried same passwords and info. to make imap on hotmail. and it works flawlessly. Has to be something with zoho....

        • Reply-To Match condition for Inbound Mail Messages

          I've trying to setup a rule to match the "reply-to" header but can't find any condition that would match this in Zoho TeamInbox rules. The business case is that I've setup my team inbox to be a member of a google group. The result of that is that emails

        • No Emails Flowing To Zoho TeamInbox

          From today, any emails we send to our TeamInbox addresses fail to be delivered. Our TeamInbox is connected via IMAP to 2 x Zoho Mail accounts. If I log in to those accounts directly via Zoho Mail, I can see all the emails landing in the inbox. The emails

        • How to download Renamed File that already updated to Zoho Creator.

          Hi members, I construct a button with report workflow. link = "https://creatorexport.zoho.com" + zoho.appuri + "report_link_name/File_upload/image-download/" + input.File_upload; openUrl(link,"new window"); This script able to download the file. But I

        • Merge Join PDFs Zoho Creator

          Hi all, I have a field where users upload PDF, is it possible to join those pdfs into one with a function or something? Regards.

        • Project Statuses

          Hi All, We have projects that sometimes may not make it through to completion. As such, they were being marked as "Cancelled". I noticed that these projects still show as "Active" though which seems counter intuitive. In fact, the only way I can get them

        • Next Page