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!



    Nederlandse Hulpbronnen


      • Recent Topics

      • Add Flexible Recurrence Options for Meeting Scheduling in Zoho Cliq (e.g., Every 2 Weeks)

        Hello Zoho Cliq Team, We hope you are doing well. Currently, when scheduling a meeting inside Zoho Cliq, the recurrence options are limited to Daily, Weekly, Monthly, and Yearly. There is no ability to set a meeting to occur every X weeks — for example,

      • Direct “Add to Google Calendar” Option in Zoho Meeting

        Hello Zoho Meeting Team, Hope you are doing well. We would like to request an enhancement related to the “Add to Calendar” functionality in Zoho Meeting. Currently, when we open Zoho Meeting and view our meetings under My Calendar, there is an Add to

      • Sales Order, Invoice and Payment numbers

        Hi zoho friends, it is me again, the slow learner. I'm wondering if there is a way to have it so the Sales order, invoice and payment numbers are all the same? It would be easier for me if they were the same number so there is not so many reference numbers

      • Ability to Add YouTube Video to Playlist During Publishing

        Hi Zoho Social Team, How are you? While publishing YouTube videos through Zoho Social, we noticed that the platform currently does not allow selecting a playlist at the time of publishing. Instead, we can only add the video to a playlist after it has

      • Ability to Change Visibility of Published YouTube Videos

        Hi Zoho Social Team, How are you? We would like to request an enhancement in Zoho Social regarding the management of already published youtube videos. Currently, after publishing a youtube video through Zoho Social, there is no option to change its visibility

      • Importation Tickets error

        Hi, I'm newbie here 🤓 So, i'm importing data from csv, but when I try advance to mapping fields the importer tool show this message: Previously I try import, other data, and not show errors in this step. Some ideas? Best Regards,

      • Ask the Experts 24: Analytics, data administration, and mobile experience with Zoho Desk

        Hello Everyone! Welcome back to the Ask the Experts(ATE) series! We were so focused on our Autumn 2025 release that we didn't host an ATE session last month. In this month's ATE, we'd like to expand our areas for discussion: we'd like to listen to your

      • Update on the client portal URL for Guest users

        We’re updating the way Guest users access their Connect network. As part of this change, all client organization portals used by Guest users will now be accessible through a dedicated domain specific to each data center. The access URLs mentioned here

      • Workaround: openURL in Blueprints - An alternate approach

        There is a roundabout way to open a URL in blueprints after a save event. By using the 'onBeforeMandatoryFormSave' in Client Script, you can open an external URL. Now, the problem is, this is designed to be run BEFORE the blueprint is saved, not after,

      • MTD SA in the UK

        Hello ID 20106048857 The Inland Revenue have confirmed that this tax account is registered as Cash Basis In Settings>Profile I have set ‘Report Basis’ as “Cash" However, I see on Zoho on Settings>Taxes>Income Tax that the ‘Tax Basis’ is marked ‘Accrual'

      • Migrate file from Single File Upload to Multi File Upload

        Dears, I have created a new field Multi File Upload to replace the old Single File Upload field. I'd like to ask you guys what is the best way to migrate the files to the new field?

      • Open "Live Chat" from a hyperlink?

        Hi, I often write paragraphs and text on our company website, and usually say you can get in touch with us via live chat. Can the chat window be triggered to pop open without clicking the chat graphic in the bottom window, and use it in a hyperlink? ie:

      • Zoho Sites search box

        Is there a Search box that can be added to a Zoho site? It would be for searching within the site only.

      • What stops me from packaging and shipping an order when the inventory is negative?

        It seems if the inventory value is negative, that Zoho Inventory should not allow me to create a Package and Ship it.   But, there seems to be nothing to stop me from doing that other than when I go to physically package the item and realize that there is no stock. There also seems to be nothing on the screen that even indicates to me that I should not package and ship.  To me this is the fundamental point of an inventory system.  Am I doing something wrong?   

      • Conditional formatting based on another field

        Hi I have two fields on my form stage 1 complete and stage 1 deadline.  I am trying to setup conditional formatting so that if stage 1 complete is after stage 1 deadline the record is highlighted in red. I need both stage 1 complete and stage 1 deadline

      • Zoho Books | Product updates | October 2025

        Hello users, We’ve rolled out new features and enhancements in Zoho Books. From iOS 26 updates to viewing reports as charts, explore the updates designed to enhance your bookkeeping experience. Zoho Books Updates for Apple Devices At WWDC 2025, Apple

      • Is there API Doc for Zoho Survey?

        Hi everyone, Is there API doc for Zoho Survey? Currently evaluating a solution - use case to automate survey administration especially for internal use. But after a brief search, I couldn't find API doc for this. So I thought I should ask here. Than

      • 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

      • Task Due Date greater than 10 years.

        We use recurring tasks in Projects where every week, month, year etc Some of our projects are greater than 10 years and we are unable to set a new due date because the difference between start date and due date is greater than 10 years. As an example

      • The sending IP (136.143.188.15) is listed on spamrl.com as a source of spam.

        Hi, it just two day when i am using zoho mail for my business domain, today i was sending email and found that message "The sending IP (136.143.188.15) is listed on https://spamrl.com as a source of spam" I hope to know how this will affect the delivery

      • Changing a Single-Line Text field into a Multi-line Field without losing data

        Is it possible to change a Single-Line Text field into a Multi-line Field without losing data. I have a module with data for which I would like to change a single-line field into a multi-line field but I'm worried it might delete the pre-existing da

      • Webhook - Google Sheets

        I have 2 forms that are both integrated with Google Sheets. I've set up a webhook to pull form 1 data from Google Sheets to prefill data in Form 2. The issue I have is that the forms name fields are First Name & Last Name but the Google sheets integration

      • Verified Mark Certificate

        Hello Dears, Can anyone help and check my mail or direct me to the desired person who can add the verification tag to my mail https://www.zoho.com/blog/mail/email-authentication-with-bimi.html

      • Appointment booking is temporarily unavailable

        Embeded Zoho booking page in my WordPress website. When someone starts a booking, after choosing time and date, an error appears before payment - "Appointment booking is temporarily unavailable due to restricted settings." Used the embeded code given

      • Cannot connect to 365 business calendar and Teams, says personal but it is not.

        hi I have a number of users connected to their 365 business accounts. Adding a new user and it thinks hes got 365 personal edition. He does not.... Anyone know what's going on. Trying for days now. Bookings go into his MS calendar but as its thinks its

      • Limited review (/questions) for Bookings 2.0

        Hi all, I'm writing this review of Bookings 2.0 for two reasons: 1) it may be of interest to others, and 2) I'd like to be corrected if I'm wrong on any points. It's a very limited review, i.e. the things that have stood out as relevant, and particularly

      • Zoho Bookings - Reserve with Google

        Does Zoho Bookings plan to to integrate with Reserve with Google?

      • Tip #3: How to change your booking page language

        Displaying your booking page in your target audience's language can greatly increase customer satisfaction. By speaking their language, you will help customers feel more comfortable scheduling with you and create a stronger connection with them. Let's

      • Bigin Android app update: Zoho Books integration

        Hello everyone! We’re excited to introduce Zoho Books integration on the Bigin Android App. Once the integration is completed in the web(bigin.zoho.com), the Zoho Books tab will be visible in detail View of Contacts, Companies, and Pipeline records. The

      • Bigin Android app update: Alerts while creating tasks outside of working days, conflicting events and calls.

        Hello everyone! In the most recent version of the Bigin Android app, we have brought in support to display an alert if task is being scheduled outside of the working days. Also, when scheduling an event or call in the Activities module, a conflict alert

      • Email in each module

        We have a contact ,module which then has a link to customer assets which in turn the asset has a multiple link to service visits. When we link assets to customers we choose by name and it brings over the associate email via the lookup. Great feature.

      • Bigin update: Link email messages to pipeline records.

        Hello everyone! In the latest version of the Bigin iOS(v1.11.9) and macOS(1.8.9) app, we have brought in support for an option to link email to pipeline records. This helps you to view emails specific to a deal, especially when a contact is associated

      • Bigin Android app update: Custom buttons and widgets

        Hello everyone! We are excited to introduce custom buttons and widgets on the Bigin Android app. Widgets: A widget is a customizable UI component in Bigin that improves efficiency and user experience. It lets businesses embed components, streamline interactions,

      • Biometric Access Support on Zoho Vault Desktop App

        Is there any plans to add biometric authentication (fingerprint, face recognition) for Vault desktop apps (Windows/macOS) to enhance security and ease of access. I would love to hear other members view on this

      • Zoho Sheet for Desktop

        Does Zoho plans to develop a Desktop version of Sheet that installs on the computer like was done with Writer?

      • Create Assemblies API Assistance

        I am using the Create Assemblies API documented here https://www.zoho.com/inventory/api/v1/compositeitems/#create-assemblies , however I'm getting the following error. {"code":1048,"message":"Sorry, there was an internal error. Please contact {0} for

      • Zoho Sheet - Desktop App or Offline

        Since Zoho Docs is now available as a desktop app and offline, when is a realistic ETA for Sheet to have the same functionality?I am surprised this was not laucned at the same time as Docs.

      • Collective-booking event not added to all staff calendars

        We assign two staff to certain events. When the client books this event, it adds it to one staff calendar (the 'organiser') but not the other. How can I ensure all staff assigned to a collective booking get the event in their calendar? (A side note: it

      • Project Management Bulletin: October, 2025

        Every need leads to innovation. Project Management tools were developed out of sheer necessity to drive large projects. With wide usage, the specifications grew precise, and so did the refinement. Over years we’ve crafted one of the best project management

      • Email Recall Feature In Zoho Mail Which Should Also Work For Outside Organisation Members

        Add a feature to recall or undo sending an email within a configurable short time window (e.g., 30 seconds to 2 minutes) after hitting send, similar to Gmail’s undo send. Currently the sent email can not be recall If the recipient is not from within your

      • Next Page