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

    • Event Time Zone in meeting invites are confusing users

      When sending calendar invites to internal and external users, the first section "Event Time Zone" is confusing people and they are automatically declining events. Can this section please be removed??? It already shows the correct time zone next to the

    • Forwarding without verification

      Hi, I use Tripit to keep track of all my business travel. I've recently moved over to Zoho and wanted to set up a forwarding rule to send various travel confirmation emails automatically to plans@tripit.com Obviously this is an email address I don't control,

    • Filter by user in Pivot Chart

      I have a Pivot chart where the data should be filtered by user. The user enters the system and should see only the data that correspond to it. Can anyone help me?

    • All new Address Field in Zoho CRM: maintain structured and accurate address inputs

      Availability Update: 29 September 2025: It's currently available for all new sign-ups and for existing Zoho CRM orgs which are in the Professional edition exclusively for IN DC users. 2 March 2026: Available to users in all DCs except US and EU DC. 24

    • 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

    • 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

    • #2 The Tax Talk Nobody Wants to Have

      "We are also able to manage our GST invoices without worrying about compliance issues. With Zoho Invoice, we are happy, our tax consultant is happy, and so are our customers," rejoices Shivprateek Habib, Partner, Flutterboots Services LLP. That's usually

    • Bulk upload images and specifications to products

      Hi, Many users have asked this over the years and I am also asking the same. Is there any way in which we can bulk upload product (variant) images and product specifications. The current way to upload/select image for every variant is too cumbersome.

    • Workflows fail silently in Zoho CRM and there is no native way to know

      Workflow automation is honestly one of the biggest reasons my clients choose Zoho. But there is one problem I keep running into across almost every implementation. When a workflow fails, nobody finds out. Email alerts hit daily limits and just stop. Custom

    • Zoho Commerce and Third-party shipping (MachShip) API integration

      We are implementing a third-party shipping (MachShip) API integration for our Zoho Commerce store and have made significant progress. However, we need guidance on a specific technical challenge. Current Challenge: We need to get the customer input to

    • Is there a way to update bounce domain after verification process has started

      Hi Zeptomail Team, I've created a domain and we did not update the bounce domain to our custom record... the validation has already started and I am now unable to update the bounce domain. Is there any way to get this updated on the backend without deleting

    • Pre-orders at Zoho Commerce

      We plan to have regular producs that are avaliable for purchase now and we plan to have products that will be avaliable in 2-4 weeks. How we can take the pre-orders for these products? We need to take the money for the product now, but the delivery will

    • How to Customize the Member Portal Login Page?

      Hi everyone, I am currently using the default member portal login page for Zoho Commerce, but I feel it looks quite plain and doesn’t align well with my brand's style. I would like to make it more visually appealing, possibly by: Adding custom colors

    • Picklist values out-of-date in Campaigns

      Hi I use a CRM (Global) picklist set of values for my field "Connection Strength" (see screenshot 1). . I use Campaigns to follow-up and change the Connection Strength value depending on their stage. The picklist values that appear in the dropdown for

    • Refering cell from other sheet

      Hi, If we want to refer any cell in the same sheet its very easy, like suppose if I want to refer cell A2  in P7 I just need to type =A2 in P7, similarly how can I refer a cell present in different sheet ( I mean refer cell A2 from Sheet1 into Sheet2) Thanks

    • How to keep track of bags, cans, drums of inventory?

      We buy and sell products that are packaged in bags 🛍️, cans🥫, drums🛢️, etc. with batch numbers. When we get a shipment of one of the products, how do we track we received (say) 10 cans each of 5L of a product and maybe we received 10 cans of another

    • Global/Overall Reports & Dashboards in Zoho Sprints

      Hi, Do we have an option to refer Global Level Reports & Dashboards in Zoho Sprints? We could see that we have Project specific Reports & Dashboards inside every Project. However, for a management level we want Reports & Dashboards visibility at a Global

    • Important Update: New Fields Addition in Zoho Sprints Integration

      We'd like to inform you of an upcoming update to the 'Timesheets' module in the Zoho Sprints integration from June 3, 2026. To enhance time tracking and reporting accuracy for the Zoho Sprints integration, three new fields - Log Type, Meeting ID, Release

    • Custom Buttons & Links Now Supported in Portals

      We’ve just made portals in Zoho Recruit more powerful and customizable than ever! You can now bring the power of Custom Buttons and Links to your Candidate, Client, Vendor, and Custom Portals, enabling portal users to take direct action without recruiter

    • Packaged Weight And Dimensions

      Hello, we have item weight and dimensions, please add packaged weight and dimensions. Thank you

    • Nome do Agente não aparece nas conversas do whatsapp para o nosso cliente

      Nome do Agente não aparece nas conversas do whatsapp para o nosso cliente! Isso é ruim pois so,os em 5 agentes e o cliente fica sem saber com quem ele está falando, pois tentei procurar configurações que pudessem ter esta opção, mas até então não encontrei.

    • Marketing Plus : quatre ans à réinventer la simplicité des opérations marketing

      Pourquoi et comment ? Il y a exactement quatre ans, nous avons démarré simplement, avec une seule vision: unifier et simplifier les opérations marketing pour les équipes marketing de tous les secteurs. Chez Zoho, nous proposons des outils dédiés à chaque

    • hide resolution from help centre

      to my surprise, i just found out that the resolution text is public in the helpcenter, even if 'notify customer' is off. is there a workaround to that? how do others deal with this? How zoho support does this and I don't think its used by Zoho in the first place. the resolution is meant to be private, not public

    • Zoho Desk - Event Calendar View

      Hi Desk team, Are there any plans to introduce a calendar or timeline view for Events in Zoho Desk? It would be very helpful if we could see Events visually in a calendar and/or timeline. This is very helpful when desk side support activities need to

    • Pasting Images in Zoho Desk ignores cursor location

      My team has reported an issue which started recently where when we paste an image into a new or existing reply or comment, the pasted image seems to ignore the current cursor location instead paste itself at the last character present in the reply/comment,

    • 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

    • Financial manger

      why is transaction locking for zoho I Can't closing period

    • API usage

      My application has bad implementation and code that is resulting in very high API usage. This is my first time experiencing something like this. Does anyone know how I can troubleshoot and fix this?

    • Disabled page

      Hello, When I try to to run Inventory Valuation Summary and FIFO Cost Lot Tracking reports, I get This page is disabled error. I tried everything in settings, cant find the settings to enable. Help me.

    • Setting defaults for "Find and Merge Duplicate for..."

      To remove some of the extreme tedium from Zoho's poorly implemented merge function, I would like to set defaults.  Currently I am defaulted to match "ANY" when I would never do that, so I always have to click "ALL". Then it makes me click on several totally irrelevant drop boxes to turn off phone, mobile and other useless match criteria. Is there a way I can set: Match to default as "ALL" Firstname to default to "IS" Lastname to default to "IS" every other match field default to "-NONE-" This will

    • Linux agent 2026_M05 release notes

      Agent Version: 3.6.5.3 Release date: 28 April, 2026 Major Enhancement: Quick Support feature release. Security improvements and enhancement to in session features.

    • Automated Sales Order Fulfillment Based on Inventory Availability (Allocation / Commitment Modes)

      Hi everyone, I recently reached out to Zoho Inventory support regarding a workflow challenge and wanted to share both the issue and their response here for visibility. Zoho confirmed: “Zoho Inventory does not currently support automatic notifications

    • Linux agent 2026_M04 release notes

      Agent Version: 3.6.5.2 Release date: 30 April, 2026 Code refactoring and improvements to function efficiently in minimal hardware environments.

    • Simple Totals on all pages?

      Hi there. I'm surprised this isn't implemented yet (since most other software has this by default). Can you display a simple total at the bottom of all invoice lists? ie: I click in SALES tab, select INVOICES and on that page please show us a simple total? Yes, I realize I can go the long way around and generate reports and select my date options and select the type of invoices etc...but honestly that shouldn't be necessary when just viewing a list of unpaid invoices and how much total is outstanding.

    • Linux agent 2026_M03 release notes

      Agent Version: 3.6.5.1 Release date: 27 February, 2026 Bug fixes and performance improvements for optimised session experience.

    • Linux agent 2026_M02 release notes

      Agent Version: 3.6.5.0 Release date: 26 February, 2026 Major enhancement: File Manager feature release Issue fixing of idle session timing interfering with backend activities.

    • Linux agent 2026_M01 release notes

      Agent Version: 3.6.4.8 Release date: 13 February, 2026 Optimised the unattended agent uninstallation process to properly cleanup residual files and complete uninstallation process. Fixed issues with CTRL+ALT+DEL command not functioning properly in some

    • Using API for multiple organizations

      I am busy building an app to load data from a retailer into Zoho Books. We are planning on selling the app to multiple organizations that use this retailer. Is there a way to get a single oauth app to access multiple organizations? From what I can find

    • MacOS agent 2026_M04 release notes

      Agent Version: 3.120.0 Release date: 23 April, 2026 Retry mechanism for end users to enable Accessibility and Screen Share permissions to successfully join remote sessions. Agent stickiness on multiple desktops to avoid confusion. Improvements to audio

    • MacOS agent 2026_M03 release notes

      Agent Version: 3.117.0 Release date: 02 March, 2026 Bug fixes and performance improvements for optimised session experience.

    • Next Page