Customize Buttons using Client Script

Hello everyone!

Welcome back to another interesting Kaizen post. In this post, we can discuss how to customize buttons using Client Script.

In this kaizen post,

Need for customizing buttons
ZDKs related to Buttons
Use Case to customize button using Client Script
Solution
Summary
Related Links

1. Need for customizing buttons

Enforcing Workflow Steps - By disabling certain buttons based on conditions, you can guide users through a predefined workflow. For example, if you want to notify the customer, when the order is in a particular stage, you can disable the button for other stages.

Customize buttons based on your business - You can modify button labels using Client Script to match your company's specific terms.If a button is part of a step-by-step process, change the label to match each step, making it more intuitive for users.

2. ZDKs related to Buttons

Client Script empowers you to customize buttons and here is the list of ZDKs and Client Script functions to customize standard and custom buttons.

getButtonByID(id) - You can get the Pages' Button by ID.
getButton(api_name) - You can get the Pages' Button by api name.
getButtons() - You can get the list of buttons in the Page as an array.
getId() - Using this, you can get the id of button.
getType() - Using this, you can get the type of button.
getLabel() - Using this, you can get the name of the button.
getApiName() - Using this, you can get the API name of the button.

3. Use Case for customizing buttons:

Zylker is a manufacturing company. The Sales representatives initiate the process by creating new deals in the CRM for potential customers or business opportunities. So they are given the "create" permission. But in real time, there are high chances for an approved record to get cloned, which cannot be permitted. So, Zylker wants to disable the "Clone" button for users having a "Sales" profile.

As per their workflow, once the deal's stage is "Closed Won" a mail should be sent to the Manager and the customer. For this they have a custom button named "mail". But this mail button should not be sent when the deal is in other stages. To ensure this, Zylker wants to disable this button for all other stages of the deal.

Also, for better clarity, Zylker wants to rename the "save" button as "Create Deal" in the Create Page (Standard).

4. Solution:

As per the requirement, you need to create three Client Scripts.

A. Disable "Clone" button Detail Page (Standard) when the page loads

B. Disable "Mail" button Detail Page (Standard) when the stage changes

C. Rename button in Create Page (Standard)

A. Disable Clone and mail buttons in Detail Page (Standard)

Create a Client Script for Detail Page (Standard) with onLoad Page event.
For details about how to create a Client Script, click here.
Enter the following script and save.

// Disable the standard "clone" button

var user = ZDK.Apps.CRM.Users.fetchById($Crm.user.id);

if (user.profile.name !== 'Sales') {

var clone_btn = ZDK.Page.getButton('clone');

clone_btn.disable();

}

In the above script, "clone" is the api name of the standard button.
Here is the screenshot that shows the disabled "Clone" button for a user only with Sales Profile.

Here is the screenshot that shows the "Clone" button for a user with a non-sales profile user. That is, "Clone" button is not disabled for users having profiles other than "Sales" profile.

B. Disable "Mail" button Detail Page (Standard) when the stage changes

Create a Client Script for Detail Page (Standard) with onChange field event for the field Stage.
For details about how to create a Client Script, click here.
Enter the following script and save.

// Disable the custom "mail" button

var stage_field = ZDK.Page.getField("Stage");

if (stage_field.getValue != 'Closed Won') {

ZDK.Page.getButtons().find(a => a.getLabel() === 'mail').disable();

}

Here is the screenshot that shows the disabled "mail" button for a deal with the "Closed Won" stage.

Here is the screenshot that shows that "mail" button is not disabled for the deal in the "Value Proposition" stage.

C. Change the label for "save" button in Create Page (Standard)

Create a Client Script for Create Page (Standard) with onLoad Page event.
For details about how to create a Client Script, click here.
Enter the following script and save.

var save_btn = ZDK.Page.getButton('record_save');

save_btn.setLabel('Create Deal');

Here is the screenshot showing the "Create Deal" label instead of the "save" label.

Note:

Using Client Script, currently custom buttons can be disabled only in the Detail Page (Standard) and in the List Page (Standard).

5. Summary

In this post, we have discussed,

How to fetch the label of buttons in Client Script
How to disable standard and custom buttons based on conditions
How to change the label of a button
ZDKs and methods available to customize buttons

6. Related Links

Client Script Overview

Creating a Client Script

Client Script Events

Client Script IDE

Use cases of Client Script

Kaizen Collection :

Click here to view our Kaizen Collection. Also, check our previous post - Kaizen#114 - Geocoding Leads' Addresses in ZOHO CRM

We hope you found this post useful. We will meet you next week with another interesting topic!

If you have any questions let us know in the comment section.

Cheers!

Access your files securely from anywhere

Zoho Developer Community

New to Zoho LandingPage?

Access Zoho LandingPage

Zoho LandingPage Resources

New to Zoho Survey?

Access Zoho Survey

Latest Feature Updates

Explore our Pricing & Plans

Zoho Survey Resources

Android Mobile Surveys

Insurvey Blogs

Insight Blogs

Tips & Tricks

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

New to Bigin?

Signup Now

Access Bigin

Latest Feature Updates

Zoho Desk Resources

Desk Community Learning Series
Digest
Functions
Meetups
Kbase
Resources
Glossary
Desk Marketplace
MVP Corner
Word of the Day

Tout forum

France ZUGs

Zoho SalesIQ Resources

Topic Participants
Maadhari M
Subhash Kumar
Vigneshwaran K
Sam
PJ

Sticky Posts
Kaizen#162 : Add Tags and Open Pre-filled Email Drafts via Client Scripts
Hello everyone! Welcome to another informative Kaizen post. In this post, let us see how to accomplish the following using Client Script. 1. How to auto-tag a record based on field update? 2. How to Open a pre-filled email draft This post will provide
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
Extension Pointers - JS SDK series #4: Managing data from a widget using ZOHO.CRM.HTTP
Handling and managing the data between two applications is a major factor for an efficient business. There are a variety of ways to handle data between Zoho CRM and other third-party applications. You can use deluge CRM tasks, create connectors, use API
Kaizen #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 achieved
Extension pointers for integrating Zoho CRM with Zoho products #8: Upload and manage Zoho Workdrive folders and files from within Zoho CRM
Keeping records on your customers and business prospects is essential for tracking data, conducting follow-ups, and running a business smoothly. When you use two separate applications, and store relevant data in each, checking and tracking data becomes