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

    • Lookup fields can't be used for anything important

      Hi It seems the lookup fields are mostly.... informative, you can at most link stuff between modules... You can't use lookup fields in blueprints, you can't use them in layout rules or anything... It that correct?

    • Sync desktop folders instantly with WorkDrive TrueSync (Beta)

      Keeping your important files backed up and accessible has never been easier! With WorkDrive desktop app (TrueSync), you can now automatically sync specific desktop folders to WorkDrive Web, ensuring seamless, real-time updates across devices. Important:

    • I don't really understand leads in the campaigns tab on Zoho CRM

      Good morning, fellow CRM users. I am having quite a hard time understanding the leads in the campaigns tab. In this particular campaign in the screenshot below, we sent out emails to our mailing leads through Zoho Campaigns, and the data is linked back

    • What’s New in Zoho Inventory | April 2025

      Hello users, April has been a big month in Zoho Inventory! We’ve rolled out powerful new features to help you streamline production, optimise stock management, and tailor your workflows. While several updates bring helpful enhancements, three major additions

    • Error: Unable to save integration in Desk

      Hi, Problem here. When I try to integrate Zoho CRM with Zoho Desk, I get an error when saving: Unable to save integration in Desk. See print screen below. I'm selecting the right accounts and fields, so not sure what's going wrong.

    • Leads Should Support Business-Centric Structure for B2B Use

      We’re a B2B company that generates leads for other businesses and often engage with multiple contacts within the same company. For years, we’ve struggled with Zoho CRM’s limitation of requiring a Last Name field for leads. For example, if we’re pursuing

    • New notecards not syncing across devices

      Hello. I just noticed this problem happen recently. A new note being created on one device is not appearing on a different device, even though they're supposed to be synced with each other through setting it up on your account. I don't know if there's

    • Invalid URL error when embedded sending url into iframe for my website when using in another region

      Hi team, My site is currently working on integrating your signature feature as part of the system functionality, it's working great but recently there's been a problem like this: After successfully creating the document, i will embed a sending url into

    • Zoho AI Translate – No Support for Hebrew?

      I want to use Zoho AI Translate, but I see that it does not support Hebrew. Since Zoho supports multiple languages, I was hoping this function would also work with Hebrew. Is there any plan to add Hebrew support in the near future? Or is there an alternative

    • Trying to integrate gmail but google keeps blocking Zoho access for integration??

      hi i am trying to integrate a gmail account so can track/access business emails this way. I have followed the instructions but after selecting my email account it gets re-routed to this message (screengrab below) Can anyone advise a way around this or

    • Zoho CRM's V8 APIs are here!

      Hello everyone!!! We hope you are all doing well. Announcing Zoho CRM's V8 APIs! Packed with powerful new features to supercharge your developer experience. Let us take a look at what's new in V8 APIs: Get Related Records Count of a Record API: Ever wondered

    • This mobile number has been marked spam. Please contact support.

      Hi Support, Can you tell me why number was marked as spam. I have having difficult to add my number as you keep requesting i must use it. My number is +63....163 Or is Zoho company excluding Philippines from their services?

    • How to mass update member status in a CRM Campaign?

      Does anybody knows how to mass update member status of the contacts (or leads) associated to a campaign. I can click on a campaign record and go to the Contacts in the Related List fields but then it shows only 10 contacts per page at once. It is hard

    • Sendmail based on individual subform rows on form submission

      Salut, My order form has an product subform with items that can be bought from different suppliers. I would like every suppliers to receive an email saying "you have an order" with all items (records) of the order associated with them. The suppliers'

    • Turning off the new UI

      Tried the new 'enhanced' UI and actively dislike it. Anyone know how to revert back?

    • Where to find User Performance Page in CRM?

      Hi all Just googling answers to another forum post I've just put here when I found this page; https://help.zoho.com/portal/en/community/topic/forecast-performance-analysis-public-early-access-2023 It shows this User Performance Page screenshot. I can't

    • How to create Comparison across Period chart in a dashboard?

      Hi all How can I create this chart in a custom dashboard? The issue for me is that this chart is very small. The CRM module (unlike Projects module) has no ability to expand a chart. I want to make it larger, but also want to include it in a custom Forecast

    • Can't attach a file with ZOHO Mail

      I am a new user of ZOHO mail.  The attachment feature of the mail does not work.  I get the dialog box to choose the file, then nothing happens and it does not attach the file.  Please fix.

    • Out of Office not working

      I have set up out of office on zoho mail, however, it does not reply to every mail sent to it. I have tested it by sending several test messages from multiple different email accounts, I will get a response to some of them, but not all of them this is

    • Automating Employee Birthday Notifications in Zoho Cliq

      Have you ever missed a birthday and felt like the office Grinch? Fear not, the Cliq Developer Platform has got your back! With Zoho Cliq's Schedulers, you can be the office party-cipant who never forgets a single cake, balloon, or awkward rendition of

    • Gmail to Zoho Mail: Filters

      I'm considering a switch from Gmail (using its Workspace with a custom domain) to Zoho Mail. Reading the tutorials but didn't find the info on Gmail's filters. I have tons of them to auto-label my incoming emails. I know that those labeled emails will

    • Removed email address - can't access account

      Hi Zoho Support Team, I recently removed my email address from my Zoho Desk account (which is part of our organization's Desk setup) and then signed out. Now, I’m unable to log back in because there is no email address associated with the account, even

    • I am Getting All visitors Location United Arab Emirate on Zoho sales WHY

      Hi, I am getting all visitors location United Arab Emirate this is wrong people come from Dubai Sharjah Ajman as well

    • how can I change the font when I answer a ticket in zoho desk? thanks

      how can I change the font when I answer a ticket in zoho desk? thanks

    • Unveiling Cadences: Redefining CRM interactions with automated sequential follow-ups

      Last modified on 01/04/2024: Cadences is now available for all Zoho CRM users in all data centres (DCs). Note that it was previously an early access feature, available only upon request, and was also known as Cadences Studio. As of April 1, 2024, it's

    • Custom Serial numbers in Inventory tied to customers

      Hello, We have both software and hardware serial numbers that we need to track for active customers in the field. We do not know the serial numbers for the software until the customer buys it as its not a stock item but something we order and deploy for

    • How to nurture leads, manage contacts and grow your B2B business with SalesIQ?

      Zoho SalesIQ is one of the most powerful support tools in the industry and is preferred by millions of customers. SalesIQ is used to acquire leads across various sectors and automate your workflows. The all-new SalesIQ brings more power to your business

    • Contracts Management

      Hello, We are implementing Zoho FSM for our field service operations and, one of the features we are lacking is Service Contract Management. I was told that such feature might be in the pipeline but an estimated launch date for this is not available at

    • One notebook is on my Android phone app, but not on Web or PC app.

      This problem started in stages. At first my phone was occasionally failing to sync. Then I noticed two things added to my Phone App. One was an existing notebook had a new cover, and the other was a new Note Card with an odd text in it. These were only

    • Does Thrive work with Zoho Billing (Subscriptions)?

      I would like to use Thrive with Zoho Billing Subscriptions but don't see a way to do so. Can someone point me in the right direction? Thank you

    • Is it possible to add HTML or a button on email templates in Zoho Desk?

      Hello team, I am working on getting the best use out of Zoho Desk. I have noticed that when you hit 'reply' on a ticket, it comes with a small 'survey' to the recipient saying something like 'how would you rate your experience with us?'... so my question,

    • Is it possible to add buttons on email replies to internal team members?

      Hello everyone, I am currently trying to set up some workflow rules to trigger when a ticket is created. I have noticed there is a button that can be added to email templates when sending email alerts from workflow rules, for example ${Cases.SUPPORT_PORTAL_BUTTON}.

    • What is the use of the stage environment ?

      Salut, I am woundering what is the use of the stage environment. Usually, I do all the testing in developpement, and then go straight to production. The only thing I cannot test in developpement, is the result for portal users. Could the stage environment

    • Peppol Malaysia API

      Hi Zoho Books, my country Malaysia will going to implement "Peppol" (E-Invoicing), starting 1 Jul 2025 for all businesses. The government intends to provide API for accounting app. The workflow involves creating an invoice from accounting app, triggers

    • At transaction level Discounts for Zoho books UAE version

      Dear Team, Please add transaction level Discounts for Zoho books UAE version. I have been requesting Zoho team past 3 years, Transaction level Discounts is a mandatory option required for our business needs. Zoho books Indian version has the option then

    • New in CRM: Dynamic filters for lookup fields

      Last modified on Oct 28, 2024: This feature was initially available only through Early Access upon request. It is now available to all users across all data centers, except for the IN DC. Users in the IN DC can temporarily request access using this form

    • Sales Order automatic Convert to Invoice using boolean True or false

      It is possible to convert the Sales order to an invoice using a boolean field, true or false Example: I create a field in my Sales Order, I name it QBO Invoice, and the field type is Boolean, true or false. Let's say the default is false, so when I change

    • Presenting the brand new Zoho Bookings!

      Hello everyone, Greetings from Zoho Bookings! We're happy to announce a new version of our product with enhanced features to simplify scheduling, coupled with a sleek interface and improved privacy across teams. Here's what you can expect from the latest

    • Feature Request: Ability to copy notecards to Windows desktop

      Hello, Please consider adding the ability to copy notecards to Windows desktop. Thanks!

    • Script on Page used as dashboard don't work anymore

      Salut, I have a page used as dashboard that worked fine, but recently the workflows don't seem to work, I have the icons like on a page for portal user when I try to look at it as admin. See screen shot : Anybody knows what could have happen ? The only

    • Next Page