Kaizen #152 - Client Script Support for the new Canvas Record Forms

Kaizen #152 - Client Script Support for the new Canvas Record Forms




Hello everyone!

 Have you ever wanted to trigger actions on click of a canvas button, icon, or text mandatory forms in Create/Edit and Clone Pages?  Have you ever wanted to control how elements behave on the new Canvas Record Forms? This can be achieved using Client Scripts support for Canvas Record Forms.

Welcome back to another interesting Kaizen post!  In this post, we can discuss Client Script Support for the new Canvas Record Form. 

In this kaizen post,

1. What is a Canvas Record Form? 
2. Client Script Events for the Canvas record forms
3. Supported ZDKs
4. Use Case 
5. Solution
6. Summary
7. Related Links

1. What is a Canvas Record Form?

Canvas Support for Create, Edit, and Clone Pages is referred to as Canvas Record Forms. With the advent of Canvas Record Forms, you can customize fields and sections of your form and ensure that every interaction with your CRM is efficient. It shifts the paradigm from simple data management to creating a more engaging, intuitive CRM experience. Click here for more details about Canvas Record Forms. Client Script support for these Canvas Record Forms unlocks new customizations like scrolling to a particular section automatically when a product category is selected, display a custom message when an icon or image is clicked, show a flyout or a pop up when a button is clicked in Create/Edit and Clone Pages.

2. Client Script Events available for the record forms

  • Mandatory Fields Form 
  • Canvas button
  • Icon 
  • Text
  • Page
  • Field
Click here for more details on Client Script Events.

3. Supported ZDKs

In addition to the ZDKs available for the Create/Edit/Clone (Standard) Pages, the following list of additional methods can also be used in Create/Clone and Edit(Canvas) Pages .
  • scrollTo() - Make the page scroll to a particular element.
  • highlight() - Highlight an element.
  • setVisibility() - Hide or show an element.
  • addToolTip() - Add tool tip to an element.
  • removeToolTip() - Remove tool tip for an element.
  • addStyle() - Add styles to an element.
  • freeze() - Freeze a particular element.
  • setReadOnly() - Make an element read-only
  • setContent() - Add content to the text element.
  • setImage() - Add an image.
  • setActive() - Make an element active.
For more details about these ZDKs, click here.

4. Use Case

Consider Zylker, a manufacturing organization. Their service agents use the Orders module of their CRM to create and manage orders for their customers. They have used the latest Canvas Record Form view for their Create Page as shown below.



Below are their requirements.

A. When the checkbox "Is shipping address same as billing address?" is checked, the Shipping Address section should not be visible.
B. When the user clicks the "Add Dental Products" button, a pop-up should appear showing the Dental Instruments available in the Products module, and the instrument details selected in this pop-up should get inserted as rows in the sub-form.

5. Solution

To accomplish the above requirements on the Create Page(Canvas),  you need to create the following two Client Scripts.

A. Client Script with field event on field "Is shipping address same as billing address?"

  • 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.
  1. let elem = ZDK.UI.getElementByID('shipping_address');
  2. if (value==true)
  3. {
  4. elem.setVisibility(false);
  5. }

  7. else 
  8. {
  9. elem.setVisibility(true);
  10. }

  • In the above script, "value" will hold the boolean value which hold the user selection of the check box "is-shipping_same_billing". If it is true, then using setVisibility() you can hide the shipping address section. To fetch the ID of the Shipping Address section, you can use ZDK.UI.getElementByID().
  • Here is how the Client Script works.



  • When the user marks "Is shipping address same as billing address" true, you can see that the "Shipping Address" section disappears. 
B. Client Script with button event on canvas button "Add Dental Products"

  • 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.

  1. let products_list = ZDK.Page.getField('Product_List').getValue();
  2. log(products_list);
  3. if (products_list.length === 1) { // Clear subform if empty row
  4.     !Object.values(products_list[0]).every(value => !!value) && products_list.pop();
  5. }
  6. // Open widget with product category & max. allowed rows based on existing subform data
  7. let selected_products = ZDK.Client.openPopup({
  8.     api_name: 'Choose_Products', type: 'widget', header: 'Choose Products', animation_type: 1, height: '570px', width: '1359px', left: '280px'
  9. }, {
  10.     product_category: "Dental Instruments", max_rows: 25 - products_list.length
  11. });

  13. log("products selected from widget: ", selected_products);

  15. // Update Selected Products from the widget Popup 
  16. if (selected_products.length) {
  17.     
  18.     selected_products.forEach(product => {
  19.         products_list.push({ Product_Name1: { id: product.id, name: product.Product_Name }, Quantity_of_Products: 1, Unit_Price1: product.Unit_Price });
  20.     });
  21.     console.log(products_list);
  22.    ZDK.Page.getField('Product_List').setValue(products_list);
  23. }

  • Whenever the button "Add Dental Products" is clicked, you can open a widget as a pop up using ZDK.Client.openPopup(). The details of user selection in the widget will be fetched in the "selected products" variable. You can iterate and create a list to be populated to the Dental Instruments Section. Then this list of values can be populated with the help of setValue().
  • Here is how the Client Script works.



  • When the user clicks the "Add Dental Products" button, a widget of button type that shows the list of Instruments appears. This gets displayed by the Canvas Button event of Create Page (Canvas) and the selected records get inserted in the Dental Instruments subform.
  • Here, using Client Script, you can instantly add all selected products with a single click, eliminating the need to repeatedly click the "+ Add row" button for each product.

6. Summary

In this post, we have discussed,
  • How to hide a section dynamically using Client Script.
  • How to open a Widget , fetch the content and populate it to a Canvas page.

7. Related Links




Previous Post: Kaizen #151 - Leveraging ZDK CLI with VCS   |     Kaizen Collection: Home


    • Sticky Posts

    • Announcing the new SKILL.md for Zoho CRM and the updated OAS repository!

      We are introducing a new zoho-crm skill to make working with Zoho CRM Developer tools (like APIs, functions, widgets, client scripts, queries etc) easier and faster, with the help of AI in your preferred AI harness like Claude Code, Codex, Cursor, VSCode

    • Kaizen #256 - Build an Arrival Readiness Web Tab in Zoho CRM

      Hi everyone! Welcome back to the Kaizen series! In the post, we discuss a use case in hospitality industry: how an Arrival Readiness web tab widget can be used to let reception staff identify and resolve issues before arrival of guests. Use case In the

    • 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 this

    • Kaizen #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 how

    • Recent Topics

    • Payroll needs to automatically remit taxes, not just give me the calculations

      Wagepoint, PayEvo, Waveapps, etc... All your competitors deposit employee payroll, but they ALSO remit taxes automatically. Get with the program, your Payroll app is extremely sparse.

    • Creating new Teams meeting from CRM doesn't enable Team functions in the meeting

      Hi I'm trying to set up the meeting integration and I've seen that when I create a Meeting in the CRM and set the location to Online and the Provider to Teams, and complete the boxes, add a participant etc, whilst the meeting is created in Teams, the

    • Approval Process configuration is now more flexible and fully customizable

      The Approval Process is back with an improved user experience designed to make it easier to build structured, flexible, and intuitive approval workflows. Here’s a look at some of the key enhancements: Name Your Rules & Stages You can now give each approval

    • All 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. 24

    • 👍 Zoho CRM's Notes now gets Reactions and a new look

      Available in SA and JP DCs. Rolling out to other DCs in phases. Hello everyone, Notes help users capture important updates, collaborate with teammates, and maintain context for records. Now with Note Reactions, users can quickly acknowledge updates, express

    • Admin Logging in as another User

      How can a Super Admin login as another user. For example, I have a sales rep that is having issues with their Accounts and I want to view their Zoho Account with out having to do a GTM and sharing screens. Latest Update (27th April 2026): With the early

    • Introducing Approval SLA for Approval Processes

      Approvals can sometimes be delayed when approvers do not respond within the expected timeframe, which can slow down your recruitment processes. With the new Approval SLA in Zoho Recruit, you can set deadlines for approval requests and define automated

    • Introducing Microsoft Word Integration in Zoho Contracts

      We are excited to announce a new feature that brings contract authoring and negotiation in your familiar environment — the Microsoft Word Integration. What This Integration Brings The Microsoft Word Integration connects Zoho Contracts with the Microsoft

    • Map My Client Locations for Zoho CRM Extension: Turn CRM Addresses Into Action

      Hello everyone, Your CRM knows who your customers are. Now, see where they are on the interactive map directly from Zoho CRM. Introducing Map My Client Locations for Zoho CRM, an extension built for businesses that rely on sales visits, field service,

    • Scheduled and Automated Report Delivery from Zoho Projects

      Zoho Projects has useful reports including task reports, timesheet summaries, and workload charts. However, there is currently no way to schedule these reports to be automatically delivered to stakeholders on a recurring basis. This means: Project managers

    • How can I filter inactive/disable agent tickets?

      Hello, We have an user-agent that left the company and we inactive/disabled his agent. So, now I can no longer filter or search tickets that he is the current owner, or even create a rule to reassign tickets to another person when the ticket is reopen.

    • Add 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 in

    • Dashboards for Customers

      Is it possible to build dashboards for each customers in the community for their tickets?

    • Collaborate Visually with Whiteboard in Zoho Projects

      Whiteboard in Zoho Projects allows you to collaborate visually by creating diagrams, annotating designs, and sketching project workflows using shapes, text, and images within project modules. Team members can work simultaneously, improving productivity

    • Fields in MS-Word Template

      With the new MS-Word integration, how does one create fields in an imported MS-Word document which can then automatically be populated with an Intake Form?

    • Displaying only unread tickets in ticket view

      Hello, I was wondering if someone might be able to help me with this one. We use filters to display our ticket list, typically using a saved filter which displays the tickets which are overdue or due today. What I'd really like is another filter that

    • Zoho Bookings Flow Step not Triggering on Appointment booked

      I noticed yesterday that my appointment booked flows were not triggering when we had booked appointments in Zoho Bookings. I checked the trigger and noticed the trigger values updated to be defined to a workspace and service event rather than our whole

    • UCP: Why We Killed the Multi-Portal Mess and Simplified Customer Self-Service

      Let's talk about the multi-portal mess nobody wants to admit that it exists. Your customer needs an invoice from one app, wants a ticket update from another, and has a project waiting in a third, each behind its own login, its own UI, its own "was it

    • Zoho Tables is now available in Zoho One!

      Hello Zoho One users, We’re excited to announce that Zoho Tables is now included as a part of Zoho One suite! As teams grow, managing projects, approvals, inventories, campaign trackers, and operational workflows across multiple spreadsheets become difficult.

    • Zoho Publish is now available in Zoho One!

      Hello Zoho One users, We’re excited to announce that Zoho Publish is now included as part of the Zoho One suite! As businesses grow, managing Google Business Profiles across many locations becomes challenging. Business information needs to stay accurate,

    • 📣 Ask the team behind Zoho SalesIQ: Summer '26 Q&A

      Hi everyone! Following our recent webinars, Summer '26 Release: What's New in Zoho SalesIQ—where we walked you through all the new features, what they do, and how they work—and Driving the AI Evolution: Building Smarter Customer Experiences with Zoho

    • Virtual Option for Fields

      Hi, I would like to be able to choose another option other than Read-Only or Disabled, such as Virtual. And with Virtual, the field is shown on the form and avilable in rules, but NOT saved to the Database. A use case is having multiple Large Lists of

    • Upcoming update to field values in Zoho Books - Zoho Analytics integration

      Hello Users, We'd like to inform you of an upcoming update to the tax_category values in the Zoho Books integration for Zoho Analytics from October 20, 2026. What's Changing? tax_category field values are being renamed to align with the conventions already

    • Prefix & Suffix on Single Line, Number, etc.

      Hi, I would like to have the same Prefix and Suffix that was added to the Unique ID on Text and Number Fields. Use case could be as basic as temperature, as per another Idea I have to use Single Line (Text) for a number that might have leading zeros today,

    • Announcing the new SKILL.md for Zoho CRM and the updated OAS repository!

      We are introducing a new zoho-crm skill to make working with Zoho CRM Developer tools (like APIs, functions, widgets, client scripts, queries etc) easier and faster, with the help of AI in your preferred AI harness like Claude Code, Codex, Cursor, VSCode

    • Handle Leading Zeros in a Number Field

      Hi, If I use a Number Field, set with Min 7 Digits and Max 7 Digits, and enter 0000001, it will result in 1 and an error as it removes the leading zeros, the same with entering 0012340 will result in 12340 and error. So I have to use a Text Field and

    • Kaizen #259 - Working with Zoho CRM APIs using zoho-crm skill

      In the previous Kaizen, we introduced the zoho-crm skill and discussed how it can work with different CRM developer capabilities. The zoho-crm skill makes it easier to work with Zoho CRM without having to remember every API endpoint, request structure,

    • How can I populate dropdown data with information from another source or app?

      I want to maintain a list of items in another app (say in excel or another database) and sync those as items in a drop down menu, instead of copy pasting to import. Is this kind of a feature available?

    • Zoho Community Digest - September 2026 | Part 1

      Hi everyone, and welcome back! September opens with a strong set of updates. Zoho CRM brings workflow automation down to the subform row level and ships a new SKILL.md for AI-assisted development, Zoho Desk introduces conditional branching with Automation

    • Tip #88 – Manage Incoming Support Requests Efficiently with the Service Queue – 'Insider Insights'

      Hello Zoho Assist Community! Not every team has a dedicated IT department or a fully built-out sysadmin setup. For smaller teams, when something breaks, there's no internal ticket system to log into, no helpdesk queue to route through, and no clear way

    • Delete CRM Portal

      How do I delete portals from my CRM? I created one just to test, it is not in use and is disabled but it's existence is preventing me from marking fields in modules as "required" unless I make it 'read/write' in the portal first. I'd rather just delete

    • Zoho Books | Product updates | July 2026

      Hello users, We’re excited to bring you the latest updates in Zoho Books for July 2026! This month's release introduces Terminal Payments, CMP-08 filing for composition taxpayers, SEPA Credit Transfer support, and Self-Billed Credit Notes and Debit Notes

    • Calendar invites from Contacts not being assigned to Account in CRM

      Hi all It's that time of year again when I try to get calendar and meetings sorted in CRM. I have two way sync enabled. I have the option set to check for customer meeting invitation mail and to add them as meetings. However, whilst those meetings show

    • Kaizen #258 - Getting Started with zoho-crm SKILL.md

      Howdy tech wizards, Welcome to a fresh week of Kaizen. This week, we are taking a look at the zoho-crm SKILL.md, an Agent Skill designed to help AI coding agents work with Zoho CRM’s developer capabilities. What is zoho-crm SKILL.md? The zoho-crm skill

    • Zoho Tables is now live in Australia & New Zealand!

      Hey everyone! We’ve got some great news to share — Zoho Tables is now officially available in the Australian Data Center serving users across Australia and New Zealand regions! Yes, it took us a bit longer to get here, but this version of Zoho Tables

    • Dashboard/Component filter by probability

      Hi all Can I request the ability to add a Component or Dashboard filter for Deal Probability? Would be useful to be able to see data of deals more than 60% probable. Olly

    • Stock (on-hand) Items not updated after using Composite items

      Hi there, I created a Composite item (consist of 3 items). After I created the Composite item, I invoiced it and shipped the items. However the actual stock on hand of the 3items didn't change at all. Have you guys encountered this? Thank you Regards,

    • Is 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 detail

    • Important changes for users with Zoho accounts in the UAE and other Data Centers

      What's changing? Previously, the same email address could be used to create separate Zoho accounts in both the UAE data center and another Zoho data center (such as US, EU, IN, AU, JP, CA, SA or SG). With this change, an email address can be associated

    • Conditional Layouts On Multi Select Field

      How we can use Conditional Layouts On Multi Select Field field? Please help. Moderation update: Multi-select picklist fields are now supported in Layout Rules. Additionally, Layout Rules is now available in the Professional Edition. These updates have

    • Next Page