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

    • Introducing parent-child ticketing in Zoho Desk [Early access]

      Hello Zoho Desk users! We have introduced the parent-child ticketing system to help customer service teams ensure efficient resolution of issues involving multiple, related tickets. You can now combine repetitive and interconnected tickets into parent-child

    • Separate Items & Services

      Hi, please separate items and services into different categories. Thank you

    • Log a call: Call Duration for Inbound is mandatory but inbound is optional

      Hi Team Can you advise on why the call duration for the inbound call type is a mandatory field? We have a use case where we are manually logging a call but do not use the call duration field. The field does not have the option to make it non mandatory

    • Zoho Sign 2025–2026: What's new and what's next

      Hello! Every year at Zoho Sign, we work hard to make document signing and agreement execution easy for all users. This year we sat down with our head of product, Mr. Subramanian Thayumanasamy, to discuss what we delivered in 2025 and our goals for 2026.

    • New Account, Setting up Domain Question

      Hello, I recently set up a new account with a custom domain. But after paying and setting up my account, it says OpenSRS actually owns the domain, and I have to sign up with them to host my site. But OpenSRS wants to charge me $95, which is ridiculous.

    • 【開催報告】東京 Zoho ユーザー交流会 NEXUS vol.1 ～ データドリブン経営・少人数組織のCRM活用・AIエージェントの最前線 ～

      ユーザーの皆さん、こんにちは。 コミュニティグループの中野です。 2026年3月27日（金）、東京・新橋にて「東京 Zoho ユーザー交流会 NEXUS vol.1」が開催されました。 今回は「マーケティング領域のZoho 活用法 × AI」をテーマに、ユーザーさん2名による事例セッション、Zoho 社員によるAIセッションなどを実施しました。 ご参加くださったユーザーの皆さま、ありがとうございました！ この投稿では、当日のセッションの様子や使用した資料を紹介しています。残念ながら当日お越しいただけなかった方も、ぜひチェックしてみてください。

    • Monthly Webinar : Getting Started with Zoho LandingPage

      Our monthly Getting Started with Zoho LandingPage webinar is back! If you're building your first page and want a little guidance, this is where to start. Learn how landing pages fit into your strategy, generate leads, and improve conversions. Here’s what

    • Mass emails - Allow preview of which emails will receive the email based on the criteria

      Feature request. Please allow us to view and confirm the exact recipients of the mass emails based on the criteria we've chosen before sending. It can be quite sensitive if you send the mass email to some wrong accounts accidently, so it would be great

    • Limitation in Dynamic Constant Sum Based on Previous Question Selections in Zoho Survey

      Zoho Survey supports the Constant Sum question type, allowing respondents to distribute a fixed total (such as 100) across a set of options. However, it does not support dynamically populating these options based on selections made in a previous question.

    • SAP Business One(B1) integration is now live in Zoho Flow

      We’re excited to share that SAP Business One (B1) is now available in Zoho Flow! This means you can now build workflows that connect SAP B1 with other apps and automate routine processes without relying on custom code. Note: SAP Business One integration

    • sync two zoho crm

      Hello everyone. Is it possible to sync 2 zoho crm? what would be the easiest way? I am thinking of Flow. I have a Custom Module that I would like to share with my client. We both use zoho crm. Regards.

    • Import MSG to Yandex Mail Account | Fast & Reliable Solution

      If you are facing problem to import MSG files to Yandex Mail account can be challenging if done manually, especially when handling multiple files. A reliable solution is using the MacGater Mac MSG Converter, which simplifies the entire process with accuracy

    • Copy all reports in a folder

      I currently have a database that I need to create multiple charts filtered by market. All of the charts are identical, I just change to of the filters and then I have the next market's set of charts. The only way I've been able to copy charts (reports)

    • OpenURL working Intermittently

      Never had this issue before, everything was working fine up to a few days ago. We have a buttons on reports to open forms with pre-filled fields. Now, there are instances where it will throw and error and gives no feedback. What is really strange is not

    • Zoho Recruit mailserver get blocked by Microsoft!

      Hi, We have experienced this issue twice now, where Zoho Recruit outbound IP addresses are being blocked by Microsoft. We are confident that Microsoft is the blocking party, as all outbound emails to candidates with @hotmail.com, @live.com, and @outlook.com

    • Calculate Hours Minutes Sec in Zoho Creator Using Deluge

      check_In = "8-Aug-2023 10:00:00".toDateTime().toLong(); checkout = "8-Aug-2023 18:00:00".toDateTime().toLong(); //difference = start.timeBetween(end); check_In = "8-Aug-2023 17:56:50".toDateTime().toLong(); checkout = "8-Aug-2023 18:00:00".toDateTime().toLong();

    • Build Smarter Apps with AI in Zoho Creator

      Build Smarter Apps with AI in Zoho Creator This is truly the era of AI, and businesses that adapt now will lead tomorrow. Zoho is already moving ahead in this direction, continuously evolving its platform with powerful AI capabilities. With Zoho Creator,

    • Zia Dashboard Insights : turn your dashboard into decisions

      When you look at a chart or KPI in a dashboard, you would possibly see something like: Revenue: $2.4M ↓ 18% vs last month. It can be a positive growth or a negative one, or a dip in revenue, a spike in deals, a slowdown in renewals—all you usually see

    • Tickets without registration

      Hi, would it be possible to give customers the opportunity to be able to read their tickets without registration?

    • Zoho Desk Answer Bot vs. Zia Agents – Knowledge Base & Ticket Access

      Hi everyone, I’m currently evaluating AI options in Zoho Desk and ran into some limitations with the Answer Bot: Answer Bot limitations Only uses Knowledge Base articles No access to tickets Limited control over sources: Either one Help Center or all

    • Como estruturar automações eficientes no Zoho Creator

      Como estruturar automações eficientes no Zoho Creator Introdução No contexto de aplicações empresariais, automação não é apenas uma conveniência, é um fator crítico para ganho de produtividade, redução de erros e escalabilidade operacional. O Zoho Creator

    • Changing the status of a work-order

      Is there a way to change the status of a work-order?

    • Online Payment Fees

      We don't take many online credit card payments so the merchant service provider (PayPal) charges us the 2.9% fee for processing the amount. I would like the ability for the fee to be automatically added to the total amount for "ease of payment". We'd

    • 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

    • Zia Agents in Zoho CRM: a better way to set up digital employees

      Hello everyone, If you've been using Zia Agents in Zoho CRM, so far using Connections was the only deployment method you're familiar with. You create an agent in Zia Agents (define its objective, write instructions, use tools, add knowledge base) and

    • Bank Feeds

      Since Friday my bank feeds wont work. I have refreshed feeds, deactivate and reactivate and nothing is working

    • Logged out

      Hi, just been working on a sheet when a pop up box appeared telling me I'm going to be logged out in x number of seconds and if I reload I may lose any edits, or words to that effect. It did indeed log me out and I did indeed lose my last edits. Any idea

    • Zoho API

      I have little experience with API. I'm trying to get a Custom API working with Zoho creator. I have created a Custom API and created an Endpoint URL, but i get a 9400 error code "The provided HTTP method is not valid for this custom API". Based off the

    • #157127950

      Where did my initial question go?

    • Zoho writer unable to merge documents to PDF with basic fonts in Hebrew or fonts from my computer

      I created several forms that will be merged into PDF files through Zoho Writer and I am unable to receive the PDF in the basic fonts of the Hebrew language or in the fonts I have on my computer. The writer exports to PDF an exchange font that looks very

    • How I Implemented Subscription-Based Access Control and Expiry Handling in Zoho Creator

      I recently worked on a use case where users come into the application to request a service, but they should only be able to continue the process after completing a subscription. The challenge was not just controlling access, but also making sure that

    • Zoho Forms API

      Is there any way to get all form entry list using API? Looking forward to hear from you

    • Zoho Projects : Task should auto-update to 'In Progress' if timer started

      Namaskaram. Right now, if a Task's timer is started, the Task stays in 'Not Started' status. One has to manually update it to 'In Progress'. From a #uxdesign standpoint, it is an unnecessarily two step process to start working on a task. It would be better that, if I start the timer on a task, it should automatically change to 'In Progress' status. Crafted with ❤️ Zoho Gurus | Zoho One Practice Team @ CubeYogi Zoho Authorised Partner | 7+ Yrs | 200+ Projects | 100+ Customers

    • Laatste facturen en betalingen niet zichtbaar in mijn account

      Wij gebruiken ZOHO invoice al jaren, maar sinds afgelopen week is mijn laatst verzonden factuur niet zichtbaar in mijn account, en tevens de laatst betaalde facturen zie ik niet. Hoe kan dit? Ik heb de pagina al diverse keren gerefreshed.

    • Undelivered Mail uncategorized-bounce errors when sending invoices

      Recently we have been getting Undelivered Mail bounce notification when sending invoices. Reason: uncategorized-bounce Some go through no problem some bounce back. We recently sent 10 invoices, 6 received bounce notifications. After reaching out to the

    • Can I import MSG files into Microsoft 365 without Outlook?

      Yes, absolutely. You do not need Outlook installed to import MSG files into Microsoft 365. Aryson MSG file Converter is a dedicated tool that eliminates the Outlook dependency entirely, making the migration process simple and efficient for all users.

    • 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

    • Zoho Books/Inventory - Update Marketplace Sales Order via API

      Hi everyone, Does anyone know if there is a way to update Sales Orders created from a marketplace intigration (Shopify in this case) via API? I'm trying to cover a scenario where an order is changed on the Shopify end and the changes must be reflected

    • Ticket id issues

      When I reply a ticket from desktop, it doesn't have ticket id in the subject and it's great. When I reply a ticket from Zoho desk mobile, Zoho adds ticket id in the subject and I don't want that. Please help in this matter.

    • Advanced email configuration - agent's name vs. department name

      We currently have all four Advanced Configuration options turned ON at the Global-level (Channels > Email > Advanced Configuration) - including the "Show Agent name in Ticket replies and outgoing emails" option. We also had that same option turned ON

    • Next Page