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

    • Working with dates and Function Field

      Hello friends! I'm trying to add days to a date, however the field function will always shows 00:00:00 after the resultant date. How can I display only the date, whithout the time? toDate(input.request_date.addDay(input.Prazo_acordado),"MM,d,yyyy") The code above will result something like "11-Feb-2020 00:00:00", but I want to display only "11-Feb-2020"

    • What's New in Zoho Analytics - November 2025

      We're thrilled to announce a significant update focused on expanding your data connectivity, enhancing visualization capabilities, and delivering a more powerful, intuitive, and performant analytics experience. Here’s a look at what’s new. Explore What's

    • Unable to send message;Reason:550 5.4.6 Unusual sending activity detected. Please try after sometime.

      Please help my account got blocked automatically, can you help me how to avoid it? Thanks so much

    • Accessing shared mailboxes through Trident (Windows)

      Hi, I have a created a couple of shared mailboxes. The mailboxes are showing up on the browser based Zoho workplace, but I cannot seem to figure out how to access my shared inboxes through Trident (Windows). Am I missing something or is this feature not

    • Unusual activity detected from this IP. Please try again after some time

      When i try to create new addresses on my account i am getting this error, it has been 24 hours now and i am still getting this error can anyone help

    • temporary system errorlouis

      J'essaye d'envoyer des mails avec mes 2 adresses mail qe nous avons sur le compte arthur@lepunch.fr et louis@lepunch.fr mais j'ai toujours le message temporaire system error, je reçois les mails mais impossible d'en envoyer a qui que ce soit

    • How to Cancel/Delete Queued Mail Merge?

      Hi. I just tried to do a mail merge before realizing there's a limit on number of sends. I accidentally sent one of my lists twice, and all of those emails are currently queued. Is there any way to cancel or delete a queued mail merge? Would love to be

    • Need to add a new admin for my domain

      Hello Zoho Support, I am the owner of the domain localeistanbul.com. The current super admin account (admin@localeistanbul.com) is not accessible. I do not want to reset or delete the existing account because I need to keep all existing emails. Please

    • Possible Fraud Site.

      Hello. I received a text with the sender's name as zoho, claiming that my account was at risk and that I should sign in at https://verify.zohomails.ru/signin to verify my account. I signed in on the web address above, and a few days later someone hacked

    • Zoho mail to Teaminbox

      Hello, We're searching for new mail program. Now I'm testing a bit with zoho mail and team inbox. My findings in the research: Pop mail throught zoho mail is almost instant. Any pop or imap via external provider takes a couple minutes to 15 minutes before

    • Crear tarea CRM con recordatorio desde Zoho Flow

      Hola, estoy intentando crear desde Zoho Flow una tarea en CRM. Lo he logrado hacer pero sin recordatorio, ya que no se como se debe escribir el string adecuado. He probado varias alternativas, pero ninguna me funcionó hasta ahora. - FREQ=NONE;ACTION=EMAIL;TRIGGER=DATE-TIME:${FechaVto}

    • 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

    • Inquiry Regarding Automated Assignment of Zoho TeamInbox Messages using Zoho Flow and Deluge

      Hello, Our company is currently using Zoho TeamInbox, and we are interested in automating the assignment of responsible parties using tools such as ZOHO Flow and Deluge. Is it possible to achieve this? Allow me to provide more details. Currently, when

    • Customizing Global Search Settings for All Users

      Hi Our team use the brilliant global search functionality within CRM many many times daily. But, we struggle with the out-of-the box columns that CRM gives you. We are always telling users to customize this look to more suit our business, to show the

    • Qwen to be the default open source Generative AI model in Zoho Desk

      Hello everyone, At Zoho Desk, we will make the latest Qwen (30B parameters) the default LLM for our Generative AI features, including Answer Bot, Reply Assistant, and others. As a subsequent step, we will discontinue support for Llama (8B parameters).

    • Condition based aggregate fields in subforms

      Hello everyone, We're excited to inform you about the latest enhancements made to our aggregate field capabilities in subforms; create aggregate fields based on conditions! An aggregate field is a column on which a mathematical function has been applied.

    • Upgrade Zoho Desk Agent-Side Answer Bot to GenAI

      Hello Zoho Desk Team, We hope you're doing well. Following the recent announcements and rollout of the GenAI-based Answer Bot in Zoho SalesIQ (Nova '25), we’d like to formally request a similar upgrade for the Answer Bot used by agents inside Zoho Desk.

    • Marketers' Space: The importance of warming up your sender domain

      Hello Marketers, Welcome back to yet another post! Today, we'll talk about why warming up your sender domain matters. Imagine you've recently started a business and want to share the news with your customers. You've designed a great email campaign using

    • An Exclusive Session for Zoho Desk Users: AI in Zoho Desk

      A Zoho Community Learning Initiative Hello everyone! This is an announcement for Zoho Desk users and anyone exploring Zoho Desk. With every nook and corner buzzing, "AI's here, AI's there," it's the right time for us to take a closer look at how the AI

    • Search Just Got Smarter in Notebook

      Hello there! Introducing Our New & Improved Search Experience! We heard your feedback! Many of you shared that our previous search had some challenges like • Inconsistent results across different clients • Limited accuracy in finding the right content

    • Client Portal ZOHO ONE

      Dear Zoho one is fantastic option for companies but it seems to me that it is still an aggregation of aps let me explain I have zoho books with client portal so client access their invoice then I have zoho project with client portal so they can access their project but not their invoice without another URL another LOGIN Are you planning in creating a beautiful UI portal for client so we can control access to client in one location to multiple aps at least unify project and invoice aps that would

    • Zoho Desk app update - AI Integration for IM Chats

      Hello everyone! We have now introduced AI integration for IM Chats within the Zoho Desk mobile app. To access the feature, please enable the 'Generative AI' settings on the desktop site(desk.zoho.com). Please refer to the help link attached below: Zoho

    • Open A.I assistant Connect with Zoho Desk instant Message Conversations

      I would like to know how do I connect my instant messenger in Zoho desk with my Open A.I Gpt Assistant. this is very easy to setup using the Salesiq Zobot but when it comes to Zoho Desk i cannot figure how to make the connection. Ideal workflow Customers

    • Cannot upgrade subscription plan due to payment error message

      Hi Zoho team, This is to request support on an issue I am facing during an upgrade I am trying to make to our company's yearly Zoho subscription. I am trying to add 3 more license to my plan and during the payment phase I get the below error as in the

    • Enhancing Zia's service with better contextual responses and article generation

      Hello everyone, We are enhancing Zia's Generative AI service to make your support experience smarter. Here's how: Increased accuracy with Qwen One of the key challenges in AI is delivering responses that are both contextually accurate and empathetic while

    • Zoho Desk app update: AI powered features

      Hello everyone! We’ve introduced various AI-powered services on the Zoho Desk app. Let's take a look at what's new. Generate Content: Generate Content uses AI to formulate responses based on the your query and provides a ready-to-use reply which can be

    • Passing the CRM

      Hi, I am hoping someone can help. I have a zoho form that has a CRM lookup field. I was hoping to send this to my publicly to clients via a text message and the form then attaches the signed form back to the custom module. This work absolutely fine when

    • Bulk update Archived Ticket

      Dear All We would like to update the "Category" values to the new filed. We found the archived Ticket seems to be don't support the bulk action. Do we have any way to update it. Finally, we would to generate a report for our ticket system. Regards I

    • SalesInbox

      Sorry for saying this but SalesInbox is a really mess. BIG FAIL. Bad UX and VERY bad IMAP sync. I don't know how can someone use this to be more productive. It's just the oposite. I'm trying to use SalesInbox for a while but sales people do not have just sales activities so we still have to came back to the mail app anyway. Folders of SalesInbox are not in sync with folders of mail server (wich syncs Ok to mobile) and vice-versa wich leads to double work as now you have to cleanup 3 inboxes (Mail

    • Channel Configuration and Default Channels

      There are some of the default fields that cannot be removed or changed. Examples are the social media ones, such as Facebook. It would be nice to be able to remove these fields as it would be confusing if someone selected this but it's not configure

    • Automating Employee Birthday Notifications in Zoho Cliq

      Have you ever missed a birthday and felt like the office Grinch? Fear not, the Cliq Developer Platform has got your back! With Zoho Cliq's Schedulers, you can be the office party-cipant who never forgets a single cake, balloon, or awkward rendition of

    • Delay function execute

      I've got a workflow which uses a webhook to send information to Flow, which in return updates a record in Creator. Problem is, by the time this has executed, the rest of my script has run and can't find the (yet to be) updated info in the record. Is there

    • Kiosk Button Actions

      I need to add an action to a Kiosk Button to loop me back to start the kiosk again and I am not sure what that looks like (function, etc.).

    • Support www.camcard.com

      Hi, Is it possible CRM Zoho have integrations with https://camcard.com/? Thanks Br, Andy

    • Option to Customize Career Site URL Without “/jobs/Careers”

      Dear Zoho Recruit Team, I hope you are doing well. We would like to request an enhancement to the Career Site URL structure in Zoho Recruit. In the old version of the career site, our URL was simply: 👉 https://jobs.domain.com However, after moving to

    • Can't make a document editable to anyone

      Hey everyone, I am using Zoho Workdrive and trying to share a document so that it is editable by anyone with the link. I am trying to convince people to shift from Google to Zoho, but they don't have accounts yet. When I try to change the share settings

    • Edit Default Print

      What I want to do is create / edit the "Default Print" template without changing the layout I'm using. Currently I can create "Email Templates" but I don't use them for emailing and getting to that selection takes multiple clicks. If an email template could be set to be the Default Print template that would be helpful. I'd also like to print these in bulk but don't see that option (there is a mail merge macro but that goes straight to emailing, not to print or PDF).

    • Widget shows error

      Hi， May I ask why below characters will be auto added into the widget link and how to solve this error? As my widget shows 404 error now. ?serviceOrigin=https%3A%2F%2Fcrm.zoho.com&frameorigin=https%3A%2F%2Fcrm.zoho.com

    • How to print envelope labels from Zoho CRM

      Can anybody give me any clue how to print envelope/package labels directly from Contacts view? Regards, Alexandru Moderation Update: The Canvas Print View, which also facilitates the formatting of mailing labels, is now available! Learn more here: Zoho

    • Data Import: New interface, improved field mapping, and more

      Hello everyone! We’ve redesigned the data import process to ensure accurate field alignment and verify that every column in the uploaded file maps correctly with Desk fields before import. Here's how: Streamlined Import Steps Importing data is now more

    • Next Page