Client Script support for Canvas Forms

Client Script support for Canvas 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


      • Recent Topics

      • Planned, actual and forecast hours

        Hi there, I'm attempting to use Zoho to plan projects and time, but it's so confusing. I have two questions: Why, in the screen shot below, is my planned hours saying 8? I have assigned 8 work hours to the task, and I have logged 4 hours of actuals. I

      • RingCentral Intergration Fax

        Hello Zoho Community , I recently intergrated with ring central with zoho crm. Ring central is a fully loaded buisness VOIP and Fax system , however I think there should be a button in Zoho to allow users to fax out the same way users are able to fax out on the ring central web application.  Myself and many other users are industries that communicate through fax. Its such a burden to have to download pdf and then send manually. If possible an activiity log built in to the module as well would be

      • Import CRM Vendor Module for Mail Merge

        Hello, It seems I cannot import the vendor module field for a merge document? Is there a way to turn this on?  I have the ability to import my custom module fields, but not standard built-in CRM modules like Vendors.  Am I missing something? Thank you very much for your assistance!

      • Custom Function : Copy multilookup field to text field

        Hi, I'm a newbie on function programming, I try to copy text from a multi lookup field named "societe" to a text field named "societe2". I've used this code. In deluge script it seems to work, but when I trigger this function it doesn't work (Societe2

      • Merging 2 tickets

        Hi I understand how to merge 2 tickets already but find the process quite cumbersome. It is not always simple to perform a search that causes the 2 tickets in question to show up on the Ticket Screen, and this is the only place a merge can be performed. Doing a search for the customer or contact linked to the ticket displays all of their tickets which could be hundreds to sort through, you could do a custom search that only shows open tickets but doing that every time is also time consuming. Not

      • Client Script event on any field of a Detail page

        Hi everyone! I'd like to trigger a Client Script when a user modifies a field - any field - from the Account Details page, how can I do this? I don't want to trigger it on a specific field, but on all of them. Thanks in advance!

      • Allow SO Item table to search other fields in items to make entry easier

        We have thousands of items, some of which need to be entered on the fly by desk people. We don't want abstracts like the vendor's part number in our SKU or Item name. It would make order entry much easier if the context search in the items table would

      • How Do I Refund a Customer Directly to Their Credit Card?

        Hi, I use books to auto-charge my customers credit card. But when I create a credit note there doesn't seem to be a way to directly refund the amount back to their credit card. Is the only way to refund a credit note by doing it "offline" - or manually-

      • Can’t Send Outgoing Mail

        Hello, one of the email addresses on my account had its outgoing mail privileges blocked. This was due to some bot signups on my website, causing my email to send a bunch of undeliverable emails. I have corrected this issue on my website. Please restore

      • zoho webmail keeps opening an empty tab when on log in/vist webmail

        as the the title says, whenever i log in or visit the page in a new tab, zoho webmail with open a new tab, but it errors out (see attachment). how do you stop it from doing this?

      • Sending possible. Receiving not possible.

        We are not receiving mail in our company email. Could you please solve this. It has been recurring and I want it to be resolved once and for all. Please help.

      • Efficient way to get a list of records like Notes under Leads that changed in last N minutes

        Hi, I am writing a process to consume the Zoho Leads and put it in an internal system. For Leads, Accounts and Contacts, the getRepords with lastModifiedTime works great as I can call the API to get only the updated records say in last 30 minutes. However

      • IMAP Connection Issue – "Disconnect called before connection setup" (Zoho + Freshdesk Integration)

        Hello, Since April 25, 2025, we are facing a critical issue with our Zoho Mail integration with Freshdesk. Incoming emails are no longer being received in Freshdesk. Freshdesk Support has confirmed that their system is trying to connect to our Zoho mailbox,

      • Fetching a missing Folder, now creates it

        Hello, I'm using Zoho Flow to fetch a folder within a Team Folder. If the folder is missing (folder ID is null), I trigger a Create Folder. Now in 2025, when I fetch a missing folder, a folder is created right away with the "name + full date" and a Folder

      • Is the "schedule 10 mass emails/module" limit a per user or per organization limit?

        For scheduling emails out of Zoho CRM, there is a 10 scheduled mass emails per module limit according to Zoho documentation (https://help.zoho.com/portal/en/kb/crm/faqs/emails/articles/how-to-schedule-mass-emails-in-zoho-crm). Is this limit per user or

      • How Would I get data from a network drive to be feed into creator program.

        What's the easiest and cleanest solution for this?

      • Using Zoho One to manage two (or more) businesses

        We are one company that operates two business, a scenario that Zoho One doesn't really seem to handle very well, and one which I can't imagine is at all unique to us! (It is basically designed to facilitate branding and use for one business only per subscription).

      • Give Permission for User test in Development/Staging modes

        Hi Everyone, I am using Zoho Creator C6. Where there are development and staging modes. Is it possible to give special / temporary permission for users to test directly in development and staging? Or do you have any other ideas? Thank you very much.

      • Cannnot find criteria tab

        We need to be able to segment contacts based on an account view or field. The online help shows a screen with three options: Under Sync Details there is All Contacts; Custom view; Criteria.  The latter is missing from my screen.  I need it. I also want to know if I delete contacts from campaigns, will they still remain in CRM? 

      • Dial Charts in Analytics using field values for colored ranges

        Hey all! It would be supremely helpful if we could use field values for ranges in Analytics for dial charts. We currently display an analytics report to our sales team showing how close they are to reaching the next tier for commission payouts. We update

      • A couple of minor enhancements to Workflows

        Last updated on September 17, 2024: These enhancements were initially available for early access, and we've now enabled them for all users. We are elated to announce a couple of enhancements to custom functions in our Workflows! Say hello to: "Source"

      • South Africa Tax Edition is now Available!

        Managing taxes just got easier for field service businesses in South Africa! With Zoho FSM's new South Africa tax edition, field service businesses operating in South Africa can now effortlessly stay compliant with local tax regulations. Easily manage

      • How to overcome Zoho Deluge's time limit?

        I have built a function according to the following scheme: pages = {1,2,3,4,5,6,7,8,9,10}; for each page in pages { entriesPerPage = zoho.crm.getRecords("Accounts",page,200); for each entry in entriesPerPage { … } } Unfortunately, we have too many entries

      • Introducing ICR in Zoho CRM: Transform your printed text into digital data

        From writing on papyrus in the ancient times to creating a humble record in your CRM, the world may have evolved with how it used to record data, but data entry as such has not been simplified. It is still a repetitive and arduous chore on which businesses

      • How to Add Custom Sections in the Product Page?

        Hi Zoho team, I’m currently using the Tranquil theme on Zoho Commerce and I have a question regarding the product page layout. Right now, under each product, I can see expandable sections like Product Details and Specifications. I’d like to add two additional

      • Bulk user onboarding for Cliq Channels in a jiffy

        As developers, we frequently switch between coding, debugging, and optimizing tasks. The last thing we want is to be burdened by manual user management. Adding users one by one to a channel is tedious and prone to errors, taking up more time than we could

      • Weekly Tips: Secure your attachment downloads with Zoho Mail

        Safety is one of our main concerns, whether it’s about device security or online protection. We use tools like fingerprint scanners, facial recognition, and two-factor authentication to keep our devices and email accounts secure. We use methods like OTP

      • Issues with Dashboard Filter and KPI in Zoho Analytics (CAGR)

        Hi everyone, I'm trying to build a CAGR (Compound Annual Growth Rate) KPI in Zoho Analytics, but I'm running into some issues with filter synchronization. Here's the scenario: I created two test reports: One that filters results from 2021 to 2025. Another

      • Adding Product Photos through Import or In Bulk

        I am about to add about 1000 products in the CRM. I am shocked that there is no way to add product photos through the Import feature. I'll be spending days adding product photos.... Very dissapointing. Anyone know of a work around to add product photos

      • Announcing Multi-language Support in Zoho FSM

        Zoho FSM now speaks your language. The much-awaited multi-language support is now available in Zoho FSM. The following languages are supported in Zoho FSM: Dutch (Nederlands) English - United Kingdom English - United States French (français) French -

      • How to sync Zoho CRM Quotes with Zoho Books/Finance Estimates or Quotes

        Hi everyone, We’re building quotes in the Zoho CRM Quotes module because of its strong CPQ features and better communication options (multiple contacts, email customization, etc.). However, these don’t sync directly with Zoho Books/Finance for invoicing.

      • Quiz of the Day on Dashboard

        Hi team, Is it possible to enter a feature for enabling a widget as a quiz for the day. This widget can have one question popping up daily from the list of some pre-fed questions and the employees need to either type a response or can select from a multiple-choice

      • Email content strategy

        This is basically a couple of questions about the best practices when it comes to the use of colors as part of the message sent through the email campaign. 1 - Is there a guide or recommendation as to what are the best colors for text/background associated

      • Canvas Button Vanished

        I have a button that has mysteriously vanished. It shows in the canvas builder but then is no where to be found in the actual record and before you ask, yes I have tried to access through incognito mode and same issue.

      • Multiple Tabs in the Dashboard

        Hi team, Can we enable an option to add multiple tabs in a dashboard? This will help to group the content to be displayed to employees and make it more usable and user-friendly intranet space.

      • In the Pivot table in the value section i want to the actual value instead of sum or count

        I am creating Early/late Check and check out in pivot report based on Zoho analytics I need the data to include: Employee Name Late Entry, Early Entry, Early Exit, Late Exit, First In, Last Out, and Total Hours.

      • Introducing Assemblies and Kits in Zoho Inventory

        Hello customers, We’re excited to share a major revamp to Zoho Inventory that brings both clarity and flexibility to your inventory management experience! Presenting Assemblies and Kits We’re thrilled to introduce Assemblies and Kits, which replaces the

      • IMAP as a source option in Dashboards

        Hi Team Can I request IMAP be added as a source option for running a report or creating a KPI in dashboards. I have selected all options and my IMAP linked emails are not showing, I can only check these by going to emails in a contact. Thankyou Josh

      • In Zoho people Check in report the date want come as Colum how i can achive that in zoho people or analytics

        In Zoho people Check in report the date want come as Colum. How i can achive that in zoho people or analytics

      • Canvas responsive preview in different browser window causes re-authentication/verification

        I'm trying to design a view in Canvas. I am testing in a tab with a desktop view, and another tab (on my same desktop/IP) with a responsive view of an iphone. Every time I refresh, it boots me out of the previously used tab. If I forget to refresh the

      • Next Page