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!

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

Sticky Posts
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
Extension pointers: Handle cases with personalized solutions using custom actions
In our last post, we detailed the steps involved in creating a custom action and the workflow from the developer and end user's side. Now let's look at a working example of how we can create a custom action and implement it in a Zoho CRM account to make
Extension pointers - Simple yet significant pointers #13: On change of field value for CRM variables
CRM variables provide global access to a variable across an entire extension. They also help in the storage of user-specific data provided by the user at the time of installation, which can later be fetched to perform data functionalities. Additionally,
Extension pointers: Extend end-user benefits and allow personalization by implementing extensions with custom actions
From our earlier post on custom actions, we know that we can create templated actions, share them with end users, and allow them to reuse those actions to achieve personalized outcomes. In this post, we'll look at how custom actions make it easy for users
Extension pointers - Simple yet significant pointers #12: Functions for Zoho CRM extensions
Functions are essential in achieving logical functionality for an extension. You can easily code your functions in Deluge using drag-and-drop tools to meet your requirements. How to create functions for Zoho CRM extensions in Sigma Go to Sigma and select