Kaizen #71 - Client Script ZDKs for Detail (Canvas) Page

Kaizen #71 - Client Script ZDKs for Detail (Canvas) Page

Hello everyone! 
Welcome back to another interesting Kaizen post. In this post, we can discuss Client Script ZDKs support for Detail (Canvas) Page.

What is Detail (Canvas) Page?
A Detail(Canvas) Page allows you to customize the record detail page to your preference by letting you add background color to each field, arrange them in a different order, use custom buttons instead of field names, use different font styles, and a lot more. This view is available in all the modules, including the custom modules.
Canvas is a powerful design platform that aims to transform your Zoho CRM user experience, from a visual as well as functional perspective. To customize a record detail page using Canvas, you can select any pre-designed template from the gallery and customize them according to your requirements, or create your design template from scratch with the help of design tools. 
The following are the ZDK Functions related to the Detail(Canvas) Page in Client Script.

  • getBlueprintTransitionByID() - To get blueprint transition by id
  • getBlueprintTransitions()  - To get blueprint transitions in page
  • addTag() - To add a tag to the page
  • removeTag() - To remove a tag from the page
  • getTags()  - To get the list of tags in the Page as array of objects
  • openMailer() - To open Mailer component
  • scrollTo(element_id) - To scroll the page to the given element's location
  • highlight(config) - Using this ZDK you can highlight an element
  • getElementByID(element_id) - To get the UIElement object.
  • mask() - To mask the field value
  • initiate() - To initiate a transition in Blueprint
  • click() - To initiate link click event
  • disable() - To disable the link
  • enable() - To enable a link
  • setVisibility() - To show or hide an element
  • addToolTip(config) - Use this ZDK to add tooltip for an element
  • removeToolTip() - Use this ZDK to remove tooltip for an element
  • addStyle(config) - To apply CSS styles for an element
  • freeze(value) - To freeze a particular element
  • setImage(value) - To set image for the image element
  • setActive() - To set active tab in a container
  • setContent(value) - To set text content for the text element

Note: Apart from these ZDKs, you can use all the other ZDK functions which are not tagged.

Use Case
ABC is a hardware manufacturing company. Let us consider that you want to achieve the following using Client Script. The Detail (Canvas) Page has the fields Category, Products, Phone Number and there are two images added to the Detail (Canvas) page currently. One corresponds to Ignition System and the other corresponds to Gauges and Meters. The following is the Detail (Canvas) Page of Orders Module.



1. Based on the Category of the order, display the image.
  • If the Category is Ignition System then the image corresponding to Ignition System should be displayed.
  • If the Category is "Gauges and Meters" then the image corresponding to "Gauges and Meters" should be displayed.
2. The image should have a tooltip.
  • The Ignition System image should have the tooltip as "Ignition System".
  • Gauges and Meters image should have the tooltip as "Gauges and Meters".
3. The Detail (Canvas) page has a text element. The background colour of the text box should be blue and the text should be grey.
4. Create a custom button in the Detail (Canvas) Page. When the user clicks this, ask for confirmation, and open the mailer box.
5. Mask the last 5 digits of the phone number for all profiles other than the administrator.

Solution using Client Script
All the requirements are for the Detail (Canvas) page of Orders module. For the requirements 1, 2, 3  and 5, you need to create a Client Script with onLoad page Event.
For requirement 4, you need to create a Client Script with Canvas Button Event type and onClick Event. So create two scripts as follows.

1. Client script 1 for requirements 1,2,3 and 5.
2. Client script 2 for requirement 4.
1. Client script 1 for requirements 1,2,3 and 5.
  • Go to Setup > Developer Space > Client Script. Click +New Script.
  • Specify the details to create a script and click Next.

  • Enter the following script and click Save.


 // Tooltip for images
var ignitionImage = ZDK.UI.getElementByID('iImage')
ignitionImage.addToolTip({ text: 'Ignition System' });

var guageImage = ZDK.UI.getElementByID('gImage')
guageImage.addToolTip({ text: 'Guages and Meters' });
log(category_name);
// Visibility of Images
if (category_name == "Gauges and meters")
{
    ignitionImage.setVisibility(false);
}
else if (category_name == "Ignition system") {
    guageImage.setVisibility(false);
}
// Style textbox
var elem = ZDK.UI.getElementByID('Section')
elem.addStyle({ 'background-color': 'blue', color: 'white', 'border-radius': '40px' })
//Mask phone Number
var user = ZDK.Apps.CRM.Users.fetchById($Crm.user.id);
log(user);
var field_obj = ZDK.Page.getField('Phone_Number');
log(field_obj.getValue());
log("Profile name of the user is "+ user.profile.name);
if(user.profile.name != 'Administrator')
{
    field_obj.mask({ character: '*', length: 5, reverse: true });
}
var category_name = ZDK.Page.getField('Category').getValue();


  • $Crm is a constant supported by Client Script, using which you can get the org related information and use it in your script. 
  • Here is the impact of Client Script in Detail (Canvas) page for a Standard user.

  • Here is the impact of Client Script in Detail (Canvas) page for Administrator.


  • You can see that the Phone Number is partially masked when you view the order canvas page as a Standard User and not masked when you view the order canvas page as an Administrator.
2. Client Script 2 for requirement 4
  • First, you need to add the button to the Detail(Canvas) page.
  • Go to Setup > Customization > Canvas.
  • Right click  the Canvas page for Accounts module and click Edit.
  • Click Elements, drag and drop the button wherever required and specify a label for the button.
  • Right click on the button, select Add Element ID and enter the ID of the button in the pop up that appears.
  • Once the button is created, you can configure Client Script in two ways:
  • Right click on the button--> Add Client Script--> onClick. The Client Script IDE appears with the event type as Canvas Button Event.                                                (or)
  • Go to Setup > Developer Space > Client Script. Click +New Script.
  • Specify the details to create a script and click Next.
  • Enter the following script and click Save.
var isProceed = ZDK.Client.showConfirmation('Do you want to open the mailer window?','Proceed','Cancel');
if (isProceed) {
ZDK.Client.openMailer({ from: '', to: [{ email: '', label: 'ABC Industries' }], cc: [{ email: '', label: 'ABC Industries' }], subject: 'Greetings from ABC Industries!', body: ' ' });
}

  • The showConfirmation() function will return a Boolean value based on the user selection. You should get this Boolean value using a variable and write the actions based on the Boolean value returned. Here the variable isProceed will capture the user response and based on that Boolean value, the mailer box will get displayed.

  • Here is how the Client Script works.


We hope you found this post useful. We will meet you next week with another interesting topic!  If you have any questions or if you want a Kaizen post on a particular topic let us know in the comments.

Click here for more details on Client Script in Zoho CRM.

Related Links

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

    • Recent Topics

    • Zoho IP address blocked by Microsoft

      Today I tried to send emails to Outlook email addresses and all of them failed. The log displays like this: Reporting-MTA: dns; mx.zohomail.jp Arrival-Date: Fri, 27 Jun 2025 12:52:30 +0800 Original-Recipient: rfc822; ######@outlook.com Final-Recipient:

    • Remove "Subject" as a required field on Quotes

      Currently, when you create a quote in CRM, the field "Subject" is mandatory. The properties of a system defined field cannot be edited which means we cannot de-select the mandatory requirement. A 'subject' on a quote is a little vague and not something

    • Integrate QuickBooks with Bigin and streamline your sales and accounting!

      If your business relies on Bigin for customer management and QuickBooks for accounting and invoicing, this new integration is here to make your operations more efficient. By connecting these two platforms, you can now manage your CRM and financial processes

    • Upgraded sentiment analysis model for more accurate detection

      Hello everyone! Sentiment Analysis in Zia is being upgraded to a newer model to improve how customer sentiment is detected and interpreted. This transition is aimed at getting better contextual understanding across all supported channels. As part of this

    • Adding contact to account automatically in helpdesk?

      Hello, We're using Zoho desk to managed our helpdesk tickets.  Is there a way to add contacts (email senders) automatically to an account based on their emails domain name?  For example:  when UserA@companyx.com send an email to our support mailbox, a trigger or a workflow would automatically add the userA to Companyx account if it does exists  Please advise Thank you 

    • Automated entries past the current month in a calendar report

      Hi all, I have an automation problem. I have a form which on successfull entry adds either 5 or 10 more of these entries with a slight change so our customers can see it throug a calendar report on the webiste. The entry put in manually shows up perfectly

    • DYK 4 - Reactions

      Did You Know that you can react to comments in Zoho Projects? In a collaborative workspace, comments come in throughout the day. Some need a detailed reply, others just need to be acknowledged, and the more the replies, the harder it is to follow the

    • Atlassian Jira integration live in Zoho Apptics

      Tracking crashes and fixing them often happen with different tools. You might use Zoho Apptics to track crashes and understand what went wrong and Jira to resolve those issues. If you use both, you're probably familiar with the manual effort involved

    • GLM 5 not available

      Hello, I am trying to setup a Zia Agent using agents.zoho.com. The settings says that GLM5 is among the list of free zoho hosted models available. However, when I try to setup an agent and pick a model from the list only GLM 4.7 Flash is available. How

    • Native QuickBooks integration for Zoho CRM: Connecting sales and finance

      Greetings, I hope all of you are doing well. We're excited to announce Zoho CRM's integration with QuickBooks Web, which is designed to synchronize your CRM data with your QuickBooks accounting records and bridge the gap between sales and finance. This

    • Knowledge base articles is now available in the Zoho Desk mobile app!

      Hello all,   As a customer service agent, every day you might have to deal with many questions and issues reported by the users. With Knowledge Base, you can reduce the issue resolution life cycle for your organization.   We are delighted to announce that we have brought in support for 'Knowledge Base articles' in the Zoho Desk iOS mobile app.  This feature is already available for Android users.   KB articles are available to iOS users in the latest version of the app (v2.4.9). You can update the

    • Urgent Issue – Draft Reply Fails to Save When Message Contains Code Snippets

      Hello Zoho Desk Support Team, We are experiencing a critical issue in the ticket reply editor that is directly impacting our support operation. Whenever we write a reply containing code snippets, URLs, or technical content (for example, terms like “curl

    • Introducing parent-child ticketing in Zoho Desk [Early access]

      Hello Zoho Desk users! We have introduced the parent-child ticketing system to help customer service teams ensure efficient resolution of issues involving multiple, related tickets. You can now combine repetitive and interconnected tickets into parent-child

    • Zoho CRM Meetings Module Issues

      We have a use-case that is very common in today's world, but won't work in Zoho CRM. We have an SDR (Sales Development Rep) who makes many calls per day to Leads and Contacts, and schedules meetings for our primary Sales Reps. He does this by logging

    • Huge confusion in zoho crm and zoho analytics

      Context => We have reporting based hierarchy in zoho crm and basically there will be one sales head and couple sales managers and 10 pre sales excutives divided between 2 sales managers we have maintained that in zoho crm and there is complex reporting

    • information on a suggestion how to treat old records in the - pipeline deals, notes, activities (tasks- events-calls) and emails etc.

      Hi, I would like information or a suggestion on how to treat old records in the - pipeline deals, notes, activities (tasks- events-calls) and emails etc. ? As each option (pipeline deal, notes, activities, emails etc.) counts as a record and as we advance

    • Inventory batch details

      Hi there, I'm trying to get the batch details of an item, here's what I've done so far. I've sent cUrl request to the below endpoint and I get a successful response. Within in the response I find the "warehouses" property which correctly lists all the

    • What's New in Zoho POS - April 2026

      Hello everyone, Welcome to Zoho POS’s monthly update, where we share our latest feature updates, enhancements, events, and more. Let’s take a look at how April went. Access and manage other web applications in Zoho POS with Web Tabs You can now access

    • Zoho Trident Windows - Streams Not Visible

      Namaste We’re having an issue with Streams not being visible in Trident (Windows), which is important for us as we share many emails internally. It appears that the feature to show Streams above the Inbox folder, as seen in the default mailbox view, is

    • Search through email contents

      Is there a way to search through the email history of a lead? Meaning if among the 50 emails to a lead about different topics I want to find all the ones with the word "pizza" in the body of the email, is that possible? Thanks for your help, Hanan

    • Adding Multiple Products (Package) to a Quote

      I've searched the forums and found several people asking this question, but never found an answer. Is ti possible to add multiple products to a quote at once, like a package deal? This seems like a very basic function of a CRM that does quotes but I can't

    • Early Access: Check Printing in Zoho Books

      Hello Everyone,   Are you constantly writing checks to pay your vendors?   We've got a great news to share with you! You can now pay your vendors by writing and printing a check directly from Zoho Books. The feature is ready and we'll be rolling it out to our customers in phases.  It is available in the  US Edition of Zoho Books and also in the Global edition, where the country is selected as USA and the currency is USD.   Here’s a summary of what’s possible:   1. Write and print a check. 2. Make

    • Trash - Delete All

      We use 6 inbox shared (via IMAP). The Trash bin contains a lot of messages. Is it possible to delete them all permanently? Is there a rule to empty trash bin after xx days? Deleted permanently message in TeamInBox are deleted permanently in the related

    • Internal mails on our company domain (managed by Zoho) do not get delivered

      Hi last week Thursday and Friday a colleague had sent me two emails which did not show up at all in my inbox, spam or anywhere else. What this a problem with Zoho mail in general or did this affect just us? From the forum is reads like many problems had

    • Paste Options don't work

      I've always wondered about this, as I've experienced this issue for quite some time now. Why don't the right-click Paste options work properly in Zoho Writer? I can use Ctrl + V without any issue, but if I right-click and use one of the Paste menu options,

    • What's New - April 2026 | Zoho Backstage

      Hello everyone, April has been focused on improving speed, reliability, and overall platform performance. Here are a few updates from this month. Safaricom M-PESA for event payments in Kenya Organizers hosting events in Kenya can accept payments through

    • Enrich your contact and company details automatically using the Data Enrichment topping

      Greetings, I hope you're all doing well. We're happy to announce the latest topping we've added to Bigin: The Data Enrichment topping, powered by WebAmigo. This topping helps you automatically enhance your contact and company records in Bigin. By leveraging

    • Consolidate your workflows and be more productive - Introducing Multiple Conditions in Workflow Rules

      Workflow rules in Zoho CRM helps you automate your routine tasks and save time. Usually, while creating a workflow rule, you'd provide the basic details of the rule, specify when the rule should be triggered and associate set of actions to be executed whenever the rule criteria is met. And you’d create a new workflow rule for every new automation that you required.  Not anymore! You can now combine multiple conditions and the corresponding actions to follow in a single workflow rule. Let’s look at

    • How has Zoho still not resolved Daylight Savings Time?

      According to these forums Zoho has been working on DST for 12 years. Totally unacceptable. Am I missing something? Why are other customers who observe DST not screaming for this to be fixed? Are there reasonable workarounds? This is a must-have for

    • Overview on users IMAP settings

      We have about 30 users who all have the channels/email/email configuration/IMAP integration/O365 enabled and emails are synchronized. Here my problem: Passwords for the email accounts are expiring on individual bases and most of the users forget to update

    • Digest Avril - Un résumé de ce qui s'est passé le mois dernier sur Community

      Chers utilisateurs, Un nouveau mois riche en nouveautés vient de filer à toute vitesse chez Zoho Community France ! Jetons un œil à ce qu’il s’est passé. Des webinaires à votre image avec Zoho Webinar Vos pages d’inscription sont souvent le premier point

    • Introducing SlyteUI : From Idea to a Working Interface in Minutes

      SlyteUI is now live across all DCs as of 4th May 2026! Hello everyone! Are you spending hours building basic UIs? Does even the smallest customization feel like a major task? CRM customization should feel intuitive and straightforward, not time consuming

    • Updates to native forms in Zoho LandingPage

      Hello all, We have a couple of updates to native forms in Zoho LandingPage that we think you will find useful. Country code on phone number fields You can now enable a country code dropdown on the phone number field. Visitors select their country code

    • Import KB template OR Export template for zoho desk?

      Greetings. Can you tell me if there is a way to get an EXPORT of my KB articles? OR is there a template you supply for importing KB articles into my zoho desk? I am looking for a method of understanding what fields can be imported, and what their possible

    • Set Custom Icon for Custom Modules in new Zoho CRM UI

    • [Bug] WebAuthn passkey registration blocked on rpIds with TLDs longer than 6 characters (.accountant, .technology, etc.) — isValidDomain regex too strict

      Hi, Filing on behalf of an enterprise customer where Zoho Vault is deployed across the company. The Chrome extension blocks WebAuthn passkey registration on legitimate sites whose Relying Party ID (rpId) has a TLD longer than 6 letters. This affects every

    • Customer Support Portal

      Hi, As I am dealing with and waiting for help with a serious Zoho Mail issue, I tried to submit requests and manage my requests by logging into the Customer Support Portal, but it keeps saying that I do not have a valid email address and cannot login.

    • Rich Text Type Format for Notes Field

      Has it been discussed or is there a way to insert a table in the notes field? We sometimes receive information in a table format, and it would be beneficial to have it in the same format as a note on a record.

    • Can not send or reply to mails

      Hello, I can not send mails or reply. If I try to send a mail i get "Unable to send message;Reason:553 Replaying disallowed. Invalid Domain - invata-programare.ro" Can you help me, please? Thank you!

    • Urgent: Subscription Correction Needed - Org ID 805493328

      Dear Zoho Billing Team, I am writing to request an urgent correction regarding a recent renewal for my account, Master Bed Trading (Organization ID: 805493328). Due to a mistake during the checkout process, I accidentally renewed our Zoho Forms subscription.

    • Next Page