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!

    • Recent Topics

    • Support Migration into Aliases in Zoho Mail

      Hello Zoho Mail Team, How are you? We are in the process of migrating some of our users from Google Workspace (Gmail and Google Drive) to Zoho. During this process, we noticed that Zoho Mail currently only supports migration into a primary mailbox and

    • API for Z Workdrive Flow Make-Integromat ?

      We are zoho workdrive fans Also we would like to have an api to work with Zoho Flow or with Make better known by its old name INTEGROMAT Is it planned and when? 3 months -6 months or more?

    • Apps Pane no longer visible

      I have read all the info and help and nothing works, I do not have a "show apps" anywhere and I can no longer see my Apps pane in the left hand side of mail, please advise how to get this back

    • Canvas View - Print

      What is the best way to accomplish a print to PDF of the canvas view?

    • 5名限定 課題解決型ワークショップイベント Zoho ワークアウト開催のお知らせ(8/21)

      ユーザーの皆さま、こんにちは。Zoho ユーザーコミュニティチームの藤澤です。 8月開催のZoho ワークアウトについてお知らせします。 今回はZoomにてオンライン開催します。 ▷▷参加登録はこちら：https://us02web.zoom.us/meeting/register/eVOEnBsSQ2uvX4WN5Z5DeQ ━━━━━━━━━━━━━━━━━━━━━━━━ Zoho ワークアウトとは？ Zoho ユーザー同士で交流しながら、サービスに関する疑問や不明点の解消を目的とした「Zoho

    • New in Zoho Forms: Inline OTP Verification

      Hello form builders, We are excited to announce the launch of Inline OTP Verification in Zoho Forms, a smarter way to ensure the authenticity of the contact details you collect. Until now, OTP Verification in Zoho Forms worked as a pre-access step: respondents

    • Zoho Mail : Associate emails with Meeting records and allow multiple emails to be assocaited at once

      Is there a workaround that would allow either of these? I want to associate emails with Meeting records. I also would like to be able to select multiple emails at once for association with a record.

    • Create task from email

      Is there a way on mobile to create a task from an email? I use this feature a lot and when traveling now I read email on mobile. By the time I get to my office I forget about them since I didn't add it to a task. Is this feature missing on moble?

    • Zoho Socials - Unable to view Channels and SmartQ

      Hi, The channel Facebook has been added by the admin, however, it is not visible on the User level (employee). Other channels are visible. Also, we have the premium account, and SmartQ is not working. Can anyone help? Regards, Priyanka

    • Eliminating Manual Consolidation: Automating Currency Field Sync from Task to Project

      Hello Everyone, A Custom function is a user-written set of code to achieve a specific requirement. Set the required conditions needed as when to trigger using the Workflow rules (be it Tasks / Project) and associate the custom function to it. Requirement:

    • We want to set the "Converted from Lead" value in Deals using a Workflow or via a Deluge script. How?

      For use in Zoho Analytics, we need the field "Converted from Lead" filled in our deal records. This field is empty everywhere, because we do not create deals directly when converting a lead to a contact. We want to do that using the API or a workflow

    • Sales Orders: Quoted_Items + items in another subform -> into Ordered_Items ?

      hello, When creating Sales Orders, is it posible to inherit/fill the Ordered_Items with all the items from Quoted_Items + all the items from a customized subform with similar fields? Since you can create a sales order in different ways (convert, new -

    • How to cancel the GSTR1 pushed to GSTN

      How to cancel the GSTR1 Pushed to GSTN, some rectifications to be done in HSN & SAC code

    • Zoho Books API — Invalid Operation Type / Scope does not exist

      Hello Team, We are unable to use the Zoho Books API from our registered application. We’ve already: Created a client in Zoho API Console using (Admin in Books) Generated the OAuth code and token successfully Used the correct scopes: ZohoBooks.fullaccess,ZohoOauth.userinfo.READ

    • Enhancements in Canvas

      Dear All, Greetings! Canvas lets you design the record details page to suit your brand or business preferences. We are glad to introduce the following enhancements to uplift your design experience. Reusable Components Style Presets Let's go! Reusable

    • Minimum order quantity

      Is there a way to enforce a minimum order quantity - ie has to have a minimum of 250?

    • 【Zoho CRM】ポータル機能のアップデート：UIとポータルの作成フローの変更

      ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 今回は「Zoho CRM アップデート情報」の中から、ポータル機能のアップデートをご紹介します。 目次 概要 ユーザーグループの作成フローの変更 ユーザーグループ詳細画面内のタブについて 「タブと権限」タブについて 「設定」タブについて 概要 UIとポータルの作成フローが変更されました。ポータルの新機能に先立ち、UIを一部変更しました。タブやオプションの配置を見直し、機能へよりアクセスしやすくなっています。 また、「ポータルユーザーの種類」は今後、「ユーザーグループ」と呼称され、ページ上のボタンも「ユーザーグループを作成する」に変更されます。

    • Tax on Imported goods charged by Shipping Company

      Hi Folks, I imported goods from outside Canada, for better understanding I will give an example data. imported goods value: 2000$ The shipping company sent me an invoice containing the following information: Custom duty on imported goods: 400$ Administration

    • Prefilled Date fields auto-changed and then locked when using “Edit as new”

      If a document out for signature has date fields (not SignedDate fields) that were pre-filled before sending, and then you use “Edit as new” to create a new version of the same document, the value of those date fields gets automatically changed to today

    • Zoho Webinar via Social Media

      Hello, is it possible to stream a Zoho Webinar via Social Media like Linkedin or Facebook?

    • Add Hebrew & RTL Support to Feedback Widget

      Hello Zoho Desk Team, How are you? We are using Zoho Desk and would like to utilize the Feedback Widget. While Zoho Desk itself supports Hebrew and RTL, the Feedback Widget unfortunately does not. We kindly request that Hebrew and full RTL support be

    • OAUTH2 isn't working with Power Automate and N8N (Zoho Desk)

      Hello, I am trying to set up an OAuth2 connection to the Zoho Desk API, but the authentication flow fails immediately. I am experiencing this issue in two separate platforms: Microsoft Power Automate (using a Custom Connector) and n8n. Instead of being

    • Kit Items Breaking Automations - "Provide mapped components for all kit items"

      This has been brought up in other threads, but I believe this issue warrants its own topic. Whenever a sales document (Estimate, Sales Order, Invoice) is created or manipulated programmatically, trying to include a Kit as an Item throws this error: "Provide

    • Show item Cost value on Item screen

      The Item screen shows Accounting Stock and Physical Stock. It would be very helpful if value information could be displayed here as well, for instance Cost Price. Currently, to find the Cost Price (as used for inventory valuations) from inside the item

    • Mark shipment as delivered via api

      Hellloooo again Zoho guys !! More help required if you would be so kind, pleeeezz..... var options =        {         'method' : 'post',         'contentType' : 'application/json',         'muteHttpExceptions' : true       }; var myPackNo  = encodeURIComponent('###################');

    • Setting Alternative units for an item.

      Hello Team, How to create alternate units for an item. We are placing orders for stocks in boxes. One box contain 24 items. At the time of selling we have two categories of buyers wholesalers and retailers. So the sales will be in PCS and in boxes also.

    • Zoho Inventory search when adding items to SO/PO, etc.

      I do not see that Zoho Inventory searches within the item name for an item lookup. We have many products with variants. So when I search for a product, say a lighting system, and it comes in different sizes and colors, I can only get those products where

    • Item Group Attributes

      Hello, I would like to see more attributes under grouped items. We sell car parts, there are several suppliers for the same part but under different brands. We want to group them together but the attributes under groups are lacking. For example, the products

    • Remove HTML Format - Deluge

      Hello @all if you want to delete the HTML format from the text please follow the script. Data = "Text"; info Data..replaceAll("<(.|\n)*?>" , "").replaceAll("&nbsp;" , " "); Apart from this if you require anything please let me know Thanks & Regards Piyush

    • Using multiple languages in template

      I wanted to add the company name in the template in arabic. I found a way through the header and footer option, except when i print the quotation the arabic disappears both in the top and bottom of the page. I have attached pictures of the before and

    • ADDING 5% VAT TO PURCHASE ORDERS GENERATED ON ZOHO BOOKS UAE

      Please guide on how to add 5% VAT to Purchase Orders generated on ZOHO Books UAE edition.

    • Import from /csv file, some items fail with the error "Specify Tax Or Tax Exemption".

      Hello! I am trying to import a csv file of all of my expenses for a complete financial year. I get errors for some items with the error message "Specifiy Tax or Tax Exemption". These errors only occur on lines where I have "Postage" as the expense account.

    • About maximum number of requests per minute

      Hi, Our company has integrated Zoho inventory and we're using the shipping order creation and update functions and so on. Currently we're receiving "For security reasons you have been blocked for some time as you have exceeded the maximum number of requests

    • Approval - Report/Views

      Hi, On Zoho Desk - Is there a way to report on pending approvals, or a view or similar?

    • "Zoho CRM Integration" option is missing in Zoho Social Settings

      I am trying to integrate my Zoho Social account with my Zoho CRM account. I am on the Professional Trial plan and my user role is "Brand Admin". However, I cannot find the "Zoho CRM Integration" or "Lead Generation" option anywhere in my Zoho Social settings.

    • Error 553

      Não estou conseguindo enviar ou receber e-mail, sempre dando o erro 553, sendo que há mais de um mês o domínio está pago e liberado. Preciso de um suporte urgente

    • Automate insurance document workflows with Zoho Writer

      Insurance companies have to deal with creating and managing complex documents and forms, such as policy applications, explanation of benefits documents, brochures, renewals, and claim forms. Handling all of this manually is hugely time and effort intensive,

    • Create PDFs with Text so that we can copy from a generated PDF

      Currently, any information that a user enters into a field cannot be highlighted and copied from the PDF that Zoho Sign renders. For example, if someone were to provide a phone number in a Zoho Sign text field, you would not be able to copy the phone

    • How To Insert Data into Zoho Table using Api

      Hi Community, I have created a table inside zoho tables. How do I insert data into table using API. Please tell the exact endpoint and payload , I just have to insert data into table columns. Also tell how to find tableid, viewid, baseid etc. which are

    • How do I delete a folder in Marketing Automation?

      Folders are used across contact lists and segments, and email templates. How do I delete a folder once it's been created?

    • Next Page