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

      • 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

      • Last activity time is acting like last modified time

        When i edit the description or any field in the potential, account, contact and lead, the Last Activity Time is being updated like the Modified Time. This is messing all workflows and reports and we are unable to track real last time of activities like

      • Total Saving in POS Screen

        Displaying the Total Saving in POS Screen, while adding the items before before recording the payment. Customer wish to know this total savings before making the payment (i.e., before recording the payment). Currently we can able to view this total saving

      • Can I hide empty Contact fields from view?

        Some contacts have a lot of empty fields, others are mostly filled. Is there a way I can hide/show empty fields without changing the actual Layout? I would like to de-clutter my view, and also be able to add information later as I am able. I would be

      • Building extensions #1: Creating, testing, and editing extensions for Zoho Sprints using Sigma Cloud Editor

        Hello all! We're delighted to announce the beginning of a new series called Building extensions for Zoho Sprints. Our primary goal for this series is to educate developers on the process of creating extensions for Zoho Sprints and guide them through the

      • How to use Picklist values language in email templates

        Hello, I'm using multi-language in Zoho CRM and I've prepared separate email templates for each language. My question: how do I make sure the picklist field values in each template are rendered in the language that matches the template itself? This is

      • 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

      • Built-in Date Functions in Zoho Analytics Query Tables

        I have a doubt about whether Zoho Analytics Query Tables provide built-in functions for start date, end date, and the current month

      • Zoho Analytics: Clarification on Email Schedule Limits in Basic Plan

        Hi Team, I have a question regarding the email scheduling limits in the Zoho Analytics Basic Plan. The plan shows that I can create 4 email schedules. However, I understand that schedule consumption is calculated based on recipients (i.e., 1 schedule

      • Canvas and calendar

        Is it possible to have a canvas view that shows say a contacts details with the meetings calendar on the same page?

      • How to skip weekends and public holidays in a scheduled workflow using Deluge in Zoho Creator?

        Hi, I have a scheduled workflow in Zoho Creator that runs daily at a fixed time. I want it to execute only on working days skipping weekends and public holidays. Could anyone please help me with how to achieve this?

      • What's New in Zoho Inventory | January - March 2026

        Hello users, The first quarter of 2026 has been dynamic! We’ve shipped a powerful set of updates in Zoho Inventory to enhance item control, improve warehouse efficiency, expand integration and reporting capabilities. From a unified item creation experience

      • Urgent Security Feature Request – Add MFA to Zoho Projects Client Portal Hello Zoho Projects Team,

        Hello Zoho Projects Team, We hope you are doing well. We would like to submit an urgent security enhancement request regarding the Zoho Projects Client Portal. At this time, as far as we are aware, there is no Multi-Factor Authentication (MFA) available

      • Set Custom Icon for Custom Modules in new Zoho CRM UI

      • Standardize your booking forms with Centralized Customer Form

        We’re excited to introduce Centralized Customer Form, a new way to manage and standardize how customer information is collected across your event types. With this feature, you can define a common set of booking form fields once and apply them across your

      • Zoho Mail app update: Accessing Delegated Mailbox.

        Hello everyone! You can now access the delegated mailbox from within the iOS version of the Zoho Mail app. To access the delegated mailbox: Open the Zoho Mail app. Go on to the 'Email' module. Tap the profile picture. Choose the delegated mailbox Please

      • FSM- are we getting there

        We have now tried the FSM a couple of times. We have been defeated on the offline access. As you can imagine the enginner needs to know the customers details, the job and the equipment. This needs to be cache. Is it yet? Plus Our engineers do multiple

      • Cross Module Filtering – Use Fields from Lookup modules in Custom Views criteria and Advanced Filters

        Hello everyone, Zoho CRM now enables you to achieve deeper filtering of records in a module, using fields of a lookup, thereby enhancing your data management experience manifold. This filtering based on lookup module fields is now available in advanced

      • Ignroe_filtrers and drill through

        I have two charts, where one is connected to the other using drill-through. The issue is with the second chart (the drill-through target). It contains an aggregation formula that uses the ignore_filters function. Under normal conditions, the formula works

      • Introducing SlyteUI : From Idea to a Working Interface in Minutes

        Hello everyone! Are you spending hours building basic UIs? Does even the smallest customization feel like a major task? CRM customization should feel intuitive and straightforward, not time consuming or exhausting. SlyteUI makes this possible by simplifying

      • Super Admin Logging in as another User

        How can a Super Admin login as another user. For example, I have a sales rep that is having issues with their Accounts and I want to view their Zoho Account with out having to do a GTM and sharing screens. Moderation Update (8th Aug 2025): We are working

      • Publishing an Application with a Student Account

        Dear Zoho Creator Team, I hope this message finds you well. I would like to know if I can publish the application I built using my Zoho Creator account, which is currently a student account. If it is possible, could you please guide me on how to go about

      • Workflows being applied and the Large unwanted popup

        When a workflow is being applied do to an action, then the Agent is left with a large Window asking if they would like the see the changes this workflow did. Is there any way to disable this prompt from appearing?

      • Automation Series: Assign Subsequent Task Owner on Completion

        When a project progresses, tasks get piled up over time. As new tasks are created, tracking ownership and assigning them can become time consuming. In a pharmaceutical manufacturing unit, the procurement phase involves a set of tasks such as raw material

      • What's New in Zoho Billing | March 2026

        March is here with a fresh wave of updates to Zoho Billing. From making compliance easier, reporting more flexible, to making day-to-day workflows smoother across the board. Here's everything that's new this month. Introducing Usage-Based Billing Reports

      • Business Day Logic Update: More Accurate Scheduling for Your Workflows

        Hello everyone, We’re improving how business-day calculations work in workflows, especially when triggers happen on weekends. This update ensures that offsets like +0, +1, and +2 business days behave exactly as intended, giving you clearer and more predictable

      • How to add a filter

        Hi Team, How can I set a filter like excel, instead of adding a new button.

      • A POS solution to complete the business solution for SME businesses

        For such a long time one aspect of SME business completely ignored has been a suitable POS solution native to Zoho and integrated with all the usual and necessary applications such as Inventory, Books, Commerce and CRM. The first and generally only option

      • Zoho Form not synching with Zoho CRM in CRM email template

        I have in the past successfully created an email template that has access to a Zoho Form in the url link to Forms in the email template. I am in the Contact Module of the CRM and I have created a Form for contacts and mapped the two. I am using the upsert

      • Bulk upload images and specifications to products

        Hi, Many users have asked this over the years and I am also asking the same. Is there any way in which we can bulk upload product (variant) images and product specifications. The current way to upload/select image for every variant is too cumbersome.

      • Schedule Timeout 5 minutes vs. stated 15 minutes

        I am running into a function run timeout error after 5 minutes for my schedules. The Functions - Limits documents states it should be 15 minutes: Functions - Limits | Online Help - Zoho CRM. What should it actually be? Due to the 5 minute timeout, I'm

      • Coupon Codes and Cancelling Subscriptions

        We have two Zoho One organizations, one we use for dev/testing. In Zoho Billing when we cancel a subscription, we are getting two different behaviors with regards to coupons. In one environment, the coupon is removed upon cancellation. In the other, the

      • Zoho Books | Product updates | April 2026

        Hello users, Welcome to our April 2026 product updates roundup! Highlights include profit margin for sales transactions, insights in reports, recording deposits from undeposited funds in banking, and faster production workflows with improved assembly

      • Journal Entries Do Not Show Multiple Entries to the Same Account

        Another basic accounting function that Books ... Accountants sometimes write journal entries, debiting and/or crediting the same account in the same entry. This is due to the need to record specific activity in an account when we pull reports especially

      • Email Opt Out Question

        Has the problem where if a customer is emailed opt out prevents you sending standard emails? For me this feature is simply to stop any email marketing and should not block people from receiving emails via Zoho mobile, which makes no sense.

      • Bulk Writer Export

        Pardon me if this has already been discussed (I can't find anything about it in these forums and my last attempt to start a thread seems to have failed). Is it possible to export more than one document at once? I would be really great to be able to burn OpenOffice.Org files of all my Zoho documents once a month to a CDR. If that feature is available/were created, this would be my main word processor. Without being able to do my own bulk backups I'm leery to count on Zoho's servers (which are robust

      • Invalid value passed for line_item_category

        duplicating a previous used invoice and trying to save it (new invoice number / po number used) I keep encountering this error when trying to save the invoice Invalid value passed for line_item_category

      • Sites API

        Is there a Sites API and if so where can we find documentation

      • Extracting phone number from variable

        Hi. I've created a flow between Calendly and Zoho CRM. So when someone schedules a meeting in Calendly, there is a lead created in Zoho CRM. However, I am not able to fill in the phone number field in Zoho CRM, because the phone number is included in

      • I can't fetch Calendly Fields

        Hello, I have set up a flow to connect Calendly with Zoho CRM, A few days ago I have mentioned that I should update the Calendly app connection and I have done, After Calendly has been updated I have some issues such as Event location missing I can map

      • Next Page