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

    • Zoho Books and TRAINING SALES receipt label for eTims?

      Hi, Can Zoho Books implement TRAINING SALES receipts and push them to eTims for test? In other words how can we send to Zoho or even create in Zoho training mode invoices and TEST the workflow POS>Zoho Books>eTims and back without actually registering

    • Reporting Tags and COGS

      Is there any way to get COGS recorded against reporting tags? The use cases seems very straightforward to me. If I'm running a P/L report against a specific reporting tag (I use mine for customer type, but it could be used for regions, etc.), the revenue

    • Hide Custom Fields for Customers or Vendors

      For whatever reason, all custom fields added to the Customer module also get added to the Vendor module. This leads to a clunky experience for users, as many custom fields we add only apply to one or the other. There should be a "hide" option to hide

    • Onboarding process

      I urgently need onboarding support. My account still shows trial period.

    • Detailed General Ledger - Display Transaction Description in Reports

      Hi Zoho Team, I'm currently using Zoho Books and have a question regarding the Detailed General Ledger report. When we enter a description or narration in transactions (Bills, Journal Entries, Expenses, etc.), the report does not display this description.

    • Zoho Mail Does Not Integrate with Analytics

      Hello everyone, Just wanted to make a quick post about the problem with zoho mail. Currently it does not connect to Zoho Analytics, which I think is crazy considering both of these applications have existed for a long period of time. Even zoho voice a

    • Net ##th Terms (e.g. due on the following 15th)

      I have a client who pays me twice monthly per our contract. It would be helpful to have terms on my invoices where the invoice is due on the 15th or the 30th of the same or the following month.

    • View Answer Bot conversations?

      We are trialing Zia and are experimenting with Answer Bot on our knowledge base. So far so good! Management asks me if it is possible to view Answer Bot conversations, the purpose being to look over its shoulder and confirm that it is working as des

    • Project status update visibility within a project

      Currently the only place within Zoho projects to see status updates for a given project is actually not in the project it's self it's in the Collaboration section and then by searching for a given project and clicking on the status tab. It would be great

    • Using custom CRM fields

      I have created a series of fields in the Deals module that need to be linked to fields in a contract I have customized. I can only see how to map standard fields, not the custom ones. How do I do this?

    • Como limitar o Zia Agent?

      Geralmente quando estamos criando um agente de IA no ZIa Agent Studio, colocamos o que ele deve fazer, utilizando as instruções que colocamos no Knowledge Base. Mas como colocamos limites que não devem ser ultrapassados? Para isso utilizamos os Guardrails,

    • An important update for Zoho Cliq desktop users

      The latest version of the Zoho Cliq desktop app (v1.8.0) will no longer be supported on macOS 10.15 Catalina and earlier versions. This is because the framework we use (Electron) no longer supports some older macOS versions. If you’re using macOS 10.15

    • All new Address Field in Zoho CRM: maintain structured and accurate address inputs

      Availability Update: 29 September 2025: It's currently available for all new sign-ups and for existing Zoho CRM orgs which are in the Professional edition exclusively for IN DC users. 2 March 2026: Available to users in all DCs except US and EU DC. 24

    • Zoho Flow - Zoho Desk trigger "Ticket created or updated" overrides Department

      Just in case anyone else has this issue. We had a Zoho Flow with the Zoho Desk trigger "Ticket created or updated". In the trigger I had selected a Department (Sales). What happens is that the Department ID (Sales) is submitted as part of the request

    • Layout rules in Zoho FSM

      As titled, is there an item in the pipeline or an ETA for the implementation of layout rules in Zoho FSM? Similar to how they work in Zoho CRM https://help.zoho.com/portal/en/kb/crm/customize-crm-account/customizing-page-layouts/articles/create-conditional-layouts

    • 2026 Product Roadmap and Upcoming Features

      This is your guide to what is coming in Zoho Vertical Studio throughout 2026. We’ll update this post throughout the year as items move from development to release, and as and when new initiatives are added. Once a feature is released, it will be reflected

    • Introducing Canvas templates: Design once, apply everywhere

      Greetings all! We're happy to introduce Canvas templates, a Forms view enhancement that enables you to design form layouts just once and apply them seamlessly across multiple modules. Imagine you use five CRM modules (Contacts, Deals, Leads, and more),

    • Zoho Projects - Will there ever be a send email feature in Zoho Project?

      Hi team, Are there plans to or will there ever be a sendemail feature in Zoho Projects, brining it in line with other similar platforms like Asana, ClickUp and Monday? I know that you can add comments via email to a specific task, but I believe this only

    • Why cant i see the Campaigns module in my Zoho app

      I am on the ZOHO CRM Standard edition. I can clearly see and use the Campaign module when viewing the ZOHO CRM desktop. When I switch to my phone, the Campaign Module does not show. I have gone through all the settings I can think of, but I still can't

    • 📣 Ask the team behind Zoho SalesIQ: Summer '26 Q&A

      Hi everyone! Following our recent webinars, Summer '26 Release: What's New in Zoho SalesIQ—where we walked you through all the new features, what they do, and how they work—and Driving the AI Evolution: Building Smarter Customer Experiences with Zoho

    • Always display images from this sender – Is this feature available?

      In Zoho mail, I had my "Load external images" setting set to "Ask me", and that's fine. That's the setting I prefer. What's not fine though is I always need to tick "Display now" for each email I get, regardless if I've done that multiple times from several

    • Set Custom Icon for Custom Modules in new Zoho CRM UI

    • Displayed sample tracking for multi branch setup.

      We have multiple branches and one of the biggest challenges for us to be able to track if a particular item is in display or not. I am shooting in the dark but I am wondering if there is a solution for the following : Each product used for display is

    • How do I migrate from Office 365 to Zoho Mail?

      Check out Advik Email Migration Wizard, this software is specially developed to move mailboxes from Office 365 to Zoho Webmail. In addition you can migrate from Gmail, Yahoo, Rediffmail and 80+ webmail servers to ZOHO MAIL. Isn't it amazing? This is an all in one email migration solution. Steps to export emails from Office 365 to Zoho Webmail are as follows; Run Advik Email Migration Tool in your system. Select Office 365 as source and enter its login credentials. Select mailbox folders and choose

    • Connection Issues

      Morning. Seems like a few of my colleagues that are offsite are having issues with connection to cliq, even when their internet is working perfectly fine and only 1 person onsite has issues. Can you please explain? Thanks

    • Goals API - Zoho People

      Hi Team, I would like to get the API details for retrieving organisation-wise Goals from Zoho People. Currently, I am able to retrieve individual employee goals using the following API: https://people.zoho.com/api/v3/performance/goal/{emp_id} However,

    • Backorder process review - Automating Removal of Sales Order from "On Hold" When PO is Received

      Hello Zoho Inventory Team, Currently, sales orders in On Hold status are released only when the bill for the purchase order is created. In our workflow, it would be much more efficient if the sales order could automatically move out of On Hold as soon

    • Cliq iOS can't see shared screen

      Hello, I had this morning a video call with a colleague. She is using Cliq Desktop MacOS and wanted to share her screen with me. I'm on iPad. I noticed, while she shared her screen, I could only see her video, but not the shared screen... Does Cliq iOS is able to display shared screen, or is it somewhere else to be found ? Regards

    • Which Is the best online store to buy office furniture in Australia ?

      The most important part of your office is the office furniture. Your office is not complete when you have not put the required furniture in place. You need a furniture in your office so that you and your employees have desks, tables, and chairs which

    • Add "Product Code" as available column and search criteria for Assemblies

      Hi Zoho Community. For product (item) assemblies, it would be helpful to be able to create a custom view search criteria that limits the view by product code or perhaps product category. Currently, Product Code is not an available option to display as

    • What's New - July 2026 | Zoho Backstage

      Hello everyone, We hope you’re having an expectation-exceeding event experience! We’ve been hard at work bringing you a bunch of enhancements designed to make event management even easier. Let’s take a look at what’s new in Zoho Backstage. Export delivery

    • Delete Field that is used in a Zoho Flow connection

      I'm trying to delete a Field used in a Webhook created by Zoho Flow with CRM Connection and i get the following alert: When going to the alert i get to the following issue, can't edit it since its been deployed by a pluggin But yes i have here the prompted

    • Zoho Books | Product updates | August 2026

      Hello users, July has been an exciting month for Zoho Books! This month, we're excited to introduce HTML PDF Templates, Placeholders as Pills, expanded approval workflows for Sales Returns and Journals, and significant compliance updates across the India,

    • Q3 USA ZUG Meetups - Build AI Agents with Zoho

      Hi everyone! What if you could build your own AI agent from scratch in just one session? That's exactly what we're going to do at the upcoming ZUG Meetups across the United States, where you'll get hands-on experience with Zia Agents and explore how AI

    • Data Export is forcing Creation/Modified date just like reports

      The data export now forces you to select a created or modified date. There is not an All-Time option. This severely cripples the whole function of data export for audit purposes. If the data export (or reports for that matter), requires a date, there

    • Default ticket template in helpcenter

      Hello, I have a web form and a ticket template created. How can I make that my default ticket template? If an user clicks New ticket or create a ticket, I want that template to be the default one. Thank you for the time and info.

    • Zia Agents looks promising, but I still cannot deploy my first agent or connect WhatsApp after weeks of support tickets

      Hi Everyone, I am posting here because I am stuck and need practical help from someone who has successfully deployed a Zia Agent with WhatsApp. Zia Agents looks like a very promising product. I have watched the platform expand quickly, and I have noticed

    • Valid characters for use in email addresses using Zoho's apps/APIs

      We have found an issue with the + sign character in zoho subs - we are allowed to create a customer with an email address that has a plus sign but the API doesn't allow the + so the billing portal is not created. We are going to prevent users from using

    • Feature Request – Per-Channel Pre-Chat Form Controls

      We'd like the ability to enable/disable the pre-chat form on a per-channel basis, rather than having a single global setting. On the website widget, asking for name and email before chat starts makes sense. On WhatsApp, however, email isn't necessary

    • Remove the mandatory Name Card buttons (or at least make them optional)

      Please remove the mandatory Name Card buttons (or at least make them optional) A recent change to the Name Card in Zoho SalesIQ (currently affecting WhatsApp) introduced mandatory buttons before a visitor can provide their name. I believe this change

    • Next Page