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 #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

    • Kaizen #152 - Client Script Support for the new Canvas Record Forms

      Hello everyone! Have you ever wanted to trigger actions on click of a canvas button, icon, or text mandatory forms in Create/Edit and Clone Pages? Have you ever wanted to control how elements behave on the new Canvas Record Forms? This can be achieved

    • Kaizen #142: How to Navigate to Another Page in Zoho CRM using Client Script

      Hello everyone! Welcome back to another exciting Kaizen post. In this post, let us see how you can you navigate to different Pages using Client Script. In this Kaizen post, Need to Navigate to different Pages Client Script ZDKs related to navigation A.

    • Kaizen #210 - Answering your Questions | Event Management System using ZDK CLI

      Hello Everyone, Welcome back to yet another post in the Kaizen Series! As you already may know, for the Kaizen #200 milestone, we asked for your feedback and many of you suggested topics for us to discuss. We have been writing on these topics over the

    • Recent Topics

    • zoho sheet stuck

      I Need help. ZOHO sheets stuck on the loading screen. I've already deleted the system cache and cookies of my browser (google chrome) but it's still not opening. 

    • bulk edit records and run internal logic

      hi there is few logics in manner "it this than that" logics work well when i edit entry openning it one by one (via workflow "on add/edit - on success" , for custom field "on update/on user input") but when i try bulk edit records - logic does not work.  how can i turn on logic to work as programmed - for mass editing records via bulk edit?

    • Duplicate Accounts

      Hi There, I am looking for a solution, script, workflow or anything to solve an issue we have - in our customers section we have a rule that doesn't allow duplicates, however Zoho will allow customers with xxxxx and xxxxx PLC or LTD so effectivley we

    • Invoice Ref. Field

      Hello Team, Currently, the Invoice Ref. field is set to a Number type with a maximum limit of 9 digits. However, we often receive customer invoices that contain up to 12 digits. In some cases, the invoice reference includes not only numbers but also letters

    • WebDAV / FTP / SFTP protocols for syncing

      I believe the Zoho for Desktop app is built using a proprietary protocol. For the growing number of people using services such as odrive to sync multiple accounts from various providers (Google, Dropbox, Box, OneDrive, etc.) it would be really helpful

    • Emails sent through Bigin are not posting in IMAP Sent folder

      I have set up my email to work from within Bigin using IMAP.  I am using IMAP so I can sync my email across multiple devices - phone / laptop / desktop / iPad / etc.  I want all my emails to populate my email client (outlook & iphone email) whether or

    • Possible for first Signer of Sign Form to specify the next signer in the sequence

      We have many use cases where multiple signers need sign the same document. We'd love to be able to use sign forms, where the a signer who uses the Sign Form link can specify the name and email address for the next person in the sequence.

    • BUG: Can't copy-paste data outside Sheet

      Currently I can't paste data copied from inside any of my Zoho Sheet files to any other app. Copy-paste works inside the sheet It does NOT work between two different sheets These sheets are built from automation templates Everything works fine if I create

    • Zoho CRM Community Digest November 2025 | Part 1

      Hello Everyone! Here’s what came through in the first half of November: new updates and a few helpful community discussions with real, notable solutions. Product Updates: Android App Update: Inctroducing Swipe Actions You can now swipe left or right on

    • 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

    • The Social Wall: November 2025

      We’re nearing the end of the year, and the holiday season is officially kicking in! It’s that time when sales peak and your social media game needs to be stronger than ever. We’re back with exciting new updates across AI, analytics, and the mobile app

    • Auto-Invite Users to Portals in Zoho CRM based on Conditions

      Hello Everyone, You can now automate portal invitations in Zoho CRM with the new Auto-Invite users feature in Portal management. No more manually enabling portal access one by one. With this enhancement, you can automatically send invites for users to

    • Truesync for Linux

      Is Truesync available on linux ?

    • Rich Text For Notes in Zoho CRM

      Hello everyone, As you know, notes are essential for recording information and ensuring smooth communication across your records. With our latest update, you can now use Rich Text formatting to organize and structure your notes more efficiently. By using

    • Hidding/excluding specific picklist options from filter

      Hi. Is it possible to hide/exclude specific picklist options from this filter? I don't want them to be shown when someone tries to filter in the leads module

    • Zoho DataPrep switching Date Format

      When using a pipeline that is importing Zoho Analytics data into Zoho DataPrep, the month and day of date fields are switched for some columns. For example, a Zoho Analytics record of "Nov. 8, 2025" will appear in Zoho DataPrep as "2025/08/11" in "yyyy/MM/dd"

    • Subforms to Capture Multi-Row Data in Job Sheets

      Subforms transform your job sheets from simple checklists to powerful, data-rich forms. In field service work — whether maintenance, inspection, installation, or repair — a single job can involve multiple repeatable entries: readings, parts used, activities

    • 年内最後のユーザー向けイベント：5名限定！ 課題解決型ワークショップイベント Zoho ワークアウト開催のお知らせ (12/18)

      ANNOUNCEMENT 1 REPLY INSIGHTS ユーザーの皆さま、こんにちは。Zoho ユーザーコミュニティチームの中野です。 12月開催のZoho ワークアウトについてお知らせします。 今回はZoomにて、オンライン開催します。 参加登録はこちら（無料） https://us02web.zoom.us/meeting/register/QHn6kJAcRs-znJ1l5jk0ww ━━━━━━━━━━━━━━━━━━━━━━━━ Zoho ワークアウトとは？ Zoho ユーザー同士で交流しながら、サービスに関する疑問や不明点の解消を目的とした「Zoho

    • Add "Fetch Composite Item" Action for Inventory

      I want to make a Flow that uses information returned in the GET call for Composite Items, and it's not currently available in Zoho Flow. Please consider adding this functionality.

    • Adress Labels for sending of the oder und barcode

      We want to print with my address labels to stick on the order of the ware can. there are these options?

    • printing individual labels - Dymo LabelWriter

      I am trying to print individual labels to my Dymo LabelWriter - has anyone done this? Latest Update (December 2025): The Canvas Print View is now available! We encourage you all to try it out and share your feedback with us. Learn more here: Zoho CRM

    • Zoho Creator for Agriculture

      Greetings, I am starting to work on  Zoho Creator specifically for the agricultural field, any recommendations, tips or ideas that might be helpful ? Also, if you are interested by any means in working on such project, kindly contact me. The project is

    • Custom Print Layout

      I would like to create a custom print layout of a Lead or Contact. Is there a way to do that? What I mean is that if I'm viewing a specific lead or contact I'd like to be able to print or export that lead/contact and only print and/or export certain information.

    • Print View

      Nothing happens when I'm in a module , ie; Contacts, and I hit the Print View Button. Even when it does come up and say "loading", nothing loads

    • Get Holiday ready with Zoho Mail's Offline mode

      With the holiday season right around the corner, this is the perfect time to get ready to unplug, relax, and enjoy a well-deserved break. In addition to preparing yourself, you can also make sure your organization members are set for their time away from

    • Zoho Flow Credits

      Hi , I would like to ask the reason why every time I added plus credit but few days later I will return back to default? (as below I add credit to 3000 but today It change back to 1000) Most important is, when the credit fully used, not any reminder to

    • Zoho CRM Kiosk issues

      Firstly this is for a system on the AU servers if that makes a difference. Issues are as follows (For Kiosk): 1. Re-ordering fields in the screen builder is broken. The fields seem to be re-ordering themselves, unless you order everything by moving the

    • Zoho Books emails suddenly going to Spam since 11 Nov 2025 (Gmail + now Outlook) — anyone else?

      Hi everyone, We migrated to Zoho Books in July 2025 and everything worked fine until 11 Nov 2025. Since then, Zoho Books system emails are landing in customers’ Spam (first Gmail, and now we’re seeing Outlook/Office 365 also starting to spam them). Impacted

    • Zoho Voice lance BYOC (Bring Your Own Carrier) : intégrez votre opérateur

      Pour accompagner sa croissance, une entreprise a besoin d’une infrastructure téléphonique flexible et évolutive. Les solutions de téléphonie s’adaptent aux exigences du centre de contact, tout en intégrant aisément les opérateurs locaux de votre choix.

    • Email Template Edits Not Saving

      I can make an edit, click save, and see the blue bar annimation at the top, but the edits don't actually save. Important, because my email templates are now broken and clients are receiving bad emails. Tried on Chrome, Firefox and IE.

    • Default Ticket View - Table?

      Guys, We mostly use the table view to queue tickets. Maybe I am missing it - but how can I set that view as 'default" for all our agents? Thanks JV

    • Duplicate customers being created in Desk

      Hi I've trying to work out why I've getting duplicated customers being created in my desk. I have an external booking system that generates an email when I get a customer booking a job. A booking email gets sent to Desk where I manage the booking and

    • Can I have different users see different pick list values for Potential Stage?

      We have some users focusing on new business and others focusing on existing business, and they follow different sales processes/cycles, so we would like them to see different pick list values for Stage (eventually leading up to Closed Won/Lost in both cases).   And just to keep it interesting - some of these users will of course do a combination, so would need to see one pick list for their New business potentials and a different pick list for their Existing business ones.   Salesforce does this

    • Links in Instagram

      Hi there, I have been using Later for a while now but keen to come back to Zoho Social as Later doesn't offer tagging of pages on Facebook but they offer something Zoho doesn't. You can add a link to your bio which opens up your profile feed where images

    • Tracking Snippet not working in Zoho Marketing Automation!

      First off, the fact that you have to wait about 12-24 hours for every response is terrible. How are we supposed to conduct business? Second, we have been trying for several days to get the Tracking Code Snippet in marketing automation to work, to no avail.

    • email moderation issue when email is sent in the name of a mail group

      Symptom: an email that is sent by a mail group moderator in the name of a moderated mail group is held back for approval. Reproduction: Create a moderated mail group with members and moderators. Allow that mails can be sent in the name of the group (extended

    • Is there any way to send an Excel received by email to Dataprep?

      Every day I receive an email alert with an Excel file that I want to process through a Dataprep pipeline. To do this, I need to: -Save the file to disk -Open the pipeline -Run the pipeline -Update the source -Several clicks to select and open the saved

    • Recruit paid support?

      Hi all, Could anyone who has paid support package advise if it provides value for money with regards to support response times? Exploring the idea as unfortunately when we have faced issues with Recruit it has been a 7+ day timescale from reporting to

    • 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

    • Add Lookup Field in Tasks Module

      Hello, I have a need to add a Lookup field in addition to the ones that are already there in the Tasks module. I've seen this thread and so understand that the reason lookup fields may not be part of it is that there are already links to the tables (

    • Next Page