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

    • Sent mail sort by date disappeared

      Hello, We used to be able to sort the emails by date in the sent folder, but this feature has recently disappeared. Can we bring it back?

    • Sync desktop folders instantly with WorkDrive TrueSync (Beta)

      Keeping your important files backed up and accessible has never been easier! With WorkDrive desktop app (TrueSync), you can now automatically sync specific desktop folders to WorkDrive Web, ensuring seamless, real-time updates across devices. Important:

    • [Integration Edition] Deluge Learning Series – Custom API with Deluge | November 2025

      We’re excited to conclude this four-month Integration Edition of the Deluge Learning Series: Session 1 – Integrating Zoho Apps with Deluge Using Built-In Integration Tasks Session 2 – Integrating Zoho Apps with Deluge Using invokeURL and invokeAPI Session

    • Customize portal email template

      Can i fetch only first name of the user in portal email template instead of the below code Hi ${User.FULL_NAME}

    • Important update: Enhanced security measures for account operations in Zoho Cliq

      Greetings from the Zoho Cliq team! We’d like to share an important security update that has an influence on some admin actions such as password reset, MFA reset, and MFA backup code generation. What’s changing? With our latest security enhancements, these

    • Automate Backups

      This is a feature request. Consider adding an auto backup feature. Where when you turn it on, it will auto backup on the 15-day schedule. For additional consideration, allow for the export of module data via API calls. Thank you for your consideration.

    • Subform auto populate values

      Hi Team, I’m trying to retrieve values from Zoho People using API functions and dynamically populate them into a subform. For example, I’ve created a form with several fields that users will fill out. Based on their input, I need to fetch records from

    • Reupload and rename from one field to another field (file upload)

      Hi Everyone, Sorry, i have question to use invoke url for rename and reupload attachments file to another field. Tested on development mode. Zoho C6. Refer to https://www.zoho.com/creator/help/api/v2/upload-file.html look my error notification. Does anyone

    • Assign multiple departments to multiple helpcenters

      Hi there! I have a reseller company for a software and I'm using Zoho Desk as my helpcenter and ticket management system. The software is great and I would like to make a suggestion! With multi-branding activated, your departments that visible in help

    • Zoho Desk Training

      Hello, We've had Zoho desk for a while now, but we run into issues occasionally, and I was wondering if there was a customer who currently uses it and really enjoys the functionality, that would be wiling to chat with us?

    • Tips for Organizing Workflows and Improving Team Coordination in Zoho

      Hi everyone, I’m looking for some general advice on how different teams are organizing their daily work within Zoho’s apps. Our team recently expanded, and we’re trying to streamline how tasks, discussions, and documents are shared so everything stays

    • Batch/lot # and Storage bin location

      Hi I want to ask for a feature on Zoho inventory I own a warehouse and I've gone through different management software solutions with no luck until I found Zoho, it has been a game changer for my business with up to the minute information, I'm extremely happy with it. It's almost perfect. And I say Almost because the only thing missing for me (and I'm sure I'm not alone) is the need of being able to identify the lot number of my inventory and where it is located in the warehouse. Due to the nature

    • Prevent user from viewing all records?

      I have a report that is meant to be used by vendors to view only the records that are assigned to them. All the vendor information is stored in a separate application, so I need to call a function to get the current user's ID (not the zoho user ID). The report settings criteria doesn't support using function calls, so instead I'm embedding the report in an html page like this: if (thisapp.Global.CurrentUserIs("Vendor")) {       personID = common.getLoggedInPersonID();       query = "Assigned_Vendor.ID="

    • Series Label in the Legend

      My legend reads 'Series 1' and 'Series 2'. From everything I read online, Zoho is supposed to change the data names if it's formatted correctly. I have the proper labels on the top of the columns and the right range selected. I assume it's something in

    • Zoho Site pages not displaying in iframes

      I simply want to show a Zoho Site page inside an iframe on another non Zoho website. When testing this across many browsers, the iframe content simply does not appear. IE reports that the host does not allow their content to be displayed in iframes. Very disappointing. Is there a way around this please? Here is the URL of the page I would like to appear in an iframe. http://ips-properties-to-rent.zohosites.com

    • Issue with Creator's IF logic

      Hi, I found the following code produces unexpected results: if(-1.0 < 0.0000000) {       info "True"; } else {       info "False"; } if(-1.0 < 0.000000) {       info "True"; } else {       info "False"; } The output returned is: False True However, the

    • Zoho Inventory as connector in Zoho Creator

      Hello, It doesn't appear that Zoho Inventory is one of the many built in connectors in Zoho Creator? I see that there are non-Zoho inventory applications that have built in connectors such as Cin7, which leads me to believe that I'm missing something

    • Send Zoho Forms Link using Zoho CRM Email Templates

      I have set up Zoho Forms and CRM integration to pre-populate data from Zoho CRM to Zoho Forms. The setup is working fine. I have also created an email template in the Zoho CRM deals module to send Zoho forms links. So when I send an email using that template

    • Can I execute two 'functions' when completing a mail merge from CRM?

      Hi, I have set up a mail merge from CRM Deals to a template. I want a copy of this to be saved in Workdrive, and then a copy also saved back into the deal record from which the merge occurred. I can do both independent of each other, and managed to get

    • My go to On Load Client Script - Fast, efficient, and works for ALL profiles; Hides everything except initial fields

      This is my on Load client script that I use for Create pages. I use a modified version for Edit and Display pages which you can create yourself using the same basic structure that I will give you below. First up, the script. Below that will be an explanation

    • CRM x WorkDrive: File storage for new CRM signups is now powered by WorkDrive

      Availability Editions: All DCs: All Release plan: Released for new signups in all DCs. It will be enabled for existing users in a phased manner in the upcoming months. Help documentation: Documents in Zoho CRM Manage folders in Documents tab Manage files

    • Zoho Books Finance Modules Not Accessible in Zoho CRM Mobile App

      We have integrated Zoho CRM with Zoho Books using the Zoho Finance Suite integration. In the CRM web version, we can see the Finance modules (Estimates/Quotes, Invoices, Sales Orders, Items, Payments) and are able to create invoices and quotes directly

    • Custom Search using HTM+CSS Snippet

      Suppose I wanted to create my own list view using HTML and CSS snippets inside a Page with a custom search input at the top of the list (not the Search snippet). Without Javascript, is there a way to retrieve a user's entry from that search input and

    • 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

    • Mass Update of Lookup Fields not possible

      Hello List I've created a custom field for Leads and Contacts 'Current Campaign'. This is very Handy as I can filter leads and then related them to a campaign. Everything ready, but then I realized that mass update doesn't work for lookup fields... a

    • Zoho CRM Kiosk Upload Files

      Hello all, We are trying out Kiosks at the moment to see where it can fit best in our business. We are still a bit off in the application but lets say we will sort this out. My question is the following - when I create a Kiosk I can add "File Upload"

    • Double opt-in notifications and customizable confirmation messages for your webforms

      Dear CRM Community, We are excited to announce a major upgrade to our Webforms feature. You can now customize the confirmation message shown to your users who double opt-in from your webform and also customize your confirmation emails when they submit

    • Has Anyone successfully integrated Zoho and Sage Intact?

      Hey all, We’re evaluating Zoho One + Sage Intacct and I’m trying to connect with anyone who has actually implemented the two together.Specifically, I’d love to know: -- Which functions you kept in Zoho vs. Intacct (e.g., Product Catalog, AR/AP, invoicing,

    • Introducing Image Upload Field

      Hello everyone, In this post we will discuss about the benefits and usage of the Image upload field. The field is available for standard and custom modules.  Usage: This field can be used to upload a gallery of images to a record and share the record with peers or customers. The record can be made accessible to users outside of Zoho CRM via Portals, where they can upload the necessary images. Preview, editing, and deleting images: The uploaded images can be directly edited and saved from the record

    • Trigger a Workflow Function if an Attachment (Related List) has been added

      Hello, I have a Case Module with a related list which is Attachment. I want to trigger a workflow if I added an attachment. I've seen some topics about this in zoho community that was posted few months ago and based on the answers, there is no trigger

    • Free webinar alert on November 19 - Email driven strategies - Master personality based styles

      Hello Zoho Community! Want to make email management easier, smarter, and more you? We’ve got just the session for you! Join our interactive, game-based webinar to discover how Zoho Mail adapts to your personality and work style. Learn practical hacks,

    • Associate emails from both primary and secondary contacts to deal

      We need to associate emails from multiple contacts to a deal. Please advise how this can be achieved. At present, only emails from primary contacts can be associated. Thanks

    • Subform edits don't appear in parent record timeline?

      Is it possible to have subform edits (like add row/delete row) appear in the Timeline for parent records? A user can edit a record, only edit the subform, and it doesn't appear in the timeline. Is there a workaround or way that we can show when a user

    • AI generated meeting notes associated to Account or Deal

      As our organization works to improve efficiency we are looking for a solution to leverage AI to generate meeting notes and then add those notes to a CRM record such as an Account or Deal. I see Zoho has a Notebook AI offering that talks about the ability

    • due date on cheue

      how to handle cheque in zoho books for customers and vendors including due date

    • Admin asked me for Backend Details when I wanted to verify my ZeptoMail Account

      Please provide the backend details where you will be adding the SMTP/API information of ZeptoMail Who knows what this means?

    • Zoho CRM Portal Field Level Permission Issue

      Hi Support Team, I am using the Zoho CRM Portal and configuring field-level editing permissions. However, we are unable to restrict portal users from editing certain fields. We have created a portal and provided View and Edit (Shared Only) access for

    • WebDAV / FTP / SFTP protocols for syncing

      I believe the Zoho for Desktop app is built using a proprietary protocol. For the growing number of people using services such as odrive to sync multiple accounts from various providers (Google, Dropbox, Box, OneDrive, etc.) it would be really helpful if you implemented standard protocols such as WebDAV / FTP / SFTP so that alternative inc clients can be used.

    • Different MRP / Pricing for same product but different batches

      We often face the following situations where MRP of a particular product changes on every purchase and hence we have to charge the customer accordingly. This can't be solved by Batch tracking as of now so far as I understand Zoho. How do you manage it as of now? 

    • 'Statement of Accounts does not exist' error received, when creating PO using api in Zoho Inventory

      Here is request json -- JSONString = { "date": "2019-09-24", "purchaseorder_number": "PO-6-1", "delivery_date": null, "delivery_org_address_id": 36221200000056XXX, "vendor_id": 362212000000564XXX, "attention": "Testing", "line_items": [{ "unit": "Pieces", "account_id": 36221200000003XXX, "quantity": 1, "item_id": 362212000000049XXX, "tax_type": "", "tax_name": "", "name": "One HD", "purchase_rate": 85, "tax_percentage": 0, "item_total": 85.00, "tax_id": "", "warehouse_id": 362212000000564XXX }] }

    • Next Page