Kaizen #115 :Customize Buttons using Client Script

Kaizen #115 :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,
  1. Need for customizing buttons 
  2. ZDKs related to Buttons
  3. Use Case to customize button using Client Script
  4. Solution
  5. Summary
  6. 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


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!

    • Sticky Posts

    • 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.

    • Kaizen #226: Using ZRC in Client Script

      Hello everyone! Welcome to another week of Kaizen. In today's post, lets see what is ZRC (Zoho Request Client) and how we can use ZRC methods in Client Script to get inputs from a Salesperson and update the Lead status with a single button click. In this

    • Kaizen #222 - Client Script Support for Notes Related List

      Hello everyone! Welcome to another week of Kaizen. The final Kaizen post of the year 2025 is here! With the new Client Script support for the Notes Related List, you can validate, enrich, and manage notes across modules. In this post, we’ll explore how

    • 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 are