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 #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 areKaizen #152 - Client Script Support for the new Canvas Record Forms
Hello everyone! Have you ever wanted to trigger actions on click of a canvas button, icon, or text mandatory forms in Create/Edit and Clone Pages? Have you ever wanted to control how elements behave on the new Canvas Record Forms? This can be achievedKaizen #142: How to Navigate to Another Page in Zoho CRM using Client Script
Hello everyone! Welcome back to another exciting Kaizen post. In this post, let us see how you can you navigate to different Pages using Client Script. In this Kaizen post, Need to Navigate to different Pages Client Script ZDKs related to navigation A.Kaizen #210 - Answering your Questions | Event Management System using ZDK CLI
Hello Everyone, Welcome back to yet another post in the Kaizen Series! As you already may know, for the Kaizen #200 milestone, we asked for your feedback and many of you suggested topics for us to discuss. We have been writing on these topics over the
Recent Topics
Need option to send Package PDF in shipment email (Shipment PDF is missing Lot info)
Is there any way to automatically attach the Package PDF instead of (or alongside) the Shipment PDF in the notification emails? We really need this feature because the default Shipment PDF creates a blind spot for our customers. It does not display Batch/Lotzoho creator view is not present in the workspace and blank reports
Hi Support, Users who have "write" permissions keep getting this error for all of our embedded reports all of a sudden. See screen shot below: Meanwhile, my developer permissions account sees a blank screen in view and edit mode as shown in the screenshotsCustomize portal email template
Can i fetch only first name of the user in portal email template instead of the below code Hi ${User.FULL_NAME}Can't we let users decide which options they'd like to add at embed widget?
It seems embed widget DOES NOT offer a feature, where users can choose options upon subscribing plans. What Zoho has instead, is that admins have to manually create plan with options. How come no one in Zoho dev team never raised issue about usabilityReupload and rename from one field to another field (file upload)
Hi Everyone, Sorry, i have question to use invoke url for rename and reupload attachments file to another field. Tested on development mode. Zoho C6. Refer to https://www.zoho.com/creator/help/api/v2/upload-file.html look my error notification. Does anyonePrinting Multi-Page Reports (PDF Export)
Hi, I am moving a report from Google's Looker Studio to Zoho Analytics and trying to reproduce the Looker page by page dashboard editing experience. With Google, what you see is what you get when you print to PDF. But I can't seem to create the same experienceResume Harvester: New Enhancements for Faster Sourcing
We’re excited to share a set of enhancements to Resume Harvester that make sourcing faster and more flexible. These updates help you cut down on repetitive steps, manage auto searches more efficiently, and review candidate profiles with ease. Why we builtI NEED TO NUMBER TO TEXT NO HERE
=NUMBERTEXT NEEEDError: View is not present in the workspace
When saving a dashboard, user receives a popup with the following error. "View is not present in the workspace" What does this mean or refer to? There is no further insight given.Dear Zoho CEO: Business Growth is about how you prioritise!
All of us in business know that when you get your priorities right, your business grows. Zoho CRM and Zoho Books are excellent products, but sadly, Zoho Inventory continues to lag behind. Just this morning, I received yet another one-sided email aboutBin Locations
Dear all, I am wondering if someone has the ability to develop the bin locations option for zoho inventory (integrated with zoho books) Regards, RyanCreate and populate a record in an instant: Introducing zero-shot field prompting to Zia's ICR
A couple of months ago, we upgraded our in-house AI image detection and validation tool, Zia Vision, with intelligent character recognition (ICR). By training Zia with sample images, you could create and enrich CRM records with data extracted from standardHow to Prevent Users From Skipping LMS Videos in Zoho People
How to Prevent Users From Skipping LMS Videos in Zoho People Hello Zoho Developers, In this blog, we will quickly look at how you can stop users from skipping or fast-forwarding videos in Zoho People LMS. Zoho People provides a feature called Disable[Integration Edition] Deluge Learning Series – Custom API with Deluge | November 2025
We’re excited to conclude this four-month Integration Edition of the Deluge Learning Series: Session 1 – Integrating Zoho Apps with Deluge Using Built-In Integration Tasks Session 2 – Integrating Zoho Apps with Deluge Using invokeURL and invokeAPI SessionAutomate Backups
This is a feature request. Consider adding an auto backup feature. Where when you turn it on, it will auto backup on the 15-day schedule. For additional consideration, allow for the export of module data via API calls. Thank you for your consideration.Tips for Organizing Workflows and Improving Team Coordination in Zoho
Hi everyone, I’m looking for some general advice on how different teams are organizing their daily work within Zoho’s apps. Our team recently expanded, and we’re trying to streamline how tasks, discussions, and documents are shared so everything staysPre-fill webforms in Recruit
I don't want to use the career site portal (as I have my own already), but I would like to direct users to the application forms for each role, from my website job pages. Is there a way to pre-fill fields in Recruit application forms, so that I only havePrevent user from viewing all records?
I have a report that is meant to be used by vendors to view only the records that are assigned to them. All the vendor information is stored in a separate application, so I need to call a function to get the current user's ID (not the zoho user ID). The report settings criteria doesn't support using function calls, so instead I'm embedding the report in an html page like this: if (thisapp.Global.CurrentUserIs("Vendor")) { personID = common.getLoggedInPersonID(); query = "Assigned_Vendor.ID="How do I copy an email message to one or more other folders?
I can move a message to another folder using the "move to" option but I can't figure out how to copy a message.Zoho Site pages not displaying in iframes
I simply want to show a Zoho Site page inside an iframe on another non Zoho website. When testing this across many browsers, the iframe content simply does not appear. IE reports that the host does not allow their content to be displayed in iframes. Very disappointing. Is there a way around this please? Here is the URL of the page I would like to appear in an iframe. http://ips-properties-to-rent.zohosites.comZoho Inventory as connector in Zoho Creator
Hello, It doesn't appear that Zoho Inventory is one of the many built in connectors in Zoho Creator? I see that there are non-Zoho inventory applications that have built in connectors such as Cin7, which leads me to believe that I'm missing somethingSend Zoho Forms Link using Zoho CRM Email Templates
I have set up Zoho Forms and CRM integration to pre-populate data from Zoho CRM to Zoho Forms. The setup is working fine. I have also created an email template in the Zoho CRM deals module to send Zoho forms links. So when I send an email using that templateMy go to On Load Client Script - Fast, efficient, and works for ALL profiles; Hides everything except initial fields
This is my on Load client script that I use for Create pages. I use a modified version for Edit and Display pages which you can create yourself using the same basic structure that I will give you below. First up, the script. Below that will be an explanationCustom Search using HTM+CSS Snippet
Suppose I wanted to create my own list view using HTML and CSS snippets inside a Page with a custom search input at the top of the list (not the Search snippet). Without Javascript, is there a way to retrieve a user's entry from that search input andMass Update of Lookup Fields not possible
Hello List I've created a custom field for Leads and Contacts 'Current Campaign'. This is very Handy as I can filter leads and then related them to a campaign. Everything ready, but then I realized that mass update doesn't work for lookup fields... aZoho CRM Kiosk Upload Files
Hello all, We are trying out Kiosks at the moment to see where it can fit best in our business. We are still a bit off in the application but lets say we will sort this out. My question is the following - when I create a Kiosk I can add "File Upload"Double opt-in notifications and customizable confirmation messages for your webforms
Dear CRM Community, We are excited to announce a major upgrade to our Webforms feature. You can now customize the confirmation message shown to your users who double opt-in from your webform and also customize your confirmation emails when they submitHas Anyone successfully integrated Zoho and Sage Intact?
Hey all, We’re evaluating Zoho One + Sage Intacct and I’m trying to connect with anyone who has actually implemented the two together.Specifically, I’d love to know: -- Which functions you kept in Zoho vs. Intacct (e.g., Product Catalog, AR/AP, invoicing,Introducing Image Upload Field
Hello everyone, In this post we will discuss about the benefits and usage of the Image upload field. The field is available for standard and custom modules. Usage: This field can be used to upload a gallery of images to a record and share the record with peers or customers. The record can be made accessible to users outside of Zoho CRM via Portals, where they can upload the necessary images. Preview, editing, and deleting images: The uploaded images can be directly edited and saved from the recordTrigger a Workflow Function if an Attachment (Related List) has been added
Hello, I have a Case Module with a related list which is Attachment. I want to trigger a workflow if I added an attachment. I've seen some topics about this in zoho community that was posted few months ago and based on the answers, there is no triggerFree webinar alert on November 19 - Email driven strategies - Master personality based styles
Hello Zoho Community! Want to make email management easier, smarter, and more you? We’ve got just the session for you! Join our interactive, game-based webinar to discover how Zoho Mail adapts to your personality and work style. Learn practical hacks,AI generated meeting notes associated to Account or Deal
As our organization works to improve efficiency we are looking for a solution to leverage AI to generate meeting notes and then add those notes to a CRM record such as an Account or Deal. I see Zoho has a Notebook AI offering that talks about the abilitydue date on cheue
how to handle cheque in zoho books for customers and vendors including due dateZoho CRM Portal Field Level Permission Issue
Hi Support Team, I am using the Zoho CRM Portal and configuring field-level editing permissions. However, we are unable to restrict portal users from editing certain fields. We have created a portal and provided View and Edit (Shared Only) access for'Statement of Accounts does not exist' error received, when creating PO using api in Zoho Inventory
Here is request json -- JSONString = { "date": "2019-09-24", "purchaseorder_number": "PO-6-1", "delivery_date": null, "delivery_org_address_id": 36221200000056XXX, "vendor_id": 362212000000564XXX, "attention": "Testing", "line_items": [{ "unit": "Pieces", "account_id": 36221200000003XXX, "quantity": 1, "item_id": 362212000000049XXX, "tax_type": "", "tax_name": "", "name": "One HD", "purchase_rate": 85, "tax_percentage": 0, "item_total": 85.00, "tax_id": "", "warehouse_id": 362212000000564XXX }] }Zoho Projects API 100 requests/2 min. Limit
Hi Requesting clarification on the API documentation. "You can invoke or call an API for 100 times in a span of two minutes. If you invoke more than 100 times, the particular API request will be locked for the next 30 minutes. " Does this limit applyIntegrate your Outlook/ Office 365 inbox with Zoho CRM via Graph API
Hello folks, In addition to the existing IMAP and POP options, you can now integrate your Outlook/Office 365 inbox with Zoho CRM via Graph API. Why did we add this option? Microsoft Graph API offers a single endpoint to access data from across Microsoft’sZoho Projects - Attachments added to Task and Bug emails are not saved
Hi Projects team, I have been experimenting with emails into projects to create tasks and bugs. I have noticed that attachments added to the emails are not saved to the task or bug. Is this normal behaviour? Thanks, AshleyZoho Inventory's latest shipping integration updates at a glance.
Hello Users, We would like to share some important news about our latest improvements in the Shipping integration capabilities of Zoho Inventory that we achieved in 2024 with some of our major integration partners in key editions across APAC, North America,Sorting a list of record acquired from the zoho.crm.searchRecords function.
This is something for which I'm trying to figure out a straightforward way to do. The searchRecords does a great job fetching me the records that I want. However, in some cases, where it returns multiple records, I want it to sort the returned list by date of creation of that record, so that when I do records.get(0), I get the most recent record. As an example, here's my sample pseudo code: records = zoho.crm.searchRecords("Clients", "Office_Number:equals:123456"); Now the "records" list above containsNext Page