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

    • Bigin Forms Enhancement: Acknowledge visitors via WhatsApp

      Greetings, We hope all of you are doing well! We're excited to share a new enhancement to Bigin's forms. Let's take a look at it in detail. Acknowledge visitors via WhatsApp The Acknowledge Visitor option in Bigin Forms means visitors receive an instant

    • 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

    • First Response Time, Where to find?

      Hi Currently I'm building a feeder file that auto-fetch ticket details when created/updated. On my table headers, apart from custom fields, I'm specifically looking for First response time. Currently I'm checking capabilities using Zoho Flow but couldn't

    • Zoho Books | Product updates | May 2026

      Hello users, We're back with the latest updates and enhancements we've rolled out in Zoho Books. From sales tax automation to scanning receipts for free, explore the updates designed to upgrade your bookkeeping experience. Sales Tax Automation [US & Canada

    • Cliq iOS can't see shared screen

      Hello, I had this morning a video call with a colleague. She is using Cliq Desktop MacOS and wanted to share her screen with me. I'm on iPad. I noticed, while she shared her screen, I could only see her video, but not the shared screen... Does Cliq iOS is able to display shared screen, or is it somewhere else to be found ? Regards

    • No Ability to Rename Record Template PDFs in SendMail Task

      As highlighted previously in this post, we still have to deal with the limitation of not being able to rename a record template when sent as a PDF using the SendMail Task. This creates unnecessary complexity for what should be a simple operation, and

    • Undelivered Mail uncategorized-bounce errors when sending invoices

      Recently we have been getting Undelivered Mail bounce notification when sending invoices. Reason: uncategorized-bounce Some go through no problem some bounce back. We recently sent 10 invoices, 6 received bounce notifications. After reaching out to the

    • Ability to Edit the "Current Job Title" dropdown field

      Current experience/Issue: When a user (candidate) uploads resume to Zoho Recruit candidate portal, some fields are prefilled with the info from the resume/cv correctly. However, we've observed that; 1. the "Current Job Title" dropdown field is usually

    • Zoho Customer Grievance Escalations Matrix

      We have been with Zoho for little over a 24 months having several licenses for Zoho One and with standalone license for Zoho Commerce Advanced Plan along with their so called "Premium Support" for which they charge you a pretty hefty amount. It's been

    • Switch between multiple LLMs instantly for tailored Zia experiences

      Availability Editions: Professional , Enterprise, Ultimate , CRMPlus , ZohoOne Release Plan: Available for all DCs Hello everyone. Earlier, the Multi-LLM feature supported only one LLM at a time for Zia Record Assistant bot restricting flexibility from

    • Data entry and automatic barcode sticker printing

      Hello there I am very new to Zoho.. and not sure if it can do, or should I say, I can easily set it up to do, or first basic requirement. We take in up to 1000 unique used products every week. They come from up to 50 regular suppliers. The are used household appliances. We try to fix most of them. For waste regulation purposes we have to track every machine from the source/supplier it cam from to if it was repaired and put back on the market? or stripped and scrap for material recovery. Is it possible

    • Inventory Barcode Creation - Add Picture of Item

      Hi I am trying to set up bar code labels and include a picture of the item on the label - any idea on how to add that field to the barcode generator?

    • Setting up a barcode system with Zoho Creator

      Hello! I am researching how to set up a barcode inventory system that is compatible with Zoho Creator. I am working with an art inventory, and I want to be able to refer to each piece of artwork with a barcode. My goal is to be able to generate a barcode, store that barcode in a Zoho Creator database, be able to print out a barcode label from that database, and have the database pull up a record when the barcode associated with that record is scanned. I understand that there are barcode generating

    • New Built In QR/Barcode Generator Print Settings

      I'm trying out the new QR/Barcode generator field in Creator. I would think most people will want to print these, like I do. I am not seeing any way to control the height or width of the barcode for printing (inside the print/pdf template builder). The

    • Inventory SKU barcode printing

      Hi I am a developer and am wondering if zoho creator or even zoho inventory have the capability to print barcodes upon submitting a form. I have been researching the forums and have not been able to find any way to do this natively in Zoho. Can someone

    • PRODUCT LABEL MUST HAVE MORE FIELDS AND OPTIONS - VOTE NOW!

      The Zoho Inventory Product Barcode generator is unfinished, very limited, and unusable for most companies that need to generate informative product labels. Companies must be able to generate labels for products they receive to control inventory, so the

    • Ability to "Add Additional Guest" to Bookings

      When using other calendar booking services such as Calendly, there is an option to "Add Additional Guest" to a booking. For example, imagine User A is making a booking on my company's booking calendar and would like to invite their spouse (User B) to

    • Modify logo on exported PDF article

      Hello, I have to 2 Help Center with 2 different brands. If I try to download an article from Help Center Brand #2 as a PDF file, I see the Brand #1 logo on it. Is there a way to modify or hide the logo in the pdf? Thank you Antonio

    • Get Files Associated to Data Template via API

      I have a data template with multiple files associated to it, and trying to write a Deluge script that will fetch files associated with this data template. I created the script below based on the WorkDrive API documentation, one request uses the data templates

    • Pasting Images in Zoho Desk ignores cursor location

      My team has reported an issue which started recently where when we paste an image into a new or existing reply or comment, the pasted image seems to ignore the current cursor location instead paste itself at the last character present in the reply/comment,

    • Push conversation to operator in guided conversations

      I really would like to push the conversation to an operator from a specific deppartment in guided conversations, just like Zobot in sales iq. It would help a lot. For me it does not make sense to use sales iq for messenger, instagram and others, because

    • Lost the ability to sort by ticket owner

      Hi all, in the last week or so, we have lost the ability to sort tickets by Ticket Owner. Unlike the other columns which we can hover over and click on to sort, Ticket Owner is no longer clickable. Is it just us, or are other customers seeing this too?

    • Zero Customer Support

      I have been a paying customer on Zoho Mail Premium, which clearly advertises a 40MB attachment limit. However, for a long time now, I have been experiencing ongoing issues sending PDF attachments over 10MB. Instead of sending properly as attachments,

    • Unable to send message;Reason:554 5.1.8

      Dear Zoho Support Team, I have attempted to send multiple documents in several different ZIP files containing PDF and Word documents. Initially, I received the following notification: “When Office 365 tried to send your message, the receiving email server

    • SOLVED - Unsubscribe Feedback Page inexplicably presenting in French, German, etc. not default language of English

      As the titles says, had the "Unsubscribe Feedback Page" for two different clients presenting the feedback options to unsubscribers in French, German, etc., not in English like it should. And no, it wasn't due to user preferences, embedded web translators,

    • Identify and clean hard bounce lists in Automation 2.0

      Hello. 1. I want to know how I can identify hard bounces in the lists I created to clean them before sending an email, given that the bounce rate has increased and it is necessary to clean the lists. 2. How can I exclude hard bounces and invalid emails

    • Catalyst DB is insufficient for many use cases

      Hi all: I've been diving deep on full stack application development inside Zoho Catalyst. I've been using catalyst for serverless compute and API gateway for a few years, but I haven't used the DB beyond simple storing of app data. As I was working through

    • Edit a previous reconciliation

      I realized that during my March bank reconciliation, I chose the wrong check to reconcile (they were for the same amount on the same date, I just chose the wrong check to reconcile). So now, the incorrect check is showing as un-reconciled. Is there any way I can edit a previous reconciliation (this is 7 months ago) so I can adjust the check that was reconciled? The amounts are exactly the same and it won't change my ending balance.

    • Can I use 24 hour time format in Zoho Social

      Can I use 24 hour time format in Zoho Social? AM/PM is annoying, backwards – and leads to errors in posting time…

    • Transfer Ownership of Documents

      In an organization, a person moves from one team to another or decides to leave his / her current post. He may have files / folders that are important and confidential, and needs to be transferred to another member in the organization. Zoho Docs lets you Transfer Ownership of document / folder from one member to another in a few clicks. This action has to be performed by the administrator. Just follow these simple steps to transfer the ownership of your documents / folders: In the top right corner

    • How to change column headings in pivot table?

      Hi, Is there a way to rename the column headers of a pivot table? Now some the columns are named with value labels: 'SUM of .....'. We would like to rename those headers. As of now we couldn't find any direct solution to adjust the headers, besides copying and reformat. We want to avoid these extra steps. Best, Tiemen

    • Native QuickBooks integration for Zoho CRM: Connecting sales and finance

      Greetings, I hope all of you are doing well. We're excited to announce Zoho CRM's integration with QuickBooks Web, which is designed to synchronize your CRM data with your QuickBooks accounting records and bridge the gap between sales and finance. This

    • Rename system-defined labels in Zoho CRM

      Renaming system-defined labels is now available across all DCs. Hello everyone, Zoho CRM includes predefined system fields across modules to support essential CRM operations. Until now, the labels of these fields were fixed and could not be edited from

    • Report/All Entries Filter Contains to support multiple values

      Hi, I use different fields to filter All Entries before Export, one is the Added Email ID (May soon replace with the new Logged in User Name Field!!), and I want to filter for more than one person, so select "Contains", but I try with a comma seperating

    • Marketing Tip #32: Improve SEO and customer confidence with an FAQ section

      Before making a purchase, customers often have simple questions about delivery times, returns, product usage, or sizing. If they can’t quickly find answers, they may leave your store without buying. Adding a clear FAQ (Frequently Asked Questions) section

    • Zobot with Plugs

      Hello, I am having a problem with Zobot using Plugs. Here is my current flow: When I run the flow, I should immediately see the messages from the initial cards (Send Message cards), then after running the plug, and finally, see the messages after the

    • Zoho Creator é para você? Saiba quando escolher (e quando não escolher) essa plataforma

      Todo mês alguém me pergunta: "Leandro, vale a pena usar o Zoho Creator para o meu projeto?" A resposta honesta é: depende. E neste artigo vou te dar os critérios reais que uso para tomar essa decisão — sem marketing, sem generalização. O que é Zoho Creator,

    • Control Fields on Mobile App

      On the mobile app, how do we control which fields appear on the screen for records that have a related list? In the example below I want the Inspection Stage and Inspection Type fields to appear, not the record owner (Dev Admin). I changed the Inspections

    • Show Zoho Marketing Automation Messages in SalesIQ Chat

      When the same number is used in Zoho Marketing Automation and SalesIQ, campaign messages should be visible inside the SalesIQ chat. Currently, when customers reply to marketing campaign messages, SalesIQ chat owners get confused because they cannot see

    • SalesIQ Chat Owner to CRM Lead Owner Mapping

      There is no proper mapping between the SalesIQ chat owner and the CRM lead owner. When a chat is assigned to an agent, the lead created in CRM is often assigned to a different user, forcing admins to manually change ownership every time. This creates

    • Next Page