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

        • Need Easy Way to Update Item Prices in Bulk

          Hello Everyone, In Zoho Books, updating selling prices is taking too much time. Right now we have to either edit items one by one or do Excel export/import. It will be very useful if Zoho gives a simple option to: Select multiple items and update prices

        • Notebook Al

          Why was our organisation's Notebook AI disabled, even though our admin said it wasn't done on their side?

        • Dashboard Filtering with 2 query tables using one filter field

          Hi There, I have been using user filters on the dashboard and for the most part they are fine. However I have one issue I would like to see if there is a fix for it. I have a main query that most of my widgets use. Then I have a second query for another widget. The dashboard uses the field "brand" in the main query for the filter.  The second query uses the main_query.brand field alongside fields from a second table. I have set the widget to use main_query.brand as a filter, but when the dashboard

        • How to get static reports via Desk API

          Hello, we are hoping to use the Desk API to automatically export the default static reports in Zoho Desk, or reconstruct them via other API calls. What's the best way to do this? For example, if I want to recreate the Response Time static report via the

        • What's New in Zoho POS - April 2026

          Hello everyone, Welcome to Zoho POS’s monthly update, where we share our latest feature updates, enhancements, events, and more. Let’s take a look at how April went. Access and manage other web applications in Zoho POS with Web Tabs You can now access

        • Issue with adding “Roblox” as an answer option in Zoho SurveyО

          Hello Zoho Support Team, I’m experiencing an issue while editing a survey in Zoho Survey. For some reason, I’m unable to add “Roblox” as an answer option. The same issue occurs with any answer option that contains this exact combination of letters, regardless

        • How to import MBOX to Gmail?

          In order to import or restore MBOX file backup Gmail account you can go for Advik MBOX to Gmail Import utility. This utility will import MBOX to Gmail or G Suite account without any configuration. This tool is considered as the most easiest and simplest process to perform email migration. Key Feature of this tool Import MBOX to Gmail in Bulk Maintain folder struture Retain Key elements Single Panel Interface 100% accuracy rate Download source : http://www.adviksoft.com/mbox/gmail.html

        • Free webinar! Accelerate deals with Zoho Sign for Zoho CRM and Bigin by Zoho CRM

          Hello, Paperwork shouldn’t slow you down. Whether you’re growing a small business or running a large enterprise, manual approvals and slow document turnaround can cost you time and revenue. With Zoho Sign for Zoho CRM and Bigin by Zoho CRM, you can take

        • Automatically set the default VAT percentage on a quote

          Every time I create a quote, I have to manually adjust the VAT and activate the checkbox for 21%. But all of our quotes include 21% VAT. So now occasionally, it happens that the checkbox is forgotten, and the customer receives an incorrect quote (without

        • Don't understand INVALID_REQUEST_METHOD when I try to post up an attachment

          When I make the POST request (using python requests.post() for files): https://www.zohoapis.com/crm/v8/Calls/***************01/Attachments I get this response: r:{ "code": "INVALID_REQUEST_METHOD", "details": {}, "message": "The http request method type

        • Bigin & Booking. Associate the appointment with existing customers in bigin.

          I tried to change the stage of the pipeline associated to a existing contact after he book a appointment in Booking. I use flow to create a event in booking when a appointment is done. But.... How can I relate the appointment with the existing contact

        • Can Zoho Books support an Asset account as an item's purchase/COGS account? (Prepaid reseller use case)

          Hi everyone, I run a prepaid digital plan reseller business where I fund a vendor account upfront and draw it down as I make sales — essentially a float-based model, similar to a gift card or prepaid airtime reseller. The correct accounting treatment

        • Quotes - Freehand line items - zoho crm

          Hi, In the zoho crm quotes module is it possible to add line items that are freehand typed? We have a business need to use the quotes module but the product nams/description, quantity, price, etc. needs to be freely typed rather than from a defined list

        • TDS Payable report not Generating

          TDS Payable report for Last Quarter of FY 25-26 is not generating and giving error. Please get it rectified as soon as possble.

        • Remove Zoho Header from Portals

          I have a portal page with custom domain. But when I print directly from a webpage, the Zoho CRM header shows. It kind of kills the branding aspect. Is there a way to get rid of this?

        • Multi-column sorting

          Is multi-column sorting a planned feature for CRM? We are needing to sort by one column and then subsort by another column. I am just wondering if there is a planned feature that will allow this?

        • Clearing Fields using MACROS?

          How would I go about clearing a follow-up field date from my deals? Currently I cannot set the new value as an empty box.

        • Webinar Alert: Turn campaign leads into conversions with Zoho LandingPage and Zoho CRM

          Landing pages are great at capturing leads, but what happens after that is just as important. In this webinar, we’ll walk through how Zoho LandingPage and Zoho CRM work together to create a smooth flow from lead capture to follow-up and conversion. You’ll

        • Catch-All Address: A safety net for misdirected emails

          Email is often the first point of contact with an organization. In many cases, a simple typo in a recipient's address can quietly turn into a missed message—a customer query never reaches support, a partner’s reply goes unnoticed, and the sender has no

        • Need Assistance on Redirect URL or Button Based on Deal Stage

          Hello, I’ve developed a custom application and would like to achieve the following scenario: When a deal is moved to the Billing stage, an automatic trigger should execute and redirect to a URL that includes deal details such as Deal Name and Deal Owner.

        • Zoho IMAP Access to mail doesn't sync messages

          As stated in the topic - I have company account email address setup, and it has ( as in the picutre ) ActiveSync and Imap access enabled. However the messages does not show up while logged in in Zoho Mail however when I log in in thunderbird everything

        • 【無料／オンライン】5/21（木）開催｜Zoho ワークアウト ― ユーザー同士で作業・議論するもくもく会

          ユーザーの皆さま、こんにちは。 コミュニティグループの中野です。 5月開催の「Zoho ワークアウト」のご案内です。 本イベントは、Zohoユーザーが各自のテーマを持ち寄り、 作業を進めながら参加者同士で意見交換する「もくもく会」形式のオンラインイベントです。 「設定を進めたいけれど、一人だと手が止まってしまう」 「他社がどう活用しているのか知りたい」 「同じ課題を抱える仲間と話したい」 そんな方にぴったりのイベントです。 ▶︎ 参加登録はこちら（無料 / 残り3枠） URL：https://us02web.zoom.us/meeting/register/6ojuA778RqqWPOWzCaCU5Q

        • i keep see there is a connetion issue connecting 3rd party api on zoho when using zia

          hi there , i have set up open ai api to zoho zia (copied and pasted to zoho zia) but I keep getting notificaiton "there is a connetion issue connecting 3rd party api on zoho" when using zia on top when click zia and try to type in word there

        • Can't access google from toppings menu

          So... When I click the manage button in toppings, nothing happens. it won't let me access the settings.

        • Marketer's Space: Bookmarks by Zoho Campaigns

          Hello Marketers, In this week's Marketer's Space, we'll look at a simple yet powerful feature that makes a big difference in your workflow: Bookmarks. Bookmarks is a built-in feature in Zoho Campaigns that enables you to create a personalized library

        • Introducing the revamped What's New page

          Hello everyone! We're happy to announce that Zoho Campaigns' What's New page has undergone a complete revamp. We've bid the old page adieu after a long time and have introduced a new, sleeker-looking page. Without further ado, let's dive into the main

        • 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

        • Tip #71 - Exploring Technician Console: Send Clipboard Keystrokes - 'Insider Insights'

          Hello Zoho Assist Community! Say you are helping a customer remotely and need to log into a system on their machine. You have the password ready on your end, but the moment you try to paste it into the login field, nothing happens. The remote screen just

        • Tip #7: Customize the appointment confirmation page

          A confirmation page plays a crucial role in creating the first impression, as that's where customers land when booking with you. It shows your brand identity, engages your audience, and drives more conversions. Yet, this section is often overlooked when

        • Images not saved in notes

          Created noteboards and create a note, copy pasted the image, close the note and open again, image is not coming this same problem occurs in note on notebook I have attached the replication steps as video url to analyse it, and also attached the videos

        • New in Office Integrator: Apply conditional formatting to entire rows

          Hi users, We are pleased to introduce the ability to highlight entire rows based on a cell's value in Zoho Office Integrator's spreadsheet editor. For example, if your finance team tracks invoice payments in a spreadsheet, you can highlight overdue invoices

        • Zoho books - Project Module - Itemised expenses

          Hi All, I heavily use the projects function in Zoho books and can work for one client for successive weeks, providing labour and incurring the occasional general expenses.  As an example, during the one purchase, I purchase 10 widgets and of these 10, 

        • How to get REST API of extension function in CRM

          I create a an extension using ZOHO Sigma for integrate ZOHO CRM and XERO and established two way sync but when I public my extension it's standalone function are not provide any type of access so I can't get REST API Key of standalone functions without

        • A few Issues when using "Pay Bill via Check"

          We have quite a bit of issues with how paying for Bills via Check works. Would love some feedback from the Zoho team in case we are doing something incorrectly. 1. When we go from a vendor and select "Pay Bill via Check" option, we see ALL the outstanding

        • Show backordered items on packing slip

          Is it possible to show a column on the Packing Slip that shows number of backordered items when a PO is only partially filled? I would also like to see the Backordered column appear on POs after you receive items if you didn't get ALL of the items or partial amounts of items. And lastly, it would be nice to have the option of turning on the Backordered column for invoices if you only invoice for a partial order. -Tom

        • Elevate your Radar experience: Best practices part 1

          In the Spotlight: Zoho Desk's Radar app Think about RADAR (Radio Detection and Ranging)? The system used to track and identify aircraft, ships, and vehicles using electromagnetic waves. Imagine what a similar “Radar” experience looks like for customer

        • Mise à jour de Zoho Books – France

          Chers clients, Merci pour votre patience et votre soutien continu. Avec les évolutions réglementaires à venir en France nous introduisons de nouvelles fonctionnalités dans Zoho Books pour les clients français. Ces mises à jour ont été conçues pour répondre

        • Automation Series: Auto-update Budget When Time is Logged

          In Zoho Projects, Summary fields enable instant budget sync by capturing Actual Cost and showcases it at project-level when a time log is added. This allows real-time budget visibility and helps teams stay within financial thresholds. Consider an event

        • Preferred Name and Email Formats: Bring consistency to user identity

          A user's display name and email address are often the first identifiers that colleagues, partners, and customers see. Maintaining a consistent format across the organization helps reinforce a professional identity and avoids the confusion that comes from

        • [Webinar] Solving business challenges: Standardizing document operations across your organization

          Hi Writer users, Every organization struggles with document inconsistency due to issues like multiple templates, outdated content in client-facing docs, and the lack of a standard review process. Zoho Writer streamlines the entire lifecycle with capabilities

        • Next Page