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


    • Recent Topics

    • Option to block bookings from specific email address or ip adresss in zoho booking

      Sometime few of our client keep booking irrelevant booking service just to resolve their queries and they keep booking it again and again whenever they have queries. Currently its disturbing our current communication process and hierarchy which we have

    • Start Form on a different page (i.e., hide form pages)?

      I have a Zoho form that uses the `Field Alias - Prefill URL` feature. My goal is to have a pre-filled field that directs the user to a specific starting page in the form. For example: The URL will have a field alias that will auto-populate a field with

    • Threaded conversations for emails sent via automation

      Hi Guys, I hope you are doing well. Don't you guys think we should have an option in a workflow to notify users either as a new email or the previous email thread. For example, if you have one deal in the process and there are 10 different stages during

    • All new Address Field in Zoho CRM: maintain structured and accurate address inputs

      The address field will be available exclusively for IN DC users. We'll keep you updated on the DC-specific rollout soon. It's currently available for all new sign-ups and for existing Zoho CRM orgs which are in the Professional edition. Managing addresses

    • Create folder is fetch fails

      coming from zapier... zapier has a google drive task that searches for a specific folder in google drive, and if it fails to find the folder it will create a folder based on the search criteria, and contine along the singluar path of the flow. Trying

    • Meetups de Usuarios de Zoho - Noviembre 2025

      ¡Hola, Comunidad! Durante el mes de noviembre celebraremos los Meetups de usuarios de Zoho, encuentros presenciales pensados para quienes queráis mejorar vuestras estrategias de lead nurturing y aprender a sacar el máximo partido a herramientas como Zoho

    • Super 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. Moderation Update (8th Aug 2025): We are working

    • Microsoft Teams now available as an online meeting provider

      Hello everyone, We're pleased to announce that Zoho CRM now supports Microsoft Teams as an online meeting provider—alongside the other providers already available. Admins can enable Microsoft Teams directly from the Preferences tab under the Meetings

    • Introducing 7 New Connectors in Zoho DataPrep!

      We’ve just made data management even easier - Zoho DataPrep now supports 7 new external connectors to help you build more robust, scalable ETL pipelines. Why it matters: ✅ Broader data access ✅ More automation, less manual work ✅ Smarter pipelines, better

    • Unify All Zoho Video Meeting Experiences into One Standardized Platform

      Hi Zoho Team, We would like to share an important user experience concern regarding the current state of video meeting functionality across the Zoho ecosystem. The Problem Within Zoho, there are multiple ways to initiate or schedule a video meeting: Zoho

    • System flaws and lack of response from Zoho

      I have had to go on here as no-one is replying to my emails regarding my problem (been 10 days and no email reply) and your chat facility online through your Zoho Books software opens and closes immediately, so not functioning properly. I actually called

    • How do I increase the email attachment size in Zoho CRM ?

      It looks like I'm limited to 10MB when sending an attachment using the email widget on a record in Zoho CRM. Is there a way to increase the size? Or can I use some other tool? From what I'm reading online, I'm maxed out at 10MB. Any insight would be greatly

    • Sales Order, Invoice and Payment numbers

      Hi zoho friends, it is me again, the slow learner. I'm wondering if there is a way to have it so the Sales order, invoice and payment numbers are all the same? It would be easier for me if they were the same number so there is not so many reference numbers

    • Missing information data Zoho inventory

      there some missing data in Zoho inventory connection. pick list stock counts bin location we have requested it via mail and the support team doesn’t gove feedback. has anyone achieve to get these info or to ask other ya les

    • First day of trying FSM in the field.

      What we found. 1. with out a network connection we were unable to start a service call? 2. if you go to an appointment and then want to add an asset it does not seem possible. 3. disappointed not to be able to actually take a payment from within the app

    • Zoho Desk app update: AI powered features

      Hello everyone! We’ve introduced various AI-powered services on the Zoho Desk app. Let's take a look at what's new. Generate Content: Generate Content uses AI to formulate responses based on the your query and provides a ready-to-use reply which can be

    • Maximum tags possible in Contacts Records

      I read in some documentation that Zoho allows a total of 200 tags across all records. Is this correct? So is it not possible to have one tag per record for 500 records?

    • How to Automate Email Sequence

      I'm having trouble trying to set up a workflow to automate an email sequence. Once a group of emails in a Task has been tagged by a certain tag, I want an instant email template to be sent. After 7 days with no response, another email template would be

    • Turning off the new UI

      Tried the new 'enhanced' UI and actively dislike it. Anyone know how to revert back?

    • Zoho Sprints Android v2.0.4 app update: Item reminders, archive Epics, Kanban projects, Epic progress

      Hello everyone! In the latest version(v2.0.4) of the Zoho Sprints Android app update, we have introduced various new features. Let's take a look at what's new! Item Reminder Stay organized and never miss an important date with the all-new Item Reminder

    • Integrate your Outlook/ Office 365 inbox with Zoho CRM via Graph API

      Hello folks, In addition to the existing IMAP and POP options, you can now integrate your Outlook/Office 365 inbox with Zoho CRM via Graph API. Why did we add this option? Microsoft Graph API offers a single endpoint to access data from across Microsoft’s

    • Credit Management: #3 Setting Credit Limit for Customers

      Think about that one familiar customer of yours who always buys on credit. They usually pay on time, maybe a little late here and there, but not alarming. So, you are fine saying, "Sure, pay later." Then, one day, they place a significantly bigger order

    • Canvas View in Zoho Recruit

      Is it possible or would it be possible to have the new 'Canvas View' in Zoho Recruit?

    • Adding Reports to Portals

      Is there a way to add Reports to portals so only the user can see report templates relevant to them?

    • How to go to the next open ticket in the queue when agents closes ticket

      Zoho Desk When agent closes a ticket - eg when they choose 'Send and Close" - where is the setting that automatically redirects them to the next open ticket in the queue?

    • Update on the client portal URL for Guest users

      We’re updating the way Guest users access their Connect network. As part of this change, all client organization portals used by Guest users will now be accessible through a dedicated domain specific to each data center. The access URLs mentioned here

    • Preserve Ticket Issue Mapping When Migrating from Jira to Zoho Projects

      Hello Zoho Projects Team, We hope you are doing well. We are currently exploring a full migration from Jira to Zoho Projects, and we identified a critical limitation during the migration process involving Zoho Desk integration. Current Situation: We use

    • CRM verify details pop-up

      Was there a UI change recently that involves the Verify Details pop-up when changing the Stage of a Deal to certain things? I can't for the life of me find a workflow or function, blueprint, validation rule, layout rule ect that would randomly make it

    • Enhancements to Zoho Maps integration tasks

      Hello everyone, We're excited to announce enhancements to the Zoho Maps integration tasks in Deluge, which will boost its performance. This post will walk you through the upcoming changes, explain why we're making them, and detail the steps you need to

    • Unable to see Zoho contacts in Zoho app on ios

      Hi Support Team, I am a new user, I have created my account and installed zohomail app on iOS 16 which works. I was also able to import my Gmail contacts into Zoho Contacts, which I can see. The problem is that I can’t see these imported cobalts in Zohomail

    • Task Due Date greater than 10 years.

      We use recurring tasks in Projects where every week, month, year etc Some of our projects are greater than 10 years and we are unable to set a new due date because the difference between start date and due date is greater than 10 years. As an example

    • LINE Auto Message Connect to Zoho

      When I integrated LINE into the CRM, I was prompted to disable “Chat,” “Auto Response,” and “Greeting Messages,” and to enable the webhook. However, since I have already set up some auto-reply features in LINE, including Rich Messages and greeting automation,

    • External User onboarding for zoho connect is not really intuitive.

      So the external user is sent an invite, which has a button that directs them to login to zoho to view the invite, but if they don't have a zoho account, they cannot access that invite, which seems kinda silly, as there is not real way on for them to create

    • Enhance Sign CRM integration

      Hello all, I'm working on a custom Deluge script to enhance the integration between Zoho CRM and Sign by using a writer merge template for additional flexibility. I want to replicate the post-sign document integration that exists between CRM and Sign

    • Hosting external websites on Zoho?

      How can I host my external website on zoho? Do we have that option? I am currently with hostinger and am looking to switch to zoho. Kindly help. Thanks.

    • How can we disable "My Requests"?

      We are not using this functionality in our system at all and our users get confused.

    • How to Add Time Formula Duration (hh:mm)

      Hi everyone — I’m trying to create a formula field in Zoho CRM that calculates the difference between a “Call Start Time” and “Call End Time” and displays the duration in HH:MM format (for example: 1:04 for one hour and four minutes). My current setup

    • Disable Buttons for Users with Profiles without permission

      Hey, I've noticed that users without permission of setting up things in the marketplace, can still see the icon: On a click, you see this: It would be way better, if they couldn't see this menu icon at all. (Aside from the fact that it completely misplaced

    • How can I calculate the physical stock available for sale?

      Hey Zoho Team,  I've tried to calculate the physical stock on hand in various ways - but always receive a mismatch between what's displayed in Zoho Inventory & analytics.  Can you please let me know how the physical stock available for sale is calculated?

    • Set Custom Icon for Custom Modules in new Zoho CRM UI

    • Next Page