Kaizen #174 : Client Script Commands
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,
What are Client Script Commands?
How to create and use Client Script Commands?
Using Command Palette
Using Keyboard Shortcuts
Scenario - 1
Solution
Scenario - 2
Solution
Summary
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.
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 });
The syntax of openPopup() is as follows.
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.
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
Topic Participants
Maadhari M
Sticky Posts
Kaizen #198: Using Client Script for Custom Validation in Blueprint
Nearing 200th Kaizen Post – 1 More to the Big Two-Oh-Oh! 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.Kaizen #226: Using ZRC in Client Script
Hello everyone! Welcome to another week of Kaizen. In today's post, lets see what is ZRC (Zoho Request Client) and how we can use ZRC methods in Client Script to get inputs from a Salesperson and update the Lead status with a single button click. In thisKaizen #222 - Client Script Support for Notes Related List
Hello everyone! Welcome to another week of Kaizen. The final Kaizen post of the year 2025 is here! With the new Client Script support for the Notes Related List, you can validate, enrich, and manage notes across modules. In this post, we’ll explore howKaizen #217 - Actions APIs : Tasks
Welcome to another week of Kaizen! In last week's post we discussed Email Notifications APIs which act as the link between your Workflow automations and you. We have discussed how Zylker Cloud Services uses Email Notifications API in their custom dashboard.Kaizen #216 - Actions APIs : Email Notifications
Welcome to another week of Kaizen! For the last three weeks, we have been discussing Zylker's workflows. We successfully updated a dormant workflow, built a new one from the ground up and more. But our work is not finished—these automated processes are
Recent Topics
Enrich your contact and company details automatically using the Data Enrichment topping
Greetings, I hope you're all doing well. We're happy to announce the latest topping we've added to Bigin: The Data Enrichment topping, powered by WebAmigo. This topping helps you automatically enhance your contact and company records in Bigin. By leveragingZoho Billing Partial Proration...
Hi, In Zoho billing, we offer upgrades, downgrades, suspends, and resumes. We use online payment for most subscriptions, but have only a few that are offline, but we treat them the same either way.. We prorate only parts of these changes.. Right now zohoGetting Subform Fields to Display Top to Bottom
I have a form where the fields are all in one column. I want to insert a subform where the fields are stacked in one column as well. I have built both the form and subform but the subform displays the fields from left to right instead of a stacked column. This will cause a problem displaying the subform correctly on mobile apps. How can I do this please?' Here is my form with subform now. As you can see the subform "Follow Up Activity" is displaying the fields left to right. I need them to go top[Feature Deprecated] Gamescope in Zoho Projects
This feature is no longer available. All work and no play makes Jack a dull boy. Well, yes. That's true! Tiring work, buzzing coffee makers, busy turnstiles , occupied meeting rooms, back-to-back status updates and what not. Your everyday routine need not have to be this hectic. It can be more rewarding. It can be more fun. Zoho Projects believes in this fact and hence has launched Gamescope - A module that turns every project into an exciting game and boosts the spirit of your team by leaps andCreating a task, i can not work out how to get ID for What_Id
hi From Module A function I map Module B record reference membershipid (ours). I need Module B Zoho ID to create the related to on task. All examples i've seen start with the Zoho ID. void automation.LTM_Assign_Dispute_Task(String membershipid) { tryCan't connect to POP and SMTP over VPN
I use Thunderbird to access Zoho Mail via POP and SMTP. I have configured an app-specific password for Thunderbird to use. Everything is properly configured and works correctly — until I enable my VPN. I'm using a paid commercial VPN service (Mullvad).my zoho mail is hacked
my email is sending my username and password to people i dont knowSuministrar accesos
Asunto: Enable UPLOAD_RULE for API Attachments Mensaje: Hola, Necesito habilitar la capacidad de subir attachments vía API en Zoho Mail. Actualmente recibo el error: "UPLOAD_RULE_NOT_CONFIGURED" al usar el endpoint: POST /api/accounts/{accountId}/messages/attachmentsIntroducing real-time document commenting and collaboration in Zoho Sign
Hi, there! We are delighted to introduce Document commenting, a feature that helps you communicate with your recipients more efficiently for a streamlined document signing process. Some key benefits include: Collaborate with your recipients easily withoutTicket Loop from Auto Responce
We’re seeing an issue where a client’s help desk triggers a ticket loop. When they email us, our system creates a ticket and sends the acknowledgement. Their system then creates a ticket from that acknowledgement and sends one back to us, which createsHow to make rule to filter out some emails from receiving the notification "Receiving a new ticket"?
Good Morning, We are currently using the "Receiving a new ticket" notification rule to provide that auto reply template to a customer that emails us for support. However, there are some emails we don't want to receive this auto-reply. Where can I setZoho Signatures Missing
In the past after collecting signatures from two different PDFs I would merge them by calling an api and the signatures would appear in the combined PDF. Recently the signatures have disappeared whenever I combine the PDFs together. Why did this randomlyAutomate pushing Zoho CRM backups into Zoho WorkDrive
Through our Zoho One subscription we have both Zoho CRM and Zoho WorkDrive. We have regular backups setup in Zoho CRM. Once the backup is created, we are notified. Since we want to keep these backups for more than 7 days, we manually download them. TheyExciting Updates to the Kiosk Studio Feature in Zoho CRM!
Hello Everyone, We are here again with a series of new enhancements to Kiosk Studio, designed to elevate your experience and bring even greater efficiency to your business processes. These updates build upon our ongoing commitment to making Kiosk a powerfulNew activity options for workflows
Greetings, We are excited to announce the addition of two new dynamic actions to our workflow functionality: Create Event and Schedule Call. These actions have been thoughtfully designed to enhance your workflow processes and bring more efficiency toRemove the “One Migration Per User” Limitation in Zoho WorkDrive
Hi Zoho WorkDrive Team, Hope you are doing well. We would like to raise a critical feature request regarding the Google Drive → Zoho WorkDrive migration process. Current Limitation: Zoho WorkDrive currently enforces a hard limitation: A Zoho WorkDriveKaizen #228 - Process Large-Scale Migrated Data Using Catalyst Solutions
Howdy, tech wizards! This week’s Kaizen explores how Catalyst Solutions in the Zoho CRM Developer Hub help import large volumes of data into Zoho CRM while improving data quality and simplifying the migration process. Why Catalyst Solutions? CatalystZoho Expense Import Reports Won't Work Because Default Accounts Already Exist
Im trying to import reports from another Zoho expense account to mine and im getting errors that won't allow the import to happen The account name that you've entered 'Ground Transportation' already exists. Enter another name for the account and try again.zInactive License for free account.
I recently upgraded my Cliq subscription not my team (on the free version), are unable to login to their accounts. The error message received is Inactive License Looks like you have not been covered under the current free plan of users. Please contactSyncing zoho books into zoho crm
I was wondering how I can use zoho books in crm as I have been using them separately and would like to sync the two. Is this possible and if so, how? ThanksAnnouncing new features in Trident for Mac (1.34.0)
Hello everyone! We’re excited to introduce the latest updates to Trident, which are designed to take workplace communication to the next level. Let’s take a quick look at what’s new. Connect with customers using Zoho Voice integration. You can now easilyHow Zoho Contracts Makes Negotiations Clear, Secure, and Transparent
Negotiation is one of the most critical—and often most chaotic—stages of the contract lifecycle. Multiple stakeholders review the same document, propose changes, debate terms, and exchange feedback. Without the right tools, this collaborative processError: Invalid Element tax_override_preference
In both Books and Inventory, we're getting the following error whenever we try to enter any Bill: I think this is a bug. Even cloning an old bill (that obviously was entered just fine), this error occurs.Assign Income to Project Without Invoice
Hello, Fairly new user here so apologies if there is a really obvious solution here that I am just missing... I have hundreds of small deposits into a bank account that I want to assign to a project but do not want to have to create an invoice every timeHow to Print the Data Model Zoho CRM
I have created the data model in Zoho CRM and I want the ability to Print this. How do we do this please? I want the diagram exported to a PDF. There doesnt appear to be an option to do this. Thanks Andrewour customers have difficult to understand the Statements
our costumers have big problems to understand Zohos Statements. we need a text box after the payment number to explain what the payments are for. Is it possible to develop a version of the Statement with that kind of box and if so whu can do itHow to track a list of ALL the items that ONE customer bought?
Hello, I am interested in getting a list of all the items that only ONE of my customers bought, and the invoices are what show up instead. It's very tedious to go through every single invoice when we sell a lot of items to this customer. Surely thereExchange Rate Updates
Hi, It would be great that when you work with multiple currencies, the exchange rate updates automagically every day (as seen on Zoho Books) or at least that when you create/update an opportunity the exchange rate could be manually updated, or maybe both!Locked Out of Super Admin Account
I'm locked out of my Super Admin account and the external e-mail is no longer associated with it. There seems to be a problem during set up, the system ought to ask to assign a new password instead of using Google accounts. Please help me get back access.Emails are going to notification folder and not in inbox
emails are going to notification folder and not into inbox550 5.4.6 Unusual sending activity detected. Please try after sometime
Hi, I am receiving this error message when trying to send my emails. The only reason I can think why this is happening is my previous two emails were bounced back to me due to a non working mailbox error. I have followed the online links for unblockingProjects Home Customization
Hello! We've been in Zoho One since July of last year, and my team has started providing feedback on what they'd like to do. Their latest wish is that they could have more control over the Projects Home content. For example, they want a card that showsIMAP search support
Does Zoho Mail support IMAP search? https://www.rfc-editor.org/rfc/rfc9051.html#name-search-command TEXT <string> Messages that contain the specified string in the header (including MIME header fields) or body of the message. Servers are allowed to implementPerformance is degrading
We have used Mail and Cliq for about three years now. I used to use both on the browser. Both have, over the past 6 months, had a severe degradation in performance. I switched to desktop email, which appeared to improve things somewhat, although initialCannot reorder fields in Page Layout in Expenses and Purchase Requests
It is very inconvenient that the custom fields in Page Layout cannot be re-ordered. The only way is to remove the fields and re-create them; however, it is impractical. This would affect the reports and dashboards we are having. Not able to re-order thebouncing emails
My recurring invoices have bounced backProbable Scam / Phising attempt from email pretending to be Zoho
I think this is a scam email right? It says "zohCworkplace.com". I'm on the Mail Free plan The link in the CTA button seems to go to a redirect. Just wanted to bring it up to the security team.Feature Request: Ability to set Default Custom Filters and apply them via URL/Deluge
I've discovered a significant gap in how Zoho Creator handles Custom Filters for reports, and I'm hoping the Zoho team can address this in a future update. This limitation has been raised before and continues to be requested, but remains unresolved. TheEmail Address Search in "To" Field Search is broken, Zoho refuses to fix it
Typing a part of the email address string other than the beginning of the string does NOT work, I kindly urge Zoho to fix this. Let's say you remember writing an email so someone called "smith" from company "corp.com", but can't remember their first name,Emails not being received by @hotmail.com, @outlook.com and a few others
When I try to send emails from zoho mail to people with email addresses ending @outlook.com and @hotmail.com (and a few others), I get a 'delayed' automatic email and then a few hours later, an 'undelivered' automatic email. This has started a few monthsNext Page