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


    • Sticky Posts

    • Kaizen #198: Using Client Script for Custom Validation in Blueprint

      Nearing 200th Kaizen Post – 1 More to the Big Two-Oh-Oh! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.

    • Kaizen #226: Using ZRC in Client Script

      Hello everyone! Welcome to another week of Kaizen. In today's post, lets see what is ZRC (Zoho Request Client) and how we can use ZRC methods in Client Script to get inputs from a Salesperson and update the Lead status with a single button click. In this

    • Kaizen #222 - Client Script Support for Notes Related List

      Hello everyone! Welcome to another week of Kaizen. The final Kaizen post of the year 2025 is here! With the new Client Script support for the Notes Related List, you can validate, enrich, and manage notes across modules. In this post, we’ll explore how

    • Kaizen #217 - Actions APIs : Tasks

      Welcome to another week of Kaizen! In last week's post we discussed Email Notifications APIs which act as the link between your Workflow automations and you. We have discussed how Zylker Cloud Services uses Email Notifications API in their custom dashboard.

    • Kaizen #216 - Actions APIs : Email Notifications

      Welcome to another week of Kaizen! For the last three weeks, we have been discussing Zylker's workflows. We successfully updated a dormant workflow, built a new one from the ground up and more. But our work is not finished—these automated processes are

    • Recent Topics

    • Want to use Zoho Books in Switzerland. CHF support planned?

      Hi, We're a Swiss company using other Zoho suite software and I discovered Zoho Books and other accounting SaaS when looking for an accounting tool. Do you intend to cover Switzerland and CHF based accounting anytime soon? Roy

    • Celebrating Connections with Zoho Desk

      September 27 is a special day marking two great occasions: World Tourism Day and Google’s birthday. What do these two events have in common (besides the date)? It's something that Zoho Desk celebrates, too: making connections. The connect through tourism

    • Adding Overlays to Live Stream

      Hello folks, The company I work for will host an online event through Zoho Webinar. I want to add an overlay (an image) at the bottom of the screen with all the sponsors' logos. Is it possible to add an image as an overlay during the live stream? If so,

    • Email Sending Failed - SMTP Error: data not accepted. - WHMCS Not sending emails due to this error

      I have been trying to figure out a fix for about a week now and I haven't found one on my own so I am going to ask for help on here.  After checking all the settings and even resetting my password for the email used for WHMCS it still says: Email Sending Failed - SMTP Error: data not accepted.  I have no clue how to fix it at this point. Any insight would be lovely. 

    • Zoho Flow - Update record in Trackvia

      Hello, I have a Flow that executes correctly but I only want it to execute once when a particular field on a record is updated in TrackVia. I have the trigger filters setup correctly and I want to add an "update record" action at the end of the flow to

    • Add Comprehensive Accessibility Features to Zoho Desk Help Center for End Users

      Hello Zoho Desk Team, We hope you're doing well. We’d like to submit a feature request to enhance the client-facing Help Center in Zoho Desk with comprehensive accessibility features, similar to those already available on the agent interface. 🎯 Current

    • Zoho CRM mobile: Support for rich text in multi-line fields, Image upload field, and more

      Hello everyone, We've made a few enhancements to the Zoho CRM mobile app to improve your experience. Here's what's new: Rich text support for multi-line fields (iOS) Image upload field support (iOS and Android) Tool tip markdown (iOS) Rich text support

    • in zoho creator Sales Returns form has sub form Line Items return quantity when i upate the or enter any values in the sub form that want to reflect in the Sales Order form item deail sub form field Q

      in zoho creator Sales Returns form has sub form Line Items return quantity when i upate the or enter any values in the sub form that want to reflect in the Sales Order form item deail sub form field Quantity Returned\ pls check the recording fetch_salesorder

    • Estimates with options and sub-totals

      Hi It seems it would be great to be able to show multiple options in an estimate. For instance I have a core product to which I can add options, and maybe sub-options... It would be great to have subtotals and isolate the core from the not compulsory items. Thanks

    • Optional Items Estimate

      How do you handle optional items within an estimate? In our case we have only options to choose with. (Like your software pricing, ...standard, professional, enterprise) How can we disable the total price? Working with Qty = 0 is unprofessional....

    • Important Update : Zendesk Sell announced End of Life

      Hello Zendesk users, Zendesk has officially announced that Zendesk Sell will reach its End of Life (EOL) on August 31, 2027 (Learn more). In line with this deprecation, Zoho Analytics will retire its native Zendesk Sell connector effective October 1,

    • Zoho Sheets

      Hi, I am trying to transition into Zoho sheets, I have attached the issues encountered. Server issues, file trying to upload for more than 30 mins, even once uploaded my data aren't loaded. Simple calculations are not working I have attached the sample.

    • Zoho CRM + Zoho FSM : alignez vos équipes commerciales et techniques

      La vente est finalisée, mais le parcours client ne fait que commencer ! Dans les entreprises orientées service, conclure une vente représente seulement la première étape. Ce qui suit — installation, réparation ou maintenance régulière — influence grandement

    • Top Bar Shifting issue still not fixed yet

      I mentioned in a previous ticket that on Android, the top bar shifts up when you view collections or when you're in the settings. That issue still hasn't been fixed yet. I don't wanna have to reinstall the app as I've noticed for some reason, reinstalling

    • Power of Automation:: Automate the process of updating project status based on a specific task status.

      Hello Everyone, Today, I am pleased to showcase the capabilities of a custom function that is available in our Gallery. To explore the custom functions within the Gallery, please follow the steps below. Click Setup in the top right corner > Developer

    • Billing Management: #3 Billing Unbilled Charges Periodically

      We had a smooth sail into Prorated Billing, a practice that ensures fairness when customers join, upgrade, or downgrade a service at any point during the billing cycle. But what happens when a customer requests additional limits or features during the

    • No bank feeds from First National Bank South Africa since 12 September

      I do not know how Zoho Books expects its customers to run a business like this. I have contacted Zoho books numerous times about this and the say it is solved - on email NO ONE ANSWERS THE SOUTH AFRICAN HELP LINE Come on Zoho Books, you cannot expect

    • Citation Problem

      I had an previous ticket (#116148702) on this subject. The basic problem is this; the "Fetch Details" feature works fine on the first attempt but fails on every subsequent attempt, Back in July after having submitted information electronically and was

    • Failing to generate Access and Refresh Token

      Hello.  I have two problems: First one when generating Access and Refresh Token I get this response:  As per the guide here : https://www.zoho.com/books/api/v3/#oauth (using server based application) I'm following all the steps. I have managed to get

    • Auto-Forward All Incoming Mail

      I have setup the Zoho Business Mail to host my own domain's mail.  Is it possible to have all incoming email auto-forwarded to another email account?  What I would like to do is have all incoming emails forwarded to my Yahoo or Hotmail accounts until I can complete the migration to Zoho.  I can't seem to locate this setting anywhere.  I don't care whether the mail is kept on the Zoho server or not at this time.

    • Zeptomail 136.143.188.150 blocked by SpamCop

      Hi - it looks like this IP is being blocked, resulting in hard bounces unfortunately :( "Reason: uncategorized-bounceMessage: 5.7.1 Service unavailable; Client host [136.143.188.150] blocked using bl.spamcop.net; Blocked - see https://www.spamcop.net/bl.shtml?136.143.188.150

    • Apply transaction rules to multiple banks

      Is there any way to make transaction rules for one bank apply to other banks? It seems cumbersome to have to re-enter the same date for every account.

    • How to bulk update records with Data Enrichment by Zia

      Hi, I want to bulk update my records with Data Enrichment by Zia. How can I do this?

    • How do I split a large CSV file into smaller parts for import into Zoho?

      Hi everyone, I’m trying to upload a CSV file into Zoho, but the file is very large (millions of rows), and Zoho keeps giving me errors or takes forever to process. I think the file size is too big for a single import. Manually breaking the CSV into smaller

    • Client Script Payload Size Bug

      var createParams = { "data": [{ "Name": "PS for PR 4050082000024714556", "Price_Request": { "id": "4050082000024714556" }, "Account": { "id": "4050082000021345001" }, "Deal": { "id": "4050082000023972001" }, "Owner": { "id": "4050082000007223004" }, "Approval_Status":

    • lead convert between modules

      Hello, The workflow we set up to automatically transfer leads registered via Zapier into the Patients module to the Leads module started to malfunction unexpectedly on September 25, 2025, at 11:00 AM. Under normal circumstances, all fields filled in the

    • Flow Task Limits - How to Monitor, Understand Consumption?

      So, I got an email last night saying that I've exhausted 70% of my tasks for this month, and encouraging me to buy more tasks. I started to dig into this, and I cannot for the life of me figure out where to find any useful information for understanding,

    • Cross References Do Not Update Correctly

      I am using cross references to reference Figures and current am just using the label and number, i.e. Figure #. As seen here: When I need to update the field, I use the update field button. But it will change the cross reference to no longer only including

    • How to Track and Manage Schedule Changes in Zoho Projects

      Keeping projects on track requires meticulous planning. However, unforeseen circumstances can cause changes to schedules, leading to delays. It becomes important to capture the reason for such changes to avoid them in the future. Zoho Projects acknowledges

    • Collaborate Feature doesn't work

      Hello Team. It seems that the collaborate section is broken? I can post something but it all appears in "Discussions". In there is no way how I would mark something as Draft, Approval, post or any of the other filter categories? Also if I draft a post

    • Edit Permission during and after approval?

      When a record is sent for approval Can a user request for edit permission from the approver? We don't want to give edit permissions for all the records under approval Only on a case-by-case basis How can we achieve this?

    • Zoho web and mobile application not workingn

      Both zoho forms web and mobile application aren't working. I have checked my network connections and they are fine.

    • Bulk Moving Images into Folders in the Library

      I can't seem to select multiple images to move into a folder in order to clean up my image library and organize it. Instead, I have to move each individual image into the folder and sometimes it takes MULTIPLE tries to get it to go in there. Am I missing

    • Latest updates in Zoho Meeting | Breakout rooms and End to end encryption

      Hello everyone, We’re excited to share a few updates for Zoho Meeting. Here's what we've been working on lately: Introducing Breakout Rooms for enhanced collaboration in your online meetings and End-to-end encryption to ensure that the data is encrypted

    • Accidentally deleted a meeting recording -- can it be recovered?

      Hi, I accidentally deleted the recording for a meeting I had today. Is there a way I can recover it?

    • How to access email templates using Desk API?

      Trying to send an email to the customer associated to the ticket for an after hours notification and can't find the API endpoint to grab the email template. Found an example stating it should be: "https://desk.zoho.com/api/v1/emailtemplates/" + templateID;

    • Update Portal User Name using Deluge?

      Hey everyone. I have a basic intake form that gathers some general information. Our team then has a consultation with the person. If the person wants to move forward, the team pushes a CRM button that adds the user to a creator portal. That process is

    • Unable to retrieve Contact_Name field contents using Web API in javascript function

      Hello, I've added a field in the Purchase Order form to select and associate a Sales Order (Orden_de_venta, lookup field). I've also created a client script to complete some fields from the Sales Order (and the Quote), when the user specifies the related

    • Updating Woocommerce Variation Products Prices Via Zoho CRM

      I can update product prices with this flow: But I can't update variant products. I got a code from Zoho for this, but I couldn't get it to work. It needs to find the product in the CRM from the SKU field and update the variation with the price there.

    • Emails Disappearing From Inbox

      I am experiencing the unnerving problem of having some of the messages in my inbox just disappear.  It seems to happen to messages that have been in there for longer than a certain amount of time (not sure how long exactly). They are usually messages that I have flagged and know I need to act on, but have not gotten around to doing so yet.  I leave them in my inbox so I will see them and be reminded that I still need to do something about them, but at least twice now I have opened my inbox and found

    • Next Page