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
Upcoming Change: Increased character limits for module and field labels
To provide greater flexibility in customizing your CRM, we are increasing the maximum character limits for module labels and field labels in Zoho CRM. What's changing? Label Current Limit New Limit Module Label 25 characters 50 characters Subform ModuleCreating Email template that attaches file uploaded in specific field.
If there's a way to do this using Zoho CRM's built-in features, then this has eluded me! I'm looking to create a workflow that automatically sends an email upon execution, and that email includes an attachment uploaded in a specific field. Email templatesSPAM (and some other) folders missing on three of my Zoho Mail accounts
I have four email accounts with Zoho Mail. Three days ago, the Spam folder on three of these accounts vanished. It is gone on the Windows and Linux desktops as well as the web-based and Android versions, and I have tried it on multiple machines. The onlyIs there a way to show contact emails in the Account?
I know I can see the emails I have sent and received on a Contact detail view, but I want to be able to see all the emails that have been sent and received between all an Accounts Contacts on the Account Detail view. That way when I see the Account detailCliq 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 ? RegardsError 1011 saving website personalisation — blocking all changes (corrupted "home_page.content" field)
When trying to save changes under Settings → Brands → MY COMPANY → Website → Personalisation → Messenger, I receive the following error: "Either the request parameters are invalid or absent" upon checking on the developer console of the browser I getAll 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. 24Zoho CRM - Email/Message icon for Deal List View
Hi Team, My idea is to include a message icon at the start of the row of Deals when an unread message has been received. This would really help highlight the Deals where urgent action is required. Thanks for considering this request. Regards, AshleyCRM x WorkDrive: We're rolling out the WorkDrive-powered file storage experience for existing users
Release plan: Gradual rollout to customers without file storage add-ons, in this order: 1. Standalone CRM 2. CRM Plus and Zoho One DCs: All | Editions: All Available now for: - Standalone CRM accounts in Free and Standard editions without file storageHR Helpdesk Cases
We have Zoho One Enterprise. I'm trying to find HR Helpdesk Cases, but my UI does not match the documentation. I'm not sure how to move forward.Tip #7 - Siri shortcuts in Zoho CRM
Hello Everyone, Here is a tip about the 'Siri Shortcuts' feature and how it works in the iOS version of the Zoho CRM mobile app. What are Siri shortcuts? Siri Shortcuts are quick actions across your apps on iOS. They can perform an action automaticallyAutomatic Department and Employee Sync Between Zoho One and Zoho People
Dear Zoho Support, I'm writing to propose a valuable feature request that would streamline data management and improve user experience within the Zoho ecosystem: automatic synchronization between departments and employees in Zoho One and Zoho People.Nothing triggers a Journey
I have been on the phone with Zoho support and they claim their development team needs to investigate more. However, I've found this is a pretty standard answer after a call takes any amount of time. After that, it's days and even weeks before it actuallyManually Backorder Sales Order and/or Change Sales Order Status
Is there an option to manually 'backorder' a sales order, or otherwise change it's status? In some cases, we receive orders for products that are out of stock, but we already have issued POs to our suppliers for replenishment. Ex- we created a PO onBackorder process review - Automating Removal of Sales Order from "On Hold" When PO is Received
Hello Zoho Inventory Team, Currently, sales orders in On Hold status are released only when the bill for the purchase order is created. In our workflow, it would be much more efficient if the sales order could automatically move out of On Hold as soonKaizen #254 - Building a Temporal Lead Score Decay System in Zoho CRM
Hello, CRM Wizards! Welcome to a fresh week of Kaizen. In this post, we will build a temporal lead score decay system that works alongside your existing scoring rules by introducing percentage-based score decay driven solely by customer inactivity. ByMetadata API Access to Functions
I think it would be incredibly helpful to have api access to every function's code. Our team primarily uses deluge functions to update fields across modules according to business logic. I would like to create a visual dependancy model for our CRM, butAPI actions/approvals endpoint returns UNAPPROVABLE despite user having full permissions and being the assigned approver
Hi Team, We are trying to programmatically approve a record via the CRM API but consistently receive an UNAPPROVABLE error, even though the same user can approve the record without issue from the UI. Endpoint called: POST https://www.zohoapis.com/crm/v6/{module}/{record_id}/actions/approvalsGet a realistic picture of your revenue with Forecast Adjustments in Zoho CRM
#crm25q1 Dear Customers, We hope you're doing well! Today, we're here with an important enhancement for business decision makers: forecast adjustments. Let's get straight to it! With technology on the rise and CX at its core, businesses are constantlyI am not able to check in and checkout in zoho people even location access allowed
This issue i am facing in mackbook air m1, I allowed location in chrome browser and i also tried in safari but getting similar issue. Please have a look ASAP.WhatsApp Vendors Module
Hello, so WhatsApp works with the below, mainly with the customer side modules. Can we get functionality on the vendor side modules, i.e., PO, Bills, Vendor Credits, Payments Made, Purchase Received? WhatsApp is often the preferred method of communicationUpload ticket attachments via Drag-&-Drop
Hello, if you want to upload a file to the ticket attachment you need to click the button and use the file browser to select and upload the desired file. In many cases, it would be much more efficient if you could simply drag the file to the browser window...Introducing 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-childElevate your Radar experience: Best practices part 3
In the Spotlight: Zoho Desk's Radar app Customer support requires human intelligence combined with emotional intelligence. How about these coupled with contextual intelligence? These elevate the customer support experience. When providing support throughMigrating my email from GMAIL to ZOHO MAIL..........
I am a long time GMAIL user and I really only understand how they operate, but after reviewing your tutorials and forums online, it is quite unbelievable how much more and how much more streamlined ZOHO mail is, not to mention ZOHO's wonderful, more advanced capabilities. I do have several questions about transitioning over to ZOHO. Primarily, where is the best place to start, what do I do first? And how hard is it actually to move all my business and personal accounts over here? When I sign upUnable to send message;Reason:553 Relaying disallowed. Invalid Domain
Hi, Now when I try to reply to an email, I see the Unable to send message;Reason:553 Relaying disallowed. Invalid Domain voicemessagedownloader.com error. I tested sending an email when I set it up in the past and it worked. I have checked the Zoho OrganizationRFID Scanner/Adapter Solution for barcode scanning
Hello, We will be trialing using barcode scanning for item verification during our picking process. Using a phone or a tablet is awkward and uncomfortable. Are there any Zoho compatible RFID scanners, or an RFID device/adapter that will connect with aApproval Process not retriggering after rejection when stage is manually changed back
We have an Approval Process on the Opportunities module that triggers when Stage is changed to Negotiation (Execute on: Edit Only). On rejection, a field update action reverts Stage back to Proposal. The issue: after rejection, AE can manually changesFree Webinar Alert! Workdrive + Office Suite in Zoho Workplace: Create, co-edit and collaborate
Hello Zoho Community! Looking for a better way to create, manage, and collaborate on your business documents? Join our upcoming webinar to discover how Zoho WorkDrive and the Zoho Office Suite (Writer, Sheet, and Show) help teams to work together fromUpdating Sales orders on hold
Surely updating irrelevant fields such as shipping date should be allowed when sales orders are awaiting back orders? Maybe the PO is going to be late arriving so we have to change the shipment date of the Sales order ! Not even allowed through the api - {"code":36014,"message":"Sales orders that have been shipped or on hold cannot be updated."}Two-Factor Authentication in Zoho Mail: Add an extra layer of security to your organization
Account security is a critical aspect of managing any organization's email. With increasing risks of unauthorized access, a single password may not always be sufficient to keep accounts protected. Zoho Mail's Two-Factor Authentication (TFA) addressesDark Mode - Font Colors Don't Work
When editing a document in Dark Mode and selecting font colors, they don't show up on screen. Viewing/editing the same document in Light Mode shows them just fine.API to post drafts for social media
I we want to post draft posts to our zoho social account and then approve and schedule them within Zoho social. is this possible with for example: https://apis.zoho.com/social/v2/post TIA JonHow to show product cards in your chatbot
Hey everyone, If you are using Guided Conversations to help customers find products, you have probably run into this problem: the bot gives customers a list of options, but they still have no idea which one to pick. There will be no images, no specs,Changing settings for auto logoff
I've noticed that when I haven't used Cliq for a while, I have to re-enter my password. That is really clumsy, especially if you have a complicated password. Because it won't be filled in automatically. Is there a way to change that behaviour? We areHow do you create invoices before sending them through Zoho Invoice?
Hi everyone, I'm curious how other businesses handle their invoicing workflow before sending invoices through Zoho Invoice. Do you: Create invoices directly inside Zoho? Prepare them first in another invoice tool or template? Use Excel or Word beforeZML Error/Bug
Hi, I would like to request for your help regarding this kind of behavior. Requested_Start_Time & End_Time - date-time fields https://......#Page:PH_Calendar_Page?reqDate=08-04-2026 https://......#Page:PH_Calendar_Page?reqDate=07-31-2026 https://....#Page:PH_Calendar_Page?reqDate=08-03-2026Item with name in different languate
Hello, is there a way to have an item with its name in different languages? For example: I sell an item in different markets and I'd like to have a Proposal and the Invoice with the Item Name in a specific language. Rino Bertolotto Zoho Specialist, STESA srlEmail notification for followers
Is there a way to enable email notification for followers of a support ticket? ie: Ticket #123 is owned by Agent#1, Agent#2 adds themselves as a follower. Whenever ticket #123 receives an email from the customer, Agent#1 receives an email. Agent#2 wouldMigration of emails from Yandex to Zoho
I am trying to migrate an yandex mail account to zoho mail account. I am confused with all the related articles/informations in the net. Could someone please outline the process to do it, just thinking about me as a novice with limited knowledge or experience. A couple of questions from the knowledge gained. 1. I believe we have to delete the yandex current MX from the website records and add Zoho MX. What happens to the emails as we remove the mail exchange record. Yandex stops updating emails andNext Page