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!



    Access your files securely from anywhere



                          Zoho Developer Community




                                                  • Desk Community Learning Series


                                                  • Digest


                                                  • Functions


                                                  • Meetups


                                                  • Kbase


                                                  • Resources


                                                  • Glossary


                                                  • Desk Marketplace


                                                  • MVP Corner


                                                  • Word of the Day


                                                  • Ask the Experts





                                                            Manage your brands on social media



                                                                  Zoho TeamInbox Resources



                                                                      Zoho CRM Plus Resources

                                                                        Zoho Books Resources


                                                                          Zoho Subscriptions Resources

                                                                            Zoho Projects Resources


                                                                              Zoho Sprints Resources


                                                                                Qntrl Resources


                                                                                  Zoho Creator Resources



                                                                                      Zoho CRM Resources

                                                                                      • CRM Community Learning Series

                                                                                        CRM Community Learning Series


                                                                                      • Kaizen

                                                                                        Kaizen

                                                                                      • Functions

                                                                                        Functions

                                                                                      • Meetups

                                                                                        Meetups

                                                                                      • Kbase

                                                                                        Kbase

                                                                                      • Resources

                                                                                        Resources

                                                                                      • Digest

                                                                                        Digest

                                                                                      • CRM Marketplace

                                                                                        CRM Marketplace

                                                                                      • MVP Corner

                                                                                        MVP Corner





                                                                                          Design. Discuss. Deliver.

                                                                                          Create visually engaging stories with Zoho Show.

                                                                                          Get Started Now


                                                                                            Zoho Show Resources


                                                                                              Zoho Writer Writer

                                                                                              Get Started. Write Away!

                                                                                              Writer is a powerful online word processor, designed for collaborative work.

                                                                                                Zoho CRM コンテンツ










                                                                                                  Nederlandse Hulpbronnen


                                                                                                      ご検討中の方




                                                                                                            • Recent Topics

                                                                                                            • Give Permission for User test in Development/Staging modes

                                                                                                              Hi Everyone, I am using Zoho Creator C6. Where there are development and staging modes. Is it possible to give special / temporary permission for users to test directly in development and staging? Or do you have any other ideas? Thank you very much.
                                                                                                            • Autotranslate only have 2 of my 3 languages

                                                                                                              My HelpCenter has three languages, as you can see below: I chose to use Google Translate for my automatic translations: I can only see 2 languages: How do I add the Portuguese here? Is this a bug? Thank you.
                                                                                                            • Planned, actual and forecast hours

                                                                                                              Hi there, I'm attempting to use Zoho to plan projects and time, but it's so confusing. I have two questions: Why, in the screen shot below, is my planned hours saying 8? I have assigned 8 work hours to the task, and I have logged 4 hours of actuals. I
                                                                                                            • RingCentral Intergration Fax

                                                                                                              Hello Zoho Community , I recently intergrated with ring central with zoho crm. Ring central is a fully loaded buisness VOIP and Fax system , however I think there should be a button in Zoho to allow users to fax out the same way users are able to fax out on the ring central web application.  Myself and many other users are industries that communicate through fax. Its such a burden to have to download pdf and then send manually. If possible an activiity log built in to the module as well would be
                                                                                                            • Import CRM Vendor Module for Mail Merge

                                                                                                              Hello, It seems I cannot import the vendor module field for a merge document? Is there a way to turn this on?  I have the ability to import my custom module fields, but not standard built-in CRM modules like Vendors.  Am I missing something? Thank you very much for your assistance!
                                                                                                            • Custom Function : Copy multilookup field to text field

                                                                                                              Hi, I'm a newbie on function programming, I try to copy text from a multi lookup field named "societe" to a text field named "societe2". I've used this code. In deluge script it seems to work, but when I trigger this function it doesn't work (Societe2
                                                                                                            • Merging 2 tickets

                                                                                                              Hi I understand how to merge 2 tickets already but find the process quite cumbersome. It is not always simple to perform a search that causes the 2 tickets in question to show up on the Ticket Screen, and this is the only place a merge can be performed. Doing a search for the customer or contact linked to the ticket displays all of their tickets which could be hundreds to sort through, you could do a custom search that only shows open tickets but doing that every time is also time consuming. Not
                                                                                                            • Client Script event on any field of a Detail page

                                                                                                              Hi everyone! I'd like to trigger a Client Script when a user modifies a field - any field - from the Account Details page, how can I do this? I don't want to trigger it on a specific field, but on all of them. Thanks in advance!
                                                                                                            • Allow SO Item table to search other fields in items to make entry easier

                                                                                                              We have thousands of items, some of which need to be entered on the fly by desk people. We don't want abstracts like the vendor's part number in our SKU or Item name. It would make order entry much easier if the context search in the items table would
                                                                                                            • How Do I Refund a Customer Directly to Their Credit Card?

                                                                                                              Hi, I use books to auto-charge my customers credit card. But when I create a credit note there doesn't seem to be a way to directly refund the amount back to their credit card. Is the only way to refund a credit note by doing it "offline" - or manually-
                                                                                                            • Can’t Send Outgoing Mail

                                                                                                              Hello, one of the email addresses on my account had its outgoing mail privileges blocked. This was due to some bot signups on my website, causing my email to send a bunch of undeliverable emails. I have corrected this issue on my website. Please restore
                                                                                                            • zoho webmail keeps opening an empty tab when on log in/vist webmail

                                                                                                              as the the title says, whenever i log in or visit the page in a new tab, zoho webmail with open a new tab, but it errors out (see attachment). how do you stop it from doing this?
                                                                                                            • Sending possible. Receiving not possible.

                                                                                                              We are not receiving mail in our company email. Could you please solve this. It has been recurring and I want it to be resolved once and for all. Please help.
                                                                                                            • Efficient way to get a list of records like Notes under Leads that changed in last N minutes

                                                                                                              Hi, I am writing a process to consume the Zoho Leads and put it in an internal system. For Leads, Accounts and Contacts, the getRepords with lastModifiedTime works great as I can call the API to get only the updated records say in last 30 minutes. However
                                                                                                            • IMAP Connection Issue – "Disconnect called before connection setup" (Zoho + Freshdesk Integration)

                                                                                                              Hello, Since April 25, 2025, we are facing a critical issue with our Zoho Mail integration with Freshdesk. Incoming emails are no longer being received in Freshdesk. Freshdesk Support has confirmed that their system is trying to connect to our Zoho mailbox,
                                                                                                            • Fetching a missing Folder, now creates it

                                                                                                              Hello, I'm using Zoho Flow to fetch a folder within a Team Folder. If the folder is missing (folder ID is null), I trigger a Create Folder. Now in 2025, when I fetch a missing folder, a folder is created right away with the "name + full date" and a Folder
                                                                                                            • Is the "schedule 10 mass emails/module" limit a per user or per organization limit?

                                                                                                              For scheduling emails out of Zoho CRM, there is a 10 scheduled mass emails per module limit according to Zoho documentation (https://help.zoho.com/portal/en/kb/crm/faqs/emails/articles/how-to-schedule-mass-emails-in-zoho-crm). Is this limit per user or
                                                                                                            • How Would I get data from a network drive to be feed into creator program.

                                                                                                              What's the easiest and cleanest solution for this?
                                                                                                            • Using Zoho One to manage two (or more) businesses

                                                                                                              We are one company that operates two business, a scenario that Zoho One doesn't really seem to handle very well, and one which I can't imagine is at all unique to us! (It is basically designed to facilitate branding and use for one business only per subscription).
                                                                                                            • Cannnot find criteria tab

                                                                                                              We need to be able to segment contacts based on an account view or field. The online help shows a screen with three options: Under Sync Details there is All Contacts; Custom view; Criteria.  The latter is missing from my screen.  I need it. I also want to know if I delete contacts from campaigns, will they still remain in CRM? 
                                                                                                            • Dial Charts in Analytics using field values for colored ranges

                                                                                                              Hey all! It would be supremely helpful if we could use field values for ranges in Analytics for dial charts. We currently display an analytics report to our sales team showing how close they are to reaching the next tier for commission payouts. We update
                                                                                                            • A couple of minor enhancements to Workflows

                                                                                                              Last updated on September 17, 2024: These enhancements were initially available for early access, and we've now enabled them for all users. We are elated to announce a couple of enhancements to custom functions in our Workflows! Say hello to: "Source"
                                                                                                            • South Africa Tax Edition is now Available!

                                                                                                              Managing taxes just got easier for field service businesses in South Africa! With Zoho FSM's new South Africa tax edition, field service businesses operating in South Africa can now effortlessly stay compliant with local tax regulations. Easily manage
                                                                                                            • How to overcome Zoho Deluge's time limit?

                                                                                                              I have built a function according to the following scheme: pages = {1,2,3,4,5,6,7,8,9,10}; for each page in pages { entriesPerPage = zoho.crm.getRecords("Accounts",page,200); for each entry in entriesPerPage { … } } Unfortunately, we have too many entries
                                                                                                            • Introducing ICR in Zoho CRM: Transform your printed text into digital data

                                                                                                              From writing on papyrus in the ancient times to creating a humble record in your CRM, the world may have evolved with how it used to record data, but data entry as such has not been simplified. It is still a repetitive and arduous chore on which businesses
                                                                                                            • How to Add Custom Sections in the Product Page?

                                                                                                              Hi Zoho team, I’m currently using the Tranquil theme on Zoho Commerce and I have a question regarding the product page layout. Right now, under each product, I can see expandable sections like Product Details and Specifications. I’d like to add two additional
                                                                                                            • Bulk user onboarding for Cliq Channels in a jiffy

                                                                                                              As developers, we frequently switch between coding, debugging, and optimizing tasks. The last thing we want is to be burdened by manual user management. Adding users one by one to a channel is tedious and prone to errors, taking up more time than we could
                                                                                                            • Weekly Tips: Secure your attachment downloads with Zoho Mail

                                                                                                              Safety is one of our main concerns, whether it’s about device security or online protection. We use tools like fingerprint scanners, facial recognition, and two-factor authentication to keep our devices and email accounts secure. We use methods like OTP
                                                                                                            • Issues with Dashboard Filter and KPI in Zoho Analytics (CAGR)

                                                                                                              Hi everyone, I'm trying to build a CAGR (Compound Annual Growth Rate) KPI in Zoho Analytics, but I'm running into some issues with filter synchronization. Here's the scenario: I created two test reports: One that filters results from 2021 to 2025. Another
                                                                                                            • Adding Product Photos through Import or In Bulk

                                                                                                              I am about to add about 1000 products in the CRM. I am shocked that there is no way to add product photos through the Import feature. I'll be spending days adding product photos.... Very dissapointing. Anyone know of a work around to add product photos
                                                                                                            • Announcing Multi-language Support in Zoho FSM

                                                                                                              Zoho FSM now speaks your language. The much-awaited multi-language support is now available in Zoho FSM. The following languages are supported in Zoho FSM: Dutch (Nederlands) English - United Kingdom English - United States French (français) French -
                                                                                                            • How to sync Zoho CRM Quotes with Zoho Books/Finance Estimates or Quotes

                                                                                                              Hi everyone, We’re building quotes in the Zoho CRM Quotes module because of its strong CPQ features and better communication options (multiple contacts, email customization, etc.). However, these don’t sync directly with Zoho Books/Finance for invoicing.
                                                                                                            • Quiz of the Day on Dashboard

                                                                                                              Hi team, Is it possible to enter a feature for enabling a widget as a quiz for the day. This widget can have one question popping up daily from the list of some pre-fed questions and the employees need to either type a response or can select from a multiple-choice
                                                                                                            • Email content strategy

                                                                                                              This is basically a couple of questions about the best practices when it comes to the use of colors as part of the message sent through the email campaign. 1 - Is there a guide or recommendation as to what are the best colors for text/background associated
                                                                                                            • Canvas Button Vanished

                                                                                                              I have a button that has mysteriously vanished. It shows in the canvas builder but then is no where to be found in the actual record and before you ask, yes I have tried to access through incognito mode and same issue.
                                                                                                            • Multiple Tabs in the Dashboard

                                                                                                              Hi team, Can we enable an option to add multiple tabs in a dashboard? This will help to group the content to be displayed to employees and make it more usable and user-friendly intranet space.
                                                                                                            • In the Pivot table in the value section i want to the actual value instead of sum or count

                                                                                                              I am creating Early/late Check and check out in pivot report based on Zoho analytics I need the data to include: Employee Name Late Entry, Early Entry, Early Exit, Late Exit, First In, Last Out, and Total Hours.
                                                                                                            • Introducing Assemblies and Kits in Zoho Inventory

                                                                                                              Hello customers, We’re excited to share a major revamp to Zoho Inventory that brings both clarity and flexibility to your inventory management experience! Presenting Assemblies and Kits We’re thrilled to introduce Assemblies and Kits, which replaces the
                                                                                                            • IMAP as a source option in Dashboards

                                                                                                              Hi Team Can I request IMAP be added as a source option for running a report or creating a KPI in dashboards. I have selected all options and my IMAP linked emails are not showing, I can only check these by going to emails in a contact. Thankyou Josh
                                                                                                            • In Zoho people Check in report the date want come as Colum how i can achive that in zoho people or analytics

                                                                                                              In Zoho people Check in report the date want come as Colum. How i can achive that in zoho people or analytics
                                                                                                            • Next Page