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 CRM Email Templates 100% Width No Background How?

      Hi, On the Zoho CRM Email Templates in setup > customization > templates > new templates > I choose blank template, but still it puts in a gray background and a max width for the email. I just want to make an email that looks like an email I would send from gmail that has no background or max width. How do you do this? 

    • Subform edits don't appear in parent record timeline?

      Is it possible to have subform edits (like add row/delete row) appear in the Timeline for parent records? A user can edit a record, only edit the subform, and it doesn't appear in the timeline. Is there a workaround or way that we can show when a user

    • AI secretary

      In our company, Claude is the secretary and creates inquiries and schedules from Gmail. You no longer have to enter them yourself. The secret is that we created an MCP server that connects to CRM. https://x.com/Mac_nishio/status/1917954562566328694

    • 5 small changes to Recruit that make a big difference

      Sometimes, the biggest improvements aren’t new features, they’re small changes that make everyday actions feel smoother. Over the past few weeks, we’ve made a few such updates across Zoho Recruit. They’re subtle, but together, they remove friction from

    • Project Management Bulletin: March, 2026

      We are passionate about equipping our users with efficient solutions that help them run their businesses successfully. Our collective efforts over the past 2 years have culminated in the launch of Sprints 3.0— built with reliable features, impactful integrations,

    • New security enhancements for portal users: MFA and password management

      Hello everyone, We are excited to announce three major security enhancements that are now available to portal users in Zoho CRM: Organization-wide multi-authentication for portal users - Admins can enforce multi-factor authentication across the entire

    • What matters more in Zoho implementations: tools or system architecture?

      I recently worked on a full-stack migration for a catering equipment business using Zoho One with Shopify, and it raised a few interesting observations. The setup included migrating a large product catalog (around 9,700+ SKUs), integrating multiple supplier

    • [Free Webinar] Learning Table Series 2026 – Customer agreement & contract management using Zoho Creator

      Hello everyone, We’re excited to announce the next session in Learning Table Series 2026, where we will continue with our purpose-driven approach—focusing on how Zoho Creator’s features help solve real-world business challenges. Each session in this series

    • Zoho Payroll's USA and KSA editions are available in Zoho One!

      Greetings! We’re excited to share that Zoho Payroll, currently available only in India and the UAE, is now introducing the KSA (Kingdom of Saudi Arabia) edition and the USA (United States of America) edition, and these editions are now available in Zoho

    • Looking for Guidance on Building a Zoho Website

      I'm exploring the possibility of building a custom website with specific features using Zoho as an alternative platform. My goal is to create something similar to https://gtasandresapk.com , with the same kind of functionality and user experience. I'd

    • Multilingual website feature

      Would be a great feature to have. I saw that this feature was available for backstage. I think it could be done for zoho sites too.

    • [Webinar] Modernize your sales engine with agentic analytics

      Traditional sales decision-making methods aren't cut out for modern businesses. Leveraging AI in sales helps businesses actively respond to the changing dynamics of the market. Agentic AI is letting sales teams across industries make better decisions

    • Built-in Date Functions in Zoho Analytics Query Tables

      I have a doubt about whether Zoho Analytics Query Tables provide built-in functions for start date, end date, and the current month

    • Zoho Commerce in multiple languages

      When will you be able to offer Zoho Commerce in more languages? We sell in multiple markets and want to be able to offer a local version of our webshop. What does the roadmap look like?

    • Nimble enhancements to WhatsApp for Business integration in Zoho CRM: Enjoy context and clarity in business messaging

      Dear Customers, We hope you're well! WhatsApp for business is a renowned business messaging platform that takes your business closer to your customers; it gives your business the power of personalized outreach. Using the WhatsApp for Business integration

    • How I Implemented Subscription-Based Access Control and Expiry Handling in Zoho Creator

      I recently worked on a use case where users come into the application to request a service, but they should only be able to continue the process after completing a subscription. The challenge was not just controlling access, but also making sure that

    • Zoho Recruit mailserver get blocked by Microsoft!

      Hi, We have experienced this issue twice now, where Zoho Recruit outbound IP addresses are being blocked by Microsoft. We are confident that Microsoft is the blocking party, as all outbound emails to candidates with @hotmail.com, @live.com, and @outlook.com

    • Connectivity issues with Google Calendar and third-party integrations

      Description: We are currently experiencing a critical failure with Zoho CRM third-party connections. This issue is heavily affecting our primary workflow. Symptoms: Sync Failure: Existing Zoho CRM to Google Calendar connections have been failing for approximately

    • Service line items

      Hello Latha, Could you please let me know the maximum number of service line items that can be added to a single work order? Thanks, Chethiya.

    • How can I export all Deluge code across the application?

      I’m working on a application with multiple forms, reports, and HTML views, where Deluge scripts are used across workflows, field actions, and custom functions. Is there a way to export all Deluge scripts into a single file for easier search?

    • First Name in Mail

      While sending a mail/message to the user, I want only the first name to be displayed—for example: “Hi John” instead of the full name using "Hi ${Name_Field}"

    • Can you import projects into Zoho Projects yet?

      I see some very old posts asking about importing project records into Zoho Projects. But I can't find anything up to date about the topic. Has this functionality been added? Importing tasks is helpful. But we do have a project where importing projects

    • Updating Sales orders on hold

      Surely updating irrelevant fields such as shipping date should be allowed when sales orders are awaiting back orders? Maybe the PO is going to be late arriving so we have to change the shipment date of the Sales order ! Not even allowed through the api - {"code":36014,"message":"Sales orders that have been shipped or on hold cannot be updated."}

    • New Account, Setting up Domain Question

      Hello, I recently set up a new account with a custom domain. But after paying and setting up my account, it says OpenSRS actually owns the domain, and I have to sign up with them to host my site. But OpenSRS wants to charge me $95, which is ridiculous.

    • Zoho Social API for generating draft posts from a third-party app ?

      Hello everyone, I hope you are all well. I have a question regarding Zoho Social. I am developing an application that generates social media posts, and I would like to be able to incorporate a feature that allows saving these posts as drafts in Zoho Social.

    • Deleting unwanted ticket replies

      Hello, In a Zoho Desk Ticket thread, sometimes one of the recipients has auto-reply activated. This creates a new message in the Ticket thread that not only pollutes the thread, but most importantly cannot be replied properly because usually auto-reply e-mails don't do "reply all", so the other recipients are not included. I want to delete such a message in the Ticket thread. I searched the help of Zoho Desk, but only found a way to mark as Spam (https://help.zoho.com/portal/kb/articles/marking-support-tickets-as-spam)

    • Create formula calculations in Assemblies for scaling quantities

      Something we have been encountering with our composite items is dealing with scaling of quantity of one or more items within the composite assembly relative to the number of complete units being sold. I.e. running the equation 2(n-1) on one of the assembly

    • Advanced email configuration - agent's name vs. department name

      We currently have all four Advanced Configuration options turned ON at the Global-level (Channels > Email > Advanced Configuration) - including the "Show Agent name in Ticket replies and outgoing emails" option. We also had that same option turned ON

    • Logged out

      Hi, just been working on a sheet when a pop up box appeared telling me I'm going to be logged out in x number of seconds and if I reload I may lose any edits, or words to that effect. It did indeed log me out and I did indeed lose my last edits. Any idea

    • Issue updating Multi-Select Picklist via API (saves as string instead of checking boxes)

      Hi everyone, I'm hoping someone can point out what I'm doing wrong here. I'm stuck trying to update a custom multi-select field via the Desk API and it's driving me a bit crazy. I have a multi-select picklist called "Buy years" with options like 2023,

    • Page variable not receiving URL parameter in Creator 6 HTML snippet Deluge — Canada DC

      I have a Creator 6 app on Canada DC. I'm trying to pass a URL parameter to an HTML snippet page via Deluge but the variable always returns empty. Setup: Page: MYC_Meeting_Tool Page variable declared: submission_id, type Text Page Script tab contains:

    • Zoho Campaigns API endpoint for contact details

      there is some REST API support for Zoho Campaigns, however, I am not able to find an endpoint for "get contact details".  in particular, I'd like to access contact's subscription status and also their topic. ideally there is all profile available including

    • What is a realistic turnaround time for account review for ZeptoMail?

      On signing up it said 2-3 business days. I am on business-day 6 and have had zero contact of any kind. No follow-up questions, no approval or decline. Attempts to "leave a message" or use the "Contact Us" form have just vanished without a trace. It still

    • Migrating Documentation from Notion to Zoho Help Centre

      Hi there, We have a large chunk of documentation that currently sits on Notion. However, we are eager to move this into our Zoho Help Centre/Knowledge Base. What is the most efficient way of achieving this?

    • Can't add attachment on email template

      The attachment does show up. This is my template. Hi ${Cases.Assigned Programmers}, Please be reminded about the following task that has been assigned to you. Subject : ${Cases.Subject} Description : ${Cases.Description} Ticket # : ${Cases.Request Id}

    • Edit a previous reconciliation

      I realized that during my March bank reconciliation, I chose the wrong check to reconcile (they were for the same amount on the same date, I just chose the wrong check to reconcile). So now, the incorrect check is showing as un-reconciled. Is there any way I can edit a previous reconciliation (this is 7 months ago) so I can adjust the check that was reconciled? The amounts are exactly the same and it won't change my ending balance.

    • Custom CSS for Zoho CRM Team Bookings embeded widget

      Hello, we are adding Zoho CRM Team Bookings (crm.zoho.com) in our public website. We know that we can change Theme Color, Font Color and Background Color: Zoho CRM Booking Styling But is it possible to change other CSS attributes e.g. Font Family, like

    • Standard practice rerun updated deluge function over existing recordes

      Hi folks, we have a function which is triggered via webhook from a third-party solution which then calls another api with a contact-id and gets a json payload back and then parses that data to custom fields in our CRM to the record id. As requirements

    • Specifying time increments on a Date/Time field

      Hi all, Im using a Date/Time field in my CRM module. At the moment the increments are 30 minutes. How can I change these to be 15 minutes? Thanks

    • Sort by Project Name?

      How the heck do you sort by project name in the task list views??? Seems like this should be a no-brainer?

    • Next Page