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

    • Unable to switch existing AWS RDS connection to DataBridge after moving RDS behind VPN

      Hi everyone, I’m facing a problem with an existing Zoho Analytics setup and would like to know the best migration path. Originally, my Zoho Analytics connection to AWS MySQL RDS was configured using direct public access to the RDS endpoint. Everything

    • Hotmail

      I am sending an email to a hotmail, and this guy does not receive the email, either in his SPAM nor inbox. Can you help me? thanks!

    • No Ability to Rename Record Template PDFs in SendMail Task

      As highlighted previously in this post, we still have to deal with the limitation of not being able to rename a record template when sent as a PDF using the SendMail Task. This creates unnecessary complexity for what should be a simple operation, and

    • how do i add more than one google my business location?

      they are connected to one account, but while connecting social channels it makes me pick one location. I have 3 and growing.

    • Updating Sales orders on hold

      Surely updating irrelevant fields such as shipping date should be allowed when sales orders are awaiting back orders? Maybe the PO is going to be late arriving so we have to change the shipment date of the Sales order ! Not even allowed through the api - {"code":36014,"message":"Sales orders that have been shipped or on hold cannot be updated."}

    • Need to make a specific canvas my default view for contacts

      Need to make a specific canvas my default view for contacts How do I do it?

    • How do I change the Subject header when I reply please, it contains Re which I want to remove.

      Hi Zohodesk, When a customer logs a call we have amended the Acknowledge on new Ticket template so the subject header has "Ticket Id" at the start of it.  When we reply the customer gets Re: and then the Id and I can't see a template for this? Can you

    • Zia Agent built in ChatKit UI does not render markdown

      Hi, You have a major shortcoming in the Zia Agent UI. The test UI that is embedded in agents.zoho.com allows you to test the agent has full support for rendering markdown, but your ChatKit UI does not have support for rendering markdown. If I embed it

    • Pasting Images in Zoho Desk ignores cursor location

      My team has reported an issue which started recently where when we paste an image into a new or existing reply or comment, the pasted image seems to ignore the current cursor location instead paste itself at the last character present in the reply/comment,

    • Automated entries past the current month in a calendar report

      Hi all, I have an automation problem. I have a form which on successfull entry adds either 5 or 10 more of these entries with a slight change so our customers can see it throug a calendar report on the webiste. The entry put in manually shows up perfectly

    • [Bug] WebAuthn passkey registration blocked on rpIds with TLDs longer than 6 characters (.accountant, .technology, etc.) — isValidDomain regex too strict

      Hi, Filing on behalf of an enterprise customer where Zoho Vault is deployed across the company. The Chrome extension blocks WebAuthn passkey registration on legitimate sites whose Relying Party ID (rpId) has a TLD longer than 6 letters. This affects every

    • Get Files Associated to Data Template via API

      I have a data template with multiple files associated to it, and trying to write a Deluge script that will fetch files associated with this data template. I created the script below based on the WorkDrive API documentation, one request uses the data templates

    • ZOHO CRM User management or role

      I need guidance regarding Zoho CRM licensing and user management. I want to purchase one Zoho CRM license and create multiple team users under the same account with the following hierarchy: Super Admin User Manager User Executive Users (with limited access)

    • Tip #72 - Exploring Technician Console: Setup Unattended Access - 'Insider Insights'

      Hello Zoho Assist Community! You joined a live session, diagnosed the issue, and got the user back on track. Fix delivered, user happy, session closed. But you know this machine. It needs a follow-up. A cleanup, a patch, maybe a deeper maintenance run.

    • #1 New to Zoho Invoice? Do this First!

      "Zoho Invoice has made our company's tax invoices look more elegant and professional. It is effortless to raise an invoice and track payments with it", says Arunkumar Balakrishnan, Director GA Technologies. Generating professional invoices usually begins

    • Mastering Zia Match Scores | Let's Talk Recruit

      Feeling overwhelmed by hundreds of resumes for every job? You’re not alone! Welcome back to Let’s Talk Recruit, where we break down Zoho Recruit’s features and hiring best practices into simple, actionable insights for recruiters. Imagine having an assistant

    • Automation Series #5: Supervisor Rule vs Schedule in Zoho Desk

      Supervisor Rules vs Schedules: Choosing the right time-based automation This post is part of the "Desk Automation Series," Chapter 1. Through this series, we will help you choose the right automation type in Zoho Desk by comparing commonly confused automations

    • Error when changing user permission from read only to user.

      Hi there, Ive tried to change one of my users to be able to edit, however i kept getting the error user license exceed.

    • Add Zia matching jobs on the main screen of candidates module

      It will be good if it is added in the main screen as a column so that we can quickly hover over and see if they match for any job openings. That will save from two additional clicks

    • Insert Template not inserting

      I have been using the "Insert Template" feature for years and I use it every single working day. Yesterday it was working fine. Today, on two different browsers (Chrome and Edge), I can select "Insert Template", select the template I want to insert, but

    • Need Help Preventing Overselling in Zoho Inventory

      Hi fellow Zoho Inventory users, I'm reaching out for advice on managing inventory control in our growing business. We've recently encountered situations where sales orders get confirmed despite insufficient stock, creating operational challenges. Our

    • Conditional Layouts On Multi Select Field

      How we can use Conditional Layouts On Multi Select Field field? Please help.

    • Smart Feature Compatibility Indicators for CRM Field

      Zoho CRM offers a wide range of field types and advanced customization options. However, several field types have feature-specific limitations that are currently documented only in help articles. For example, while configuring a Rich Text field, admins

    • Deactivate Zoho CRM for everyone

      We would like to deactivate Zoho CRM for everyone. How can we do that?

    • Best sales insights for target accounts?

      Question for all the sales power-users out there: I would like to gain insights from Zoho CRM for a rotating list of target accounts. Each Outside Salesperson has 5 target accounts, and they can change these targets quarterly with management approval.

    • Building extensions #2: Publishing and sharing Zoho Sprints extensions using Sigma Cloud Editor

      Welcome to a new post on Zoho Sprints extension development! In our last post, we explored how to create, test, and edit an extension for Zoho Sprints. In this post, we'll take a look at how to publish and share an extension. Publishing and sharing extensions

    • Set Custom Icon for Custom Modules in new Zoho CRM UI

    • Custom return paths

      How do I delete a custom return path subdomain created in error?

    • How do you paginate in schedule function

      How does someone paginate in schedule function in deluge is there an ideal way to do this apart from hardcoding max pages

    • Mail bounces due to bad reputation

      Good evening. I'm seeing these errors from both hotmail/outlook and yahoo, as well as hard bounce from Virgin Media and talktalk for some time now. Bounce category: Connection issues Reason: uncategorized-bounce Message: 4.7.650 The mail server [136.143.188.237]

    • What is a realistic turnaround time for account review for ZeptoMail?

      On signing up it said 2-3 business days. I am on business-day 6 and have had zero contact of any kind. No follow-up questions, no approval or decline. Attempts to "leave a message" or use the "Contact Us" form have just vanished without a trace. It still

    • Calendar in Global View

      When you are working with multiple projects, staying on track with all project activities requires a centralized view of all your project activities. Especially in a work environment, users tend to miss out on their day-to-day activities when it doesn't

    • My email sending has beed blocked due to high bounce rate. NEED HELP

      User ID: 886739811 Dear Zoho Team, I hope this message finds you well. My account (User ID: 886739811) was blocked from sending emails last week due to an unusually high bounce rate. This spike was caused by a bot attack on our platform, which led to

    • 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

    • What is the difference between workflows, journeys, and blueprints?

      I semi-understand what they are individually but they all say they can be used to automate processes in your CRM. What makes these three different? What are the benefits and cons of using each?

    • How to Migrate from MDaemon to Zoho Mail Account?

      Hi there, Zoho Mail is one of the most popular as well as leading competitor for several cloud email service providers. It is It provide cloud email service as well as desktop based email client. In recent years people are migrating from third party cloud servers to Zoho Mail. The reasons are plenty, i.e. the user interface, security, high performance and many countless amazing features. On the other hand MDaemon Mail (aka WorldClient) is also popular among cloud email servers. But there are some

    • Ask the Experts: A Live Q&A Session

      We’re back with another exciting edition of the Ask the Experts series, this time exclusively for our Zoho Recruit users from the USA & Canada regions! Whether you're trying to configure your account better, have questions about customization, or want

    • Tip #7: Customize the appointment confirmation page

      A confirmation page plays a crucial role in creating the first impression, as that's where customers land when booking with you. It shows your brand identity, engages your audience, and drives more conversions. Yet, this section is often overlooked when

    • Add Image Upload Field to Zoho Bookings Registration Form

      Hi, We would like to request the addition of an image upload field to the Zoho Bookings registration form. Currently, Zoho Bookings only supports text-based fields (e.g., Single Line, Multi-Line, Email, Checkbox, Dropdown, Radio Button, and Date), but

    • Meeting integration with Otter.ai

      Would love for an integration with an AI transcription service like Otter.ai to be integrated with Zoho Meeting. Thanks

    • Next Page