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

    • Kaizen #226: Using ZRC in Client Script

      Hello everyone! Welcome to another week of Kaizen. In today's post, lets see what is ZRC (Zoho Request Client) and how we can use ZRC methods in Client Script to get inputs from a Salesperson and update the Lead status with a single button click. In this

    • Kaizen #222 - Client Script Support for Notes Related List

      Hello everyone! Welcome to another week of Kaizen. The final Kaizen post of the year 2025 is here! With the new Client Script support for the Notes Related List, you can validate, enrich, and manage notes across modules. In this post, we’ll explore how

    • 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

    • Recent Topics

    • Topics not loading in individual contact records in Zoho Marketing Automation

      When working correctly, an individual contact record in ZMA shows a "Topics" section in the "Subscription" tab of the individual record. However, in 2+ different Zoho accounts and different browsers, the "Topics" section doesn't load and instead it spins

    • Can't view nor download attachments

      Me and a number of people I know suddenly stopped being able to either view nor download attachments that arrive in new emails we receive since this morning. Older emails work just fine and we can download/view them. Zoho Mail states the it wasn't able

    • [IDEA] Bring Layout - Conditional Rules and Client Scripts to Zoho Books

      The problem We run Zoho Books with two e-invoicing integrations: myData (Greek tax authority, AADE) and PEPPOL (EU e-invoicing). Between the two, our Invoice form carries a large number of custom fields — document type codes, VAT exemption categories,

    • Linking the Overview window between reports on a dashboard

      Is there a way to link the Overview window for two or more charts on a dashboard? We have several dashboards where users often want to set the window for 3 or 4 reports to the same time period. Doing it manually is time-consuming and cumbersome, but I

    • Subforms and automation

      If a user updates a field how do we create an automation etc. We have a field for returned parts and i want to get an email when that field is ticked. How please as Zoho tells me no automation on subforms. The Reason- Why having waited for ever for FSM

    • "code":3001 ["Failed to update data."]

      I would like to seek your expertise - I might be wrong on my approach also.. I highly appreciate your advice. 1 problem remains is when a new row was added on the existing one [from another form that trigger upon Successful form submission ], it gets

    • BUG: If you put "Blueprint" at the top of Workqueue, tab switching leads to long loading and no display

    • WORKFLOW ISSUE: Zoho Finance Extension

      Workflows are no longer triggering in my extension. This is true for the testing environment and 5 other organizations it is installed on. There are no conditions set for the workflow, and this is true for both create and delete related actions. Workflows

    • Displaying only unread tickets in ticket view

      Hello, I was wondering if someone might be able to help me with this one. We use filters to display our ticket list, typically using a saved filter which displays the tickets which are overdue or due today. What I'd really like is another filter that

    • Drive Zoho CRM adoption and usage through our native integration with Zoho DAP

      You chose Zoho CRM for its depth: its powerful automation, its rich analytics, and its extensive customizability. But there's a hidden last mile in every rollout: the gap between the software's capabilities and your team's daily execution. When new hires

    • Moving from Office365 to Zoho Mail

      I have few mailboxes on Office365. One of the mailbox is coming up for renewal. How can I move this mailbox to Zoho Mail and continue to have other mail boxes continue to use Office365 mail? Thanks, -Naveen

    • Best sales insights for target accounts?

      Question for all the sales power-users out there: I would like to gain insights from Zoho CRM for a rotating list of target accounts. Each Outside Salesperson has 5 target accounts, and they can change these targets quarterly with management approval.

    • WhatsApp Vendors

      Hello, so WhatsApp works with the below, mainly with the customer side modules. Can we get functionality on the vendor side modules? WhatsApp is often the preferred method of communication with some vendors. Credit Notes Payment Receipts Sales Receipts

    • Text on Zoho Sign confirmation dialouge is very small compared to text used everywhere else on Zoho Sign.

      I've reported multiple times through Zoho's support email that the text on this notification is very small in contrast to all the other text on the Zoho Sign app. I think it's a bug and it just needs the font size to be increased. It's very minor but

    • Time Zone is incorrect

      Time zone is not working properly...I've checked it twice. I'm eastern U.S. time it's currently 12:22 pm EST. CRM shows 3:22 pm EST.

    • SalesIQ's Summer '26 Release: For The Moments That Matter

      Every customer journey is made up of moments. The moment someone discovers your business. The moment they need help. The moment you decide to reach out. The moment a simple chat turns into something more. And the moments that continue long after the conversation

    • Over-the-Air (OTA) Updates for V3 Attendee Apps | Zoho Backstage

      Imagine discovering a critical bug or a last-minute schedule change right before a major event, but knowing it will take 24 to 48 hours just to get an app store approval. That stress is now a thing of the past. We have officially rolled out Over-the-Air

    • Please Remove the Confirmation Popup

      Currently, every time a recruiter changes the status of a candidate in Zoho Recruit, a popup confirmation appears that requires clicking “OK, Got it” before proceeding. This creates unnecessary friction in the workflow, especially for users handling high

    • Zoho Projects: Q2 Updates 2026

      Dear Users, During the first quarter, we launched our most advanced version of Zoho Projects, namely Zoho Projects Infinity. With support for Custom Modules, Custom Dashboards & Reports, along with built-in AI tools, we enabled users to create their own

    • Overview on users IMAP settings

      We have about 30 users who all have the channels/email/email configuration/IMAP integration/O365 enabled and emails are synchronized. Here my problem: Passwords for the email accounts are expiring on individual bases and most of the users forget to update

    • What is a realistic turnaround time for account review for ZeptoMail?

      On signing up it said 2-3 business days. I am on business-day 6 and have had zero contact of any kind. No follow-up questions, no approval or decline. Attempts to "leave a message" or use the "Contact Us" form have just vanished without a trace. It still

    • crm to books

      We currently sync CRM Contacts to Zoho Books Customers using two-way sync. We now wish to change to "Accounts & their Contacts". What happens to existing Books customers? Will they be merged with CRM Accounts, duplicated, left unchanged, or recreated?

    • Is there any way to have Dataprep ingest RSS?

      As stated by the title. Does the Zoho environment offer tools that I can use to, directly or using workarounds, have Dataprep ingest an RSS feed? Thanks

    • Alternate color rows

      After I changed the background color to a dark gray and changed the alternate rows to a light gray. I have discovered that I can no longer change the text in the light gray rows to Bold.

    • Tax/Vat Number Field As Standard - Customer & Vendor

      Hello, when are you'll going to have the customer & vendor tax/vat number as a standard field under the relevant profile pages? I find it strange that after 6 years of using Zoho Inventory that I still have to use a custom field for a tax/vat number,

    • Is there a way to sync Tags between CRM and Campaigns/Marketing Hub?

      I wonder if there is a way to synch the tags between CRM and Marketing-Hub / Campaigns?

    • Restricting coupon codes and plans to specific customers

      Having the ability to restrict coupon codes, plans and add ons to specific customers (new or existing) e.g. sending an invite link out to a certain customer or allowing a certain group of customers the ability to use a certain promo code or sign up to

    • Coupon Management Lacks functionality

      Hey Zoho Team, Let me start of by saying I'm a huge fan of the entire Zoho suite. I have a couple of thoughts about the way coupons are handled and believe there they are in need of some improvement. There are a couple of key issues: 1. Coupons need to

    • Free Webinar Alert! Zoho Mail + Zoho CRM: Turn inbox replies into CRM deals

      Hello Zoho Community! Are your sales conversations happening in Zoho Mail while your customer data lives in Zoho CRM? Join our upcoming webinar to learn how integrating the two can help you automate follow-ups, capture leads faster, and keep every customer

    • Assign account to a ticket created with WebToCase

      We use Zoho Desk. Our large client uses WebToCase form to submit tickets. I have two workflow rules: When a contact is created and its email ends with example.com, it runs a custom function, which assigns the new contact the right account Example with

    • Introducing the Employee Portal for internal job posting

      Employee referrals and internal applications are one of the most trusted hiring channels. But in many organizations, employees only hear about openings through messages, word of mouth, or after the role has already been open for a while. When employees

    • Connect ZOHO social with Google Data Studio and download data from ZOHO social

      Dear ZOHO team, I am writing this message to enquire about how to connect ZOHO social with Google data studio since our company would like to use Google data studio to generate reports. Is it a way to download data from ZOHO social? Best regards, Chris

    • Marketing Tip #42: Keep policy pages updated and accessible

      Policy pages may not be the most exciting part of your store, but they play a big role in building trust. Before buying, many customers look for information on shipping, returns, refunds, privacy, and terms. If these pages are missing, outdated, or hard

    • Extend the Image Choice Field

      Hi, The New Yes/No field is great for what it does, and the Image Choice Field is good but could be better with some functions from the Yes/No field. Take an example, rather than just Yes/No you want Yes/No/Maybe (Or more than 3 choices), but unlike the

    • Migrate from Zoho Mail to G Suite

      I am unable to find any documentation on how one can migrate from Zoho Mail to another platform, like G Suite or Office 365. Please point me to the right documentation. Thank you.

    • Help: Capture full page URL in hidden field when same Zoho Form is embedded on multiple pages (iframe)

      Hi all, Goal Use one Zoho Form across multiple pages and record the exact page URL (incl. subdomain + path + hash) where the user submitted it. Example pages: https://www.example.com/cargo/ https://www.example.com/cargo/containers/#contact https://cargo.example.com/auto/

    • The All New Attendee App | Zoho Backstage

      The Zoho Backstage attendee app is the primary touchpoint for attendees, speakers, exhibitors, and sponsors during an event. It helps participants access event information, manage their schedules, connect with other participants, engage with exhibitors

    • Department Customization Copy/Paste

      Hello! I love the new customization of the layouts, rules and templates! However, we have several "departments" that operate similar and as I'm updating either ticket layout or workflow rules, I'm finding that I have to do it in each department. I would

    • Ticket status does not update upon layout change

      Hi team, I'm encountering an issue with ticket layouts and Blueprints in Zoho Desk and would like to understand whether this is expected behavior or a bug. Scenario I have two ticket layouts: Helpdesk Integration The Integration layout has its default

    • The 3.1 biggest problems with Kiosk right now

      I can see a lot of promise in Kiosk, but it currently has limited functionality that makes it a bit of an ugly duckling. It's great at some things, but woeful at others, meaning people must rely on multiple tools within CRM for their business processes.

    • Next Page