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

    • encountering an error when attempting to associate an email with a Deal using the Zoho CRM extension in Zoho Mail.

      When I click "Yes, associate," the system displays an "Oops!! Something went wrong" error message. I have attached a screenshot of the issue for reference.

    • Can 1 Zoho CRM instance sync with 2 Zoho Marketing Automation instances?

      Can 1 Zoho CRM instance sync with 2 Zoho Marketing Automation instances?

    • Can I add Conditional merge tags on my Templates?

      Hi I was wondering if I can use Conditional Mail Merge tags inside my Email templates/Quotes etc within the CRM? In spanish and in our business we use gender and academic degree salutations , ie: Dr., Dra., Sr., Srta., so the beginning of an email / letter

    • Zoho mail account ownership transfer

      We recently took over another company and have assumed responsibility for its Zoho account, including Zoho Mail and all related services. We would like to formally transfer ownership of this account to our organization. Could you please outline the complete

    • Email Authentication is Failing

      I'm trying to setup gitlab with email authentication. I used the following configs picked up from: https://docs.gitlab.com/omnibus/settings/smtp/ gitlab_rails['smtp_enable'] = true gitlab_rails['smtp_address'] = "smtp.zoho.com" gitlab_rails['smtp_port']

    • DMARC reports for mail I didn't send: how to deal with?

      I know the enthusiastic amateur's bare minimum about e-mail; am able to set up a Thunderbird account and know the basic acronyms. I have a Zoho Mail account connected to my domain, and have set up SPF, DMARC and DKIM successfully according to Zoho's instruction

    • ms

      Email set up for communication

    • Fix the speed

      It takes ages to load on every step even though my dataset is quite small.

    • Capture Bank Charges for Invoice Payments

      We've added the Bank Charges field in the "Add Payments" page both in Zoho Invoice & Zoho Books. So all you need to do is to enter the bank charges when you record a payment for the invoices. This bank charge will be included to the amount paid for that invoice. Steps to add the bank charges while you record the payment:       1. Click the "Invoices" sub-tab under the "Money-In" tab.       2. Click the 'add payment' link for the invoice that you wish to record the payment for.       3. On the add

    • Conditional Layouts On Multi Select Field

      How we can use Conditional Layouts On Multi Select Field field? Please help.

    • Image field in custom module

      Hi guy, Is there any hope of adding a custom image field in the custom module? We created a custom module to keep track of assets, and it would be helpful if we could attach an image to the record. Thanks Rudy

    • Deluge Function to Update Custom Field

      I'm trying to get a Deluge function (which will run as part of a Schedule in Desk) that retrieves all tickets with the status "Recurring" and updates the custom field checkbox "cf_recurring" to "true". Here's what I have, which doesn't work: searchValue

    • "View ticket" link is broken

      The "View ticket" link in our Zoho ticketing system confirmation emails is broken (please see attached). Impacts ability to update/review details, and, refresh recollection at a later date. Any help would be much appreciated.

    • import data from Apollo.ai into zoho crm via zoho flow

      I might be asking this question in the wrong forum. We use Apollo.ai to find potential new leads for our business, there are around 10000 leads that we have initially found. We have an Apollo.ai account but just to do searches, we dont use it as a crm.

    • Woocommerce Line Item Information

      I'd like to add each line item from a Woocommerce order to a zoho creator form record. The line items are found within the line items array, but I'm not sure how to get each item out of the array? Any help would be much appreciated.

    • Synching changes to Stripe when changes are made in Zoho Billing

      We have a situation where we have merged customers in Zoho BIlling and then found out later that the payment in Stripe was not updated and still associated with the old customer record. The card gets updated and billed, but that payment is still associated

    • How do I fix this? Unable to send message; Reason:554 5.1.8 Email Outgoing Blocked.

      How do I fix this? Unable to send message; Reason:554 5.1.8 Email Outgoing Blocked.

    • Disable Smart Filters By Default

      The smart filters "feature" is causing confusion for Zoho Mail users. New emails should be delivered to the inbox unless they have specifically opted to redirect them somewhere else. People don't understand that new emails might be waiting in a random

    • ME SALE ESTE ERROR: No fue posible enviar el mensaje;Motivo:554 5.1.8 Email Outgoing Blocked

      Ayuda!! Me sale este error al intentar enviar mensajes desde mi correo electronico de Zoho! Tampoco recibo correos pues cuando me envia rebotan. Ayuda, Me urge enviar unos correo importantes!! Quedo atenta MAGDA HERNANDEZ +5731120888408

    • Client Script | Update - Client Script Support For Custom Buttons

      Hello everyone! We are excited to announce one of the most requested features - Client Script support for Custom Buttons. This enhancement lets you run custom logic on button actions, giving you greater flexibility and control over your user interactions.

    • Zoho Mail not working

      Zoho Mail not working

    • Queries on Project-Based Inventory Consumption and Proforma Invoice in Zoho ERP

      We would appreciate your clarification on how Zoho ERP plans to handle the following: Project-based inventory consumption without itemized sales orders Accurate project cost tracking along with inventory reduction Proforma Invoice usage We look forward

    • I can't add a new customer in Zoho invoice? Anyone had this issue before?

      Ive been using Zoho invoice for over 6 years. Today I wanted to add a new customer to send an invoice to but it doesn't save when I try to access it from the pulldown menu when you go to send a new invoice.

    • Spreadsheet View click & focus issue in Arabic (RTL) localization

      Hello Zoho Support Team, I am facing an issue in Zoho Creator Spreadsheet View when using Arabic localization (RTL). Scenario: My app supports English (LTR) and Arabic (RTL). I created a Spreadsheet View for a form. In English, everything works correctly.

    • Customer address in Zoho Bookings

      Hello,  Is it possible to add customer address information to the Zoho bookings appointment screen? Or have it pull that information automatically from the CRM? We are wanting to use this as a field management software but it is difficult to pull the address from multiple sources when it would be ideal to have a clickable address on the appointment screen that opens up the user's maps.  It would also be advantageous for the "list view" to show appointment times instead of just duration and booking

    • Ghost email notification on a form

      Hello, We have recently encountered an error where I can not see a email notification set up for a form which I am currently the owner, although neither the form nor the notification were created by me. However, neither can the Super Admin access the

    • bulk edit records and run internal logic

      hi there is few logics in manner "it this than that" logics work well when i edit entry openning it one by one (via workflow "on add/edit - on success" , for custom field "on update/on user input") but when i try bulk edit records - logic does not work.  how can i turn on logic to work as programmed - for mass editing records via bulk edit?

    • Bulk bank rule creatioin

      Hi team, I am exploring Option to create a multiple bank rule. Could please suggest the option to implement this?

    • Limitations on editing a message in Cliq

      Hi I've checked the documentations and there's no mention of how many times a message can be edited. When trying with code, I get various numbers such as ~1000 edits or so. Please mention if there's a limit on how many times one can change a message via

    • email address autocomplete

      Is there a way to eliminate certain addresses from showing up in auto complete when entering an address? Many old and unused addresses currently show up, many of which I would like to get rid of. Thanks

    • How to use MAIL without Dashboard?

      Whenever I open Mail, it opens Dashboard. This makes Mail area very small and also I cannot manage Folders (like delete/rename) etc. I want to know if there is any way to open only Mail apps and not the Dashboard.

    • Introducing Radio Buttons and Numeric Range Sliders in Zoho CRM

      Release update: Currently out for CN, JP, AU and CA DCs (Free and standard editions). For other DCs, this will be released by mid-March. Hello everyone, We are pleased to share with you that Zoho CRM's Layout Editor now includes two new field formats—

    • How can i download and secure all my mails from the archive folders?

      Hi, i would like to download all my mails from my archive folders and secure it on my external HDD. Is this possible? Thx. amir

    • How to open filtered report in popup using Zoho Creator Deluge?

      First report: There is so many records in Report, If I click one record, pop up is occur. Second report (Pop up): there is also so many record data, and this pop up is also Report, not Form. First report: It has got "Sales Order" field. when I click any

    • Can you default reports/charts to report the current week?

      Our data table maintains two years of data. Management wants certain report to automatically filter the report to the latest calendar week. I know I can do this manually with filters but I want the report to automatically default to the latest calendar

    • Rendering PDF to view on page

      My company upload lots of PDF files onto Zoho. But every time we open it, it downloads the file instead of viewing it on the web page. Does Zoho allow uploaded PDF files to be rendered to view on web page yet? I've been trying to use <embed> or <object> but it cannot be loaded.  (similar thread: https://help.zoho.com/portal/community/topic/how-to-open-a-pdf-file-of-a-view-in-preview-mode)

    • Overlapping Reports in Dashboards

      It's rare, but occasionally it would be a good feature if I were able to overlap reports, either fully or partially in the Dashboards. Also, then having the ability to move objects to the front or rear, or make them transparent/translucent would be good

    • Feature request - pin or flag note

      Hi, It would be great if you could either pin or flag one or more notes so that they remain visible when there are a bunch of notes and some get hidden in the list. Sometimes you are looking for a particular name that gets lost in a bunch of less important

    • Admin guide: Handling Mailbox Settings for better user management

      Managing day-to-day email scenarios, such as supporting users with multiple email addresses, ensuring uninterrupted email access during employee absences, enabling secure mailbox sharing, and enforcing organizational security and compliance, can be challenging

    • Cisco Webex Calling Intergration

      Hi Guys, Our organisation is looking at a move from Salesforce to Zoho. We have found there is no support for Cisco Webex Calling however? Is there a way to enable this or are there any apps which can provide this? Thanks!

    • Next Page