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

    • Convert HTML to PDF & Send as Email Attachments in Zoho Creator (Deluge)

      This approach is useful for sending welcome letters, instructions, or promotional offers after order creation. // 1. Define the variables using the submitted input customerName = input.Customer_Name1; orderID = input.ID; customerEmail = input.Email_Address; //

    • Redirect after submission is not working after a few submission

      I have setup redirect url correctly and everything works as expected. However, it seems that there's a limit to the number of submissions before the redirect stops working. After the "limit" is reached, the page redirects to a seemingly zoho hosted page,

    • Enhancement Request for Multi-Asset Work Order Feature

      Hello Latha, Thank you for your continued support. The multi-asset Work Order feature is extremely helpful. I did some testing based on our requirements, and during the process, I noticed a few areas where we need your team’s support to improve the feature

    • Marketing Tip #8: Run limited-time offers

      Exclusive offers that don't last long make shoppers purchase right away instead of waiting. Run a flash sale or limited-time discount to convert interest into sales. Try this today: Set up a "Buy X Get Y" coupon in Zoho Commerce valid for a limited time

    • Add Option to Mass Dispatch by User

      Hello! We are using the dispatch console to dispatch service appointments to our service ressources. Right now, the process is our dispatcher verifies each ressource's route for the day and dispatches it after validation. Sadly, there doesn't seem to

    • Free webinar: Zoho Sign unwrapped – 2025 in review

      Hey there! 2025 is coming to an end, and this year has been all about AI. Join our exclusive year-end webinar, where we'll walk you through the features that went live in 2025, provide answers to your questions, and give you a sneak peek on what to expect

    • Zoho Projects - Email notification relabelling of modules not present on default templates

      Hi Projects Team, I noticed that in the default email template notification, the word "bug" was not renamed to the lable I am using in my system. As many users may used the Bugs modules for various purposes including Changes, Revisions, Issues, etc...

    • Publish to LinkedIn via API

      Hi, Is it possible to publish a job opening to LinkedIn (paid job slots) if creating a job opening via api / deluge function? Or is the user required to manually publish via the job boards process? Many Thanks Adrian

    • Include the "Added Email ID" to the Filters of a Report

      Hi, With a Report and lots of entries, a normal thing is to filter entries by the submitter, but that is not included in the Auto Filter of Reports and you can't add a custom filter to a Report without specifying the actual value. I would like to be able

    • Loops in Deluge

      Hi, Can someone tell me how I do a simple loop in deluge? For example, if i have a variable "X" containing a number of loops to perform, i would like to perform an action X amount of times. X = 10; do while (Y < X){       // ... do something } to further explain, the equivalent in PHP of what i am trying to acheive would be: $X = 20; for($Y = 1; $Y < $X; $Y++ ){       // ... do something } Thanks

    • I am facing a problem with an if-else condition

      If I use if, else if, and else conditions in Deluge with the same variable name, sometimes the variable causes an error because the same variable name is present in every block

    • Zoho Projects - Reply by email to @ mentions posted on the Feed.

      When mentioning someone on the Feed (Status), it would be great if that mentioned person could reply to the email notification to update the Feed thread.

    • Zoho Analytics Bulk Api Import json Data

      HI, I’m trying to bulk-update rows in Zoho Analytics, and below are the request and response details. I’d like to understand the required parameters for constructing a bulk API request to import or update data in a table using Deluge. Any guidance on

    • Record Overseas Transactions Along with CC charges

      Hi All, We receive payments via stripe in multiple currencies and stripe takes around 2.5% fees. The amount is settled in INR into our local bank. What should be the currency of the income account used for Stripe payments? Here is a sample flow that we

    • Product Updates in Zoho Workplace applications | October 2025

      Hello Workplace Community, Let’s take a look at the new features and enhancements that went live across all Workplace applications this October. Zoho Mail Create Signature from Compose window You can now effortlessly create a Signature using the Create

    • Subform data to Sheets

      I have been trying to setup a Zoho Flow automation to bring any Subform input to a Zoho Sheets but it seems impossible to post the subform entries to a Zoho Sheet. Is there any way to do it via Zoho Sheet API? https://www.zoho.com/sheet/help/api/v2/#CONTENT-Insert-row-with-JSON-data

    • Edit Contact Roles in the Potentials Mod

      New to ZOHO so I need some help. I work the same people on different projects concurrency. Their contact info remains the same but their role changes from project to project. In the Potential Mod you can pick contacts and assign a Role to them. I know

    • Is there a way to disable the Activity Reminders Pop-Up Window every time I log in?

      Just wondering if there is a setting to disable the window from opening every time I open my CRM? Thanks Chris

    • Auto-sync field of lookup value

      This feature has been requested many times in the discussion Field of Lookup Announcement and this post aims to track it separately. At the moment the value of a 'field of lookup' is a snapshot but once the parent lookup field is updated the values diverge.

    • Hide fields only for creation

      Hello, I'd like to hide some fields only during the creation of a contact in Zoho CRM. In fact I have some fields that are automatically calculated thanks to an automation, so when my users create a contact I don't want them to fill those fields. I know

    • Rich-text fields in Zoho CRM

      Hello everyone, We're thrilled to announce an important enhancement that will significantly enhance the readability and formatting capabilities of your information: rich text options for multi-line fields. With this update, you can now enjoy a more versatile

    • Font Size 11 - Zoho CRM Email Templates

      Our company communicates with our vendors exclusively using Calibri Font Size 11, as this is the standard formatting for professional emails. Since the CRM only allows for the selection of font sizes 10 & 12, we have been unable to utilize the CRM email

    • Error 400 Booking

      Added a custom domain to Booking. Am Getting a SSL Error that has some other domain on the SSL and giving a 400 error. Followed instructions and it stated it verified our domain.. However it is not working. Please Help!

    • Error AS101 when adding new email alias

      Hi, I am trying to add apple@(mydomain).com The error AS101 is shown while I try to add the alias.

    • New feature request: Allow copy of email message to another folder

      Hello Zoho team, This is a suggested new feature to allow copy an email message to either another folder or the same folder. Within the same Zoho account. This is not a support request about "label". This is a suggested new feature to allow copies of

    • Link Purchase Order to Deal

      Zoho Books directly syncs with contacts, vendors and products in Zoho CRM including field mapping. Is there any way to associate vendor purchase orders with deals, so that we can calculate our profit margin for each deal with connected sales invoices

    • Zoho Projects - Email Notifications for Feed Updates

      Hi Projects Team, I'm working with a client who wants a simple way to communicate with their customers on projects. Getting the customer to add comments to Tasks or Bug records is not ideal, as we need a way which is easy with minimal training, and has

    • Zoho Analytics Export API

      Hi Team, I’m working on some integration tasks and wanted to confirm if it’s possible to retrieve a Zoho Analytics table as JSON data using a Deluge script. I’ve already stored my custom data from multiple sources and combined it into a single source.

    • Loading Project Balances in ZOHO Books for each project

      Hello, What is the best method for loading project balances actual and budget into ZOHO books to provide tracking to our project managers. We have projects and federal awards (also treated as projects) which span multiple years. We are converting from

    • Request to Remove LinkedIn Verification from My Emai

      I would like to submit a complaint regarding my Zoho Mail account. I previously used this email address to verify a LinkedIn account, but that LinkedIn account has now been closed. I need to remove or cancel the verification associated with the closed

    • Introducing the all-new email parser!

      Greetings, We are pleased to introduce to you, a brand-new, upgraded version of the Zoho CRM Email Parser, which is packed with fresh features and has been completely redesigned to meet latest customers needs and their business requirements. On that note,

    • Zoho Projects - Refine Access to Collaboration Menu

      Hi Projects Team, I noticed that Calendar, Chat and Meeting menu options in the Collaboration section are visible to client users, even when they don't have access to the features. This could be confusing and frustrating, because if it's there you expect

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

    • Extracting Images from a Zoho Creator Report into a Pages

      If you’ve uploaded images in a form and can see them in your report, you might also want to display those same images inside a Page (custom HTML page). This is useful for dashboards, profile pages, or any place where images should be visible dynamically

    • Zoho is blocking emails I subscribe to from one sender

      About 4 months ago I stopped receiving newsletters that I subscribe to from @thedispatch.com. They tell me that zoho's server is blocking them. I've added them to my contacts list, but they're not even reaching my inbox. I don't know how to troubleshoot

    • Introducing Formula Fields for performing dynamic calculations

      Greetings, With the Formula Field, you can generate numerical calculations using provided functions and available fields, enabling you to derive dynamic data. You can utilize mathematical formulas to populate results based on the provided inputs. This

    • Inactive Items - Make Less Prominent by Default

      Currently, when one marks an Item as "Inactive", it really doesn't do much of anything to hide it or get it out of the way. Search and reporting within Finance should, by default, hide inactive Items from standard reports, searches, etc. If one specifically

    • Items should display under specific warehouse

      I have configured the multi warehouse but it show all the items under all warehouse which is not correct according to our business logic, so i want that items should only display under that specific warehouse not under all the warehouses not even with zero quantity. Some items should be common but not all so is there any option for that purpose so i can specific the items to its warehouse. Regards

    • How to calculate GST based on "Ship To Address"

      We into the interior designing work, providing "Works Contract Services" to our clients across India. We are registered under GST in Maharashtra state. For works contract services as per the GST rule, we need to decide place of supply based on "Ship to

    • I NEED TO NUMBER TO TEXT NO HERE

      =NUMBERTEXT NEEED

    • Next Page