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.
Access your files securely from anywhere
Centralize Knowledge. Transform Learning.
All-in-one knowledge management and training platform for your employees and customers.
New to Zoho Recruit?
Zoho Developer Community
New to Zoho LandingPage?
Zoho LandingPage Resources
New to Zoho Survey?
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Bigin?
Topic Participants
Maadhari M
nick
Athul P
PJ
Sunderjan Siddharth
Sticky Posts
Kaizen #198: Using Client Script for Custom Validation in Blueprint
Nearing 200th Kaizen Post – 1 More to the Big Two-Oh-Oh! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.Kaizen #226: Using ZRC in Client Script
Hello everyone! Welcome to another week of Kaizen. In today's post, lets see what is ZRC (Zoho Request Client) and how we can use ZRC methods in Client Script to get inputs from a Salesperson and update the Lead status with a single button click. In thisKaizen #222 - Client Script Support for Notes Related List
Hello everyone! Welcome to another week of Kaizen. The final Kaizen post of the year 2025 is here! With the new Client Script support for the Notes Related List, you can validate, enrich, and manage notes across modules. In this post, we’ll explore howKaizen #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
New to Zoho TeamInbox?
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
Design. Discuss. Deliver.
Zoho Show Resources
Get Started. Write Away!
Writer is a powerful online word processor, designed for collaborative work.
Zoho CRM コンテンツ
-
オンラインヘルプ
-
Webセミナー
-
機能活用動画
-
よくある質問
-
Ebook
-
-
Zoho Campaigns
- Zoho サービスのWebセミナー
その他のサービス コンテンツ
Nederlandse Hulpbronnen
ご検討中の方
Recent Topics
Push Forms to CRM
Hello, I created a Form but forgot to integrate to CRM before many of the Forms were filled out. Is it possible to push those entries to CRM or should I just export a CSV then upload to CRM?Zoho Creator Developer Console | Improved Distribution and Lifecycle Management for apps
Hello everyone, We're excited to introduce new enhancements now in the Zoho Creator Developer Console. These updates strengthen private app distribution through licensing controls and extend environment support across all installed apps, helping teamsLogged out
Hi, just been working on a sheet when a pop up box appeared telling me I'm going to be logged out in x number of seconds and if I reload I may lose any edits, or words to that effect. It did indeed log me out and I did indeed lose my last edits. Any idea554 5.1.1 – Mail sending blocked for the domain(s): [gmail.com]
Here's your corrected text: Hello, I hope you are doing well. I was unable to send a message and received the following error: "554 5.1.1 – Mail sending blocked for the domain(s): [gmail.com]" I tried to send and deliver an email but got this error. IYou have reached the maximum limit of bank accounts that can be connected to Zoho Books through token.
I can no longer connect to my bank account to download transactions into Zoho Books. I egt the error message: "You have reached the maximum limit of bank accounts that can be connected to Zoho Books through token. To connect more accounts, write to usFirst Name in Mail
While sending a mail/message to the user, I want only the first name to be displayed—for example: “Hi John” instead of the full name using "Hi ${Name_Field}"Can you import projects into Zoho Projects yet?
I see some very old posts asking about importing project records into Zoho Projects. But I can't find anything up to date about the topic. Has this functionality been added? Importing tasks is helpful. But we do have a project where importing projectsConnectivity issues with Google Calendar and third-party integrations
Description: We are currently experiencing a critical failure with Zoho CRM third-party connections. This issue is heavily affecting our primary workflow. Symptoms: Sync Failure: Existing Zoho CRM to Google Calendar connections have been failing for approximatelyAdd Reauthentication Option for Zoho Bug Tracker Integration in Zoho Desk
Hello Zoho Desk Team, We hope you're doing well. We would like to request an enhancement to the Zoho Bug Tracker integration within Zoho Desk. Current Limitation: At the moment, there is no option to reauthenticate the Zoho Bug Tracker integration inNewby Questions
Q1. The top bar of Zoho Books has a "Search in Banking (/) " field. What is the proper use of this text box? - Searching for Amazon for example has no results but there are transactions. - Is the search case sensitive? - Are regular expressions allowed?Transaction Rule Matching
Q1. Is there a method to have the Transaction Rules applied across multiple Bank Accounts? Q2. To match "contains" text in Transaction Rules, is a wildcard or regular expression required? Is it case sensitive? Would searching for "issue" in the followingNewby Questions - Vendors, Customers, and Income vs. Other Income Clarifications
Q1. For Deposits, there does not seem to be an option for "Income". "Other Income" is an option however. What is the process to add the option to assign a deposit to type "Income"? Q2. In many cases Vendors and Customer are the same. Vendors may purchaseIntroducing parent-child ticketing in Zoho Desk [Early access]
Hello Zoho Desk users! We have introduced the parent-child ticketing system to help customer service teams ensure efficient resolution of issues involving multiple, related tickets. You can now combine repetitive and interconnected tickets into parent-childThree Zoho Billing Limitations Blocking Standard Subscription Operations
After working through Zoho Billing support for over a year on these three issues without resolution, we wanted to flag them to the broader community. We are curious whether other businesses are running into the same walls. 1. Cannot Prepone (Move Earlier)Automation #3 - Auto-sync email attachments to tickets
This is a monthly series where we pick some common use cases that have been either discussed or most asked about in our community and explain how they can be achieved using one of the automation capabilities in Zoho Desk. Most of our customers use emailCan't add a sender adress from zoho campaigns
hi, I need to change the sender address for a campaign. When i try to add it i get a message to say 'duplicated email address found while adding your sender address'. This is the first campaign i'm sending so I don't understand why this message is displayed? Thanks JaneUsing a custom single line External ID form as merge fields in templates
Hey everyone, We're looking to integrate a few external systems better with our Zoho CRM, and we had hoped to use external fields for this purpose. In this case, it would mean being able to use our own inoice system's invoice numbers are a direct id compatibleIntroducing Workqueue: your all-in-one view to manage daily work
Hello all, We’re excited to introduce a major productivity boost to your CRM experience: Workqueue, a dynamic, all-in-one workspace that brings every important sales activity, approval, and follow-up right to your fingertips. What is Workqueue? SalesZoho CRM - Feature Request - Analytics Components Group By Week Alternative Formats
On the Zoho CRM Analytics Components, please consider adding an option to allow group by week format to be changed to other formats such as Week Commencing or Week Ending dates, rather than the current Week Number. This would provide improved usabilityDashboard target enhancements
Often individuals in IT are creating dashboards for their sales team. The ability to create a single dashboard that can be used by multiple people is key. A components for a dashboard have the ability to filter by logged in user which is great. HoweverZoho Campaigns - Feature Request - Re-Send Existing Email Action in Automations/Journeys
Hi Zoho Campaigns and Zoho Marketing Automation teams, I would like to suggest a feature that would make building and managing complex automations significantly easier. The Feature Introduce a “Re-Send” or “Send Existing Email” action within AutomationsCan I write a check in Zoho Books with no associated bill?
This currently does not seem possible, and I have a client that desperately needs this function if I am able to convert them with Quickbooks. Thank you in advance for your reply.ISO 3166-2 Compliant Country and Regions
Zoho should consider implementing ISO 3166-2 standards for countries and regions in address dropdowns. It adds a lot of noise in the data when items added programmatically conform to ISO 3166-2 (e.g., TX for Texas, CA for Canada, etc.), but the few itemsUS State abbreviations in Address fields
In regards to all Address fields within Zoho, Is there a way to change the State field to be the 2 letter abbreviation vs the full spelled out US State name? Example: "Washington" should be WA. I am able to type in the abbreviated state, but it's notZoho Booking - TIN vs ATIN & ITIN
Zoho Booking Vendors allows for TAX ID values of SSN, EIN, ATIN an ITIN. There is no option for TIN. What is the method to properly add TIN to the list of taxable values for companies? For reference: Social Security Numbers (SSN) Individual Taxpayer IdentificationHow to see Statement Details Shown in Unclassified Transactions in All Transactions?
All, The list of Unclassified Transactions show the Statement Details and Descriptions. What is the method to see that column in the All Transactions list? -Thanks!Zoho Books | Product updates | October 2025
Hello users, We’ve rolled out new features and enhancements in Zoho Books. From iOS 26 updates to viewing reports as charts, explore the updates designed to enhance your bookkeeping experience. Zoho Books Updates for Apple Devices At WWDC 2025, AppleBill sent for Payment Approval
Zoho Books currently supports three levels of transaction approval for bills: Draft, Submit, and Approved. We are looking to add a layer of approval like a bill marked for payment before initiating payment requests through HSBC Bank. Can you please guideAsk the Experts - Live Q&A webinar
Hello Community, We’re excited to host our very first Ask the Experts session! Join us on 7 April 2026 from 11 a.m. to 12 p.m. (IST) for this live webinar Q&A session, where you will have an opportunity to connect directly with our product experts, gainAll new Address Field in Zoho CRM: maintain structured and accurate address inputs
Availability Update: 29 September 2025: It's currently available for all new sign-ups and for existing Zoho CRM orgs which are in the Professional edition exclusively for IN DC users. 2 March 2026: Available to users in all DCs except US and EU DC. 24Kaizen #235 - Automating record restoration using Recycle Bin APIs in Zoho CRM
Welcome to another Kaizen week. Here's a question that came up in our developer forum: "I'm working on a piece of software to automate conversion of Leads into Deals based on order status from my company's website. There are some cases where a previouslyOpen PDFs using Zoho PDF Editor
Hello users, In this article, we will be exploring the open PDF capability in Zoho PDF Editor to collaboratively edit PDFs, insert text and images, add fillable and e-signature fields, and more. You can upload PDFs upto 50 MB or 150 pages. Password-protectedOne Contact with Multiple Accounts with Portal enabled
I have a contact that manages different accounts, so he needs to see the invoices of all the companies he manage in Portal but I found it not possible.. any idea? I tried to set different customers with the same email contact with the portal enabled andBank Feeds Breaking Constantly
Hey Everyone, I have already reached out to support about this issue but I am wondering if anyone else is having the same issue. My bank feeds keep breaking within days of me fixing them by updating the credentials. Its been happening for a while andPrint Sales Orders, Purchase Orders or Invoices from API
Hello, Is it possible to use the print option that is available in Sales Orders Purchase Orders and Invoices with the API?. I don't see any information in the docs about this. ThanksTimed addition to segments
Hi there - hoping you can help me figure out a graceful way of doing this: • I want to add contacts to a Segment in Campaigns based on a Stage pick-list field value X in CRM - that bit's fine. The problem is that I only want to add them to the SegmentZoho Developer AI Agent = Claude AI + MCP Server + Zoho Ecosystem
Hello Zoho Community 👋 I’m excited to share a recent integration we’ve worked on at Officehub Tech: ✅Claude + MCP Server + Zoho Creator Zoho Developer AI Agent – an AI-powered Zoho automation platform This solution connects Zoho applications with anDynamic Questions in Zoho Forms
Is it possible to add dynamic questions (like displaying a user’s name) in Zoho Forms? I know this is possible in surveys, but can we implement similar functionality in Zoho Forms?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 ? RegardsGoogle Fonts Integration in Pagesense Popup Editor
Hello Zoho Pagesense Team, We hope you're doing well. We’d like to submit a feature request to enhance Zoho Pagesense’s popup editor with Google Fonts support. Current Limitation: Currently, Pagesense offers a limited set of default fonts. Google FontsNext Page