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

    • 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

    • Very limited support for MCP

      Has anyone else noticed how limited the MCP support for Zoho People currently is? Right now only a small set of read-only actions (exactly 15) seem to be available. At the same time Zoho CRM supports over 700+ functions. It makes it almost impossible

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

    • ZOHO Desk attachments support

      Hi I just setup MCP with claude, it works well, but it can't read attachments... which makes it kind of useless... Will you be adding attachment capabilities anytime soon?

    • HOW I CAN GET BETA VERSION FOT TESTING

      HI. ZOHO I AM INTERESTED IN YOUR BETA SOFTWARE TO EXPERIENCE NEW FEATURES.

    • How to Generate Separate Labels for Each Invoice SKU Line Item in Zoho Books?

      Hi everyone, I’m trying to implement a requirement in Zoho Books where separate labels need to be generated for each SKU/item from an invoice. Scenario: One invoice can contain multiple products/SKU items Each item/box should have its own separate label

    • HTML PDF Templates / Build From Scratch option not visible for Custom Modules

      Hi everyone, I am working with Zoho Books Custom Modules and trying to create a custom 4x4 package label PDF template using HTML/CSS. According to the official Zoho Books documentation for HTML PDF Templates, there should be an option like: Settings →

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

    • Direct Integration Between Zoho Cliq Meetings and Google Calendar

      Dear Zoho Team, We’d like to submit the following feature request based on our current use case and the challenges we’re facing: 🎯 Feature Request: Enable meetings scheduled in Zoho Cliq to be automatically added to the host's Google Calendar, not just

    • billable_expense_id in Invoice API does not set invoiced=true on bill line items — causes duplicates in Projects > Create Invoice

      Hi Zoho Community, We are running an automated batch invoicing system using the Zoho Books API and have hit two critical bugs that are causing duplicate invoice risk in production. Raising this here for visibility alongside a support ticket already filed.

    • New fields : radio button

      Hi, when customizing a module (eg: Candidates), we are able to select different types of fields (check box, currency, list, ...). However there is no "radio-button" component. This type of fields is often used in Web pages and will be certainly a plus-value

    • 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

    • 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

    • 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

    • Choice Availability Reset

      If an entry is deleted which included a response to a field with choice availability enabled does that increase the number of remaining times the choice can be selected?

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

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

    • [Heads Up] Upcoming update to field values in Zoho Books - Zoho Analytics integration

      Hello Users, We'd like to inform you of an upcoming update to the Account Type field values in the Zoho Books integration for Zoho Analytics from June 1, 2026. What's Changing? The following values under the Account Type field are being renamed to align

    • Important update: Migrate to the new SalesIQ live chat widget before May 15, 2026

      The old SalesIQ live chat widget will be deprecated on May 15, 2026. This is a final reminder to migrate to the new SalesIQ live chat widget before this date. After May 15, 2026, the old widget will no longer be maintained, which can lead to slower performance

    • Zia Agent built in ChatKit UI does not render markdown

      Hi, You have a major shortcoming in the Zia Agent UI. The test UI that is embedded in agents.zoho.com allows you to test the agent has full support for rendering markdown, but your ChatKit UI does not have support for rendering markdown. If I embed it

    • Team folder not created when creating project using zoho flow

      When I try to automate project creation using zoho flow, and I have enabled workdrive integration to automatically create team folders to attach to the project, this only works when I create a new project through the UI. But I am trying to automate project

    • Zoho Projects - Email notification relabelling of modules not present on default templates

      Hi Projects Team, I noticed that in the default email template notification, the word "bug" was not renamed to the lable I am using in my system. As many users may used the Bugs modules for various purposes including Changes, Revisions, Issues, etc...

    • 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

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

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

    • Kaizen #241: Automating Deal risk escalation using Workflow APIs, Connected Workflows, and Functions

      Hello everyone! Welcome to another Kaizen week. In many organizations, sales teams work in Zoho CRM, finance teams manage invoices in Zoho Books, and support teams handle customer issues in Zoho Desk. Now consider this scenario: A sales representative

    • Upload own Background Image and set Camera to 16:9

      Hi, in all known online meeting tools, I can set up a background image reflecting our corporate design. This doesn't work in Cliq. Additionally, Cliq detects our cameras as 4:3, showing black bars on the right and left sides during the meeting. Where

    • Allow Super Admins to Edit Task “Created By” and Issue “Reporter” Fields

      Hello Zoho Projects Team, We hope you are doing well. We would like to submit a feature request regarding the ability to manage and correct system ownership fields in Zoho Projects, specifically: Task → Created By Issue → Reporter / Reported By Current

    • The Social Wall: April 2026

      Hello everyone, This month, we’re excited to bring you a set of new updates for Threads in Zoho Social, designed to make publishing, monitoring, and managing your content much easier Threads updates You’ll now see a few useful improvements in the compose

    • Sort or filter CRM report by count value

      Hi there, I'm trying to create a report that will show me high frequency bookings (leads) coming through within a time period for any particular account - this is so we can proactively reach out to these accounts. I have a report that shows the information

    • Error when changing user permission from read only to user.

      Hi there, Ive tried to change one of my users to be able to edit, however i kept getting the error user license exceed.

    • Marketing Tip #30: Promote your brand differently on each social platform

      Not all social platforms work the same way. Posting the same content in the same way across every channel can limit your reach. Each platform has its own discovery system, and understanding what it prioritizes can dramatically improve how your brand is

    • Whatsapp Limitation Questions

      Good day, I would like to find out about the functionality or possibility of all the below points within the Zoho/WhatsApp integration. Will WhatsApp buttons ever be possible in the future? Will WhatsApp Re-directs to different users be possible based

    • **Building Role-Appropriate Accountability Layers in Zoho Projects - Looking for Real-World Experience**

      We're a small ISP/telecom operator on Zoho One and I'm trying to solve what I think is a common organizational problem. Would love to hear from others who've tackled it. **The Core Problem** Staff will only consistently use a project management system

    • Duplicate entries for contacts birthdays

      Good morning I have recently started to use my Zoho calendar and noticed that there are multiple birthday events showing for some of my contacts. I have checked my contacts and there were duplicates for some contacts which I have now rectified but the

    • 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

    • What's New in Zoho Billing | March 2026

      March is here with a fresh wave of updates to Zoho Billing. From making compliance easier, reporting more flexible, to making day-to-day workflows smoother across the board. Here's everything that's new this month. Introducing Usage-Based Billing Reports

    • Subforms in Creator-Lookup Price

      I've got a modular called Price List with items and prices. Ive got another module called Estimates with a subform that looks up that Price List. I am trying to get the "Price" to auto-enter based on the Lookup field of the item name. Anyone know how

    • Feature request - pin or flag note

      Hi, It would be great if you could either pin or flag one or more notes so that they remain visible when there are a bunch of notes and some get hidden in the list. Sometimes you are looking for a particular name that gets lost in a bunch of less important

    • Tip #20 - Three things you probably didn't know you can do with picklists

      Hello Zoho Sheet users! We’re back with another quick tip to help you make your spreadsheets smarter. Picklists are a great tool to maintain consistency in your spreadsheet. Manually entering data is time-consuming and often leaves typos and irregular

    • Next Page