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


    • Recent Topics

    • Mass edit / Mass update products

      Hi, Is there any way to mass update or bulk edit product fields in Zoho Inventory?

    • Automatic Verification of IMAP Integration Status

      Our sales staff have their O365 email integrated with CRM, over time this integration requires re-authentication via the UI. I can manually check the integration status by accessing Settings -> Channels -> Email -> Email Sharing -> "Configuration Type"

    • Tip of the Week #68– Share and access files faster with Zoho WorkDrive extension.

      Have you ever wasted time searching for the right file to attach to your emails—or worried whether the right people could access it? Without proper sharing settings, files might end up inaccessible to teammates or, worse, visible to people who shouldn’t

    • CV-Library: The Newest Source Booster in Zoho Recruit!

      We’ve expanded your sourcing toolkit — CV-Library, one of the UK’s largest and most trusted online job boards, is now available as a Source Booster in Zoho Recruit. This gives recruiters instant access to millions of UK-based candidate profiles, all without

    • Zoho AI Translate Task as Rest API

      I cant find any docs on how to use Zoho AI Translate Task from a rest api call https://www.zoho.com/deluge/help/ai-tasks/translate.html I am working on a custom Widget and I dont think I can execute zoho deluge ai translate task from a custom widget.

    • Is there the possibility to book less than 250 customer portal users?

      If you use the Creator, which is included in Zoho ONe, you can create a customer portal and give access to a maximum of 3 external people / customers, right? On the Creator website I saw that you can add 250 users for 100€/month. However, we don't need

    • Display Parts custom fields in the Work Order

      Hello, I see that is it possible to add custom fields in the Parts module. Would it be possible to also add those custom fields in the Work Order Module under Parts? This would be very useful for customer who want to showcase more information about parts.

    • Unable to edit Saved Estimates

      We are facing issue with editing the price or discount for a saved estimate for nearly 1 week.

    • Translation Blueprint & Picklists with Custom Values

      Hello everyone, I downloaded the translation file and I'm not finding the blueprint transitions. Does this means that the transitions cannot be translated? Also, the picklist values to be translated in the document are not the same that are actually used the in module. For exemple, for my lead module, the picklist values for Lead Status are : Not-contacted, contacted, junk and lost lead. In the translation document (English to French), this is what I see: PicklistValues.Leads.Lead_Status.Contact

    • How to create a custom sales signal?

      I want to create a custom sales signal for a custom module. is it possible to create one? If anyone know please let me know

    • Only show products in offers based on lead source

      We work with several lead sources, each with their own products and different pricing. For example, one product might have two or three different prices. Sometimes, when creating a quote, the wrong product is accidentally selected. Is there a way to only

    • Narrative 7 - The importance of data sharing

      Behind the scenes of a successful ticketing system - BTS Series Narrative 7 - The importance of data sharing Definition Data sharing requires a commitment to preserving the integrity and dependability of shared data throughout its entire lifecycle. This

    • TrueSync regularly filling up my local disk

      Seems that WorkDrive's TrueSync randomly starts filling up my local hard drive space. None of the folders have been set as "Make Offline" but still it seems to randomly start making file offline. The settings of the app is so minimal and is of no real

    • Check out in Meetings

      Why there is no check out in Meetings of Zoho CRM, very difficult to track

    • Issue with Zoho Projet

      Zoho Project on all the cellphones of my customer is crashing. He has mixed brands (Samsung and Pixel). Everything is fine on website and mobile website. Could not reproduce the issue in workshop using Samsung/Pixel/iPhone Uninstallation of Zoho Project

    • SecurePass email English language issue -- please hire someone to correct the English language issues sprinkled throughout your interface

      I wrote previously about some incorrect English in your SecurePass offering. After about six months it was corrected. I have never revoked permission before today and just discovered another language mistake that was not corrected. When you revoke a SecurePass

    • Published Components

      @zoho team, Checking if we can add a password for the public links as we have non-licensed users

    • Zoho Creator customer portal users

      Hi, I'm in a Zoho One subscription with our company. I'm running a project now that involves creating a Zoho Creater application and using the Zoho Creator Customer Portal.  At most we need 25 customer portal users. In our Zoho One plan we only get 3

    • Please Enable Snippets for Agents Adding Comments

      Snippets and templates are currently enabled for agents when they use the reply functionality. There is currently no way to add a template or snippets when an agent comments. This is really weird. Our agents don't use the reply functionality, only the

    • Tip of the Week - Extracting Data from JSON Columns

      Let's say you are importing a CSV or Excel file into Zoho Analytics. What if the file contains a few columns in JSON format? This is where Zoho DataPrep, embedded right within Zoho Analytics, comes in handy. This week's tip explains how to extract data

    • Deluge UI Updates

      Are there any updates planned for the Deluge UI in Zoho Desk? It feels quite dated and lack-lustre after you've spent some time in the CRM Deluge UI.

    • Zia Agents - Follow Ups

      It would be nice to have Zia Agents do follow ups. A lot of times agents are trying to schedule things with users and they say "can we set your printer up tomorrow?" and the user never says anything. A way to have a personalized reminder to the user automatically

    • Hide Agents name in Ticket Responses in "My Area"

      We were able to hide the agents name in the emails, however, the customer is able to see which agent has responded to a ticket in the thread of emails by going into their Help Center thread. Is there any way we can hide that information?

    • Option to Automatically Update Extensions

      Hello Zoho Desk Team, We recently received an email notifying us about an extension update that must be done manually. We’d like to request a feature that allows extensions to be updated automatically without requiring manual intervention. This would

    • Embed Report with Auto Height

      Hello Developers, When we embed report within Page, we are getting one awesome feature to adjust the report height. "Auto" and "Custom' height. This "Auto" option works well when we have no records. But I want to embed report based on some conditions

    • Zoho Payroll: Product Updates - August 2025

      This month’s updates to Zoho Payroll bring enhanced efficiency and smarter features, simplifying payroll management for users in India, UAE, KSA, and US. Read on to explore how these updates can streamline your workflow. Filter Pay Runs by Type (India,

    • Numerical Rating for Interviewer Assessments

      Introducing Numerical Rating, a powerful new addition to interviewer assessments that brings precision and flexibility to candidate evaluations. ✅ What is Numerical Rating? Numerical Rating lets interviewers assign a score for each question in the assessment,

    • User Tips: Adding Multiple Products (Package) to a Quote v2.0 (with Client Script)

      This solution is an improvement on the original idea which used deluge. My solution was posted in the comments are: https://help.zoho.com/portal/en/community/topic/adding-multiple-products-package-to-a-quote The updated version uses client script instead

    • Are downloadable product available in Zoho Commerce

      Hi all. We're considering switching to Zoho Commerce for our shop, but we sell software and remote services. Is there a features for downloadable products? I can't find any information about this. Thank you very much Alice

    • Need Faster Help? Try Live Chat Support

      Hello there, We understand that sometimes, whether you’re facing an issue, exploring a feature, or need quick clarification, sending an email and waiting for a response just doesn’t cut it. You need answers, and you need them now. That’s exactly why we

    • Custom image for each contact using merge tag

      Hi, I'm wondering if it's possible to set up an email campaign to display a different image for each contact using a custom field for the image url. I tried inserting custom html: <img src='$[UD:APP_IMAGE_URL||]$'/> but the editor seemed to reject this and did not actually add anything to the email template. Has anyone got any ideas? cheers, Jeremy

    • Comment Reactions like a Thumbs Up

      Can we please have the ability to emoji react on comments or at the very least, thumbs a comment up? Literally every other project management system out there can support this and it is very much needed to just acknowledge a comment instead of completely

    • Zoho Mail Search Engine Sucks

      Hello There! I really like all the features of Zoho Mail and I believe is way better than Gmail except for the Search Function. I believe Zoho Mail has a very poor search function, if you misspelled a word in the search box, Zoho Mail won't display any

    • Allow Subtasks and Task Lists to have their own Layout

      I'd like to have the ability for subtasks and task lists to have their own layout.  A subtask for us doesn't require all the fields that a parent task has.  The subtask seems cluttered with all the extra fields. Within a project Task List had different purposes.  I'd like the task layout to be different for some task lists.

    • How to update Customers in Zoho Books through Zoho Flow?

      Updating customers in Zoho Flow using a "update customer" action is deleting contact persons in Zoho Books.

    • Conect chat of salesiq with zoho cliq

      Is there any way to answer from zoho cliq  the chat of salesiq initiated by customers?

    • How to transfer credit between customers?

      Hi All, We have a slightly odd situation. It happens that we have two separate customers that are related to each other personally. One customer has an amount of credit, and would like to use that credit to pay the *other* customers invoice. How would

    • Zoho Books Reports: Basic report with total items sold and Cost of goods sold

      How can books show a report with Item Name || Qty Sold || Total Revenue || Total Cost of Goods Sold || Margin I need to factor in also invoices that have been credited where customers returned good. This seems like such a basic report, I'm sure I'm missing

    • The amount entered is more than the balance due for the selected bills."

      Hi Team i am trying to record payments for vendors using API and getting this error in response as { "code": 28011, "message": "The amount entered is more than the balance due for the selected bills." } JSON is prepared according to Documentation and

    • VBA handling named ranges

      In VBA I'm able to work with a single cell named range. E.g. Set Jr = Range ("Year").Value. Also other options are working fine, like Range("Year").Address shows $L$3. However a named range refering to multiple cells is not working for me. Eg. tbl_Test

    • Next Page