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

      • Tip #7: Customize the appointment confirmation page

        A confirmation page plays a crucial role in creating the first impression, as that's where customers land when booking with you. It shows your brand identity, engages your audience, and drives more conversions. Yet, this section is often overlooked when

      • Add Image Upload Field to Zoho Bookings Registration Form

        Hi, We would like to request the addition of an image upload field to the Zoho Bookings registration form. Currently, Zoho Bookings only supports text-based fields (e.g., Single Line, Multi-Line, Email, Checkbox, Dropdown, Radio Button, and Date), but

      • Meeting integration with Otter.ai

        Would love for an integration with an AI transcription service like Otter.ai to be integrated with Zoho Meeting. Thanks

      • [Free webinar] AI agents in Zoho Creator - Creator Tech Connect

        Hello everyone, We’re excited to invite you to another edition of the Creator Tech Connect webinar. About Creator Tech Connect The Creator Tech Connect series is a free monthly webinar featuring in-depth technical sessions designed for developers, administrators,

      • プロフェッショナルプランで、見積作成時に原価と利益率を確認する代替案について

        現在、Zoho CRMのプロフェッショナルプランを利用しています。 海外から輸入した商品を販売しており、商品ごとに原価が異なるため、見積書を作成する際（または保存直後）に、その見積の原価合計と利益率を確認したいと考えています。 しかし、現在のプランではDeluge（関数）が使えず、見積書の「商品詳細」の項目をカスタマイズすることもできません。 1,見積作成画面で商品の原価を参照できるような、標準機能での工夫はありますか？ 2,レポート機能を使って、見積単位での原価・利益を算出する方法はありますか？

      • Announcing Zoho Sheet desktop app for macOS and Windows (Beta)

        Hello Sheet users, We know you’ve been waiting for this one. It has always been the top priority on our roadmap to provide a single native desktop app for macOS and Windows that works both online and offline. Today, we are excited to announce that the

      • Pasting Images in Zoho Desk ignores cursor location

        My team has reported an issue which started recently where when we paste an image into a new or existing reply or comment, the pasted image seems to ignore the current cursor location instead paste itself at the last character present in the reply/comment,

      • How to create a directory report from one-to-many relationship

        Hi all, Newbie here. I'm converting an Access DB to Creator. I've learned Forms are tables and Reports are used to edit table rows, not Forms. I've got the data loaded and can maintain it with the Reports already done. I've done filtering and sorting,

      • SalesIQ Email Delivery Issues to Microsoft

        Is anyone else having delivery issues to Hotmail, Outlook, and Live inboxes when sending transcripts and replies via email from SalesIQ? We’ve detected that emails sent from SalesIQ to these accounts aren't arriving—they don’t even bounce back; they simply

      • 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

      • Moving Project Task to other parent not possible

        We are trying to move an existing Zoho Projects task to a different parent task via API. Example: Task ID: 289214000001385113 Current parent: 289214000001281044 New parent: 289214000001281045 We tested updating the task with: taskParam.put("parent_task_id",

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

      • Remove or hide default views

        I'm looking to only have the views pertinent to my organization. Is there a way to show only my custom views (or separate them to a different area or something)? If not, this should be a feature as switching from Zendesk we had this option...

      • Insert Template not inserting

        I have been using the "Insert Template" feature for years and I use it every single working day. Yesterday it was working fine. Today, on two different browsers (Chrome and Edge), I can select "Insert Template", select the template I want to insert, but

      • Add more than 7 sender addresses in campaigns

        I need to add at least 15 sender email addresses but am currently limited to 7. Please can you increase. Thank you

      • Email sent to Hotmail arrives to Spam

        I'm sending email tests to my Hotmail account and they arrives to the Spam folder all the time. My domain has been verified correctly. How can I fix it?

      • Hotmail

        I am sending an email to a hotmail, and this guy does not receive the email, either in his SPAM nor inbox. Can you help me? thanks!

      • Let’s Talk Recruit: Your pipeline is full. So why aren’t roles closing?

        Welcome back to Let’s Talk Recruit, where we break down hiring workflows into simple, actionable insights for recruiters. The focus this month is on what slows down your pipeline even when everything looks like it’s working. Picture this. You log in to

      • Search through email contents

        Is there a way to search through the email history of a lead? Meaning if among the 50 emails to a lead about different topics I want to find all the ones with the word "pizza" in the body of the email, is that possible? Thanks for your help, Hanan

      • Marketing Tip #9: Track your traffic sources

        Not all marketing channels work equally well. Knowing whether your visitors come from Google, Instagram, or email helps you focus on what actually drives sales. Try this today: Check your Zoho Commerce reports or connect Zoho PageSense to see your top

      • It Really Can Be This Simple

        Let's be honest.... Running a business already comes with enough moving parts. Invoices, payments, follow-ups, reminders, tracking who paid and who disappeared. It can slowly turn into a full-time admin job on its own, especially when you are a Sole Proprietor,

      • Huge confusion in zoho crm and zoho analytics

        Context => We have reporting based hierarchy in zoho crm and basically there will be one sales head and couple sales managers and 10 pre sales excutives divided between 2 sales managers we have maintained that in zoho crm and there is complex reporting

      • Zoho Books | Product updates | May 2026

        Hello users, We're back with the latest updates and enhancements we've rolled out in Zoho Books. From sales tax automation to scanning receipts for free, explore the updates designed to upgrade your bookkeeping experience. Sales Tax Automation [US & Canada

      • Update: [Issue fixed] Temporary access issue on Android and iOS devices

        Hello, Zoho Sheet users! We're aware that some of you are currently unable to open spreadsheet files from your Android and iOS devices. We extend our sincere apologies for the inconvenience caused. We're working on fixing the issue with highest priority

      • Action Required: Migrate Your SQL Server Connection

        Dear Users, Following our earlier communication on the upcoming Zoho Analytics security updates affecting Microsoft SQL Server connections, we have revised our recommended approach. The previously shared cipher suite configuration is no longer the recommended

      • Currency Change for Companies

        Hello FSM Team, We would like your assistance in changing the company currency for our UAE organization from AED to USD. Currently, all customers and users are configured with AED currency settings, and we would like to standardize the organization currency

      • Accrual Data - Zoho Books API

        Hi Team, When we integrate Zoho Books with Zoho Analytics, we usually receive a consolidated dataset called “Accrual Transactions,” which contains all types of transaction data. Could you please confirm whether it is possible to retrieve this same data

      • Bank Fees - Allow User to Choose Expense Account

        Bank fees from Customer Payments can only be debited against the system Bank Fees account due to hard-coding. The user should be able to select which expense account those fees are debited against. The use case is pretty straightforward. A business like

      • Showing Cost Price and Profit Margin in PDF

        Hi there, We use two different types of quotes in our company. One is a version for our clients that does not include cost or profit margin information, and the other is for our internal team that includes profit margin and cost. We are running into an

      • Side bar menu

        It would be great if you could stop the auto collapse of expanded menus when selecting a different module. It would save a lot of mouse clicks for a lot of users that frequently switch between sales & purchases as we do, it's easier to collapse them manually when not required !

      • Syncing zoho books into zoho crm

        I was wondering how I can use zoho books in crm as I have been using them separately and would like to sync the two. Is this possible and if so, how? Thanks

      • Remove horizontal scroll bar

        Is there any way to remove or hide the horizontal scroll bars on the iframe reports? I removed columns, but it still stays there.

      • Rich Text Type Format for Notes Field

        Has it been discussed or is there a way to insert a table in the notes field? We sometimes receive information in a table format, and it would be beneficial to have it in the same format as a note on a record. Moderation Update (12-May-26): We are working

      • Multiple Blueprints on different fields at the same time.

        It looks only 1 Blueprint can run at the same time, it makes sense for many Blueprints on the same field (Eg. Stage). But what about multiple Blueprints on "different" fields? the multiple options must be available. (Eg. Stage, Documents Status, Contract

      • Updating Sales orders on hold

        Surely updating irrelevant fields such as shipping date should be allowed when sales orders are awaiting back orders? Maybe the PO is going to be late arriving so we have to change the shipment date of the Sales order ! Not even allowed through the api - {"code":36014,"message":"Sales orders that have been shipped or on hold cannot be updated."}

      • sales IQ issue on website

        i integrated the zoho sales IQ code on the website but it is comming in distroted form i am sharing the screenshot below the website is bulit in wix platform

      • Contract to payment flow

        Hi everyone, I’m trying to set up a contract-to-payment flow and want to avoid duplicating invoices or customers in Zoho Books. The flow should be: contract generated from CRM, sent via Zoho Sign, client signs, deposit is paid, and the invoice should

      • Automated entries past the current month in a calendar report

        Hi all, I have an automation problem. I have a form which on successfull entry adds either 5 or 10 more of these entries with a slight change so our customers can see it throug a calendar report on the webiste. The entry put in manually shows up perfectly

      • Linking Contacts to Other Modules

        In creator, I've got a Contacts page with a lookup that searches Suppliers. Is there a way to have the contacts attached to the Suppliers modular as a list automatically, similar to the CRM version? It goes the other way. If I entered an Employee in the

      • Multiple Pipelines

        Is it possible to create multiple candidate pipelines?

      • Next Page