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

    • CRM Portal Lookup Linkage and Related Fields

      hi, if someone can give me the right path, would be greatly appreciated. we want to do a customer portal for our partners who we issue work orders for our customers, the linkage via lookup fields Partner -> Work Order -> Customer in our portal, the primary

    • HOW TO: Searching a thread (email body/text) with a custom function, allowing filtering and specific actions

      We are still trialing out Zoho at this time, but have found a major expected feature to be missing - the ability to search within the text of an email for automation/workflows. NOTE: You need to create a connection for zohodesk under settings -> Developer

    • Cold emails not allowed?

      I planned to use Zoho Mail to send businesses some cold emails to offer my freelance writing services, but I noticed that the anti-spam policy is very strict -- no commercial emails whatsoever without prior permission from the recipient? I would be very

    • Zoho Team Inbox - roadmap

      Hi, would be good to understand the Teaminbox roadmap, in particular: 1. API / Zoho Deluge connections. We have a process where the each email needs to be either tagged or assigned daily. It would be great if we could automate a 5pm alert for any exemptions

    • Leave Time - Past Dates by Pay Period

      Under Settings | Leave Policy | [policy name] | Restrictions, one can set a number of days that an employee can go back to apply leave. This is very good and very needed. However, in most organizations, the real deadline isn't X number of days from the

    • Link webform to a job opening

      I have a webfrm embeded on my website and everytime a candidates fill the form, their candidate status is to new. Is it possible that it links to a specific job opening instead of me having to assing it manually ? Thanks

    • New in WorkDrive: Organize your storage using Data Templates

      Organizations generate huge volumes of data day in and out. From financial reports, client details, and resumes to promotional images, product videos, and more. The list is endless. When you have so much data to manage, you need to classify your documents and structure them in a way that makes them more accessible.  This is exactly what WorkDrive's Data Templates lets you do! You can create Data Templates, add meta data as custom fields, and associate those fields with files and folders based on

    • Need Native Support for docx files in Zoho Writer

      Absolutely love Zoho Writer, but often need to share files by email with people who are in the Office ecosystem. Downloading a file as docx, then sending it by email, getting the comments back, converting it to Zoho format, editing it, then converting

    • Mirror Component in Zoho CRM: Access real-time related data without leaving your record

      Hi everyone, This feature is now available for the JP, CA, SA, UAE, and AU DCs. We're excited to bring to you Zoho CRM's mirror component, which presents relevant data on a record's details page and keeps everything users need in one place without having

    • Associate records via the Multi-select lookup RELATED LIST via API

      In the REST API, is there a way to associate records for a multi-select lookup related list other than via the linking module? There are two methods for the lookup: 1. via insert records API 2. via the linking module ...as described in https://help.zoho.com/portal/en/community/topic/kaizen-125-manipulating-multi-select-lookup-fields-mxn-using-zoho-crm-apis

    • What's New - May 2026 | Zoho Backstage

      Another month, another round of improvements in Zoho Backstage. We’ve been busy refining existing experiences and introducing new capabilities to help you plan, manage, and deliver successful events with less effort. Here’s a quick look at everything

    • Product sorting in Zoho Commerce - how can I influence standard behaviour?

      Hello Zoho, I want to sort my products by e.g. name, SKU (Ascending / Descending) or by another attribute. I could neither find any solution in the settings, nor an entry in this help. Can you advice how this would work? Seems the standard sorting is

    • Dynamically prefill ticket fields

      Hello, I am using Zoho Desk to collect tickets of our clients about orders they placed on our website. I would like to be able to prefill two tickets fields dynamically, in this case a readonly field for the order id, and a hidden field for the seller

    • Price Managment

      I have been in discussions with Zoho for some time and not getting what I need. Maybe someone can help explain the logic behind this for me as I fail to understand. When creating an item, you input a sales rate and purchase rate. These rates are just

    • Workflow Assistance in Zoho CRM

      Our client's sales team visits customers on-site and currently fills a physical paper form to capture customer details, and then separately re-enters the same data into Zoho CRM via the mobile app — resulting in double data entry. We want the salesperson

    • Integration problem between zoho crm and zoho forms for an update in zcrm, with two mapped custom fields

      Hello everyone, I need to correct an existing integration between Zoho CRM and Zoho Forms: the use case is that a user needs to send an email to a contact, who will click on a button in this email, redirecting to a Zoho Forms. The contact can update or

    • Delivery Note without services

      Hi all, It there a possibility to create a delivery note from an invoice without the listed services "idem type: service"? Thank you in advance, Michel

    • Automation Series: Auto-assign Task Followers

      As task progresses, several users are required to stay aware of the updates to plan their upcoming work items efficiently. Manually adding users as followers for an active task might create additional overhead. With this automation, followers can be added

    • Send Email Directly to Channel

      Hi, We are coming from Slack. In Slack each channel has a unique Email address that you can send emails too. I currently forward a specific type of email from my Gmail InBox directly do this channel for Verification Codes so my team doesn't have to ask

    • Terms & Conditions

      I have defined Terms & Conditions in the invoice setting and have set %TermsAndCondition% where I want it to appear but nothing shows up in that area. Is this something we have to define per invoice or can we have a global variable?

    • Billing Status Update

      Hello Latha, I’m working on a new automation (deluge) to fulfill one of our requirements. In this automation, there is a step to update the Work Order billing status from “Not Yet Invoiced” to “Non-Billable.” I tried to find the API information relevant

    • Export to pdf. Images not showing

      My report contains a column with images. When I export it as a list, the images do not show in the PDF document. I have published the report but the images are still not visible. What should I do so that the photos appear in the export?

    • Zoho CRM Kiosk question – Passing Screen Fields to a Function

      I am building a Kiosk in Zoho CRM to create new Supplier (Vendors) records. Current setup: Screen 1 contains user input fields: Supplier Name (Vendor_Name) First Name (First_Name) I created a Deluge function: createSupplier(vendor_name, first_name) The

    • パスワード

      ログインするためのパスワード取得したい。

    • Associate Zoho Project with Deal that is in a specific stage?

      Hi there, When a deal hits a certain stage, I'd like to associate it with an pre-exisiting zoho project? I am using blueprints. Using a custom function and deluge, how could I do this? I was thinking that the easiest option would be the modify the pre-made

    • [Product Update] Locations module migration in Zoho Books integration with Zoho Analytics

      Dear Customers, As Zoho Books are starting to support an advance version of the Branches/Warehouses module called the Locations module, users who choose to migrate to the Locations module in Zoho Books will also be migrated in Zoho Analytics-Zoho Books

    • Canvases Auto-Skewing/Adding Scroll Bars When They Were Not There Prior

      Is anyone else noticing rendering issues in their canvases today? It seems to be mainly icons which now have scroll bars added which makes them all look off, though some fields seemed to revert to squished length as well. Were the icons replaced with

    • New UI for Writer - Disappointed

      I've been enjoying Zoho Writer as a new user for about 6 months, and I really like it. One of my favorite things about it is the menu bar, which you can hide or leave out while still seeing most of your page because it is off to the left. I think this

    • Client Script Button in Related List become invalid

      Hi, I am the admin of our organization. And I setup a client script button in related list to raise payment refund request While this button become non selectable recently. I believe there is something wrong from zoho as this button had run for a year.

    • SMTP outgoing problem

      Hello I have a website where the SMTP email is connected through Zoho Mail SMTP. Today I am no longer receiving emails from the website. Joomla shows that the email was sent successfully, but I do not receive it.

    • Fiscal year setting

      Hi, I am looking into using Zoho Books. I cannot understand the organisation fiscal year setting. Our fiscal year runs from 1 April to 31 March. In the organisation profile, I need to set Fiscal Year to “April to March” and Start Date to “2” for the period

    • Issue with payments on invoices

      Hello, I’m having the following issue. When I create an invoice and try to apply a partial payment in a single transaction, the system does not allow it — it only allows full payment. Is this the expected behavior, or am I missing some configuration?

    • auto add as member the contact owner

      is there a way that i can make a zoho flow that will add the owner of the contact as a member of the chat after the round robin assignment?

    • Welcome to Zoho CommunitySpaces

      Hello everyone, This is your space to ask questions, share ideas, and connect with others building and growing their own communities. For those new here, Zoho CommunitySpaces is a platform for building and managing online communities—from discussion spaces

    • Announcing new features in Trident for Windows (v.1.20.4.0)

      Hello Community, Trident for Windows is here with some new features to elevate your work experience. Let's take a quick look at what's new. Export emails. You can now export emails in the .eml file format as compressed zipped files to create a secure

    • Announcing new features in Trident for Windows (v1.14.5.0)

      Hello Community, Trident for Windows is here with new features to elevate your workplace productivity. Let's take a quick look at what's new. Add and edit contacts Previously, you could view all of your personal and organizational contacts in Trident.

    • Announcing Trident desktop app for Zoho Mail & Zoho Workplace users

      Hello Community, I hope you are doing well and staying safe. As you know, our Mail & workplace teams have been constantly working on adding more value to our offerings to ensure you and your organization continue enjoying your Zoho experience. As part

    • Quick way to add a field in Chat Window

      I want to add Company Field in chat window to lessen the irrelevant users in sending chat and set them in mind that we are dealing with companies. I request that it will be as easy as possible like just ticking it then typing the label then connecting

    • Please Remove the Confirmation Popup

      Currently, every time a recruiter changes the status of a candidate in Zoho Recruit, a popup confirmation appears that requires clicking “OK, Got it” before proceeding. This creates unnecessary friction in the workflow, especially for users handling high

    • Team Module Issues?

      We are testing Team Licenses for use by our Customer Service staff. I created a Teamspace called CSR and only assigned two users to this space: Administrator (me) and “Team License Test.” Team License Test is assigned to the Team User profile, with a

    • Next Page