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

    • Simultaneous use of WhatsApp Account in SalesIQ and ZohoDesk

      Hi, We have only one number registered in Meta, it's possible use same account for two apps? All times here we try is stopping in SalesIQ. Regards,

    • External lookup fields to synchronise with Analytics

      Hello. I suggest adding external lookup custom fields to the Zoho Analytics integration settings. Currently, these types of fields are not available for synchronisation, so they cannot be used to generate reports with related tables in Analytics. Thank

    • We should have an option to Toggle Off KB Article Links in AI Answer Bot Replies

      Hi everyone, I'm creating this topic to share a feature idea that I think would improve the customer experience when using the AI Answer Bot for self-service. The Current Behavior (The Problem) Currently, when the AI Answer Bot generates a summary or

    • Boot Loop After Removing Service from Client via Admin

      We have multiple laptops experiencing a boot loop / unable to login after the Zoho Remote service was removed from their machine remotely via the desktop client. The Windows sign-in screen is not available, and users are unable to login. This seems like

    • Request Backend Correction — Domains Mapped to Same Help Center (Multi-Brand Setup Failure)

      Hello Zoho Desk Support Team, I need assistance correcting a domain-to-brand mapping issue in our Zoho Desk instance (The Blue Ribbon Project). Both of our verified domains currently point to the same Help Center instead of separate brand portals. Current

    • is there any option to enable the participants interact - can write on the screen, while the screen is shared by the host?

      this is most expected features - for teaching children. is there any option to enable the participants interact - can write on the screen, while the screen is shared by the host?

    • How to disable the Login button in Desk Helpcenter

      Hey there, I'm testing out whether the help center within Zoho Desk could replace our existing Customer FAQ. I tried to customize the themes for the public help center frontend, but stumbled across the login button in the navigation bar. Is there any

    • Subforms in stateless forms

      I think the title says it all. We need to be able to add subforms to stateless forms. Currently the only workaround is to create a Form and delete each record upon submission of the form. I need to build an interface to update our inventory. Basically

    • Standard Payment Term is not pulled from account to quotation

      Hey Team There seems to be something off. I do have "Net 30" as my default payment term in Zoho Books for my customers. If, from the customer overview or quote section, I create a new Quotation, the payment terms field stays blank and doesn't get the

    • Best way to display complex Bookings Consultation Descriptions on Zoho Site?

      I am a new user so apologies if this has been asked before. I couldn't find any answers in the forum. We offer 18 complex Consultations to our subscribers. Our current platform lets me put detail on these Consultations thoroughly (200-300 words) during

    • Gmail is ramping up its email sender policy as of November 2025

      Hello marketers, As you may be aware, Gmail introduced a guideline for bulk senders starting February 2024. If not, here's a quick refresher straight from Google: After this policy was announced first in 2023 and soft-implemented in February 2024, we

    • Modifying iframe data of Zoho booking iframe

      Hello, I have integrated a Zoho Bookings embedded iframe into my website. Currently, I am pre-filling the booking form with default values as part of our process flow. However, I want to ensure that if an input field is already populated with a default

    • Zoho CRM Workflow and Function Backup Options

      Hi everyone! I have been able to make several backups of my CRM data and noticed that the Workflows and Functions are not included in these backups. To my knowledge, there is no backup feature for workflows and functions, which is problematic in of itself.

    • Enhance Sign CRM integration

      Hello all, I'm working on a custom Deluge script to enhance the integration between Zoho CRM and Sign by using a writer merge template for additional flexibility. I want to replicate the post-sign document integration that exists between CRM and Sign

    • YouTube Live streaming? how to? Zoom has this feature, built-in. Can't find it on zoho meetings.

      YouTube Live streaming? how to? Zoom has this feature, built-in. Can't find it on zoho meetings.

    • Is or will be possible to associate meeting transcription and summary, made by Zia, to meeting/contact/account record in CRM?

      Would be useful to keep context and track jobs, better if it will be auto

    • Desk Field Not Showing in Analytics

      Hi there, I recently added a field to our Zoho Desk Ticket Information. I went and added the data retrospectively to the tickets. It is also marked as required, so all new tickets cannot be closed off without it being filled in. When I try to run a report

    • Export data using advanced export options and customizable settings

      Hello everyone, The user interface for exporting data has been revamped with updates to make data exports more flexible and efficient for users. These updates not only enhance usability but also bring advanced capabilities to help users extract precise

    • Moving data from one pipeline to another

      Hey all, I've got some complex pipelines to build and I'd like to seperate them into seperate pipelines rather than have one mammoth one. If I create 2 pipelines, is there any easy way to use the output of Pipeline1 to be the input into Pipeline2? Or

    • How to export/find all deluge code.

      Hi, I have a large app wich contains several forms, reports, html views, I need to find thow my application if any contains specific word, I could find it manually by editing app and see on every section(field code, on succes, on load, etc) but I would like to do it faster. Is there a way to at least export it to a file the whole deluge code on my application?

    • zoho performance

      OVERALL CONFIGURATION OF ZOHO PERFORMANCE Quarterly performance review Self rating and scoring Manager rating and scoring

    • Have Some Bugs in Zoho CRM Ask Zia Assistant

      Hi Support Team, I have found some bugs in Zoho CRM Ask Zia Feature Please Check below screenshot, insight option is showing twice i think its in early access that's why its have some bugs .

    • COD with Partial payment

      Two reasons why we need COD with partial payment option. 1) Since we deal heavy weight products our shipping costs are too high. If shipment is rejected by customer we incur huge loss. 2) Some competitors place fake orders with different names and return

    • Slicers are now available in Zoho Sheet—filter your data interactively

      At Zoho Sheet, we diligently track user requests and feedback. In line with this, based on extensive user requests, we've integrated Slicers to pivot tables and are delighted to announce its release. Slicers are interactive visual filters that have add,

    • Resizing a Record Template Background Inage

      Hi everyone, I have an issue which I can't seem to resolve: Basically, I'm designing a record template in certificate form. I've specified A5 landscape. I've set my background image the same dimensions with total pixels at 443,520. Whatever I try, when

    • Updated font library: New font styles and custom font options in Zoho Sheet

      Zoho Sheet's font library now supports 500+ font styles in 60+ languages! The updated font library is stacked with new font styles, and some of the previously available font styles have been replaced with equivalent options. There are two ways you can

    • Introducing Data Bars: Graphically represent changes in data within the cells

      Conditional formatting has helped millions of spreadsheet users analyze and highlight their data more efficiently. In addition to the classic rules, color scales, and icon sets available in Zoho Sheet, you can now apply Data Bars, a convenient method

    • Default Font Size in Desk

      How do I set my default font size in Desk? It takes me about 45 minutes to find the place to set it, then, when I sign out of Zoho and log back in, it's back to font 10 again. Seems like this would be simple, but like everything with Zoho, it's buried

    • Tip #19 - Create checkbox tracker in your spreadsheet

      Hello Sheet users! We are here with yet another tip to help you get the most out of Zoho Sheet. Spreadsheets can be used to handle a variety of tasks, but ever tried using checkboxes to track the progress of your action items dynamically? Here's a sample

    • Tip #20 - Three things you probably didn't know you can do with picklists

      Hello Zoho Sheet users! We’re back with another quick tip to help you make your spreadsheets smarter. Picklists are a great tool to maintain consistency in your spreadsheet. Manually entering data is time-consuming and often leaves typos and irregular

    • Per Level Approval for admins

      We need Process admins like Zoho CRM in Zoho Books for per stage approval Currently in books, admins only have the option for Final Approval But for example, in cases like when an employee is on leave, we can't just approval one level we only have option

    • Feature enhancement: Highlight rows based on a cell value

      Hello Sheet users, We're excited to announce a new feature enhacement, shaped directly by your valuable feedback! As you might know, conditional formatting is a great tool for anyone dealing with large data sets. Previously, if you’ve ever wanted to draw

    • Updating custom fields in Zoho Projects

      Hi I am wondering if anyone has experience with custom fields in Zoho Projects. I am struggling to update the field using either deluge or the api endpoint. My code is: //custom_Map = map(); custom_Map = {"UDF_DOUBLE_1":"0.27"}; update_Map = map(); update_Map.put("custom_fields",custom_Map.toList());

    • Markdown for Desk?

      Hi, my company wants to use markdown for formatting text in Desk (in all modules there, especially Tickets and Helpcenter). Zoho already offers use of markdown in several products (see https://help.zoho.com/portal/en/kb/backstage/microsite-guide/formatting-with-markdown/articles/formatting-with-markdo)

    • Change Currency symbol

      I would like to change the way our currency displays when printed on quotes, invoices and purchase orders. Currently, we have Australian Dollars AUD as our Home Currency. The only two symbol choices available for this currency are "AU $" or "AUD". I would

    • Calendar not working

      Are we the only ones. On any browser we cannot click on any of our calendar appointments and get them to open. They just make the browser loop. WE have reached out and have been told they are working on it. The office staff are really stuck. The point

    • Tip of the week #16 - Search and filter threads based on criteria

      Zoho TeamInbox lets you search and filter threads with any information that you have about the thread. You just have to input the criteria and Zoho TeamInbox will list all the threads that match the condition.   Firstly, there is a global search you can

    • WhatsApp Message Template Quick Reply Buttons

      Hello, I created my first Message Template to overcome the 24-hr messaging window and it was approved by WhatsApp/Meta. When I go to Meta, I also see that template brought from Zoho Desk, and used it via Zoho Desk IM. However, I notice that when in Meta's

    • Account in Quick View Filter

      I have a report that I often run against a specific Account. Every time, I have to go into the edit menu and change the Advanced Filter. I would prefer to use the Quick View Filter, but it does not allow me to use the one and only field that makes any

    • Collapsible Sections & Section Navigation Needed

      The flexibility of Zoho CRM has expanded greatly in the last few years, to the point that a leads module is now permissible to contain up to 350 fields. We don't use that many, but we are using 168 fields which are broken apart into 18 different sections.

    • Next Page