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

    • Draft & Schedule Emails Directly in Bigin

      Greetings, I hope all of you are doing well. We're happy to announce a few recent enhancements we've made to email in Bigin. We'll go over each one in detail, but here's a quick overview: Previously, you couldn't draft or schedule emails in Bigin, but

    • Create CRM Deal from Books Quote and Auto Update Deal Stage

      I want to set up an automation where, whenever a Quote is created in Zoho Books, a Deal is automatically created in Zoho CRM with the Quote amount, customer details, and some custom fields from Zoho Books. Additionally, when the Sales Order is converted

    • Send email template "permission denied to access the api"

      Hello, Per the title, I'm trying to send a Zoho CRM Email template based on the advice given here: https://help.zoho.com/portal/en/community/topic/specify-an-email-template-when-sending-emails-in-custom-functions (I'd prefer to send right from Deluge

    • Zia’s AI Assist now helps you write clearer notes — in seconds

      After helping recruiters craft job descriptions, emails, and assessments, Zia’s AI Assist is now stepping in to make note-taking effortless too. Whether you’re recording feedback after an interview or sharing quick updates with your team, you can now

    • Shortcut to fill a range of cells

      Good evening: I'm writing because I haven't been able to find a feature that allows you to select a range of cells, type in one of them, and then use a key combination to type in all of them. In Excel, the keyboard shortcut is Ctrl+Enter. I haven't found

    • Introducing Dark Mode / Light Mode : A New Look For Your CRM

      Hello Users, We are excited to announce a highly anticipated feature - the launch of Day, Night and Auto Mode implementation in Zoho CRM's NextGen user interface! This feature is designed to provide a visually appealing and comfortable experience for

    • Object required error

      Hi, I am getting an 'Object required' error on the line Call HideColumnsOutsideRange(ws, startOfWeek, endOfWeek) when I run the ShowCurrentWeek macro but not when I run the ShowCurrentMonth macro. Any ideas? Regards, GW Option Explicit Sub HideColumnsOutsideRange(ws

    • Zoho CRM - Rename "Estimates" in CRM Finance Suite Integration to "Quotes"

      I'm not sure if it's been 2 or 3 years now since Zoho Books renamed Estimates to Quotes. I still see "Estimates" in the Zoho CRM integration. Could this be added to Translation settings so that some customisation could be made on an account by account

    • Its 2022, can our customers log into CRM on their mobiles? Zoho Response: Maybe Later

      I am a long time Zoho CRM user. I have just started using the client portal feature. On the plus side I have found it very fast and very easy (for someone used to the CRM config) to set up a subset of module views that make a potentially extremely useful

    • New Series Announcement - Ecommerce Marketing Tips

      Running an online business is more than just having a website. It’s about getting the right customers to discover you, trust you, and keep coming back. To support your growth journey, we’re launching a weekly Marketing Tips series right here on Zoho Commerce

    • Marketing Tip #7: Add a blog to your online store

      A blog is more than content. It’s a magnet for new customers. Sharing product guides, styling tips, or industry insights through blog posts builds trust and helps you rank higher on search engines. Try this today: Write one blog post answering a common

    • Kanban view on Zoho CRM mobile app!

      What is Kanban? The name doesn't sound English, right? Yes, Kanban is a Japanese word which means 'Card you can see'. As per the meaning, Kanban in CRM is a type of list view in which the records will be displayed in cards and categorized under the given

    • Allow Regular Users to Directly Transfer Ownership of Files & Folders

      Hi Zoho WorkDrive Team, Hope you are doing well. We would like to request an important enhancement related to file and folder ownership management in Zoho WorkDrive. At the moment, a regular user cannot directly transfer ownership of their files or folders

    • Triggering rules on lead conversion

      There is no field on the Rule list for rule conversion to trigger an alert on liead conversion to a potential. I assigned a rule to file on any creation or update of a lead. The lead was changed a lead to a potential but no rule was fired. Rajesh Bhadra

    • Customised Funnel

      We are running the standard plan for our ZOHO CRM. I have been asked if there is a way to combine data from the Calls module, Deals module and Contact Module into 1 funnel, similar to the view you can get when viewing Deals By Stages, you can see the

    • Trigger Zapier on Deluge Insert Into Function?

      Hello, To get around the limitation of not being able to trigger a Zapier Zap on Record Update(this would be extremely useful to be able to do btw), I have created a Deluge script to copy the data from Form A to a Trigger Form B using the Insert Into expression from a Custom Action button on a Report from Form A.  This action does not trigger the Zapier Zap whereas manually adding a record or duplicating an existing record does trigger the Zap. Is Insert Into not the same as a manual Add in the context

    • Can you inject JS in an HML+CSS+Deluge Page?

      I have an HTML + CSS + Deluge page and need just a little vanilla JS functionality. However, it seems like Zoho Creator does not allow that. I'm required to create a JS widget. Is this correct? If so: 1. Won't this quickly consume my API limit if there

    • Display Client Name in Zoho Creator Client Portal Dashboard

      Hello Zoho Creator Team, We hope you are doing well. Zoho Creator recently introduced the option to set a client’s display name in the Client Portal settings, which is very helpful for providing a personalized portal experience. However, there is currently

    • Zoho unified inbox

      The new changes have definitely improved things for switching between accounts.  But zoho still desperately needs a unified inbox.  It sucks to have to enter filters and folders for each and every inbox.  This seems like such a simple thing, i wonder why Zoho hasn't done it?

    • Marketer’s Space - Multi-Channel Campaigns for the Biggest Shopping Week with Zoho Marketing Automation

      Hello marketers, Welcome back to another post in Marketers Space! The biggest shopping week of the year is almost here, and it’s your moment to shine without the stress. With Black Friday and Cyber Monday just around the corner, being present across email,

    • Is there a problem with sharing workdrive files with links since last night?

      As per title, we can't access folders/files through share links since last night. I created ticket but we need quick solution and didn't hear back from the support yet. The files are still accessible by the main account but all zoho files that we are

    • Enable Screen Recording in Zoho WorkDrive Mobile Apps (Android & iOS)

      Hi Zoho WorkDrive Team, How are you? We are enthusiastic Zoho One users and rely heavily on Zoho WorkDrive for internal collaboration and content sharing. The screen-recording feature in the WorkDrive web app (similar to Loom) is extremely useful- however,

    • Production Management Tool (MRP / BOM)

      Hi Guys, is there any recommended App available that works with zoho and covers the needed applications for a production? What we need is a system that covers the BOM (bill of materials), MRP (material ressources planning), MRP II (manufacturing ressources

    • Function #53: Transaction Level Profitability for Invoices

      Hello everyone, and welcome back to our series! We have previously provided custom functions for calculating the profitability of a quote and a sales order. There may be instances where the invoice may differ from its corresponding quote or sales order.

    • Bug in Zoho Cliq Signup Flow – "%s" Placeholder Visible Instead of Product Name

      Hi Zoho Team, I would like to report a UI bug in the Zoho Cliq signup/enable flow. During the step where Cliq asks to enable the product for the company, the following text appears: Great! Your company is already available in Zoho, so you just have to

    • Zoho Invoice Customer Login Portal

      Are there any plans for a customer portal to Zoho Invoice, ala Freshbooks?  I would like customers that I invoice to be able to login to review invoices and invoice history.  I have not switched from Freshbooks for this very reason.

    • Exporting tickets

      I went to Setup -> Organization -> Import/Export in order to export tickets but found 2 issues: 1. The email body never gets exported. 2. There are some large numbers (like 5.57E+16) under certain columns of the exported CSV file. I could not find any export options. Please can you help with this?

    • Editing the Ticket Properties column

      This is going to sound like a dumb question, but I cannot figure out how to configure/edit the sections (and their fields) in this column: For example, we have a custom "Resolution" field, which parked itself in the "Ticket Information" section of this

    • Copy field information to clipboard

      I need to be able to transfer some field information in to the clipboard, so that I can then paste it in to our helpdesk system. Is there a way I could add a button to a detail report that does this?

    • Issuing reconciling a bank statement

      HELP! I'm trying to reconcile a bank statement. The prior month reconciled perfectly. Beginning balance is correct yet I'm off by the same amount each time. Both myself and my office manager, separately and together, have tried to complete this reconciliation

    • Unknown table or alias 'A1'

      I would like to create a subquery but i am getting the following error: Unknown table or alias 'A1' used in select query. This is the sql statement:  SELECT A1.active_paying_customers, A1.active_trial_customers, A1.new_paying_signup, date(A1.date_active_customers), 

    • Detect and ignore bots in visitors

      The SalesIQ visitor numbers are basically useless to us because there is no bot detection. We get the same bots coming in from the same countries looking at the same pages every day. It can't be that difficult to tell the difference between an actual

    • Add Real-Time Microphone Audio-Level Indicator During Screen Recording

      Hi Zoho WorkDrive Team, Hope you are doing well. We would like to request an important enhancement to the Zoho WorkDrive screen-recording experience. Current Limitation: During a recording session, there is no visual indication that the microphone is

    • Zero Personalization of the File Sharing Experience

      By now (2025) this is the maximum level of personalization available for a Zoho sharing link. We gently asked Zoho if we could modify at least the background, and they replied that it cannot be customized. We're truly disappointed – and surprised every

    • Two factor authentication for helpdesk users

      The company i work for wants use the helpdesk site in Zoho desk, as a place for their distribution partners to ask question and look for information about our product. The things there is suppose to go up there is somewhat confidential between my company

    • Kiosk can't merge picklist or multiselect

      There is no ability to load a multiselect or picklikst field into a kiosk with the values that have been previously selected. So, I essentially have 3 unacceptable options: 1.)Load the value into a text string and include instructions like this: "Picklist

    • AGE field from DATE OF BIRTH Field.

      HI! I have a field called date of birth in my CRM (LEADS, CONTACT etc…)     How can I know the AGE today   I would like to create a field AGE. I now how to create a field but I don´t which calculation (CUSTOM FUCTION) to make ¿ANY HELP?

    • How to update/remove file in zoho creator widgets using javascript API

      Hi Team, I have developed a widget which allows inserting and updating records I have file upload field with multiple file upload. Now while doing insert form record, I am using uploadFile API to upload files for that record. I am using updateRecord API

    • Announcing new features in Trident for Windows (v.1.34.4.0)

      Hello Community! Trident for Windows just got better! With this update we have features that make your daily work easier and more efficient. We've added some features that are exclusive to our app and we're sure you'll find them useful. Let’s dive into

    • Report Hover Setting

      Would be great if we will able to show information to the user while hovering a record in a report.

    • Next Page