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

    • Automatic login options for customer portal

      The customer portal is nice for zoho subscriptions, but there are no options to automatically login to it, so if a user is logged into their account inside of my product, I can't create a link that will let them login to their dashboard. Could we have

    • Zoho CRM Layout Rules: Nine New Actions, Profile-Based Execution, and Interactive Preview

      Hello everyone, Availability: This feature is now available for customers in the JP and SA DCs. It is planned to be released for other customers in soon. We’re excited to announce powerful new enhancements to Layout Rules in Zoho CRM - a feature built

    • Square Payments for Subscriptions

      I'd love to be able to use Square Payments for Subscriptions with my customers. I already use it for Zoho Books Please have this considered. It would really help my business

    • How to preserve Lead Creation Date, UTM parameters, and custom fields during Lead Conversion?

      We are optimizing our MQL journey. When converting leads to contacts/deals, we need to ensure that the original system Lead Creation Date and UTM tracking parameters (Source, Medium, Campaign) are not lost or archived, as our teams require them for accurate

    • "code":3001 ["Failed to update data."]

      I would like to seek your expertise - I might be wrong on my approach also.. I highly appreciate your advice. 1 problem remains is when a new row was added on the existing one [from another form that trigger upon Successful form submission ], it gets

    • Add a MATRIX field to the forms creation

      Same as Zoho forms, we need a Matrix field in Zoho Creator forms, is very usefull

    • Discount Per Line Item

      We are a phone company. Sometimes, when we sign up customers, our sales team would like to provide recurring discounts on certain addons. Presently, we have no way of doing this so when we provide discounts, we are forced to simply reduce the price of

    • Introducing template migration: Move your Docusign templates to Zoho Sign in minutes

      Moving to a new e-signature tool usually comes with a catch: recreating every template from scratch. For teams that rely on dozens of carefully built templates—each with the right recipient roles, fields, and placements—that manual rework is often the

    • Error Code 2945 , PATTERN_NOT_MATCHED

      Hi, I am trying out Zoho Creator API.  However, I always get the following <response>     <code>2945</code>     <message>PATTERN_NOT_MATCHED</message> </response> However, error code list error as Invalid Ticket. I do not know what is wrong. 

    • Create a list of products and automatically associate them with new deals

      Hello, I have a store with WooCommerce, and I want to import orders into my pipeline. But I haven't found a way to import the order with the associated products. So, do I have to create the deals and then manually add the products to them? That's double

    • List of Mail Merge Templates via Deluge

      Hello, Is it possible to get a list of the mail merge templates I've created in CRM within a custom function? I want to retrieve them and put them in a dropdown list but all I get is a scopes error! Can anyone see where I'm going wrong? Is this even possible?

    • Zoho Advanced Analytics with Team Module support – Now includes teams, notes, and fields in reports & insights

      Greetings all, Advanced Analytics is now accessible via Zoho CRM's team modules, which means you can add team modules—plus their notes and fields—for inclusion in reports, insights, and other analytical functions. Alongside the standard and custom modules

    • WhatsApp conversations are no longer linked to existing threads after reconnecting the channel

      Hi everyone, We have an existing WhatsApp channel in Zoho Desk. We temporarily disabled it, renamed it, and then re-enabled it while reassigning our bot. Since then, all previous WhatsApp conversations are still visible in the history, but we can no longer

    • Zoho Assist Feature Update: July 2026

      Elevate to Admin Mode for iOS devices Technicians can now elevate an active session to Admin Mode directly from the iOS app. This feature lets the technician switch the remote computer from a standard user account to an admin account by entering credentials

    • Bulk deleting Zoho CRM records using Deluge, COQL and CRM API

      Hello everyone, During CRM implementations, data cleanup is a common task, especially after testing, migrations, imports, or integration development. I created a reusable Deluge function that performs bulk deletion using the Zoho CRM API. The approach:

    • Can't connect CalDAV

      ### Issue Summary Can't connect to my calendars using CalDAV and the URL `https://calendar.zoho.eu` ### Steps to Reproduce 1. Tried to connect on multiple devices, on multiple OS's (Android DAVx, Thunderbird, Gnome Calendar, Apple Caneldar). 2. When I

    • CRM x WorkDrive: We're rolling out the WorkDrive-powered file storage experience for existing users

      Release plan: Gradual rollout to customers without file storage add-ons, in this order: 1. Standalone CRM 2. CRM Plus and Zoho One DCs: All | Editions: All Available now for: - Standalone CRM accounts in Free and Standard editions without file storage

    • Guide customers to the right booking page with routing forms

      Greetings from the Zoho Bookings team! We're excited to introduce Routing Forms in Zoho Bookings. Routing forms let you collect information from customers before they schedule an appointment and automatically direct them to the most appropriate booking

    • Cannot receive emails

      Sent one days ago still no feedbacks, cannot call customer services number

    • Email Password Reset - Vishal & shaik Vali Babu

      Hi Team, The below-mentioned employees are unable to log in to their Gmail due to a password error. Kindly look into this on priority vishal.r@jumbotail.com shaik.babu@jumbotail.com

    • Live Chat

      Is live chat inthe website in zoho desk?

    • Application-Level Save copy of sent emails

      It would be really helpful to be able to turn on/off the Save copy of sent emails at a per application level, so some applications can save in the sent folder and others don't.

    • DKIM 2048 too long

      I'm trying to add a DKIM TXT record for my domain in Zoho Mail but my DNS provider (Shopify) has a character limit on TXT record values. The 2048-bit DKIM key is too long to enter. Can anyone advise how to generate a shorter 1024-bit key instead, or another

    • Using IMAP configuration for shared email inboxes

      Our customer service team utilizes shared email boxes to allow multiple people to view and handle incoming customer requests. For example, the customer sends an email to info@xxxx.com and multiple people can view it and handle the request. How can I configure

    • Technical personnel are required to assist in synchronizing license quotas and solving the problem of being unable to add users.

      We are a cross-border jewelry e-commerce company and currently use Zoho Mail Lite corporate email service. I have paid to purchase 1 Mail Lite annual user license (order number 133627785, payment time 2026-06-29). It has been more than 12 hours since

    • non ricevo ne invio mail

      non riesco ad inviare né ricevere posta. URGENTISSIMO

    • 重要詢問:電子報回信沒有收到

      我使用zoho作為寄電子報的mail， 但是我發現從電子報回信，完全都沒有收到!!!(包含垃圾郵件) kit那邊設定確定都沒有問題，請問這邊是哪裡設定有問題導致沒收到呢? (我確認過mail是一樣的)

    • Mail Id’s backup

      Dear Zoho Team, Kindly share the backup of my all mail id’s associated with Zoho account. Thanks, Saurabh Sharma +91 8851066915

    • Feature Request - Option To Hide Default System Fields on Items

      Hi Zoho Inventory Team, As far as I know it is not possible to hid some of the defult system fields on Items, such as UPC, MPN, EAN, ISBN. A good use case is that in many cases ISBN is not relevant and it would be an improved user experience if we could

    • Important update on our transition to the new video platform framework

      As part of our ongoing platform changes, users in select regions, including the United States and other supported data center locations, have been migrated to our new video platform framework. Due to this migration, some participants may notice changes

    • Account review. Does anyone still work here?

      Are accounts still being reviewed? Mine has been under review for over two weeks now. I also created a support ticket and reached out on Twitter but never received any kind of response. Is this company still alive?

    • Seamless and safe way to migrate all my hubspot forms to zoho forms?

      Hi community! Our website (B2B consulting / market research), offers a wide variety of public report in PDF formats stored behind forms previously hosted via Hubspot. As we are migrating to Zoho Forms, I am facing an issue. Example: Form A (Report A),

    • E-Mail Distribution List

      How do I create an e-mail distribution list in Zoho Mail?

    • Zoho Contacts *Web Interface Does Not Load* (Tested in Firefox, Safari)

      When trying to load https://contacts.zoho.com the error shown in the console is: The resource from “https://static.zohocdn.com/zmail/zm/newContactsChange11/js/main.js” was blocked due to MIME type (“application/json”) mismatch (X-Content-Type-Options:

    • Automatically calculate and include tax on quotes

      I've recently been VAT registered and now need to include VAT on my quotes. I have been able to set the tax label and amount but still need to click the tax link and select the tax I wish to include before it appears on the quote. Does anyone know of

    • Inspection Table

      Hello Latha, We created a job sheet that includes the new table (Inspection Table) which was introduced recently. However, agents are not able to see the rows in the inspection table. Could you please investigate this issue and get back to us? Please

    • Zia Agents looks promising, but I still cannot deploy my first agent or connect WhatsApp after weeks of support tickets

      Hi Everyone, I am posting here because I am stuck and need practical help from someone who has successfully deployed a Zia Agent with WhatsApp. Zia Agents looks like a very promising product. I have watched the platform expand quickly, and I have noticed

    • Zoho Desk: Chromium (Google Chrome, Edge) filename issue when opening/download attachments in a ticket.

      Hello Zoho Desk Team. When opening a PDF attachment in a ticket, Chromium-based browsers such as Google Chrome and Microsoft Edge display the file with the title “content” When the file is saved, it is downloaded as content.pdf instead of using the original

    • Subforms and automation

      If a user updates a field how do we create an automation etc. We have a field for returned parts and i want to get an email when that field is ticked. How please as Zoho tells me no automation on subforms. The Reason- Why having waited for ever for FSM

    • crm to books

      We currently sync CRM Contacts to Zoho Books Customers using two-way sync. We now wish to change to "Accounts & their Contacts". What happens to existing Books customers? Will they be merged with CRM Accounts, duplicated, left unchanged, or recreated?

    • Next Page