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

Creating a Client Script

Client Script Events

Client Script IDE

Use cases of Client Script

Cheers!

• Topic Participants

• Maadhari M

  

• nick

• Athul P

• PJ

• Sunderjan Siddharth

  

• 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

• Cannot connect mail accounts to Thunderbird

  Hi Support - I'm attempting to add my mail accounts to Thunderbird but I'm getting an unable to login to server error. I tried to use the password associated with my account I received the unable to login error. So I went into Zoho Accounts and generate

• Alias Email Id already exists

  Hi, I just verified my domain sesque (dot) com and now I am trying to create the admin account using admin (at) sesque (dot) com, but I am getting an error saying "Alias Email Id already exists". I used to have another Zoho account with this email address,

• Unable to connect to smtp server, connection timed out

  Hi Team, I am facing below issue, while sending out emails from thunderbird client. It used to work, facing this issue from morning. Error: Sending of the message failed. The message could not be sent because the connection to Outgoing server (SMTP) smtp.zoho.com

• javax.mail.authenticationfailedexception 535 authentication failed

  Hi, I am facing 535 authentication failed error when trying to send email from zoho desktop as well as in webmail. Can you suggest to fix this issue,. Regards, Rekha

• Client Portal ZOHO ONE

  Dear Zoho one is fantastic option for companies but it seems to me that it is still an aggregation of aps let me explain I have zoho books with client portal so client access their invoice then I have zoho project with client portal so they can access their project but not their invoice without another URL another LOGIN Are you planning in creating a beautiful UI portal for client so we can control access to client in one location to multiple aps at least unify project and invoice aps that would

• Zoho Creator customer portal users

  Hi, I'm in a Zoho One subscription with our company. I'm running a project now that involves creating a Zoho Creater application and using the Zoho Creator Customer Portal.  At most we need 25 customer portal users. In our Zoho One plan we only get 3

• DKIM Verification Failed (Namecheap)

  Hi! I have already set up the TXT records in Namecheap but I keep getting the "Verification Failed" pop up. Was wondering if I'm the only one who has this problem and can anyone help me with this? Thanks!

• Emails stuck in Queue

  Hi there, Since yesterday I have a few out going emails stuck in a queue. It say it will auto retry sending however nothing is happening. It seems to be affecting roughly 50% of my outgoing emails. Please help Thanks

• Soft Bounce from transational emails from BREVO (Sendinblue)

  I manage the website of a client who uses your EMAIL service for the domain floranativadobrasil.com. And I use the BREVO email service, previously called SendinBlue, to send transactional emails about events specific to the website. All emails sent to

• Ability to Edit YouTube Video Title, Description & Thumbnail After Publishing

  Hi Zoho Social Team, How are you? We would like to request an enhancement to Zoho Social that enables users to edit YouTube video details after the video has already been published. Your team confirmed that while Zoho Social currently allows editing the

• Introducing Multi-Asset Support in Work Orders, Estimates, and Service Appointments

  We’re excited to announce a highly requested enhancement in Zoho FSM — you can now associate multiple assets with Work Orders, Estimates, and Service Appointments. This update brings more clarity, flexibility, and control to your field service operations,

• Getting an error Address not found Your message wasn't delivered

  Hey, I'm trying to configure zoho mail for my website https://businessentity.org/ The email is meredith.karter@businessentity.org I'm able to successfully send the mails but when someone sends an email to above mail, this error shoots up: Address not

• Support Uploading YouTube Videos Longer Than 60 Minutes

  Hi Zoho Social Team, How are you? We would like to request support for uploading YouTube videos longer than 60 minutes directly through Zoho Social. Your support team informed us that Zoho Social currently cannot upload videos over 60 minutes due to “API

• Need Faster Help? Try Live Chat Support

  Hello there, We understand that sometimes, whether you’re facing an issue, exploring a feature, or need quick clarification, sending an email and waiting for a response just doesn’t cut it. You need answers, and you need them now. That’s exactly why we

• Can't deactivate Spell Check

  Hi Community, right now I'm using the Zoho Mail Desktop-Software. So far, so good.. many possibilities. Overall very nice. What is extremely annoying right now, is that we are not able to deactivate the Spell Check feature. And we are barely able to focus

• Zoho Toolkit Email Signature Generator

  I'm having real issues with the email signature generator with no matter where I host the photo, Zoho doesn't seem to show the photo on the link provided?

• Company Policy Upload - Request All EE to review and sign

  How can I upload policies into Zoho People and have the employees review them and sign off saying they agree, etc.? Also, if I make a revision to a policy, I would like that changed or updated policy to be distributed or have the employees notified that

• Zoho Sign Global Settings vs. Template and Document

  Hello, We are running into an issue on a current use case. We already use Zoho Sign. Now that KBA is available, we want to begin using it in our tax delivery process, by allowing clients to sign electronically, but also download a copy of their return

• Zoho Mail Desktop Crashes on Linux - Ubuntu 24 LTS

  Hi, I have been trying to run the desktop app on Ubuntu for the past few day with no luck. I have tried both the .deb package and the appImage. When I attempt to open the app. It just crashes immediately. The crash error dialog appeared once and I cant

• Can't login to Zoho mail

  I'm logged into Zoho but when I try to go in zoho mail I get: Invalid request! The input passed is invalid or the URL is invoked without valid parameters. Please check your input and try again. I just set up my mx records and stuff with namecheap a few

• Zoho IP blocked by SpamCop

  Hi, Many of my emails are blocked and I receive this:  INVALID_ADDRESS, ERROR_CODE :550, ERROR_CODE :spamcop.mimecast.org Blocked - see https://www.spamcop.net/bl.shtml?136.143.188.51. - https://community.mimecast.com/docs/DOC-1369#550 [DGwIYPPSOfWI

• Differences between Zoho Books and Zoho Billing

  Without a long drawn out process to compare these. If you were looking at these Books and Billing, what made you opt for one and not the other. Thanks

• Custom validation in CRM schema

  Validation rules in CRM layouts work nicely, good docs by @Kiran Karthik P https://help.zoho.com/portal/en/kb/crm/customize-crm-account/validation-rules/articles/create-validation-rules I'd prefer validating data input 'closer to the schema'

• No Ability to Rename Record Template PDFs in SendMail Task

  As highlighted previously in this post, we still have to deal with the limitation of not being able to rename a record template when sent as a PDF using the SendMail Task. This creates unnecessary complexity for what should be a simple operation, and

• Server error when trying to Data > Sort > Custom Sort

  Been using Data > Sort > Custom Sort for a while, now it has suddenly stopped working. When selecting the same data range and trying to execute, I get "Sorry! There was a problem saving your last edit. Please try again."

• To Assign a genrated pdf to a file upload field using delug

  content = "<html><body>HTML Content on page One <div style='page-break-after:always'></div> HTML Content on page Two </body></html>"; file = zoho.file.convertToPDF(content); file.setFileName("Name of the file"); <variableName> = <FormLinkName>[ID == input.ID];

• TArgets To Accounts (Modules)

  How can i set sale target to Customers (Accounts Module)

• Breaking barriers with multilingual WhatsApp templates in IM

  Ever wondered what it feels like to be greeted in your own language by a brand you love? A “Welcome!” feels nice, but a “¡Bienvenido!” or “स्वागत है!” feels personal. In today’s global world, conversations often need to cross both time zones and cross

• Super Admin Logging in as another User

  How can a Super Admin login as another user. For example, I have a sales rep that is having issues with their Accounts and I want to view their Zoho Account with out having to do a GTM and sharing screens. Moderation Update (8th Aug 2025): We are working

• How to share private Opportunities with whole org at an account level

  Opportunities are currently set to private, so our sales team only sees their own opportunities, along with their manager and upper leadership. The need is the ability for the rest of the Org to see the opportunities at an account level, not within the

• New in Smart Prompt: Record Assistant for contextual assistance, and support for new AI models

  Smart Prompt helps teams stay informed and move faster by providing relevant suggestions where work happens in CRM. With this update, Smart Prompt becomes more adaptable to your organization’s AI preferences. You can now choose which Large Language Model

• Problema Verificacion con proveedor NIC.AR

  No puedo realizar la verificación del correo, he seguido los pasos indicados y configurado los MX. Y no puedo verificar el correo. He leido en el foro que otros han tenido el mismo problema. Alguno pudo solucionarlo?

• How to remove some users in zoho accounts

  How to remove some users in Zoho accounts.

• Unified Inbox for all, including fetched mails

  I fetch mails from different third-parties mailboxes. But I need to switch mailbox too see fetched mails. It's strange. All mailboxes have one shared disk space for own mail and fetched mail, but why do we need to switch mailbox (on the left bottom) to

• 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

• Users Not Automatically Being Added To WorkDrive Team

  I have already created a ticket for this issue, but the support team doesn't seem to understand what's happening. Our organization started with a trial of Zoho Workplace around November 10, 2025. I created 10 users, including myself. I sent out the invites,

• Synchronization between Gmail and Zoho Mail

  Hello! I am using Zoho Mail within the Zoho One platform. I have completed the basic setup and added all the required DNS records with our domain provider. Our goal is to set up two-way synchronization between our current Gmail inbox and Zoho Mail, but

• IMAP login problem

  I have my domain hosted with zoho @wilson.ie I have added a new user and have enabled IMAP access to this user account The user can login to zoho mail on the web. When we enter the server settings into Outlook as per below, Outlook cannot login to the

• Contact data removes Account data when creating a quote

  Hi, Our customer has address fields in their quote layout which should be the address of the Account. They prefill the information, adding the account name - the address data is populated as per what is in the account - great. However when they then add

• Changes to subform in Zoho CRM Portal Timeline History Unavailable

  Hi Support Team, We have noticed a feature limitation in the Zoho CRM portal. We created a portal for our vendors to edit records directly, but when vendors make updates, the Modified Time and Date fields are not being updated. Additionally, these updates

• Next Page