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

    Nederlandse Hulpbronnen


      • Recent Topics

      • Multiple organizations under Zoho One

        Hello. I have a long and complicated question. I have a Zoho One account and want to set it up to serve the needs of 6 organizations under the same company. Some of the Zoho One users need to be able to work in more than 1 organization’s CRM and other
      • Error AS101 when adding new email alias

        Hi, I am trying to add apple@(mydomain).com The error AS101 is shown while I try to add the alias.
      • Unbundle feature for composite items

        We receive composite items from our vendors and sell them either individually or create other composite items out of them. So, there is a lot of bundling and unbundling involved with our composite items. Previously, this feature was supported in form
      • Regarding the integration of Apollo.io with Zoho crm.

        I have been seeing for the last 3 months that your Apollo.io beta version is available in Zoho Flow, and this application has not gone live yet. We requested this 2 months ago, but you guys said that 'we are working on it,' and when we search on Google
      • 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
      • Next Page