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 #197: Frequently Asked Questions on GraphQL APIs

  🎊 Nearing 200th Kaizen Post – We want to hear from you! 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 #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.

• Celebrating 200 posts of Kaizen! Share your ideas for the milestone post

  Hello Developers, We launched the Kaizen series in 2019 to share helpful content to support your Zoho CRM development journey. Staying true to its spirit—Kaizen Series: Continuous Improvement for Developer Experience—we've shared everything from FAQs

• Kaizen #193: Creating different fields in Zoho CRM through API

  🎊 Nearing 200th Kaizen Post – We want to hear from you! 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.

• Client Script | Update - Introducing Commands in Client Script!

  Have you ever wished you could trigger Client Script from contexts other than just the supported pages and events? Have you ever wanted to leverage the advantage of Client Script at your finger tip? Discover the power of Client Script - Commands! Commands

• Recent Topics

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

• workflow not working in subform

  I have the following code in a subform which works perfectly when i use the form alone but when i use the form as a subform within another main form it does not work. I have read something about using row but i just cant seem to figure out what to change

• Fetch data from another table into a form field

  I have spent the day trying to work this out so i thought i would use the forum for the first time. I have two forms in the same application and when a user selects a customer name from a drop down field and would like the customer number field in the

• Record comment filter

  Hi - I have a calendar app that we use to track tasks. I have the calendar view set up so that the logged in user only sees the record if they are assigned to the task. BUT there are instances when someone is @ mentioned in the record when they are not

• How to View Part Inventory and Warehouse Location When Creating a Work Order in Zoho FSM

  Hi everyone, We’re currently setting up Zoho FSM and would like to improve how our team selects parts when creating a Work Order. Right now, when we add a part or item to a Work Order, we can select it from our Zoho Inventory list but we don’t see any

• FSM too slow today !!

  Anybody else with problem today to loading FSM (WO, AP etc.)?

• Not able to Sign In in Zoho OneAuth in Windows 10

  I recently reset my Windows 10 system, after the reset when I downloaded the OAuth app and tried to Sign In It threw an error at me. Error: Token Fetch Error. Message: Object Reference not set to an instance of an object I have attached the screenshot

• Mapping a custom preferred date field in the estimate with the native field in the workorder

  Hi Zoho, I created a field in the estimate : "Preferred Date 1", to give the ability to my support agent to add a preferred date while viewing the client's estimate. However, in the conversion mapping (Estimate to Workorder), I'm unable to map my custom

• 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

• Delegates - Access to approved reports

  We realized that delegates do not have access to reports after they are approved. Many users ask questions of their delegates about past expense reports and the delegates can't see this information. Please allow delegates see all expense report activity,

• Split functionality - Admins need ability to do this

  Admins should be able to split an expense at any point of the process prior to approval. The split is very helpful for our account coding, but to have to go back to a user and ask them to split an invoice that they simply want paid is a bit of an in

• Is there a way to request a password?

  We add customers info into the vaults and I wanted to see if we could do some sort of "file request" like how dropbox offers with files. It would be awesome if a customer could go to a link and input a "title, username, password, url" all securely and it then shows up in our team vault or something. Not sure if that is safe, but it's the best I can think of to be semi scalable and obviously better than sending emails. I am open to another idea, just thought this would be a great feature.  Thanks,

• Single Task Report

  I'd like a report or a way to print to PDF the task detail page. I'd like at least the Task Information section but I'd also like to see the Activity Stream, Status Timeline and Comments. I'd like to export the record and save it as a PDF. I'd like the

• Auto-response for closed tickets

  Hi, We sometimes have users that (presumably) search their email inbox for the last correspondence with us and just hit reply - even if it's a 6 month old ticket... - this then re-opens the 6 month old ticket because of the ticket number in the email's subject. Yes, it's easy to 'Split as new Ticket', but I'd like something automated to respond to the user saying "this ticket has already been resolved and closed, please submit a new ticket". What's the best way to achieve this? Thanks, Ed

• How to Push Zoho Desk time logged to Zoho Projects?

  I am on the last leg of my journey of finally automating time tracking, payments, and invoicing for my minutes based contact center company - I just have one final step to solve - I need time logged in zoho desk to add time a project which is associated

• Cannot access KB within Help Center

  Im working with my boss to customize our knowledge base, but for some reason I can see the KB tab, and see the KB categories, but I cannot access the articles within the KB. We have been troubleshooting for weeks, and we have all permissions set up, customers

• Export to excel stored amounts as text instead of numbers or accounting

  Good Afternoon, We have a quarterly billing report that we generate from our Requests. It exports to excel. However if we need to add a formula (something as simple as a sum of the column), it doesn't read the dollar amounts because the export stores

• why my account is private?

  when i post on zohodesk see only agent only

• Getting ZOHO Invoice certified in Portugal?

  Hello, We are ZOHO partners in Portugal and here, all the invoice software has to be certified by the government and ZOHO Invoice still isn´t certified. Any plans? Btw, we can help on this process, since we have a client that knows how to get the software certified. Thank you.

• 500 Internal Server Error

  I have been trying to create my first app in Creator, but have been getting the 500: Internal Server Error. When I used the Create New Application link, it gave me the error after naming the application. After logging out, and back in, the application that I created was in the list, but when I try to open it to start creating my app, it gives me the 500: Internal Server Error. Please help! Also, I tried making my named app public, but I even get the error when trying to do that.

• Client Script | Update - Client Script Support For Portals

  Dear All! We are excited to announce the highly anticipated feature: Client Script support for Portals. We understand that many of you have been eagerly awaiting this enhancement, and we are pleased to inform you that this support is now live for all

• Professional Plan not activated after payment

  I purchased the Professional Plan for 11 users (Subscription ID: RPEU2000980748325) on 12 September 2025, and the payment has been successfully processed. However, even after more than 24 hours, my CRM account still shows “Upgrade” and behaves like a

• how to edit the converted lead records?

  so I can fetch the converted leads records using API (COQL), using this endpoint https://www.zohoapis.com/crm/v5/coql and using COQL filter Converted__s=true for some reasons I need to change the value from a field in a converted lead record. When I try

• Auto Update Event Field Value on Create/Edit

  Hi there, I know this question has been posted multiple times and I've been trying many of the proposed similar scripts for a while now but nothing seems to work... what might I do wrong? The error I receive is this: Value given for the variable 'meetingId'

• 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

• Constant color of a legend value

  It would be nice if we can set a constant color/pattern to a value when creating a chart. We would often use the same value in different graph options and I always have to copy the color that we've set to a certain value from a previous graph to make

• Zoho Pagesense really this slow??? 5s delay...

  I put the pagesense on my website (hosted by webflow and fast) and it caused a 5s delay to load. do other people face similar delays?

• Payroll and BAS ( Australian tax report format )

  Hello , I am evaluating Zoho Books and I find the interface very intuitive and straight forward. My company is currently using Quickbooks Premier the Australian version. Before we can consider moving the service we would need to have the following addressed : 1.Payroll 2.BAS ( business activity statement ) for tax purposes 3.Some form of local backup and possible export of data to a widely accepted format. Regards Codrin Mitin

• Problem with Email an invoice with multiple attachments using API

  I have an invoice with 3 attachments. When I send an email manually using the UI, everything works correctly. I receive an email with three attachments. The problem occurs when I try to initiate sending an email using the API. The email comes with only

• Page Layouts for Standard Modules like CRM

  For standard modules like quotes, invoices, purchase orders, etc, it would be a great feature to be able to create custom page layouts with custom fields in Zoho Books similar to how you can in Zoho CRM. For example, and my current use case, I have a

• Non-depreciating fixed asset

  Hi! There are non-depreciable fixed assets (e.g. land). It would be very useful to be able to create a new type of fixed asset (within the fixed assets module) with a ‘No depreciation’ depreciation method. There is always the option of recording land

• Fixed asset management

  I want to know if there is any individual module for fixed assets management

• One time sale item in billing automatically detects as service

  if i have some items which i don't want to add in my "item" list because its sold only for one time. but when i type item name in invoice, it (system) automatically takes it as a service and despite of HSN , it shows SAC code to be entered. if its selectable i.e. either item or service , it would be very helpful and a must have feature.

• Project template after project creation

  How can I apply a project template AFTER the project has been created?

• convert the project to templet

  i have some deployment ME product for different customer , i need to create a fixed template for use it rather then keeping creating this template every time

• Seriously - Create multiple contacts for leads, (With Company as lead) Zoho CRM

  In Zoho CRM, considering a comapny as a lead, you need us to allow addition of more than one contact. Currently the Lead Section is missing "Add contact" feature which is available in "Accounts". When you know that a particular lead can have multiple

• Related Module in Sharing Rules

  Zoho CRM team recently added the feature to filter records by Related Records It will be really beneficial if we can have this feature for Sharing Rules as well

• Assignment Thresholds Resetting After Lead Conversion

  Hello everyone, We're facing an issue with Zoho CRM's lead assignment thresholds that makes them unsuitable for our workflow. I'm hoping to find a potential workaround or solution from the community. Here’s our current process: A new lead is created automatically

• Zoho CRM Analytics - Allow To Reorder Dashboards

  I would like to suggest that you add the ability to reorder dashboards in the Analytics Module. I can see that this has been requested some time ago, the latest 9 years ago. I am not sure if this is a big or small endeavor, but such a small fix can go

• Territory view for custom modules?

  I have recently activated territories however I can't seem to find how to use territories for custom modules? These modules have territories:  Contacts /  Accounts / Opportunities These modules don't have territories:   Buildings (custom module) and 

• Next Page