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. }

  6. else 
  7. {
  8. elem.setVisibility(true);
  9. }

  • 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. });

  12. log("products selected from widget: ", selected_products);

  13. // Update Selected Products from the widget Popup 
  14. if (selected_products.length) {
  15.     
  16.     selected_products.forEach(product => {
  17.         products_list.push({ Product_Name1: { id: product.id, name: product.Product_Name }, Quantity_of_Products: 1, Unit_Price1: product.Unit_Price });
  18.     });
  19.     console.log(products_list);
  20.    ZDK.Page.getField('Product_List').setValue(products_list);
  21. }

  • 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


    Access your files securely from anywhere


              Zoho Developer Community




                                      • Desk Community Learning Series


                                      • Digest


                                      • Functions


                                      • Meetups


                                      • Kbase


                                      • Resources


                                      • Glossary


                                      • Desk Marketplace


                                      • MVP Corner


                                      • Word of the Day


                                      • Ask the Experts



                                          Zoho Marketing Automation


                                                  Manage your brands on social media



                                                        Zoho TeamInbox Resources

                                                          Zoho DataPrep Resources



                                                            Zoho CRM Plus Resources

                                                              Zoho Books Resources


                                                                Zoho Subscriptions Resources

                                                                  Zoho Projects Resources


                                                                    Zoho Sprints Resources


                                                                      Qntrl Resources


                                                                        Zoho Creator Resources



                                                                            Zoho CRM Resources

                                                                            • CRM Community Learning Series

                                                                              CRM Community Learning Series


                                                                            • Kaizen

                                                                              Kaizen

                                                                            • Functions

                                                                              Functions

                                                                            • Meetups

                                                                              Meetups

                                                                            • Kbase

                                                                              Kbase

                                                                            • Resources

                                                                              Resources

                                                                            • Digest

                                                                              Digest

                                                                            • CRM Marketplace

                                                                              CRM Marketplace

                                                                            • MVP Corner

                                                                              MVP Corner





                                                                                Design. Discuss. Deliver.

                                                                                Create visually engaging stories with Zoho Show.

                                                                                Get Started Now


                                                                                  Zoho Show Resources


                                                                                    Zoho Writer Writer

                                                                                    Get Started. Write Away!

                                                                                    Writer is a powerful online word processor, designed for collaborative work.

                                                                                      Zoho CRM コンテンツ








                                                                                        Nederlandse Hulpbronnen


                                                                                            ご検討中の方




                                                                                                  • Recent Topics

                                                                                                  • Configuring ZMA Webhook for Zoho Flow : Missing Key Information Error

                                                                                                    I'm looking to send a webhook to Zoho Flow at the end of a Marketing Automation journey in order to perform more actions that I can't do with just a journey. I have the Webhook created in Flow and set up in ZMA, however when I test it I get the error
                                                                                                  • Generate a link for Zoho Sign we can copy and use in a separate email

                                                                                                    Please consider adding functionality that would all a user to copy a reminder link so that we can include it in a personalized email instead of sending a Zoho reminder. Or, allow us to customize the reminder email. Use Case: We have clients we need to
                                                                                                  • Generate a Zoho Sign link

                                                                                                    From time to time I get a response "I never received your you e-document for electronic signature" is there a way to generate a Zoho Sign link to share.
                                                                                                  • Zoho Books API down

                                                                                                    We've been using the zoho books api for the last few weeks to pull open invoices, and the code has stopped working suddenly. When making the same API call as always, we're getting a 400 error.
                                                                                                  • Task Management on Zoho Desk Mobile App

                                                                                                    Hello everyone, We’re currently exploring ways to manage tasks directly from the Zoho Desk mobile app, as some team members do not have access to the desktop version. In our case, having an accessible view of tasks or activities on mobile would make a
                                                                                                  • Zoho Billing Record Refund vs Refund

                                                                                                    When looking at a paid invoice, the payment record can be viewed. In the more actions, there is a "Record Refund" option. If you click the payment referernce you see a "Refund" option. They bring up different forms. It appears as if "Record Refund" is
                                                                                                  • Importar datos de clientes a Zoho CRM por medio de un archivo csv o un excel

                                                                                                    Importar datos de clientes a Zoho CRM por medio de un archivo csv o un excel Hola necesito hacer importacion de datos desde un sistema propio. Quiero exportar datos como nombre de Cliente, empresa, venta, importe, fecha.
                                                                                                  • Zoho Flow and Slack emojis

                                                                                                    Anyone have an luck with using slack emojis in zoho flow? When I send :smile: in zoho flow to slack, the message just says ':smile:' the mentions '@user' don't resolve either.
                                                                                                  • Working with Products that are non-tangible

                                                                                                    How does one create a 'service' in products? Is there a way to disable inventory functions for things like Sofware as a service? The services module doesn't look to be much help either. Not sure how to do this in CRM
                                                                                                  • Limits on workflow never disclosed, not documents and now being applied. I feel scammed and there is no reply for support.

                                                                                                    Hello everyone, I’m facing a critical issue with Zoho Recruit and would appreciate any insights from fellow users or someone from Zoho. For months, I’ve been receiving daily emails stating that I have reached the maximum workflow custom functions limit.
                                                                                                  • Deluge Script to Reopen Ticket if Tasks are not Completed

                                                                                                    I have the following script, my goal is to have it automatically reopen the ticket when the ticket is closed if there are Activities assigned to the ticket that are not "Completed". This script seems to reopen the ticket if there are any tasks at all,
                                                                                                  • 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
                                                                                                  • merge the Multiple POs to single PO if Vendor of PO"s --in Zoho Inventory

                                                                                                    HI Merge the Multiple POs to single PO if Vendor of PO"s are Same ----in Zoho inventory Please provide any work around to achive this .
                                                                                                  • Tip 26: How to hide the "Submit" button from a form

                                                                                                    Hi everyone, Hope you're staying safe and working from home. We are, too. By now, we at Zoho are all very much accustomed to the new normal—working remotely. Today, we're back with yet another simple but interesting tip--how to hide the Submit button from your forms. In certain scenarios, you may want to hide the submit button from a form until all the fields are filled in.  Use case In this tip, we'll show you how to hide the Submit button while the user is entering data into the form, and then
                                                                                                  • Cadence reports as front-end reports

                                                                                                    Hello everyone, We have built a cadence which is connected to the Leads module. There are 11 steps in total, 7 are automatic emails and 4 are tasks for the Lead owners. As admins, we have access to this (very nicely made) 'View Reports' tab where we can
                                                                                                  • Exciting Update: Multi WhatsApp Business Account (WABA) Support Now Available in SalesIQ!

                                                                                                    We’re pleased to share an important update that will enhance the way you manage your WhatsApp Business accounts (WABAs) within SalesIQ. With the launch of Multi WABA support, you can now connect and manage multiple brands more effectively, each under
                                                                                                  • Zoho People U.S. Compensation Setup

                                                                                                    We're new to Zoho and Zoho People Plus. So far, we like what we see as an HRIS system to suit our small USA-based (under 20-person) non-profit. However, we can't figure out how to configure the Compensation Service to reflect our workplace. We'd simply
                                                                                                  • Compensation | Salary Packages - Hourly Wage Needed

                                                                                                    The US Bureau of Labor Statistics says 55.7% of all workers in the US are paid by the hour. I don't know how that compares to the rest of the world, but I would think that this alone would justify the need for having an hourly-based salary package option.
                                                                                                  • Zoho Please change your ways

                                                                                                    I started using Your new Zoho bookings in earnest 3 days ago. What a mistake.  Once again, everything is backwards and upside down.  I had to spend 5 hours testing how the thing works in order for me to understand how to acutally use it.  When i started using google calendar years ago.  it took seconds to figure out how it works. Why is that. bc they put everything in places where it makes sense.  Today, I needed to add an appointment as well as a time off.  Stupid me i added the time off first,
                                                                                                  • Count Function in Zoho Table

                                                                                                    Hi Zoho Team, Hope you're doing well. We would like to request the addition of a Count function in Zoho Table, similar to what exists in Excel, Google Sheets, and Airtable. Currently, there is no built-in way to count the occurrences of unique values
                                                                                                  • Zoho CRM API, Python SDK v7 Quoted_Items

                                                                                                    Hello. How do I use this SDK to retrieve the Quoted_Items from a Quote and downstream the items in a Sales Order I can see references to a constant INVENTORY_MODULES_ITEMS = ["invoiced_items", "quoted_items", "purchase_items", "ordered_items"] But I cannot
                                                                                                  • want to create labels in radio button below the radio circle

                                                                                                    matrix question....labeling the radio button
                                                                                                  • Zoho Campaigns - Footer mis-aligned

                                                                                                    Hello, I'm experiencing an issue with the footer alignment in my Zoho Campaigns emails. When I create an email, the footer appears correctly at the bottom in the editor. However, after sending a test or live email, the footer shifts to the middle of the
                                                                                                  • Syncing contacts on Android

                                                                                                    I'm using the Zoho mail app on Android and although I can see my contacts from within the app, they're not synced to my native contact list and so I can't access them from within the native dialer. Is there any way that I can sync my contacts into my native address book? Regards, Martin
                                                                                                  • Tasks not added to the timeline

                                                                                                    Hi, It would be nice if tasks and completed tasks were added to the timeline. Especially since there's no easy way to see if there are completed tasks without changing the default open tasks to completed tasks. Also the quick view doesn't display task
                                                                                                  • Restore Report in Zoho Creator After Changing Report Type

                                                                                                    I created a report in Zoho Creator and have been using it regularly. While editing, I accidentally changed the report type, and all the fields disappeared from the report. I am using the development version, but I don’t want to revert all the changes
                                                                                                  • Zoho Creator Upcoming Updates - March 2025

                                                                                                    Hello everyone, We hope you’ve had the chance to explore Release Projection 1 for 2025! This month, we’re keeping up the momentum by bringing even more powerful features and enhancements to Zoho Creator. Here's what you can expect in March: App menu builder
                                                                                                  • Retainer invoice in Zoho Finance modlue

                                                                                                    Hello, Is there a way of creating retainer invoices in the Zoho Finance module? If not can I request this is considered for future updates please.
                                                                                                  • Assistance needed in transition if firm is converting into company

                                                                                                    Hello! Our sole proprietor firm is converting into private limited company. I would like to know what needed to be done in zoho books for such case. what are steps that needed to be perform for transition process in our zoho books organization profi
                                                                                                  • Contacts, Leads, Prospects, Opportunities, Deals, Oh my!

                                                                                                    I've implemented three CRM's in previous companies, and led the effort for two of those. I'm pretty familiar with sales pipeline management. For my current company, I chose Zoho One because of the broad range it includes for other business processes,
                                                                                                  • Ask Zia to update a number

                                                                                                    Hi, Quick question....... Is it possible to use Ask Zia to update a number in a table, for instance if I have a field with $1M and would like that updated to $10M can I do that via Ask Zia? Thanks in advance
                                                                                                  • Phonebridge is not visible for one user

                                                                                                    Hello Community, i setup phonebridge. It is working for all users in the organisation. Except for one. I uninstalled phonebridge for the user and reinstalled. But the Call button is not appearing in CRM. What could I am missing. ? Many thanks and best
                                                                                                  • Sorting in scorecards

                                                                                                    Hi Can I request the addition of a Sorting feature in the Scorecard widget? We use this to show account manager performance by quarter, or year, or whatever. It's good for side-by-side comparisons. However, it would be more useful if we could choose to
                                                                                                  • Implementing component filters and restoring deleted items in Zoho CRM analytics

                                                                                                    Hello everyone, We're thrilled to announce two powerful enhancements to your Analytics Dashboard that will improve the way you visualize and manage your data: component filters and the option to view and recover recently deleted items. These improvements
                                                                                                  • WORK DRIVE CUSTOMIZATION

                                                                                                    WORK DRIVE CUSTOMIZATION Create folder for every Case by “Contact Name “in Work Drive under Associate Deals Folder Directory: User Work Drive Accounts: Route Directory Associate Cases Case Name, Case Number Client Upload- Shared with contact (for collaboration)
                                                                                                  • Zoho Projects API v3 - How to format filter critera in deluge

                                                                                                    I'm trying to return the id of a client company in the Zoho Projects API using Zoho Flow and am running into issues about how I format critera in deluge. https://projects.zoho.com/api-docs#clients#get-clients I have several hundred Client Companies, and
                                                                                                  • Why is my deluge code not executing properly? (New and learning deluge)

                                                                                                    I'm trying to update a sales order number through deluge for an automation I'm trying to build. What is wrong with it? /* replacing SO with SOR for sales order pre-fix */ SO = salesorder.get("salesorder_number"); replace = SO.replaceFirst("SO","SOR");
                                                                                                  • Zoho Sign's exclusive release notes for the life sciences module

                                                                                                    Hey there, As you may already know, Zoho Sign rolls out frequent updates, including new features and enhancements, which are detailed on our release notes page. Through the life sciences module, we offer a package of validation documents for users requiring
                                                                                                  • Integration with Zoho CRM?

                                                                                                    Will it be possible to integrate WorkDrive with CRM similar do Zoho Docs?
                                                                                                  • People 5.0 widget and API questions

                                                                                                    While creating Widget for People 5 I found couple issues that I can’t find answer on my own: 1) How to get leave requests according to this API https://www.zoho.com/people/api/get-records-v2.html. I tried: requestData = { "url": "https://people.zoho.eu/api/v2/leavetracker/leaves/records",
                                                                                                  • Next Page