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!



    • Recent Topics

    • 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

    • 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

    • Trying to show the actual Terms & Conditions on PDF

      Hi, On Zoho forms I am trying to have the actual terms and conditions that the user needs to accept also show on the pdf that they receive after. Right now it only says "Agreed". Please help.

    • Can I create a custom function for chart of accounts?

      I'm trying to add a custom function that should run whenever a record in the Chart of Accounts module is edited, but on the form for creating a new function, the module dropdown does not include the chart of accounts as an option.

    • Can I filter a Lookup field to only show related records from another Lookup in Zoho CRM?

      In our Leads module, we have two Lookup fields: Recruitment Agency – the agency that the lead came from Recruiter – the individual contact from that agency who sent us the lead Both fields link correctly to their respective records in CRM. However, our

    • How to calculate separate totals for Product Line Items filtered by category in Quotes?

      Hello! I'm working with Quotes in Zoho CRM and need help calculating conditional totals for line items. Current setup: I have two tables in my Quote template (Zoho Writer), both displaying Quoted Line Items Table 1 (top): Shows all products where Product

    • Add "Fetch Composite Item" Action for Inventory

      I want to make a Flow that uses information returned in the GET call for Composite Items, and it's not currently available in Zoho Flow. Please consider adding this functionality.

    • Zoho Social/Marketing Plus - Addition to "Monitor" function

      It would be very helpful if the Monitor function would allow us to add a column to monitor hashtags in addition to pages and mentions. This is a common and very valuable function in other social listening tools.

    • Almacenamiento

      Hola, Quisiera saber como podría hacer para bajar el almacenamiento de 5gb a mis usuarios, en otras palabras los quiero ir limitando de la cuota real, y luego ir agregando poco a poco la cantidad hasta llegar a los 5gb que me dan en el plan free. 

    • Develop Zoho Meeting as a Full Native Application (Not a Browser Wrapper)

      Hello Zoho Meeting Team, Hope you are doing well. We would like to suggest an important improvement regarding the Zoho Meeting desktop application. At the moment, the Zoho Meeting app feels more like a mini browser window or an iframe that loads the web

    • Zoho Invoice Now Supports VeriFactu for Businesses in Spain

      Starting from January 1, 2026, Spain requires real-time invoice reporting for all B2B transactions. From July 2026, this requirement will extend to B2C transactions as well. All reporting must be carried out through the VeriFactu to AEAT (Agencia Estatal

    • Will I Get a Refund If I Downgrade Zoho Mail?

      Hello, We upgraded an email account for our new employee. However, the employee left after one month, and now I've reduced the number of Zoho Mail users from 7 to 6. Can we get a refund for the remaining portion of our annual payment?

    • Zoho Billing Now Supports VeriFactu for Businesses in Spain

      Starting from January 1, 2026, Spain requires real-time invoice reporting for all B2B transactions. From July 2026, this requirement will extend to B2C transactions as well. All reporting must be carried out through the VeriFactu to AEAT (Agencia Estatal

    • Introducing the revamped What's New page

      Hello everyone! We're happy to announce that Zoho Campaigns' What's New page has undergone a complete revamp. We've bid the old page adieu after a long time and have introduced a new, sleeker-looking page. Without further ado, let's dive into the main

    • Zoho Books - France

      L’équipe de Zoho France reçoit régulièrement des questions sur la conformité de ses applications de finances (Zoho Books/ Zoho Invoice) pour le marché français. Voici quelques points pour clarifier la question : Zoho Books est un logiciel de comptabilité

    • Name autocomplete

      Hi, During searching emails the web tool does not always propose the auto-completion of the saved emails. As a result I either have to go to contacts and look up the exact email, or the exact full name including the middle name and any dots, which is very annoying. For example I have a contact that I emailed in the past that has "First M. Last" <email@email.com> type of contact. When I start typing 'First' the email may or may not pop up in the autocomplete menu. Then if I start typing "first last"

    • Can we handle a support like (incident management) project in Zoho Projects?

      Hi, I have a new profile of a project whereby we provide "ticket" base support to a client. They have a request and ideally we would handle comms via a email exchange logged in Zoho. Today we use Zoho Projects for all out projects, which means that we

    • Using a CRM Client Script Button to create a Books Invoice

      Hello, I need help handling error messages returned to my client script from a function. The scenario I have setup a client script button which is available from each Deal. This CS executes a crm function, which in turn creates an invoice based on the

    • Why Format section gets disabled when we create Merge Template over PDF

      I need some assistance I have a Client who is going to give certificates to users who passes his exam. So, I am using mail merge but in ZOHO writer after I upload the PDF and create merge Template over PDF the format Section gets disabled. My problem

    • Possible to connect Zoho CRM's Sandbox with Zoho Creator's Sandbox?

      We are making some big changes on our CRM so we are testing it out in CRM's Sandbox. We also have a Zoho Creator app that we need to test. Is it possible to connect Zoho CRM's Sandbox to Zoho Creator's Sandbox so that I can perform those tests?

    • How do i follow up my email campaign in-thread

      Is there a way to follow up the email campaign so that it is in-thread using zoho campaigns? eg customer gets original email with subject line "hello" then 5 days later follow up would be with subject line "RE: hello".

    • How to unlink a SAML user from the existing Zoho Desk user (domain change case)

      Hi everyone, I’m trying to understand how to handle a situation where a customer changes their company domain. In our setup, users authenticate via SAML, so when the domain changes, the SAML system treats them as a new user. However, in Zoho Desk, I’d

    • Announcing new features in Trident for Mac (1.29.0)

      Hello everyone! Trident for macOS (v1.29.0) is here with new features and enhancements to enhance your business communication. Let's take a quick look at them. Access shared mailboxes. You can now view and access shared mailboxes in Trident, which are

    • Books is extremely slow again today !

      Everything is running slowly even with 500mb connection speed

    • Cyclic dependencies in many-to-many relationships...

      I have an application which includes a form for companies, and a form for contacts. Each company can be assigned 1 technical and 1 administrative contact. I have this working okay so far, but I want to copy the scripts used so far to a new empty application. When I import the scripts it fails with a message that says: Problem encountered while creating the application Error in resolving form dependency:Cyclic dependency among the forms:[Company, Contact] What can I do to resolve this? After all,

    • Zoho Workdrive for Office, "vsto runtime not found"

      Hi all, I have been trying to get ZohoWorkdrive_MS-addin_1.4.exe installed, but I keep getting the error "VSTO Runtime Not Found!" - even though I have installed it ... Anyone else hear had problems with the MS addin?  FYI, I am using O365 on A Dell laptop running Win 10 Home - fully patched and up-to-date.  I have tried compatibility modes and running explicitly as Administrator - the usual steps. Any advice would be appreciated.

    • Zoho API to create ticket

      I'm developing an integration to create tickets via API, but, locally it works (send and recieve requests). In production it also works sending requests, but, my file don't recieve any response data. My URL is available in Zoho API Console and I have

    • Automate Timesheet Approvals with Multi-level Approval Rules

      Introducing Approval Rules for Timesheets in Zoho Projects. With this automation, teams can manage how timesheets are reviewed and approved by setting up rules with criteria and assigning approvers to handle submissions. Timesheet, when associated to

    • 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

    • Building toppings #1 - Serving your needs with Bigin toppings

      Hey Biginners! We're excited to kick off our Developer Community series on building toppings for Bigin, and our goal is to provide an accessible, beginner-friendly, and relevant path for every developer. Imagine creating tiny pieces of software that unlock

    • Can we create Sprint with tasks from Multiple projects?

      Hi Team, We were using Zoho Sprints for quite sometime. Currently we have started the process of Sprint method. We couldnt create the active sprint board with the tasks from multiple projects. I would like to know whether this is possible or Any timeline

    • Tip of the Week #74– Create automated workflows in MS Power Automate

      Zoho TeamInbox now connects directly with Microsoft Power Automate, letting you streamline everyday routines tasks such as from sending emails to managing threads, with automated workflows. About the integration Zoho TeamInbox integrates with Microsoft

    • Account validation

      Hello everyone, I registered my account on ZeptoMail to use the system, but the problem is that the verification period on Zepto's end has already passed and I have limited functionality.

    • Paste issues in ZOHO crm notes

      Hi, since a week or so I have issues with the paste function in ZOHO CRM. I use "notes" to copy paste texts from Outlook emails and since a week or so, the pasting doesnt function as it should: some text just disappears and it gives a lot of empty lines/enters.....

    • Is it possible to add a gradient color to a newsletter im designing?

      From where i sit it looks like you can only choose a single color but not combine 2 colors?

    • New Feature: Audit Log in Zoho Bookings

      Greetings from the Zoho Bookings team! We’re excited to introduce Audit Log, a new feature designed to help you track all key actions related to your appointments. With Audit Log, you can maintain transparency, strengthen security, and ensure accountability.

    • Custom validation in CRM schema

      Validation rules in CRM layouts work nicely, good docs by @Kiran Karthik P https://help.zoho.com/portal/en/kb/crm/customize-crm-account/validation-rules/articles/create-validation-rules I'd prefer validating data input 'closer to the schema'

    • 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

    • How to restrict user/portal user change canvas view

      Hi , I would like to restrict user / portal user change their canvas view because I hide some sensitive field for them. I dont want my user switch the canvas view that do not belong to them But seems Zoho do not provide this setting?

    • Good news! Calendar in Zoho CRM gets a face lift

      Dear Customers, We are delighted to unveil the revamped calendar UI in Zoho CRM. With a complete visual overhaul aligned with CRM for Everyone, the calendar now offers a more intuitive and flexible scheduling experience. What’s new? Distinguish activities

    • Next Page