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

    • 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

    • Kaizen #142: How to Navigate to Another Page in Zoho CRM using Client Script

      Hello everyone! Welcome back to another exciting Kaizen post. In this post, let us see how you can you navigate to different Pages using Client Script. In this Kaizen post, Need to Navigate to different Pages Client Script ZDKs related to navigation A.

    • Kaizen #210 - Answering your Questions | Event Management System using ZDK CLI

      Hello Everyone, Welcome back to yet another post in the Kaizen Series! As you already may know, for the Kaizen #200 milestone, we asked for your feedback and many of you suggested topics for us to discuss. We have been writing on these topics over the

    Nederlandse Hulpbronnen


      • Recent Topics

      • Remote Control Functionality During Screen Sharing in Zoho Cliq

        Hello Zoho Cliq Team, We would like to request the addition of remote control functionality during screen sharing sessions in Zoho Cliq. Currently, while screen sharing in Cliq is very useful, it lacks the ability for another participant to take control

      • Looking for best practices to import data from SAP Business One (on-prem) into Zoho Analytics via Zoho DataPrep / Databridge — daily automated schedule

        Hi all, I’m using SAP Business One on-prem (SQL Server / or HANA — depending on DB backend) as our ERP. I want to build a pipeline that, every morning at 9:00 AM IST: pulls transactional data (invoices, customers, products, stock, etc.) from SAP B1, loads

      • Let us add Lookup fields in the Blueprint Transitions

        We are unable to add Lookup Fields in the blueprint transitions in Zoho Desk, we wanted to make it a requirement for our workflow but since it's not available in the transition we cannot. The lookup field exists in the Layout: But it cannot be added/selected

      • Zoho Projects API Scope for Issue Attachments

        I try to download issue attachments via the API, unfortunately I always get the following error code when trying to download the file from the supplied URL: {"ERROR_MESSAGE":"INVALID_OAUTHSCOPE","ERROR_CODE":401} indicating an auth scope error. I've tried

      • How to fetch custom fields for time entries in Zoho Project API v3

        In the previous Zoho Projects REST API, we were able to retrieve custom field details for time entries, including picklist options, using the endpoint: GET /restapi/portal/[PORTAL_ID]/timesheetcustomfields In the new Zoho Projects API v3, we tried using

      • Zoho Survey Enhancements

        We love Survey. We use it a ton. It needs some enhancements. Maybe some of these are already on the roadmap? API - this is crucial. We have some complex surveys that take place and need to update records, trigger other functions/automations, etc. I would

      • Images Don't Display on Blog

        Hi, I've just posted a new blog entry, but regardless of format (png or jpeg) Images that display in Preview mode do not display on any browser in the published post.  I've not done anything different with this post than others regarding images, please advice. Thanks! Edit:  I've discovered that moving the image files from a my sub directory folder "Pics for Blog" to the top level of the "Files" folder on my site allows the images to display live.  This, even though my other blog posts are correctly

      • Creating multiple CRM leads from a Zoho Forms subform

        Hi all, We have a heavily used intake form that is used for new leads as a part of our intake. There is a subform that allows the lead to add additional team members, their titles and other basic info. That form submission creates a new Lead and the subform

      • Checkbox Field Mapping Zoho Forms to Zoho Sign

        I have an application that will be filled out via Forms that I am mapping into a PDF Filler on Zoho Sign. I need to have a series of checkboxes mapped to the corresponding fields in Sign and I only see single checkboxes available via the mapping, though

      • MCP > Creator connection failing with Claude

        I'm trying to get claude to access any of my Zoho Creator apps and it keeps failing. I have enabled all tools for creator and ensured in claude settings that everything is authorised. Here is what claude says : Unfortunately, the error messages I'm receiving

      • Books P&L by Customer

        Lately, we have found that the Customer field filter for the Profit & Loss report in Zoho Books is no longer available. We have several projects with the same customer and look at the P&Ls by project AND by Customer (overall). Can you please add back in this field selection alongside the Project field to the P&L report filter? Thanks! -Gina

      • Sent mail sort by date disappeared

        Hello, We used to be able to sort the emails by date in the sent folder, but this feature has recently disappeared. Can we bring it back?

      • I cannot check out to Zoho People.

        When I tried to check out today, there's prompt that inhibits me to check out: To add entry in Attendance, log time for any of your jobs

      • Pricing Strategies: #2 Plan your Service Offerings using Plans

        Meet Harvey & Mia, hailing from the same Tech school, carrying the dream of setting up their own IT maintenance firm in their location. They drew up a clear business plan and put their business in motion on New Year's Eve. They had great reception right

      • Open a record to edit based on another form being edited

        Hi all, I am trying to edit a record based on another record being edited. It works out like this: When I create a Monthly_Update and then submit I open the Monthly_Levels form and pass the ID from the Monthly_Update to a field called mu. I want it to

      • Problem with signature on zoho survey

        Hello, I'm trying to export individual responses with signatures on zoho survey. But the signatures on some of my surveys are not exported as the original image, but as a generic image, same for all (screen joins). Is there a solution to have the signatures

      • Change in Zoho CRM API?

        Hello, I am using the Zoho API trough the PHP SDK v2.1 Since few days, I noticed that I have to change the way I pass the data to the API when I create, update, or upsert a record. Dates Before I was passing a PHP date object to "$record->addKeyValue(...)",

      • MTA - BAD IP reputation by outlook/hotmail

        Messages to Microsoft email servers are bouncing back due to poor reputation. Message: 4.7.650 The mail server [136.143.188.206] has been temporarily rate limited due to IP reputation. For e-mail delivery information see https://postmaster.live.com (S775)

      • QuickBooks Extension for Zoho CRM - Advanced Features -2025

        Hello Everyone, We’re happy to announce the latest version of our QuickBooks Extension for Zoho CRM, now officially live on the Zoho Marketplace! This release introduces one-click data sync, a user-friendly UI, enhanced performance, and a powerful set

      • Changing Department often causes the Firefox tab to freeze

        Title, it doesn't seem to happen with neither Opera nor Chrome. And even in Firefox, sometimes it just lets me change the department I'm in no problem, even to All Departments which is probably the most, like, resource heavy? But most of the time, the

      • Need to integrate Zoho Mail Mobile app with Zoho Meeting Mobile App for Android and Apple

        Hello Zoho Team, Please bring integration of Zoho Mail Mobile app with Zoho Meeting for Android and Apple Thanks

      • ¡Muchas gracias por participar a los Meetups de Usuarios de Zoho! Y Novedades del ecosistema Zoho

        ¡Hola Comunidad de Zoho en Español! 👋 Después de un breve lapso de tiempo, volvemos con una nueva edición de nuestro Community Digest, donde te contamos las novedades de los productos de Zoho en los últimos meses. Estas mejoras se centran en nuestros

      • Anyway to move mail from one account to another yet?

        Hello, Is there any way to move email from one mailbox account to another mailbox account in zoho yet? Thanks, Ryan.

      • Using a CRM Client Script Button to create a Books Invoice

        Hello, I need help handling error messages returned to my client script from a function. The scenario I have setup a client script button which is available from each Deal. This CS executes a crm function, which in turn creates an invoice based on the

      • Building Toppings #2 - Learn how to use Bigin's Developer Console to build toppings

        Hey Biginners, In our last post, we discussed what toppings are, why they're essential to extending Bigin's capabilities, and how the Bigin Developer Center serves as the starting point for building them. As a cloud platform, the Developer Center empowers

      • Proposal for Creating a Unique "Address" Entity in Zoho FSM

        The "Address" entity is one of the most critical components for a service-oriented company. While homeowners may change and servicing companies may vary, the address itself remains constant. This constancy is essential for subsequent services, as it provides

      • Links are incorrect when sent out

        I'm adding in hyperlinks into my eDM. When I send a test email, it's all correct. However, when I send out the eDM, all the hyperlinks jump up one space so none of the links are opening to the correct page. Why is this happening and how can I fix it?

      • Tip of the week #16 - Search and filter threads based on criteria

        Zoho TeamInbox lets you search and filter threads with any information that you have about the thread. You just have to input the criteria and Zoho TeamInbox will list all the threads that match the condition.   Firstly, there is a global search you can

      • Introducing recipient authentication via Stripe Identity in Zoho Sign

        Hi everyone! It's important to authenticate your recipient's identity before they access and sign important documents to ensure the highest level of compliance. Zoho Sign already helps businesses do this with various authentication methods: SMS OTP Email

      • Introducing Multi-Asset Support in Work Orders, Estimates, and Service Appointments

        We’re excited to announce a highly requested enhancement in Zoho FSM — you can now associate multiple assets with Work Orders, Estimates, and Service Appointments. This update brings more clarity, flexibility, and control to your field service operations,

      • CRM: hosting a single html file in Zoho and displaying it as a widget

        I have seen that CRM offers the option of uploading a web project to Zoho itself and displaying it as a widget in CRM. The instructions then talk about setting a development environment with Node and developing an application to upload to Zoho. But I

      • Keep Converted Leads

        How do I keep the converted leads in the Leads Module after conversion (converting it to account, contact, deal). I want to add it in a converted stage in the leads module in order to get a report or dashboard and see all converted leads from my pip

      • Customizing Global Search Settings for All Users

        Hi Our team use the brilliant global search functionality within CRM many many times daily. But, we struggle with the out-of-the box columns that CRM gives you. We are always telling users to customize this look to more suit our business, to show the

      • Introducing Formula Fields for performing dynamic calculations

        Greetings, With the Formula Field, you can generate numerical calculations using provided functions and available fields, enabling you to derive dynamic data. You can utilize mathematical formulas to populate results based on the provided inputs. This

      • From Zoho CRM to Paper : Design & Print Data Directly using Canvas Print View

        Hello Everyone, We are excited to announce a new addition to your Canvas in Zoho CRM - Print View. Canvas print view helps you transform your custom CRM layouts into print-ready documents, so you can bring your digital data to the physical world with

      • Tip of the Week #77– Stay informed of the activities happening in your organization

        Whenever a message is handled in Zoho TeamInbox, every action is recorded in the Activity Log. This ensures you always know what’s happening across your teams and inboxes. To access it, simply click the Audits icon on the left pane’s top bar after logging

      • Zoho Logs - Not seeing logs since 30 Nov

        Hi, we have a few functions running, I am testing some new ones and noticed that although I can see executions, I cannot see any logs, even when the first line on the functions is a log. I reviewed some existing functions, one of which is invoked on a

      • Workdrive MS Office integration

        Have installed subscribed version of Zoho WorkDrive VSTO runtime not found is the error when I try to install Zoho_WorkDrive_For_Office Unable to open work files in Excel and Word Urgent, since I have migrated all my OneDrive files to work drive already

      • How do I create an update to the Cost Price from landed costs?

        Hi fellow Zoho Inventory battlers, I am new to Zoho inventory and was completely baffled to find that the cost price of products does not update when a new purchase order is received. The cost price is just made up numbers I start with when the product

      • How to change Zoho Vault password

        I am searching where I can change the Vault Password after having changed the Zoho account password. I don't see this option anywhere in my account. It should be simple and accessible! Please help. Thanks!

      • Next Page