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

    • Dependent / Dynamic DropDown in ZohoSheets

      Has anyone figured out a way to create a Dropdown, the values of which is dependent on Values entered in the other cell ?

    • How do I change the order of fields in the new Task screen?

      I have gone into the Task module layout, and moving the fields around does not seem to move them in the Create Task screen. Screenshot below. I have a field (Description) that we want to use frequently, but it is inconveniently placed within the More

    • Zoho → ShipStation Integration – Sales Order–Driven Fulfilment Workflow

      Hello All, I’m reaching out to explore the best way to integrate a shipping tool into our inventory which will speed our process up. We are looking to integrate ShipStation into our existing order-to-fulfilment workflow, as we’re keen to standardise on

    • IA ou je peux trouver comment utiliser IA

      Je voudrais utiliser IA dans l'interface zoho pour m'aider quand j'ai des questions de rôle partage ou autre configuration d'automatisation, j'utiliser ChatGPT externe mais il ne connait pas toujours l'interface zoho et les réponses sont parfois longue

    • Data Processing Basis

      Hi, Is there a way to automate the data processing for a candidate every time an application arrives from job boards, without requiring manual intervention? That is, to automatically acquire consent for data processing. I've seen a workflow that allows

    • Disable Zoho Inventory Tracking / Delink Zoho Books & Inventory

      We have integrated zoho inventory with zoho books? Now after a long time, we want to disable inventory tracking and delink these 2 modules. Zoho says we cant do it. Anybody else going thru the same ? Any possibility at all? Why does zoho not allow to

    • Zoho vault instal on windows

      I am trying to use Zoho Vault Desktop for Windows, but I am unable to complete the sign-in process. Problem description After logging in to my Zoho account and clicking Accept on the authorization page, nothing happens. The application does not proceed

    • ZOHO GLITCHES

      Ok, you guys have done a great job at building a platform that has the potential to surmount the competition but these glitches are becoming more than frustrating! This is beyond annoying, I'm trying draft lawsuits and type up privacy and refund policies

    • Notification to customers when I use a Zoho function

      Hi all, I tried searching the community but couldn't find anything about it. I noticed that the customer receives the notification of reopening the old ticket but does not receive the notification of opening a new ticket when I use the function: "separate

    • Date Filters in Zoho Desk Dashboard

      Hello Team, Currently, in the Zoho Desk dashboard, the date filter is available only for daily, weekly, and monthly views. Could we also add a yearly date filter to allow filtering by an entire year? Additionally, in the custom date filter, it is currently

    • Mobile app - offline

      If I made a couple of forms and my field guys had the mobile app and were somewhere without signal, could they open the app, complete and sumbit a form and have it upload when they are back in signal (we need different info at different jobs and I'm trying

    • Zoho Survey reminder settings are extremely confusing

      Hi, I just want to set 3 reminders, one week apart from the first email out. Your form is too confusing and I don't understand. Can you simplify and be more specific regarding the language used on the form ?

    • Zobot drop down list

      Hi, I am trying to create a drop down list in Zobot by creating a plug. I think I am close but I just can't get it over the line and was hoping that someone could help me. I had a little bit of help getting the script started (hence the comments) // Deluge

    • How to compare a subform lookup field that allows multiple entries when edited

      I have a form with a subform with multiple fields. One of the fields is a lookup field that allows a multi select. On edit validation, I want a workflow to execute only when the entries in that subform field has changed. The old. function is not working

    • Translation of Tooltip Messages

      The descriptive help messages should be available to provide translations for.

    • Business Day Logic Update: More Accurate Scheduling for Your Workflows

      Hello everyone, We’re improving how business-day calculations work in workflows, especially when triggers happen on weekends. This update ensures that offsets like +0, +1, and +2 business days behave exactly as intended, giving you clearer and more predictable

    • Lead Blueprint transition in custom list view

      Hi, Is It possible to insert the Blueprint transition label in a custom Canvas list view? I am using Lead module. I see the status, but it would be great if our users could execute the Blueprint right from the list view without having to enter the detailed

    • Email Notifications not pushing through

      Hi, Notifications from CRM are not reaching my users as they trigger.  We have several workflow triggers set up that send emails to staff as well as the notifications users get when a task is created for them or a user is tagged in the notes.  For the past 6 days these haven't been coming through in real time, instead users are receiving 30-40 notifications in one push several hours later.  This is beginning to impact our daily usage of CRM and is having a negative effect on our productivity because

    • Debit opening balances of vendors

      Dear colleagues: I am looking at the trial balance as on 31st March 2024, and punching opening balances (1st April 2024) in Zoho Books. Vendors have credit balances, by its nature, but some of our vendors have debit balances as well (e.g., we have paid

    • Is there an equivalent to the radius search in RECRUIT available in the CRM

      We have a need to find all Leads and/or Contacts within a given radius of a given location (most likely postcode) but also possibly an address. I was wondering whether anyone has found a way to achieve this in the CRM much as the radius search in RECRUIT

    • Allow Text within a Formula

      Hi, I would like to be able to use this for others things like taking an existing Date Field and copying its value, so by entering getDay(Date)&"-"&getMonth(Date)&"-"&getYear(Date) it results in 01-02-2026. And then when the Date is changed so is this

    • Change Number Field to Decimal Field

      Hi, It would be nice to be able to change the field type without having to delete it and create a new one, messing up the database and history. Thanks Dan

    • Pipeline.Company Name field shows up as numbers! [Bigin Developer Console > Component > URL]

      Hi there, I am setting up to invoke URL to send infromation zoho bigin > zoho forms with company name pre-fill in the form. however when I use : ${Pipelines.Company Name} field it shows up as a string of number instead of words. Help.

    • Add specific field value to URL

      Hi Everyone. I have the following code which is set to run from a subform when the user selects a value from a lookup field "Plant_Key" the URL opens a report but i want the report to be filtered on the matching field/value. so in the report there is

    • How to Move Behavior, Acquisition, Polls & Forms Data from Zoho PageSense to Zoho Analytics?

      Hi Zoho Community, I'm looking for a way to transfer data from Zoho PageSense to Zoho Analytics, specifically: Behavioral data (clicks, scrolls, heatmaps, etc.) Acquisition data (traffic sources, campaigns, etc.) Polls and forms data As far as I can tell:

    • Zoho Social - Feature Request - Non-US Date Format

      Hi Social Team, I have noticed that there is no option to change the date format from US mm/dd/yyyy to others like dd/mm/yyyy. It would be great to see this added as the platform matures. Thanks for considering this feedback.

    • 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 CRM Community Digest - December 2025 | Part 1

      Hello Everyone! In the first half of December, Zoho CRM rolled out auto-invite for portals, smarter CPQ with Zia suggestions and price rules, and Query Workbench for faster query building. We also highlight other noteworthy conversations you shouldn’t

    • Marketing Tip #15: Rank better with keyword-rich URLs for product pages

      Your product page URL is a small detail that can make a surprisingly big difference. Clean, readable URLs help in two ways: They’re easier for customers to trust and remember (no one likes clicking a link that looks messy or random). They help search

    • Zoho Flow Credits

      Hi , I would like to ask the reason why every time I added plus credit but few days later I will return back to default? (as below I add credit to 3000 but today It change back to 1000) Most important is, when the credit fully used, not any reminder to

    • Custom Module Send Email not filling To automatically after adding Email field also

      I create custom module in zohoCRM but problem is in custom module when i click send email there in popup To is filling automatic its coming empty which i need to manually add an email there. How can I fix it? I already added the Email field there, but

    • Introducing Intake Forms

      We are excited to announce the release of Intake Forms, a new feature in Zoho Contracts designed to make contract requests simple, structured, and efficient. Intake Forms allow organization members to request new contracts through a web form instead of

    • Manage control over Microsoft Office 365 integrations with profile-based sync permissions

      Greetings all, Previously, all users in Zoho CRM had access to enable Microsoft integrations (Calendar, Contacts, and Tasks) in their accounts, regardless of their profile type. Users with administrator profiles can now manage profile-based permissions

    • eIDAS 2.0: What's changed for digital trust in Europe, and where Zoho Sign stands

      Hi there! It's that time of year when many of us get our ducks in a row. A new year often makes us reassess priorities, and for businesses in the EU, it means taking a closer look at how digital identities and electronic signatures work across borders,

    • Directly Edit, Filter, and Sort Subforms on the Details Page

      Hello everyone, As you know, subforms allow you to associate multiple line items with a single record, greatly enhancing your data organization. For example, a sales order subform neatly lists all products, their quantities, amounts, and other relevant

    • Add Israel & Jewish Holidays to Zoho People Holidays Gallery

      Greetings, We hope you are doing well. This feature request is related to Zoho People - please don't move it to zoho one! We are writing to request an enhancement to the Holidays Gallery in Zoho People. Currently, there are several holidays available,

    • Any update on much requested feature, to delete attachments without deleting the e-mail body?

      People have been requesting the ability to delete e-mail attachments without deleting the e-mail for more than ten years now. The latest I see is marked "Working On It" and a year ago it was supposedly being added, see here: https://help.zoho.com/portal/en/community/topic/is-there-a-way-to-delete-mail-attachments-without-deleting-the-text

    • How to delete attachments form Zoho mail accounts

      I can't find a way to delete attachments from Zoho mail messages, either individually or in bulk. Searches here are providing conflicting results and often talk about workspace, whereas I am only interested in how to delete attachments that are seen with

    • Unable to fetch ticket by custom field value

      I'm trying to set up a Flow to fetch a ticket based on a custom field value. This seems like it should be pretty straightforward, but it's not working for me. I keep getting an error saying Zoho Desk says "Extra query parameter 'cf_creator_record_id'

    • Zoho Inventory - Composite Items - Assembly - Single Line Item Quantity of One

      Hi Zoho Inventory Team, Please consider relaxing the system rules which prevent an assembly items from consisting of a single line item and outputting a quantity of 1. A client I'm currently working with sells cosmetics and offers testers of their products

    • Next Page