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

    • CRM HAS BEEN SOOO SLOW For Days 05/15/25

      I have fantastic Wifi speed and have zero issues with other websites, apps, or programs. It takes an excruciatingly amount of time to simply load a record, open an email, compose an email, draft a new template, etc. Am I in a subset/region of subscribers

    • Mass emails - Allow preview of which emails will receive the email based on the criteria

      Feature request. Please allow us to view and confirm the exact recipients of the mass emails based on the criteria we've chosen before sending. It can be quite sensitive if you send the mass email to some wrong accounts accidently, so it would be great

    • Customers not receiving emails

      So, a little backstory, we have been using Zoho Forms for the past eight years. And when we initially started, we would have email notifications be sent from inside Zoho Forms after a submission. We recently started using Zoho CRM as we wanted a better

    • Sum Total of various fields in child module and add value to parent module field

      Hi! Having trouble with a custom function, im trying to calculate the total of all the rent and sqm fields of our offices in Products module and have them transfer to the parent module Location. The API names are as below: Child module Products = "Products"

    • Automate your status with Cliq Schedulers

      Imagine enjoying your favorite homemade meal during a peaceful lunch break, when suddenly there's a PING! A notification pops up and ruins your moment of zen. Even worse, you might be in a vital product development sprint, only to be derailed by a "quick

    • Important! ZipRecruiter Sponsored Posting Plan Changes in Zoho Recruit

      Greetings, We’re reaching out to inform you about an important upcoming change to the ZipRecruiter Sponsored job board integration within Zoho Recruit. What’s Changing? Starting June 1, 2025, Zoho Recruit will be updated with ZipRecruiter's latest pricing

    • Generate Unique Customer ID for Each for All Contacts

      Generate Unique Customer ID for Each for All Contacts

    • Mails to Deals

      Hi everybody. We are using ZOHO CRM connected to ZOHO Mail and we have a big trouble, which our ZOHO partner is not able to solve. Zoho CRM automatically connects received emails to last edited live Deal of the same Contact. For us this logic is very

    • ICICI Bank integration

      Why the ICICI bank integration has been disabled? We opened the ICICI bank account only for integraton with Zoho. It is taking lot of time to do manual payments using file upload method. When will be the new ICICI bank integration enabled in India?

    • This domain is not allowed to add. Please contact support-as@zohocorp.com for further details

      I am trying to setup the free version of Zoho Mail. When I tried to add my domain, theselfreunion.com I got the error message that is the subject of this Topic. I've read your other community forum topics, and this is NOT a free domain. So what is the

    • Add Direct Ticket Link to Zoho Help Center Portal in Email Replies

      Hi Zoho Support Team, We hope you're doing well. We’d like to request a small but valuable improvement to enhance the usability of the Zoho Help Center portal (https://help.zoho.com/portal/en/myarea). Currently, when someone from Zoho replies to a support

    • Google Drive

      How to add more modules in google drive as I don't want Zoho space? TIA

    • View Expenses in Zoho Books Without Approval or Reports in Zoho Expense

      Hello, I’m using both Zoho Books and Zoho Expense (on the free plan for both). I would like to view the expenses recorded in Zoho Expense within Zoho Books, but I read that they need to be approved first. Since I manage a small freelance business, I don’t

    • 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

    • Ajust quantities in another form based on subform, on form submission

      Hello, I have an Order form with a LineItems subform. The LineItems subform has many lookups that import data from various other forms. I want to deduct the quantity offered in one of those other form, called Offer. In another application I used the following

    • Workdrive connection in Zoho CRM not working

      Hi, in https://crm.zoho.com.au/crm/orgXXXXXX/settings/connections i have set up the connection for WorkDrive which is pretty much setting up the name and the scopes. But I get "WorkDrive API test response: {"errors":[{"id":"F7003","title":"Invalid OAuth

    • Best Way to Update Subscriber Preferences for an Existing List?

      We currently have a mailing list of over 43,000 contacts in Zoho Campaigns, and we’re looking to segment our list based on subscriber content preferences—things like Free Webinars, Local Training, Store Specials, and New Product Announcements. We’d like

    • Disappearing Mouse cursor in Zoho Mail / Windows 11 (Chrome + Edge)

      I'm seeing an issue when writing mails with the light theme with the mouse cursor being white and the document area also being white - making it nearly impossible to see the mouse cursor. I see the problem on Windows 11 under Chrome and Edge. (Yet to

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

      Hello users, We are back with exciting new enhancements in Zoho Inventory to make managing your inventory smoother than ever! Check out the latest features for the first quarter of 2025. Watch out for this space for even more updates. Email Insights for

    • Equivalent domains

      Need a settings feature for adding/modifying/deleting domains that use the same login service. The feature can also suggest some popular sites that use shared credentials to access domains under their control. For example: amazon.com and its local variations like amazon.in. For example: gmail.com and google.com. LastPass has this feature.

    • Learning how to customize templates via code and best practices

      Hi! Our developers team want to learn how to edit our template files safely. The last time we messed with these files our site went down for a day and we had to reconfigure it from scratch. What are the best practices to do this? How can we get a template

    • Inquiry: Integrating In-house Chatbot with Zoho Desk for Live Agent Support

      Hi Team, We are exploring the possibility of integrating our existing in-house chatbot with Zoho Desk to provide seamless escalation to live agents. Our requirement is as follows: within our chatbot interface, we want to offer users a "Talk to Agent"

    • I need to know the IP address of ZOHO CRM.

      The link below is the IP address for Analytics, do you have CRM's? https://help.zoho.com/portal/ja/kb/analytics/users-guide/import-connect-to-database/cloud-database/articles/zoho-analytics%E3%81%AEip%E3%82%A2%E3%83%89%E3%83%AC%E3%82%B9 I would like to

    • You are forced to store/manage custom functions redundantly | Any solutions?

      Hello there, you are forced to store code (custom functions) redundantly if you want to use the same functionality in multiple departments. I don't understand that you can't define global functions. When I make a change to a function I may have to do

    • Integrating Zoho CRM with Quickbooks Enterprise?

      Does anyone have any experience of integrating Zoho CRM with Quickbooks Enterprise?  The Zoho pages refer to the Quickbooks Premier edition, and I wanted to know if the same works with the Quickbooks Enterprise version.

    • in Desk - Why can't I find where to enable multi-branding?

      I'm looking at the knowledge base article & it says to go to settings / general / rebranding / multi-branding. But there's no multi-branding there!

    • Edit a previous reconciliation

      I realized that during my March bank reconciliation, I chose the wrong check to reconcile (they were for the same amount on the same date, I just chose the wrong check to reconcile). So now, the incorrect check is showing as un-reconciled. Is there any way I can edit a previous reconciliation (this is 7 months ago) so I can adjust the check that was reconciled? The amounts are exactly the same and it won't change my ending balance.

    • How to undo a reconciliation?

      I need to update the "Expense Account" field on a bunch of expenses that I've already reconciled.  However, the system will not allow this field the be changed since it is reconciled.  I haven't found a way to remove the reconciliation status for the

    • Edit Reconciled Transactions

      I realize transaction amounts and certain accounts cannot be edited easily once reconciled, but when I audit my operational transactions quarterly and at the end of the year sometimes I need to change the expense account for a few transactions. To do

    • Zoho support Can not send invitation email to portal user

      I try to use Zoho support but have a problem. I don't know why. - When a customer sign up at the portal user they don't receive the invitation email. - When I go to contact manu, choose 1 user and click invite --> they don't receive the invitation email.

    • How to Send Automatic Warning Email After 3 Late Arrivals in Zoho People?

      I’m looking to set up an automation in Zoho People where a warning message is automatically sent to employees who have 3 or more late arrivals within a specific time period (like the past 30 days). Here’s what I’m trying to achieve: Monitor employee check-in

    • Quick Create needs Client Script support

      As per the title. We need client scripts to apply at a Quick Create level. We enforce logic on the form to ensure data quality, automate field values, etc. However, all this is lost when a user attempts a "Quick Create". It is disappointing because, from

    • remove()function to remove characters

      Hi there, I'm trying to use the remove function to remove characters from a variable. I have a Lead source that comes in as [Google] or [Facebook] etc. in Flow I need te to remove the square bracket. Tried a function that looks something like this: string

    • Sharing files without download option

      Hi Team     We want to share folders and subfolder which has files(doc, .PPT , excel and PDF) in zoho Docs. When we share the directory to a member in the organization or external to the organization There are able to download. How do we prevent users from download. Regards Krishna V.K

    • Audio/video quality issues with Zoho Meeting – Any roadmap for improvement?

      Hi Zoho Team, We’ve been using Zoho Meeting for both internal and external meetings, and unfortunately, the experience has been consistently poor. The video and audio quality are so unreliable that it often renders meetings ineffective—especially with

    • Automatic Display the Price from CPQ

      Is it possible to display the discounted price from CPQ that I created for my customer? For example, when the customer selects Product A, instead of showing the default price, it should display the discounted CPQ price.

    • Basic Lookup Field Update Function

      Hi! So I have no idea what I'm doing in Deluge but I need to get a custom function to run On Create or Edit that sets the value of a Lookup Field based on the contents of another field. Seems simple enough, but I have looked through dozens of other similar

    • Weekly Tips: Schedule Your Emails with Zoho Mail

      As a business, it is recommended to consider the best time to send an email, taking into account the recipient's time-zone or their work hours to have your email on top of their inbox. Sending an email when your recipient is most likely to check their

    • Data Source Request : More Zoho Marketing Automation and Zoho Pagesense

      I'm currently trying to replicate the reports shown in ZMA for stats over time for individual forms. The reports exist only in ZMA, but I want to use in wider company presentations and can't find the relevant data in Analytics : Example I also note that

    • Zoho Mail - support email

      Hi I sent an email to support more than 48 hours ago and still have not heard back! What's up? How long am I supposed to wait for a replay? Thanks

    • Next Page