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

    • 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

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

    • Recent Topics

    • Filtering in Help Center

      Hi, our ticket system is based on a set of structured status categories. The customer must be able to filter by these status. How can we add "Status" as filter to the help center. In the same moment we do not need filters e.g. as "channel". How can we

    • Can multiple agents be assigned to one ticket on purpose?

      Is it possible to assign one ticket to two or more agents at a time? I would like the option to have multiple people working on one ticket so that the same ticket is viewable for those agents on their list of pending tickets. Is something like this currently

    • CRM gets location smart with the all new Map View: visualize records, locate records within any radius, and more

      Hello all, We've introduced a new way to work with location data in Zoho CRM: the Map View. Instead of scrolling through endless lists, your records now appear as pins on a map. Built on top of the all-new address field and powered by Mappls (MapMyIndia),

    • Zoho Sign Not Delivering

      I have sent several contracts out via Zoho Sign.   They do not seem to be getting delivered.  I had one person receive it, but the others have not.   I had one person tell me they sent it back to me and never got it and doesn't show as signed.  I've sent

    • Automatic Matching from Bank Statements / Feeds

      Is it possible to have transactions from a feed or bank statement automatically match when certain criteria are met? My use case, which is pretty broadly applicable, is e-commerce transactions for merchant services accounts (clearing accounts). In these

    • Tip #63- Exploring Technician Console: Elevate to Admin Mode (Windows & Mac)- 'Insider Insights'

      Hello Zoho Assist Community! Ever been in a remote support session where you couldn’t complete a task because you didn’t have admin privileges? Maybe installing software, accessing secure system areas, or rebooting into Safe Mode just didn’t work because

    • Prevent accidental duplicate entry of Customer Ordersome

      Zoho Support has confirmed that Zoho currently does not have any method (using Deluge, flow or any other method) to alert a user when a sales order has been entered twice using the same customer reference number (i.e. a duplicate). Most ERP platforms

    • Zoho Mail - Email Reminder template (default)

      Zoho Mail Users, Does anybody here use the email reminder template? I'm asking Zoho to allow and add us to select which one of our many templates will be our default. It allows us to operate more efficiently. It's a Checkbox. If you feel this can benefit

    • Windows Desktop App - request to add minimization/startup options

      Support Team, Can you submit the following request to your development team? Here is what would be optimal in my opinion from UX perspective: 1) In the "Application Menu", add a menu item to Exit the app, as well as an alt-key shortcut for these menus

    • Canva Integration

      Hello! As many marketing departments are streamlining their teams, many have begun utilizing Canva for all design mockups and approvals prior to its integration into Marketing automation software. While Zoho Social has this integration already accomplished,

    • Announcement integration between Zoho People and Zoho Connect

      As we're using these 2 products, there're areas of overlapping especially in the Announcement. When there's a new announcement in Zoho People, can it push to the company wall in Zoho Connect?

    • Does Zoho Mail Have Popout windows?

      I recently switched my work email over to Zoho and everything I read said that you can popout the draft email as you're writing, however, all the pictures or info I've seen show the typical popout arrow in the top right, which I can not for the life of

    • Can I reorder how the staff are displayed on the booking page?

      As the title suggests, can I change this? Either reorder manually reoreded to my preference, or automatically (a-z, z-a etc.)

    • Bulk upload image option in Zoho Commerce

      I dont know if I am not looking into it properly but is there no option to bulk upload images along with the products? Like after you upload the products, I will have to upload images one by one again? Can someone help me out here? And what should I enter

    • Subheaders for Sections in forms

      Currently, every form section has a field name, which one can choose to show/hide to the end user. It would be great if there was an option to show a SUB-HEADER in addition to a header. It would be useful for explaining to the end user what the section

    • Custom view inconsistencies

      Why is "is not" missing from criteria, along with other comparison operators ??? It makes it almost impossible to build required custom views, I don't want "void" invoices listed & why on earth would "Void" invoices be showing when the criteria includes

    • Promote a layout to standard so I can delete one layout

      Similar to this and many other topics: https://help.zoho.com/portal/en/community/topic/set-layout-as-standard The problem, every model has a standard layout, which is what we use most of the time... But as the business grows and evolves we may have to

    • Can Zia summarize fields?

      A great use case of AI for me would be summarizing company descriptions. We often get long winded descriptions from databases or scraping websites, then reduce them to a couple of sentences stating what a company actually does. Is there any way within

    • Zoho Recruit Community Meet-up - India (Venues Finalised)

      Zoho Recruit Community Meet-up - India (Venues Finalised) Namaste, India. 🙏🏼 The Zoho Recruit team is hitting the road—and we're absolutely excited behind the scenes. Join us for the Zoho Recruit India Meet-up 2026, a morning designed to make your recruiting

    • Table dimensions

      I try changing the dimensions of the table on my computer but it doesn't change. Do I have to be a premium member or does it only work on the app?

    • Zoho CRM Community Digest - January 2026 | Part 2

      Hello Everyone! Here’s the second part of January’s Zoho CRM Community Digest, rounding up the remaining highlights from the month. From newly rolled out updates to thoughtful implementation questions and practical solutions, the community once again

    • Find and Merge Duplicates to trigger webhook

      My sales team uses the Find and Merge Duplicates feature often to cleanup records in the CRM. We use webhooks to signal to our internal tools database when new Contacts are created, updated, or deleted, in order to keep our DB in sync with Zoho CRM. However,

    • Introducing WhatsApp integration and quick editing capabilities in Zoho Sign

      Hi there, Zoho Sign already helps users collect signatures via email and SMS, and we're happy to announce that you can now send documents and authenticate recipients right through WhatsApp. Some of the key benefits include: Communication with recipients

    • Dynamic Field Folders in OneDrive

      Hi, With the 2 options today we have either a Dynamic Parent Folder and lots of attachments all in that one folder with only the ability to set the file name (Which is also not incremented so if I upload 5 photos to one field they are all named the same

    • Logging Out of FSM

      I have tried to log out of FSM app of the last person and it will not let me do so. I need to log in to my account.

    • Enhancement in Zoho CRM: Control who gets to participate in a forecast by customizing the user hierarchy

      Include only users from the sales function; exclude the rest Dear Customers, We hope you're well! We started this year with a series of exciting enhancements to Zoho CRM and to this list, we are thrilled to add an enhancement to forecasting. Let's talk

    • Multiple Zoho One accounts

      Hello. I'm searching for a solution to run multiple organizations under 1 Zoho One account or have a different Zoho One account for each organization and still be able to easily login to each. Currently Zoho One doesn't allow the same email address to

    • Tips and tricks #63: Hold and Drag to select elements in the Show app for iOS

      Hello everyone! Welcome to another tips and tricks article. In today's article, we will learn about the Hold and Drag function in the Show app for iOS. The Hold and Drag option lets you select multiple elements on a slide quickly. Once they are selected,

    • Organize and manage PDFs with Zoho PDF Editor's dashboard

      Hello users, Zoho PDF Editor's dashboard is a one-stop place to upload, sort, share PDF files, and more. This article will explore the various capabilities that Zoho PDF Editor's dashboard offers. A few highlights of Zoho PDF Editor's dashboard: Upload

    • Possible to generate/download Quote PDF using REST API?

      See title. Is there any way after a quote has been created to export to a PDF using a specified template and then download it? Seems like something that should be doable. Is this not supported in the API v2.0?

    • Free Webinar - AI for email: Helpful or Hype?

      Hello, Zoho Mail community! 👋 We're kicking things off with a webinar you won't want to miss—and yes, we're going there: Is AI in email actually useful, or is it all hype? In this session, two of our experts will have an open, no-fluff conversation about

    • Balancing access, security, and productivity with Email Policy

      An organization typically includes multiple user groups, such as leadership, sales, and support, each with different email usage patterns and security needs. Administrators must balance flexibility and control, thereby ensuring email usage aligns with

    • Is it possible to update multiple work items at once?

      Hi, Is it possible to update the statuses/release tags of multiple work items at once? I came across this thread that says it's not possible at the moment, but it was related to the Sprints mobile app. Does this feature not exist in the website as well?

    • See Every IM Conversation as It Happens

      Instant messaging moves fast. Customers expect quick replies and smooth conversations across WhatsApp, Instagram, Facebook, and live chat. But without real-time visibility, small issues become big problems. A session stays open longer than expected. A

    • Release Notes | January 2026

      We have rolled out a set of powerful new enhancements across Zoho Vertical Studio that bring several long-awaited capabilities to your applications. These updates focus on deeper customization, smarter automation, better reporting, and improved usability

    • Product Request: Send email to Secondary email

      Guys, we should be able to send the campaign to the secondary email too.  Is this on the plans for Zoho Campaign? It looks like I can map the secondary email from the CRM to the Campaigs, but can not send the message.  

    • Franchise

      Is there a solution of how to organize global franchise organisations?

    • Holidays

      Hi; For defining Holidays, you need to add logic to handle the year as well as the month & day. We need to be able to enter Holidays for the next year. I need to add a holiday for January 2, 2017, but I can't until January 1st, which is a Sunday and we

    • Composite Product (kit) - Dynamic Pricing

      I am setting up Composite Products for item kits that I sell. I also sell the items from the kit individually. Problem is when pricing changes on an individual part, the Composite Product price does not change meaning when the cost of item # 2 in the

    • Urgent: Slow Loading Issue on Zoho Commerce Website

      Dear Zoho Support Team, I am experiencing slow loading times on my Zoho Commerce website, which is affecting its performance and user experience. The issue persists across different devices and networks. Could you please investigate this matter and provide

    • Next Page