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 #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

      • 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

        • Recent Topics

        • Unable to Access Application:

          Whenever I try to access my application from the desktop, say I am editing it and want to test something in the desktop environment I get: An error has occurred. An internal error has occurred. Please check the URL , or try refreshing the page I can edit

        • Cannot see Application from Lookup field

          Hi all, I am trying to access data for an application on our account via a lookup field; however, the application doesn't appear in the dropdown at all. Can anyone shed any light on this, please? I have asked Zoho support; however, they're just as confused,

        • Cannot see correct DNS config for mail after moving domain to another provider

          I have moved my domain from one provider to another and after that zoho mail stopped working (expected). Problem is, zoho mail admin panel still shows (10 hours after move) that all records are correct while I haven't changed anything in my domain DNS

        • Zoho CRM Meetings Module Issues

          We have a use-case that is very common in today's world, but won't work in Zoho CRM. We have an SDR (Sales Development Rep) who makes many calls per day to Leads and Contacts, and schedules meetings for our primary Sales Reps. He does this by logging

        • Zoho Books integration sync from Zoho CRM does not work

          Hi Zoho Community & Zoho Support We just tried to get a sync some products into Zoho Books from CRM using the native sync and we're getting an error: "It looks like some mandatory fields you're trying to map are empty. Please provide valid field names

        • P & L Sub-categorized accounts

          How can I show sub-categorized Income and Expense accounts on the P & L report?

        • Report showing Bill Details with Project and Sales Invoice Number

          Hi There, I am hoping that someone can help, I am looking for report that can show the bill and expense details along with project its as assigned to and the invoice number that the sales has been raised in. The goal is I can filter a customer/project

        • Advanced Payment for Inventory Items with serial numbers

          Hello, We sell equipment that we track the unique serial numbers on using Sales Orders. We can charge the customers an advanced payment, then the balance on delivery. We cannot figure out a way to do this in Books/Inventory: - Cannot part invoice a SO

        • Is it possible to restrict ZCRM user to see only custom views created by administrator

          I have segmented data in my CRM and I want to allow different users to be able to see only parts of it based on some criteria. I've tried to create and share a custom view, but then there is always an option for user to see all open lead for example.

        • Issues Logging into ZOHO

          Hello, one of my coworkers is having issues logging into ZOHO, she has requested a code when entering and the email is correct but she has not received the code. can you help us with this?

        • Google Fonts Integration in Pagesense Popup Editor

          Hello Zoho Pagesense Team, We hope you're doing well. We’d like to submit a feature request to enhance Zoho Pagesense’s popup editor with Google Fonts support. Current Limitation: Currently, Pagesense offers a limited set of default fonts. Google Fonts

        • Add Popup Rejection Metrics to Reports

          Hello Zoho PageSense Team, We would like to request improved reporting for popup interactions. Current Limitation: PageSense currently provides conversion data, but there is no clear visibility into: Popup rejections Popup closes (✕ button clicks) Dismissals

        • Ability to Reset / Reinitialize Popup Cookies

          Hello Zoho PageSense Team, We would like to request the ability to manually reset popup cookies. Current Limitation: At the moment, it is not possible to initiate a new popup cookie from the our side. Visitors who rejected or closed a popup will not see

        • Control Popup Cookie Expiration Duration

          Hello Zoho PageSense Team, We would like to request an enhancement related to popup cookie management. Current Limitation: Currently, PageSense popup cookies remain active for 365 days, and this duration cannot be modified by us. If a visitor closes or

        • Clone / Export Popup Design Across PageSense Projects

          Hello Zoho PageSense Team, We hope you’re doing well. We would like to request an enhancement that allows popup designs to be reused across different PageSense projects. Problem Statement: Currently, Zoho PageSense allows popups to be duplicated only

        • Are there settings for hyperlinks?

          Clicking a hyperlinked cell in Sheet creates this little pop-up with the actual hyperlink inside. Is it possible to have a 1-click link where if you click the cell it opens the link directly with no pop-up?

        • Automatically include all ticket attachments in the ticket resolution email

          Hello Zoho Community, We are implementing Zoho Desk in a real customer-facing production environment and have run into a limitation that is becoming a blocking requirement for our clients. The problem When a ticket is closed or resolved, Zoho Desk sends

        • Finding text within a ticket: Expand All or Search this Ticket

          The auto-collapse feature within a ticket is nice for screen scrolling, however it makes it difficult to find text within the ticket if the email is collapsed. In fact you cannot find text if it is collapsed. I would like to propose a feature that allows

        • Books & Desk. Client mapping

          Hi, I’ve been using Zoho Books for several years and am now looking to improve my customer service. I'm experimenting with Zoho Desk and want to sync and map my client data from Zoho Books. However, it seems that mapping requires both contacts to have

        • String handling

          If I cut a currency string from a quote and try and paste it into the Deal "Amount", it will fail unless I manually delete any commas. Dollar signs are no problem, but comma's seem to fail. Please correct this Input Validation error.

        • Feature Request - Allow Customers To Pick Meeting Duration

          Hi Bookings Team, It would be great if there was an option to allow customers to pick a duration based on a max and minimum amount of time defined by me and in increments defined by me. For example, I have some slots which are available for customers

        • YouTube Live streaming? how to? Zoom has this feature, built-in. Can't find it on zoho meetings.

          YouTube Live streaming? how to? Zoom has this feature, built-in. Can't find it on zoho meetings.

        • Feature Request - A Way To Search Item Groups

          Hi Inventory Team, I can't find any way to filter or search by fields of Item Groups. It would be great to see that functionality added. I have a use case where a single product might come from 5 or more suppliers and each supplier's item is an Item in

        • Feature Reqeust - Include MPN In Selectable FIelds

          I have noticed that the MPN is not available to show in the list view of Items. Please consider adding it as EAN, UPC and ISBN are all available, so it doesn't make much sense to exclude this similar option. Thanks for considering my feedback.

        • Feature Request - Option To Hide Default System Fields on Items

          Hi Zoho Inventory Team, As far as I know it is not possible to hid some of the defult system fields on Items, such as UPC, MPN, EAN, ISBN. A good use case is that in many cases ISBN is not relevant and it would be an improved user experience if we could

        • Making an email campaign into a Template

          I used a Zoho Campaign Template to create an email. Now I want to use this email and make it a new template, but this seems to be not possible. Am I missing something?

        • Campaigns does not work!

          I am running into so many problems trying to use Zoho Campaigns, that I am seriously considering dropping the app from my (shrinking) list of Zoho applications I actually use. Apart from having to fight the software trying to create a design and email,

        • Feature Request - Make Available "Alias Name" Field In Item List View

          Hi Zoho Inventory Team, I have noticed that the "Alias Name" field does not appear on the list of selectable columns in the Customise Columns feature in the Items module. This would be very useful to see for businesses who are using the Alias Name field

        • Cliq iOS can't see shared screen

          Hello, I had this morning a video call with a colleague. She is using Cliq Desktop MacOS and wanted to share her screen with me. I'm on iPad. I noticed, while she shared her screen, I could only see her video, but not the shared screen... Does Cliq iOS is able to display shared screen, or is it somewhere else to be found ? Regards

        • project name field issue- n8n

          Hey guys, I have a question. I want to create a new product using the workflow. The problem is with the product name field; I don't know how to fill it in. The workflow starts with retrieving information from the leads table, retrieving links to scrape

        • How to filter Packages in zoho inventory api

          Hi Team, I want to perform some tasks in a schedular on the packages which are in "Shipped" state. I tried to use filter_by in my api call but in return I get response as {"code":-1,"message":"Given filter is not configured"} My Api request is as follows

        • CRM

          Is anyone else experiencing this issue? Our company is not moving out of using Gmail's web app. It just has more features and is a better email program than Zoho Mail. Gmail has an extension (Zoho CRM for Gmail) that we're using but we've found some serious

        • Syncing with Google calendar, Tasks and Events

          Is it possible to sync Zoho CRM calendar, task and events with Google Calendar's tasks and events. With the increasing adoption by many major tool suppliers to sync seamlessly with Google's offerings (for instance I use the excellent Any.do task planning

        • How can i view "Child" Accounts?

          It can be very useful in our field of business to know the parent-child account relationship. However, there seems to be a shortcoming in the parent account view: no child account list. How can we view the child accounts per each account?

        • Ability to assign Invoice Ownership through Deluge in FSM

          Hi, As part of our process, when a service appointment is completed, we automated the creation of the invoice based on a specific business logic using Deluge. When we do that, the "Owner" of the invoice in Zoho FSM is defaulted to the SuperAdmin. This

        • Easily perform calculations using dates with the new DATEDIF function

          Hey Zoho Writer users! We've enhanced Zoho Writer's formula capabilities with the new DATEDIF function. This allows you to calculate the difference between dates in days, months, and years. Function syntax: =DATEDIF(start_date, end_date, unit) Inputs:

        • Adding Comments Using Workflows - How to Change User Attributed

          We have worklflows in Desk where a comment is added to a ticket based on certain criteria. It seems that the comment added is always attributed to the user who last edited the workflow. This does not make sense for us because: - It's misleading to other

        • Add Attachment Support to Zoho Flow Mailhook / Email Trigger Module

          Dear Zoho Support Team, We hope you are well. We would like to kindly request a feature enhancement for the Mailhook module in Zoho Flow. Currently, the email trigger in Zoho Flow provides access to the message body, subject, from address, and to address,

        • Conect chat of salesiq with zoho cliq

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

        • Les dernières avancées en saisie de données et collaboration

          Après une année dédiée à la recherche et au développement, notre équipe est prête à dévoiler des améliorations majeures pour Zoho Sheet. Ces nouveautés seront lancées par étapes afin d’en assurer une prise en main optimale. Nous commençons avec des fonctionnalités

        • Next Page