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

    • Announcing the new SKILL.md for Zoho CRM and the updated OAS repository!

      We are introducing a new zoho-crm skill to make working with Zoho CRM Developer tools (like APIs, functions, widgets, client scripts, queries etc) easier and faster, with the help of AI in your preferred AI harness like Claude Code, Codex, Cursor, VSCode

    • Kaizen #261 : Using Zoho CRM Skill to generate complex COQL queries

      Hello everyone, In the previous Kaizen posts, we introduced the zoho-crm SKILL.md and discussed how it can help you when you are working with Zoho CRM APIs and Client Script. In this Kaizen, we will focus on using the Zoho CRM `SKILL.md` with GitHub Copilot

    • Kaizen #256 - Build an Arrival Readiness Web Tab in Zoho CRM

      Hi everyone! Welcome back to the Kaizen series! In the post, we discuss a use case in hospitality industry: how an Arrival Readiness web tab widget can be used to let reception staff identify and resolve issues before arrival of guests. Use case In the

    • 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

    • Recent Topics

    • AI Calling

      Hi, does anyone have experience or any thoughts on AI Calling. Getting AI to make calls on behalf of your company. We are looking into it, but are finding it difficult to get info and providers that can assist.

    • Zoho Sheet as KB Document

      It would be nice if Zia Agents could take Zoho Sheets as part of the knowledge base. The use case here is that it's infinitely easier for humans to maintain a spreadsheet table than any .md / TAML / JSON document. For situations where humans are responsible

    • Ask the Experts: Five-hour live Q&A session with Zoho WorkDrive product experts

      Have questions about WorkDrive 5.0? Let’s talk! We recently launched Zoho WorkDrive 5.0, packed with powerful updates to help your team work smarter, stay secure, and get more value from your business content. From content-centric workflows and AI-powered

    • Automating CRM backup storage?

      Hi there, We've recently set up automatic backups for our Zoho CRM account. We were hoping that the backup functionality would not require any manual work on our end, but it seems that we are always required to download the backups ourselves, store them,

    • Zoho Community Digest - September 2026 | Part 3

      Hi everyone, and welcome back! Zoho CRM launches PRM for partner management, Bigin builds this year's Apple AI updates into the app, and Snapchat is now a connected channel in Zoho Social. There are also three notices worth reading, including WhatsApp

    • ERROR: This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details

      I can add new user for mail, i received message error about; This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details Try creating user name; instagram@eficaztecnologia.com.br

    • Support for Custom Fonts in Zoho Recruit Career Site and Candidate Portal

      Dear Zoho Recruit Team, I hope you're doing well. We would like to request the ability to use custom fonts in the Zoho Recruit Career Site and Candidate Portal. Currently only the default fonts (Roboto, Lato, and Montserrat) are available. While these

    • Ability to filter services and parts based on a field in the Work Order

      Hell FSM team, We have a customer with 2 value streams using Zoho FSM. Each value stream uses different products, at different price point. Currently, all of the products are accessible when creating a work order and modifying a service appointment, which

    • SubTotaks for Item Headers in Estimates

      Hi, Apparently, one can add Item Headers in Estimates in Zoho Books. Is this feature like an Estimate section with a SubTotals for each Item Header/Section? Or is the Item Header just a Title and cannot be SubTotalized? Thank You

    • Sync of products and orders between Zoho Inventory, Zoho Books and Shopify

      Good Day I migrated from QuickBooks to Zoho Books and Zoho Inventory at the beginning of this year. The migration team assisted with importing my data, but I am currently experiencing multiple issues affecting syncing between Shopify and Zoho. 1. SKU

    • Best practices for importing phone numbers

      I've recently found a problem with my phone provider, integrated with Zoho CRM, where a phone number that starts with 00 instead of + won't work. The problem has no solution: they tell me to replace all 00 with + I've always preferred using 00 instead

    • Copy + Paste in Notes: Text color and text background are not retained

      I've recently started using Zoho Notebook as an Evernote replacement. When copying and pasting text within Zoho Notes, I notice that the formatting of the text (text color and background color) is not retained when pasting. Only the attributes "Bold"

    • Add Comprehensive Accessibility Features to Zoho Writer

      Hello Zoho Writer Team, We hope you are doing well. We would like to submit a feature request to enhance Zoho Writer with a full set of accessibility tools, similar to the accessibility options already available in the Zoho Desk agent interface. 🚧 Current

    • MAKING ENTRY TIME MORE USER FRIENDLY AND FASTER O PREVENT TAB TIME

      I AM CURIOUS TO KNOW IF WE CAN MAKE IT MORE USER FRIENDLY WHILE MAKING BILLS , I MAJORLY USE OVER DESKTOP SO I AM SUGGESTING TO REMOVE TAB TIME WHILE ENTERING BILL OR MAKING INVOICE DIRECT JUMP TO ONLY REGULAR PARTS OF THE BILL . YOURS RAKESH 782866

    • Email Forwarding to Zoho Desk Failing After Migration from Gmail to Outlook (Microsoft)

      We recently migrated from Gmail to Microsoft Outlook. Since the migration date, emails sent by our customers are no longer being received by Zoho Desk. I tried setting up the email forwarding rules in Outlook similar to what we had in Gmail, but it still

    • Shopify B2B Integration: Option to Match Customers by Company Name

      It would be great if the Shopify integration could include Company Name as a customer matching option. At the moment customers can only be matched by: Email Name Email and Name Phone For businesses using Shopify B2B, the company is often the customer

    • Free Methods to Convert PST to MBOX on Mac & Windows

      Converting PST files to MBOX is often needed when moving Outlook mailbox data to email clients such as Thunderbird, Apple Mail, or other MBOX-supported applications. The process can be different on Windows and macOS, and free methods may involve several

    • Zoho Payroll: Product Updates - Q3, FY2026

      Over the past quarter, Zoho Payroll has added several updates to make payroll easier to process, configure, and manage. The most notable improvements cover bank integrations, reimbursement support, payslip enhancements, employee exit documentation, payroll

    • Print checks for owner's draw

      Hi.  Can I use Zoho check printing for draws to Owner's Equity?  This may be a specific case of the missing Pay expenses via Check feature.  If it's not available, are there plans to add this feature?

    • Deliver exceptional customer experience with Field Service Management in Zoho Service Plus

      The advent of automation and personalization in the AI era has raised customer expectations exponentially for faster resolution of issues with less tolerance to friction in the process. Fast, accurate, and intelligent service that understands customer

    • Zoho Extensions 101: Building extensions for Zoho People

      Hello developers! Welcome to our new video series on building extensions for Zoho People! If you're new to extension development or looking for guidance on building extensions for Zoho People, you're in the right place. We've curated a series of videos

    • Build A Happier Workforce With Zoho People

      The success of an organization depends on its people. Therefore, a comprehensive and cloud-based HRMS software is an integral part of the IT ecosystem for the business. With a wide number of key modules to define the structure of an organization, manage

    • How to import PST files in Office 365?

      You can import PST files into Office 365 using native Outlook applications, the Microsoft Purview network upload method, or specialized third-party migration tools. Choosing the right method depends on whether you are migrating a single mailbox or executing

    • Project Change Orders and Additions

      We are in the process of migrating from QuickBooks Online to Zoho Books. We have Zoho One and like the ability to sync all of our data across everything. And I like that projects work in a way that's less dumb than QuickBooks. I'm trying to figure out

    • Support Recording Payments in a Different Currency Than the Invoice Currency

      We would like to request the implementation of a feature that allows users to record customer payments in a currency different from the currency of the original invoice. Current Limitation in Zoho Books Currently, if an invoice is issued in USD, Zoho

    • Customer Statement Showing Incorrect Negative Balance Due to Unused Advance

      Dear Zoho Support Team, We are facing an issue with the Customer Statement in Zoho Invoice related to customer advances/mobilization advances. The issue is that when a customer has made an advance payment that has not yet been fully utilized against invoices,

    • 【10/15・残席わずか】Zoho Championに学ぶ！Zoho Campaigns メール配信の基礎・活用勉強会

      皆さま、こんにちは。ゾーホージャパンの中野です。 10月15日（木）、Zoho コミュニティ初となる「Zoho Campaigns メール配信の基礎・活用勉強会」をオンラインで開催します！ 今回の登壇者は、Zoho の導入・活用支援に豊富な経験を持つZoho Champion の岡安 裕一さんです。 「一斉配信はできるけれど、現在の設定や運用が正しいか自信がない」 「Zoho CRMとZoho Campaignsのどちらから配信すればよいか分からない」 「リストとセグメントの違いや、配信停止の扱いを整理したい」

    • WorkDrive API: allow the modification time to be set when updating an existing file (x-last-modified-date is honoured on create, ignored on update)

      Hi, I contribute to the Zoho WorkDrive backend of rclone, the open-source sync/copy tool. I would like to raise one specific, narrow API gap that currently makes reliable syncing to WorkDrive impossible, and ask whether it can be addressed. What already

    • WhatsApp Coexistence

      Hello, please implement WhatsApp Coexistence, we need to track staff whatsapp chats on their PC and they need to be able to use WhatsApp on their mobile in around the office and warehouse, as we video call customers and send them product pictures. Thank

    • Kiosk / CRM Timezone Oddity

      I grant you this is much easier to see than to explain, and snapshots here won't help much and I don't want to snapshot my record anyway in a forum, so bear with me... Effectively... As there had been discussions on times coming through in different timezones

    • Restricted Account - "This user is not allowed to add in Zoho" - citbinvestment.com.

      Hi Zoho Support Team, I am attempting to set up user mailboxes for my domain citbinvestment.com, but I am receiving the following error: "This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details." > My MX, SPF,

    • 👍 Zoho CRM's Notes now gets Reactions and a new look

      Available in SA and JP DCs. Rolling out to other DCs in phases. Hello everyone, Notes help users capture important updates, collaborate with teammates, and maintain context for records. Now with Note Reactions, users can quickly acknowledge updates, express

    • Contact Sharing: Hide email alias from global address list

      As the superadmin, I would like to hide my domain aliases from appearing in the global address list. Currently, my end users can see all my aliases. The aliases also appear as type-in addresses when composing a new email. This is a potential security

    • Incorrect Currency Shown

      On Bills, each line shows the rate in the wrong currency (home currency).

    • This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details

      Hello, Just signed up to ZOHO on a friend's recommendation. Got the TXT part (verified my domain), but whenever I try to add ANY user, I get the error: This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details I have emailed as well and writing here as well because when I searched, I saw many people faced the same issue and instead of email, they got a faster response here. My domain is: raisingreaderspk . com Hope this can be resolved.  Thank you

    • [Free webinar] Beyond prompt-to-app: Vibe coding with Zoho Creator | Creator Tech Connect (October 2026)

      Hello everyone, We are excited to invite you to another edition of the Creator Tech Connect webinar. About Creator Tech Connect The Creator Tech Connect series is a free monthly webinar consisting of purely technical sessions, where we dive deep into

    • Zoho Recruit Staffing version Interview using Zoho Meeting

      I would like to understand whether Zoho Meeting has a native integration with Zoho Recruit – Staffing Edition. As of now, I am unable to find the native Zoho Meeting integration within the Staffing Edition of Zoho Recruit. Could someone please confirm

    • Payroll needs to automatically remit taxes, not just give me the calculations

      Wagepoint, PayEvo, Waveapps, etc... All your competitors deposit employee payroll, but they ALSO remit taxes automatically. Get with the program, your Payroll app is extremely sparse.

    • New enhancements to user management

      Hello everyone, We're excited to introduce a few enhancements to user creation and user preferences in Bigin! These updates give administrators more flexibility while inviting users, and give users more control over how their data is displayed. With this

    • Public dashboard table does not load in mobile view - TypeError reading 'viewType'

      Our public dashboard links have worked for years. We made no changes. Now the table widget does not load on mobile browsers. It loads fine on desktop, and it loads on a phone when we use "Request desktop site." Chrome DevTools shows this error in mobile

    • Next Page