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
Create Lead Button in Zoho CRM Dashboard
Right now to create Leads in the CRM our team is going into the Lead module, selecting the "Create Lead" button, then building out the lead. Is there anyway to add the "Create Lead" button or some sort of short cut to the Zoho CRM Dashboard to cut outopen word file in zoho writer desktop version
"How can I open a Microsoft Word (.doc or .docx) file in Zoho Writer if I only have the file saved on my computer and Zoho Writer doesn't appear as an option when I try 'Open with'? Is there a way to directly open the .doc file in Zoho Writer?"Generate leads from instagram
hello i have question. If connect instagram using zoho social, it is possible to get lead from instagram? example if someone send me direct message or comment on my post and then they generate to leadI want to transfer the project created in this account to another account
Dear Sir I want to transfer the project created in one account to another accountInactive User Auto Response
We use Zoho One, and we have a couple employees that are no longer with us, but people are still attempting to email them. I'd like an autoresponder to let them no the person is no longer here, and how they can reach us going forward. I saw a similarWeekly Tips : Customize your Compose for a smoother workflow
You are someone who sends a lot of emails, but half the sections in the composer just get in your way — like fields you never use or sections that clutter the space. You find yourself always hunting for the same few formatting tools, and the layout justZoho Slowness - Workarounds
Hi all, We've been having intermittent slowness and Zoho just asks for same stuff each time but never fix it. It usually just goes away on it's own after a couple weeks. Given that speed is a very important thing for companies to be able to keep up withCustom Bulk Select Button
Zoho CRM offers the ability to select multiple records and invoke a Custom Button This functionality is missing from Recruit Currently we can only add buttons in the detail page and list But we cannot select Multiple Records and invoke a function withHow to create a Zoho CRM report with 2 child modules
Hi all, Is it possible to create a Zoho CRM report or chart with 2 child modules? After I add the first child module, the + button only adds another parent module. It won't let me add multiple child modules at once. We don't have Zoho Analytics and wouldZoho CRM still doesn't let you manage timezones (yearly reminder)
This is something I have asked repeatedly. I'll ask once again. Suppose that you work in France. Next month you have a trip to Guatemala. You call a contact there, close a meeting, record that meeting in CRM. On the phone, your contact said: "meet mePower of Automation :: Smart Ticket Management Between Zoho Desk and Projects
Hello Everyone, A custom function is a software code that can be used to automate a process and this allows you to automate a notification, call a webhook, or perform logic immediately after a workflow rule is triggered. This feature helps to automateFirst day of trying FSM in the field.
What we found. 1. with out a network connection we were unable to start a service call? 2. if you go to an appointment and then want to add an asset it does not seem possible. 3. disappointed not to be able to actually take a payment from within the appBUG - Google Business Buttons - Add a button to GBP Post
I am experiencing an issue with the "Add a button" feature when creating posts for my Google Business Profile (GBP) through Zoho Social. When I schedule or publish a GBP post and include a call-to-action button with a specific URL, the post itself publishesRich text Merge field - Not using font specified in HTML
I have a rich text merge field in a writer template which is creating a table. I have chosen to use this method instead of a repeat region because I need to specify specific cell background colours which change every time the document is created. TheSupport for Custom Fonts in Zoho Recruit Career Site and Candidate Portal
Dear Zoho Recruit Team, I hope you're doing well. We would like to request the ability to use custom fonts in the Zoho Recruit Career Site and Candidate Portal. Currently only the default fonts (Roboto, Lato, and Montserrat) are available. While theseCC and/or BCC users in email templates
I would like the ability to automatically assign a CC and BCC "User (company employee)" into email templates. Specifically, I would like to be able to add the "User who owns the client" as a CC automatically on any interview scheduled or candidate submittedTrying to export a report to Excel via a deluge script
I have this code from other posts but it gives me an error of improper statement, due to missing ; at end of line or incomplete expression. Tried lots of variations to no avail. openUrl(https://creatorapp.zoho.com/<username>/<app name>/XLSX/#Report:<reportname>,"sameZoho Reports Duplicating Entries
I have a custom costing tab with a table where we entre invoices. These are under a Heading (PO Subject) and notes added in the form with different line items. In the reports, I have organised the report to group per PO Subject, with the total of theNeed help to create a attach file api
https://www.zoho.com/crm/developer/docs/api/v8/upload-attachment.html Please help me to create it... It's not working for while. Do you have some example?Export view via deluge.
Hi, Is it possible to export a view (as a spreadsheet) via deluge? I would like to be able to export a view as a spreadsheet when a user clicks a button. Thankshow to add subform over sigma in the CRM
my new module don't have any subform available any way to add this from sigma or from the crmOutdated state in mexico
Hello Zoho team, the drop down to add the state for customers, when they introduce their state in mexico has a city named “Distrito Federal” that name changed many years ago to “ciudad de mexico”. could you please update this so my clients can find theSupport new line in CRM Multiline text field display in Zoho Deluge
Hi brainstrust, We have a Zoho CRM field which is a Muti Line (Small) field. It has data in it that has a carriage return after each line: When I pull that data in via Deluge, it displays as: I'm hoping a way I can change it from: Freehand : ENABLED ChenillePossible to generate/download Quote PDF using REST API?
See title. Is there any way after a quote has been created to export to a PDF using a specified template and then download it? Seems like something that should be doable. Is this not supported in the API v2.0?Creating an invoice to be paid in two installments?
Hi there, I own a small Photographic Services business and have not been able to find a way to fit my billing system into Zoho, or any other Accounting software. The way my payments work is: 1. Customer pays 50% of total price of service to secure theirBug in allowing the user to buy out of stock items
Hi i want to allow the user to buy out of stock items, according to the commerce documentation if i disable Restrict "Out of stock" purchases it will, but it doesnt work, so i want to know if it had any relation with zoho inventory, and if theres anyZoho CRM Calendar | Custom Buttons
I'm working with my sales team to make our scheduling process easier for our team. We primary rely on Zoho CRM calendar to organize our events for our sales team. I was wondering if there is a way to add custom button in the Calendar view on events/meetingReplace Lookup fields ID value with their actual name and adding inormation from subforms
Hi everyone, I wanted to see if someone smarter than me has managed to find any solutions to two problems we have. I will explain both below. To start we are syncing data from Zoho CRM to Zoho Analytics and I will use the Sales Order module when givingCan a Zoho Sites page be embedded into another website (outside Zoho)
Hi All, We have a request from a client - they'd like to take one of our information pages created in Zoho Sites and embed it into their own website? I was told through an email with Zoho that this was possible >>Thank you for your patience regardingBug in allowing the user to buy out of stock items
Hi i want to allow the user to buy out of stock items, according to the commerce documentation if i disable Restrict "Out of stock" purchases it will, but it doesnt work, so i want to know if it had any relation with zoho inventory, and if theres anyTransition Criteria Appearing on Blueprint Transitions
On Monday, Sept. 8th, the Transition criteria started appearing on our Blueprints when users hover over a Transition button. See image. We contacted Zoho support because it's confusing our users (there's really no reason for them to see it), but we haven'tZoho CRM Sales Targets for Individual Salespeople
Our organistion has salespeople that are allocated to different regions and have different annual sales targets as a result. I am building an CRM analytics dashboard for the sales team, which will display a target meter for the logged in salesperson.All new Address Field in Zoho CRM: maintain structured and accurate address inputs
The address field will be available exclusively for IN DC users. We'll keep you updated on the DC-specific rollout soon. It's currently available for all new sign-ups and for existing Zoho CRM orgs which are in the Professional edition. Managing addressesTransfer all Related Data to new Account Owner
Currently when I change the account Owner I only see the option to change only the open deals But I want the new account owner to take over all the related modules and all the deal stages Is it not possible right now? Am I missing something? Do I reallyCan i connect 2 instagram accounts to 1 brand?
Can i connect 2 instagram accounts to 1 brand? Or Do i need to create 2 brands for that? also under what subscription package will this apply?How to Calculate MTTR (Mean Time to Resolve)
We want to calculate MTTR (Mean Time to Resolve) in our Zoho Analytics report under Tickets. Currently, we are using the following fields: Ticket ID Ticket Created Time Ticket Closed Time Ticket On Hold Time We are planning to calculate MTTR (in days)How to export project tasks, including the comments
Hi, how can I export the project tasks, whereby I can also see the comments associated to a specific task? The use-case is that often we use comments to discuss or update a task related ideas. I would like to export the tasks, where we can also see theHow to Install Zoho Workdrive Desktop Sync for Ubuntu?
Hi. I am newbie to Linux / Ubuntu. I downloaded a tar.gz file from Workdrive for installing the Workdrive Desktop Sync tool. Can someone give me step by step guide on how to install this on Ubuntu? I am using Ubuntu 19.04. Regards SenthilIntroducing Version-3 APIs - Explore New APIs & Enhancements
Happy to announce the release of Version 3 (V3) APIs with an easy to use interface, new APIs, and more examples to help you understand and access the APIs better. V3 APIs can be accessed through our new link, where you can explore our complete documentation,Round robin
Hi, I'm trying to set up a round robin to automatically distribute tickets between agents in my team but only those tickets that are not otherwise distributed by other workflows or direct assignments. Is that possible and if so which criteria should INext Page