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

        • Latest updates in Zoho Meeting | New End of session notification to remind everyone about the session end time

          Hello everyone, We’re excited to share a new feature for Zoho Meeting ; End of session notification. With this new setting, you can choose to remind all participants or only the host about the scheduled end time of a meeting. You can also choose when

        • #9 Win the Job First

          For many businesses, the first document that goes out isn't an invoice. It's a document that creates ample space to negotiate, discuss requirements, align expectations, and ultimately win the deal. The whole of the business world calls it a Quote or,

        • Add Video link to interview record

          Hi Team, we are having team members consistently go to the interview record to find the link for their upcoming meeting and have been confused that they have not been able to find them. When the interview is created can you please upload the link to the

        • How Can AI Agents Improve E-commerce Operations Efficiency?

          I’ve been thinking about this question recently: as e-commerce operations become more complex, can we use AI Agents to improve daily efficiency? Many e-commerce teams need to handle product management, order follow-up, inventory checks, customer replies,

        • Is it possible to create a meeting in Zoho Crm which automatically creates a Google Meet link?

          We are using Google's own "Zoho CRM for Google" integration and also Zoho's "Google Apps Sync" tools, but none of them provide us with the ability to create a meeting in Zoho CRM that then adds a Google Meet link into the meeting. Is this something that

        • Export Zoho Books Invoice - PDF API

          How to Download Zoho Books PDF Files Using Zoho Books API -------------------------------------------------------------------------------------- Hello everyone! If you are looking for a way to download Zoho Books PDF files using the Zoho Books API, you've

        • OAuth integration issues

          I'm experiencing persistent OAuth errors when trying to connect Make with Zoho API. I've tried multiple approaches but keep encountering the following issues: First error: 'Invalid Redirect Uri - Redirect URI passed does not match with the one configured'

        • Marketing Automation/Campaigns confusion questions and integrations

          ​I am pulling my hair out yet AGAIN due to the lack of true integration between zoho apps - Why can't we use Campaigns and Marketing Automation at the same time? if they are truely seperate apps, then we should be able to use both for what they were intended,

        • Tip #75- Exploring Technician Console: Power Options- 'Insider Insights'

          Hello Zoho Assist Community! Welcome to the very first community post of June, and we are kicking things off with a feature that gives technicians complete control over a remote machine without ever leaving their session: Power Options. What are Power

        • Windows agent 2026_M07 release notes

          Agent Version: 2026.4.15.0 Release date: 1 June, 2026 Issue fix: Streamlined overall process flow and fixed bugs that delayed or prevented proper functioning of Task Scheduler feature. Enhancements to Multi Monitor view under varying network load scenarios.

        • Show Categories Directly When Clicking the Knowledge Base Button in SalesIQ Chat Widget

          Hi Zoho SalesIQ Team, I would like to submit a feature request regarding the behavior of the Knowledge Base button in the SalesIQ chat widget. Current Behavior: When a visitor clicks the Knowledge Base (KB) button in the chat widget, they are first taken

        • What is MCP and How Does It Connect to Zoho Invoice?

          If you've ever wished you could just tell your invoicing software what to do, without clicking through menus, pulling up reports manually, or switching tabs every five minutes, that's exactly what the Zoho MCP server is built for. MCP stands for Model

        • Facebook won't connect

          Good morning, Whilst I'm sure its something I've done wrong along the line I'm trying to connect a Facebook account to Zoho Social Upon entering the username and password the 'Connect Facebook' button appears to do some work then stops without any connection being established I've checked the business integrations on Facebook and Zoho is not appearing at all Can you help me with this at all? Kind Regards Daniel Evans Home Inventories

        • Empowered Custom Views: Cross-Module Criteria Now Supported in Zoho CRM

          Hello everyone, We’re excited to introduce cross-module criteria support in custom views! Custom views provide personalized perspectives on your data and that you can save for future use. You can share these views with all users or specific individuals

        • How to publish Zoho form

          I have created zoho form with various fields. I now want to publish the same and share the link so that I can start collecting response. Please guide me for the same.

        • Tabular View Report | Scale To Fit Screen

          Please add the option to scale Tabular View reports to fit the screen. I constantly have to adjust the column size of Tabular View reports to fit various screen sizes and it just looks messy. You can see in the screenshot below there is a blank gap after

        • What's New in Zoho POS - May 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 May went. Introducing the new Settings page with enhanced search The Settings page has been revamped

        • Mapbox map embed in Zoho webpage

          The mapbox map is not showing in Zoho webpage. the code was running fine other webpage.

        • DYK 6 - Task Assignment from the Workload Report

          Did You Know tasks can be assigned from the Workload Report? As projects evolve, tasks pile up and distributing them equally among team members becomes a balancing act. Identifying over-allocated and underutilised members gets complicated when task assignment

        • 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

        • Building extensions #3: Zoho Sprints developer platform features and capabilities

          Hello all! We're thrilled to connect with you in another post in our Building extensions series. We've explored concepts in building, testing, publishing, and sharing extensions for Zoho Sprints. If you missed any of this, take a look at our other posts.

        • How do create a validation rule / function to check datetime field is within Business Hours?

          I've got a field called Scheduled_Time. People keep accidently inputting 2am when they mean 2pm. Realistically this field is never going to be before 7am or after 9pm. I'd like to add validation rule to the field (which is a datetime field). Using the

        • Experience effortless record management in CRM For Everyone with the all-new Grid View!

          Hello Everyone, Hope you are well! As part of our ongoing series of feature announcements for Zoho CRM For Everyone, we’re excited to bring you another type of module view : Grid View. In addition to Kanban view, List view, Canvas view, Chart view and

        • Schedule from AI with Zoho Bookings MCP Server

          Greetings from the Zoho Bookings team! We’re excited to introduce the Zoho Bookings MCP (Model Context Protocol) Server integration, a powerful new way to bring AI-driven automation into your scheduling workflows. With MCP, you can connect Zoho Bookings

        • Zoho Projects > Zoho Analytics - where are 'Work Hours' ?

          I'm trying to replicate the forecasting calculations and need to find 'Work Hours' as a key component. Such as: Planned Cost - The product of work hours and its cost per hour I've been able to track Work Hours to the Task screen and when you expand it

        • Automate pushing Zoho CRM backups into Zoho WorkDrive

          Through our Zoho One subscription we have both Zoho CRM and Zoho WorkDrive. We have regular backups setup in Zoho CRM. Once the backup is created, we are notified. Since we want to keep these backups for more than 7 days, we manually download them. They

        • Free Webinar Alert! Cliq in Zoho Workplace: Collaborate and Communicate Smarter

          Hello Zoho Community! Looking for a better way to keep your teams connected and conversations organized? We’ve got a webinar you won’t want to miss. Join our webinar on "Zoho Cliq in Zoho Workplace" and discover how smarter communication can improve collaboration

        • Upcoming webinar: Getting started with Zoho LandingPage

          Building your first landing page? We’ll help you get started. A landing page is more than just a place to send your visitors—it’s where your campaigns generate leads, drive actions, and create meaningful customer interactions. Join our monthly Getting

        • 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

        • Create Tasklist with Tasklist Template using API v3

          In the old API, we could mention the parameter 'task_template_id' when creating a tasklist via API to apply a tasklist template: https://www.zoho.com/projects/help/rest-api/tasklists-api.html#create-tasklist In API v3 there does not seem to be a way to

        • Restoring deleted files

          Hi I have been using zoho writer app personal account from last 7 months and made number of documents for educational purposes. I deleted the writer app by mistake and I lost all the documents.I reinstalled the app but the documents are not restored even

        • Unable to mass update a specific field

          Hi there, I want to mass update a field on zoho crm but im not able to as it doesnt show up. procurement list is a lookup field

        • Introducing Databridge | Securely connect your private systems with Creator apps

          Hello everyone, Enterprises today rely on a mix of privately hosted databases and cloud applications to run their everyday operations. But connecting these two worlds has always been a challenge - one that often forces teams to choose between accessibility

        • Folders for CRM Dashboards

          Implement ability to create folders to store dashboards within. Example useful for case such as individual sales persons dashboards grouped by year into folders.

        • [Webinar] Solving business challenges: Customizing Writer for your business requirements

          Hi Zoho Writer users, Every organization has unique branding, formatting standards, and workflow requirements. Yet most teams work with default settings, manually applying fonts, recreating templates, and adjusting preferences for every document—wasting

        • Latest updates to Zia in Office Integrator

          Hello Zoho Office Integrator users! We’re pleased to share exciting updates to the proofing capabilities of Zia, our AI-driven writing assistant, in Office Integrator. With these updates, you can now get spell and grammar check in Brazilian Portuguese,

        • The latest enhancements to Bigin

          Greetings, I hope all of you are doing well. We're happy to announce three recent enhancements we've made to Bigin. We'll go over each one in detail. Bigin integration with Zoho LandingPage You now have the ability to connect Bigin with Zoho LandingPage.

        • What’s New in Zoho Inventory — Latest Features, Integrations & Updates | December 2025

          Zoho Inventory has evolved significantly over the past months, bringing you smarter, faster, and more connected tools to streamline your operations. Whether you’re managing multichannel sales, complex fulfillment workflows, or fast-moving stock, our newest

        • Best practice for tracking the sending of samples or catalogues

          Hi,  My company sells leather and fabric for interiors- sofas, chairs, curtains etc. Our clients are all interior designers, architects or furniture manufacturers. What is the best way to track what samples/catalogues we have sent? If the project is fairly certain, for example, for a specific hotel renovation, then we'll track this as an opportunity, as the project has a definite date, budget and is sure to happen (we may of course lose the project, but we want to bid for it). If the designer just

        • AIRPORT TRANSFER BOOKING SYSTHEM

          Hi guys i just start using zoho creator to manage my transportation booking management company. I have built two booking forms, one that i'll embeded in the website and one for the registered companies. 1st problem: don't know how to auto fill corporate customers details from contacts list to the booking companies booking form . need help!!

        • Next Page