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 #197: Frequently Asked Questions on GraphQL APIs
🎊 Nearing 200th Kaizen Post – We want to hear from you! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.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.Celebrating 200 posts of Kaizen! Share your ideas for the milestone post
Hello Developers, We launched the Kaizen series in 2019 to share helpful content to support your Zoho CRM development journey. Staying true to its spirit—Kaizen Series: Continuous Improvement for Developer Experience—we've shared everything from FAQsKaizen #193: Creating different fields in Zoho CRM through API
🎊 Nearing 200th Kaizen Post – We want to hear from you! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.Client Script | Update - Introducing Commands in Client Script!
Have you ever wished you could trigger Client Script from contexts other than just the supported pages and events? Have you ever wanted to leverage the advantage of Client Script at your finger tip? Discover the power of Client Script - Commands! Commands
Recent Topics
Refund
Hi There, Please refund me asap possible, because of no support given. Thank youNo option for pick up in Zoho Books / Inventory but yes on commerce
Is it planned to release soon on books/inventory?Accessing Zoho form enteries via API
Hi As a user I can view enteries to a form at: https://forms.zoho.com/<myOrganisation>/report/<myReportName>/records/web How do I access these entries via API? I don't have any problem with scope and getting tokens. But I have no idea what the API callBlueprint Issue - Being able to set a subform field as mandatory
I'm creating a blueprint. My record involves a subform which is only shown once field is set but the field gets set in step two of the process. My problem - I can't save the record as the subform field is set to mandatory - If I unset the mandatory field,Blueprint - Mandatory file upload field
Hi, File upload (as we as image upload) field cannot be set as mandatory during a blueprint transition. Is there a workaround? Setting attachments as mandatory doesn't solve this need as we have no control over which attachments are added, nor can weZoho Books - Include Quote Status in Workflow Field Triggers
Hi Zoho Books team, I recently tried to create a Workflow rule based on when a Quote is Accepted by the customer. This is something which I thought would be very easy to do, however I discovered that Status is not listed as a field which can be monitoredZoho Books - Show Related Sales Orders on Quotes
Hi Books team, I've noticed that the Quotes don't show show the related Sales Order. My feature request is to also show related Sales Orders above the Quote so it's easy to follow the thread of records in the sales and fulfilment process. Below screenshotAdd VAT/Tax line to bank adjustments
When categorising transactions and matching bank feeds with transactions such as customer payments, we use the "Add Adjustment" to add things like fees/bank fees. It would be useful to choose a VAT/Tax rate here. Whilst there is a bank charges option when adding a payment, this goes into the default bank charges account. We use the adjustments so that we can choose the account and separate our fees. We use different card providers and Worldpay charges VAT so we are stuck. We cannot integrate withNew Menu Layout Feedback
I'd really like to see the banking item back on the top of the menu. I'm sure part of it is just because that's what I'm accustomed to. However, for a bookkeeping program, I think there's a logic to having banking be on top. Not a giant issue, but somethingHow to use Rollup Summary in a Formula Field?
I created a Rollup Summary (Decimal) field in my module, and it shows values correctly. When I try to reference it in a Formula Field (e.g. ${Deals.Partners_Requested} - ${Deals.Partners_Paid}), I get the error that the field can’t be found. Is it possibleForm Accessibility
Hi, is there an update on the accessibility standard of Zoho forms? Are the forms WCAG 2.1 AA compliant?Cannot schedule report delivery
The only 'send option' available when exporting reports is 'immediately' The option to schedule the report is missing.adding attachment in sendmail script where attachment is in a CRM field
Hi all, I have a custom field of type 'File Upload' in one of my modules in my CRM. I want to include the file in that field as an attachment to an email - which is done from a button on the 'Results' module. I have created a script and a button to initiate an email from that module. The Deluge scripting window has allowed me to add arguments for all the fields I need to use except for the one file upload type field. My script currently looks like the below (content of the email omitted). As you[Free Webinar] Learning Table Series - AI-Enhanced Insurance Claim Management in Zoho Creator
Hello Everyone! We’re excited to invite you to another edition of Learning Table Series, where we showcase how Zoho Creator empowers industries with innovative and automated solutions. Struggling with lengthy claim processes, a lack of visibility intoNot sure how to use credits to my account
Hi I have a $50 credit to my account. I'm just wondering how I can apply that to either a current invoice or to try a new service. Any advice would be great, thanks. Kind Regards ChrisControl who sees Timeline and Interactions in Zoho CRM through Profiles
The feature has been enabled for all DCs (except US, EU, and IN DCs). We will be rolling it out to the other DCs in the upcoming days. Dear All, In a CRM, not all users would require access to the history of a record. For instance, a Marketing OperationsZoho Desk Integration - Add the option to send the estimate from the Zoho Desk Ticket Integration
Hi, Currently in the Zoho Desk integration, the user is able to create an estimate from a ticket, once the estimate is created the user can see the estimate under the ticket (see screenshot below), but is not able to send that estimate from Zoho Desk.Utilisation de Zoho en conformité avec l’article 286 du Code général des impôts (CGI)
Cher(e) client(e), Conformément à l’article 286 du Code général des impôts (CGI) impose aux entreprises assujetties à la TVA d’utiliser des systèmes de caisse ou de gestion commerciale certifiés lorsqu’elles enregistrent des ventes à des particuliers.CRM Validation Rules Support Only Single Condition
Simply put, CRM validation rules support only a single condition for each field on "All Records". You also cannot specify additional validation rules on the same field because it has already been used in an existing validation rule. The ONLY solutionUnapproved Leaves are hard to distinguish in Attendance View
This is a an unapproved leave request It appears in the Attendance view without any visual indicator if its approved or not For a whole day request this might be manageable but for hourly requests it gets very hard to know which are approved, which arePerformance Appraisal Probation Period
Hello All, Is there any possible way to create an appraisal cycle for new staff members, at the end of probation period? Many thanks!Zoho Creatorの一括操作における処理の同期/非同期について
現在、Creatorのレポート機能を利用して、複数のレコードに対して一括で処理を実行しようとしていますが、処理の実行順序について確認したいことがあります。 レポート内の複数レコードに一括で処理を実行した際、処理は同期的に行われるのでしょうか？それとも非同期的に行われるのでしょうか？ 【同期処理の場合】 レコード①に対する処理が開始され、終了後にレコード②に対する処理が開始され、最後にレコード③に対する処理が実行されるように、処理が順番に行われる場合。 【非同期処理の場合】 レコード①、レコード②、レコード③の処理が一斉に開始され、それぞれ並行して処理が行われ、全処理が終了する場合。Mail Delivery Failed
Good morning, I have just set up an account with 5 users, however each time a message is sent to 1 user a m'mail delivery failed' message is generated. See below. Any ideas Thanks Rob This message was created automatically by mail delivery software. A message that you sent could not be delivered to one or more of its recipients. This is a permanent error. The following address(es) failed: robb@thesmartgroup.ae mailbox is full: retry timeout exceeded ------ This is a copy of the message,Delete commerce website
I need to delete a commerce website, but the only option is to click on settings, REQUEST DELETE, choose an urgency notice, add a message....AND THEN nothing, no way to send the request. Why is nothing simple!?!?! I just want to delete the store. TheAdding external users to Zoho Social under Zoho ONE licence - how to best achieve this
My client has a small business, and we are looking to implementing Zoho ONE with a single flexible user licence as that is all they really need and offers the best pricing for the range of modules we eventually wish to set them up with, one of which willHas anyone built a custom AI support agent inside Zoho (SalesIQ/Zobot)?
Hi all, I’ve been experimenting with building my own AI support assistant and wanted to see if anyone here has tackled something similar within Zoho. Right now, I’ve set up a Retrieval-Augmented Generation (RAG) pipeline outside of Zoho using FAISS. ItThis mobile number has been marked spam. Please contact support.
Problem Description: One of our sales agents in our organization is unable to sign in to Zoho Mail. When attempting to log in, the following message appears: This mobile number has been marked as spam. Please contact support at as@zohocorp.com @zohocorpWhat’s New in Zoho Inventory | April 2025
Hello users, April has been a big month in Zoho Inventory! We’ve rolled out powerful new features to help you streamline production, optimise stock management, and tailor your workflows. While several updates bring helpful enhancements, three major additionsWhen Zoho Tables Beta will be open to EU data center
Hello all, We in EU are looking at you all using and testing and are getting jealous :) When we will be able to get into the beta also? We don't mind testing and playing with beta software. Thank you!Pass current date to a field using Zoho Flow
I am trying to generate an invoice automatically once somebody submits a record in Zoho CRM. I get an error in the invoice date. I have entered {{zoho.currentdate}} in the Date field. When I test the flow, I get "Zoho Books says "Invalid value passedAPI: Mark Sales Order as Open + Custom Status
Hi, it's possible to create Custom Status (sub-status actually) states for the Sales Order. So you have Open, Void. Then under Open you can have Open, and create one called Order Paid, Order Shipped, etc etc...which is grouped under Open. I can use theMulti-Unit Inventory with Flexible Unit Selection (Purchase in One Unit, Sell in Another)
We need multi-unit inventory management in Zoho Books with the flexibility to choose units (e.g., Box or Piece) at the time of purchase or sale. For example, if 1 Box = 10 Pieces, we should be able to record purchases in Boxes but sell either in BoxesZoho Quartz Screen Recording
Hello, can we get access to Quartz, please, as a standalone solution? It would be great for creating training videos for current and future staff on how to use Zoho software according to our company requirements. Thank youThis domain is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details
This is the error i keep getting when trying to use my Zoho Domain Mail. This domain is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details Find attached. I hope this can be resolved very quickly so i can go on and makeTip 26: How to hide the "Submit" button from a form
Hi everyone, Hope you're staying safe and working from home. We are, too. By now, we at Zoho are all very much accustomed to the new normal—working remotely. Today, we're back with yet another simple but interesting tip--how to hide the Submit button from your forms. In certain scenarios, you may want to hide the submit button from a form until all the fields are filled in. Use case In this tip, we'll show you how to hide the Submit button while the user is entering data into the form, and thenfilter broke my data
I uploaded a file recently from Sheets and it has top 2 rows frozen, with table headers in second row and each one is filterable. somehow my first 2 columns became unfiltered and no matter what I do I cannot reapply the filter?? also didn't realize theyEmail address for forwarding is not saving and there's no confirmation ema
Steps to reproduce: 1. Enter my forward email in the email forward section of the account 2. Click save 3. See a notification stating saved successfully 4. Refresh the page, no forward email is saved 5. No email confirmation received at the forwardingHow do I move Notes around within a Group?
It says here: " You can now sort notes by title (alphabetically), or by date modified and date created. You can even organize your notes by dragging and dropping them into a particular order. To sort your notes, simply go to Settings and tap “Sort By.” Please note: all sort settings will be saved and synced across devices, except for custom sorting. Custom sorting will be device specific."However, I am unable to 'custom sort' in either Notebook for Mac or on the Web. In addition, I can't find thejavax.mail.authenticationfailedexception 535 authentication failed
Hi, I am facing 535 authentication failed error when trying to send email from zoho desktop as well as in webmail. Can you suggest to fix this issue,. Regards, RekhaPocket from Mozilla is closing shop. Don’t lose your favorites . Move them to Zoho Mail Bookmarks now! 📥🔖
The end of Pocket shouldn't mean the end of your important links and content. Easily import them into Zoho Mail's Bookmarks and continue right where you left off. You can bring over your entire Saves, Collections, and tags just the way they are. BookmarksNext Page