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

    • Webhook - Google Sheets

      I have 2 forms that are both integrated with Google Sheets. I've set up a webhook to pull form 1 data from Google Sheets to prefill data in Form 2. The issue I have is that the forms name fields are First Name & Last Name but the Google sheets integration

    • Bigin Android app update: Zoho Books integration

      Hello everyone! We’re excited to introduce Zoho Books integration on the Bigin Android App. Once the integration is completed in the web(bigin.zoho.com), the Zoho Books tab will be visible in detail View of Contacts, Companies, and Pipeline records. The

    • Bigin Android app update: Alerts while creating tasks outside of working days, conflicting events and calls.

      Hello everyone! In the most recent version of the Bigin Android app, we have brought in support to display an alert if task is being scheduled outside of the working days. Also, when scheduling an event or call in the Activities module, a conflict alert

    • Email in each module

      We have a contact ,module which then has a link to customer assets which in turn the asset has a multiple link to service visits. When we link assets to customers we choose by name and it brings over the associate email via the lookup. Great feature.

    • Bigin update: Link email messages to pipeline records.

      Hello everyone! In the latest version of the Bigin iOS(v1.11.9) and macOS(1.8.9) app, we have brought in support for an option to link email to pipeline records. This helps you to view emails specific to a deal, especially when a contact is associated

    • Bigin Android app update: Custom buttons and widgets

      Hello everyone! We are excited to introduce custom buttons and widgets on the Bigin Android app. Widgets: A widget is a customizable UI component in Bigin that improves efficiency and user experience. It lets businesses embed components, streamline interactions,

    • Biometric Access Support on Zoho Vault Desktop App

      Is there any plans to add biometric authentication (fingerprint, face recognition) for Vault desktop apps (Windows/macOS) to enhance security and ease of access. I would love to hear other members view on this

    • Importation Tickets error

      Hi, I'm newbie here 🤓 So, i'm importing data from csv, but when I try advance to mapping fields the importer tool show this message: Previously I try import, other data, and not show errors in this step. Some ideas? Best Regards,

    • Zoho Sheet for Desktop

      Does Zoho plans to develop a Desktop version of Sheet that installs on the computer like was done with Writer?

    • Create Assemblies API Assistance

      I am using the Create Assemblies API documented here https://www.zoho.com/inventory/api/v1/compositeitems/#create-assemblies , however I'm getting the following error. {"code":1048,"message":"Sorry, there was an internal error. Please contact {0} for

    • Zoho Sheet - Desktop App or Offline

      Since Zoho Docs is now available as a desktop app and offline, when is a realistic ETA for Sheet to have the same functionality?I am surprised this was not laucned at the same time as Docs.

    • Collective-booking event not added to all staff calendars

      We assign two staff to certain events. When the client books this event, it adds it to one staff calendar (the 'organiser') but not the other. How can I ensure all staff assigned to a collective booking get the event in their calendar? (A side note: it

    • Project Management Bulletin: October, 2025

      Every need leads to innovation. Project Management tools were developed out of sheer necessity to drive large projects. With wide usage, the specifications grew precise, and so did the refinement. Over years we’ve crafted one of the best project management

    • Email Recall Feature In Zoho Mail Which Should Also Work For Outside Organisation Members

      Add a feature to recall or undo sending an email within a configurable short time window (e.g., 30 seconds to 2 minutes) after hitting send, similar to Gmail’s undo send. Currently the sent email can not be recall If the recipient is not from within your

    • Zoho Sheets saying locked when not locked

      Zoho Sheets won't let me add more rows to sheet because it's saying the sheet is locked, but the sheet is not locked. I tried using a different browser but I still have the same issue.

    • Identifying and Merging Accounts with Similar (Non-Exact) Names

      Hello everyone, I’m aware of the built-in deduplication feature in Zoho CRM that allows merging records with exactly matching values for selected fields. However, I’m running into a situation where our migrated data contains multiple variations of the

    • Option for super admin to recover the deleted chats in Zoho Cliq

      Currently, in Zoho Cliq, if a user accidentally deletes their chats, there is no option for the Super Admin to recover or view those deleted messages. I believe it would be helpful if Super Admins had a recovery option, perhaps within a certain time frame,

    • Zoho CRM iOS app updates: the Homepage, Zoho Survey integration, and support for multiple file uploads in subform

      Hello everyone! The Zoho CRM mobile app continues to evolve to bring you a smoother and more powerful CRM-on-the-go experience. We're excited to share some important updates now available in the iOS app. Here's what's new: Homepage support Zoho Survey

    • I am trying to integrate my module in sandbox environment to add data via API

      I went through the documents and tried to setup the API for adding the module via the api but the problem is the token setup is done on "https://accounts.zoho.in/oauth/v2/token" domain and the bulk write is done on "https://content.zohoapis.com/crm/v8/upload"

    • Open "Live Chat" from a hyperlink?

      Hi, I often write paragraphs and text on our company website, and usually say you can get in touch with us via live chat. Can the chat window be triggered to pop open without clicking the chat graphic in the bottom window, and use it in a hyperlink? ie:

    • Is anyone else having trouble saving a custom image in their email signature, or is it just me?

      When I try to save the image I get an error that says "Operation Failed" I opened a support ticket two weeks ago and received a response that it would be debugged, but it still isn’t working

    • Setting up primary mobile number.

      Hi Sir Earlier I joined IIFL team and got an organizational email of zoho services. Later i quit and now my account is deactivated with IIFL but i am unable to link my mobile number to my own email id with zoho.

    • Add Custom Reports To Dashboard or Home Tab

      Hi there, I think it would be great to be able to add our custom reports to the Home Tab or Dashboards. Thanks! Chad

    • Account in Quick View Filter

      I have a report that I often run against a specific Account. Every time, I have to go into the edit menu and change the Advanced Filter. I would prefer to use the Quick View Filter, but it does not allow me to use the one and only field that makes any

    • In arattai received message can't be deleted

      The issue has been noticed in following: arattai app (Android) arattai app (Window) arattai web While the message posted by me may be deleted, the ones received from others can't be. The item <Delete> change to <Report> when the message is a received

    • Zoho sheet for desktop

      Hi is zoho sheets available for desktop version for windows

    • Zoho Analytics - Make text clickable in underlying data

      Hi Community, I have a simple sales report based on a Invoice query table. I have included a link on to each invoice on the table and sent the Invoice number URL to the link. This works find in the query table, but when I click underlying data on the

    • Tables for Europe Datacenter customers?

      It's been over a year now for the launch of Zoho Tables - and still not available für EU DC customers. When will it be available?

    • Guided Conversations - Ticket Creation

      Hi there, Using Guided Conversations to Take Customer Data and apply it into a Support Ticket for internal use, Is there a way to take multiple Textual Variables Inputs (A series of questions), and have the answers all appear in the Description of the

    • How to send certain invoices for Approval based on condition?

      To streamline operations, I need the invoices to go for approval when certain conditions are met. For example, if my staff gives a discount of x amount, it must go for approval. If there is no discount, then the invoice will be approved automatically.

    • Unable to continue payment

      Hi, I want to make a payment for my email subscription, but I cannot proceed with the payment because my NITKU is invalid. In Indonesia, the NITKU consists of 22 digits, but Zoho only provides 20 digits, causing my NITKU to be invalid. Please help me

    • Is there a way to show contact emails in the Account?

      I know I can see the emails I have sent and received on a Contact detail view, but I want to be able to see all the emails that have been sent and received between all an Accounts Contacts on the Account Detail view. That way when I see the Account detail

    • Massive spam pretending to come from our address – is this a Zoho security issue?

      Hi, We’ve been receiving more and more suspicious emails lately — many of them clearly look like scams. But yesterday, we got an email that appeared to be sent from our own address, which was very concerning. We're starting to wonder if this might be

    • System flaws and lack of response from Zoho

      I have had to go on here as no-one is replying to my emails regarding my problem (been 10 days and no email reply) and your chat facility online through your Zoho Books software opens and closes immediately, so not functioning properly. I actually called

    • Cant recieve mails

      I’m having an issue with my external IMAP account not fetching any emails into Zoho Mail, even though the connection test says “Success”. I can send, if someone sends an email to me. my original directory (home.pl host) recieves it in their portal but

    • Zoho Sheet Autofit Data

      While using Autofit Data function in Zoho Sheets with Devnagri Maratji or Hindi Fonts, a word or a number, it keeps couple of characters outside the right side border.

    • Enhancements to finance suite integrations

      Update: Based on your feedback, we’ve updated the capabilities for integration users. In addition to the Estimates module, they can now create, view, and edit records in all the finance modules including Sales Order, Invoices, Purchase Order. We're also

    • Edit 'my' Notes only

      The permissions around Notes should be more granular, and allow to user to be able to edit the notes he created only. The edit Notes permission is useful as it allows the user to correct any mistakes or add information as needed. However, with this same

    • How do I filter contacts by account parameters?

      Need to filter a contact view according to account parameter, eg account type. Without this filter users are overwhelmed with irrelevant contacts. Workaround is to create a custom 'Contact Type' field but this unbearable duplicity as the information already

    • Job Alerts for Candidates

      hi All, I have 2 questions relating to sharing job details with candidates. 1. is there a way to notify candidates that meet certain criteria of current jobs available? eg. I run a candidate search, and identify 50 candidates that might be suitable. Can

    • Next Page