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

        • 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.

        • Showing the map along with mileage expense

          When you use the GPS to track mileage, it shows you the map of the actual path travelled. It would be very useful and practical to save that map with the mileage expense, so that when the report is created, it provides a map of each mileage expense associated

        • 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

        • 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

        • Trigger workflows from SLA escalations in Zoho Desk?

          Hey everyone, I’m currently working with SLA escalation rules in Zoho Desk and ran into a limitation that I’m hoping someone here has solved more elegantly. As far as I can tell, SLA escalations only support fairly limited actions (like changing the ticket

        • 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

        • Create formula calculations in Assemblies for scaling quantities

          Something we have been encountering with our composite items is dealing with scaling of quantity of one or more items within the composite assembly relative to the number of complete units being sold. I.e. running the equation 2(n-1) on one of the assembly

        • ZOHO CRM Quote Export / Quote Report

          How can I either Export my quote list, or create a Report that shows all quotes AND includes the NOTES field in a column. I attempted to Run a Report which includes ALL FIELDS, however it does not include the Notes Field (but oddly does include the fields

        • 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,

        • Zoho Recruit - Email Relay

          Good day, Has anyone succeeded in setting up an email relay for Office 365? If I add the details from https://support.microsoft.com/en-us/office/pop-imap-and-smtp-settings-8361e398-8af4-4e97-b147-6c6c4ac95353, I get the connection error. Regards, Eka

        • 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?

        • 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

        • Option to Delete Chats in IM

          Currently, there is no option to delete any chats in IM, regardless of their source.

        • CRM x WorkDrive: File storage for new CRM signups is now powered by WorkDrive

          Availability Editions: All DCs: All Release plan: Released for new signups in all DCs. It will be enabled for existing users in a phased manner in the upcoming months. Help documentation: Documents in Zoho CRM Manage folders in Documents tab Manage files

        • 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.

        • All new Address Field in Zoho CRM: maintain structured and accurate address inputs

          Availability Update: 29 September 2025: It's currently available for all new sign-ups and for existing Zoho CRM orgs which are in the Professional edition exclusively for IN DC users. 2 March 2026: Available to users in all DCs except US and EU DC. 24

        • Introducing Radio Buttons and Numeric Range Sliders in Zoho CRM

          Release update: 1. 2 March 2026: Currently out for CN, JP, AU and CA DCs (Free and standard editions). For other DCs, this will be released by mid-March. 2. 26 March 2026: CA, SA, AU, JP, CN DCs - Free, Standard, Professional, Enterprise, Ultimate, CRM

        • 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

        • Add Bounced as an Email Action / Notification for Bounced Emails

          This is one of the hard requirements for the clients we're servicing. They want to get an internal email notification whenever the email they sent to their contacts have bounced, so that they can look into it and update the email address. Currently, the

        • Files Uploaded to Zoho WorkDrive Not Being Indexed by Search Engines

          Hello, I have noticed that the files I upload to Zoho WorkDrive are not being indexed by search engines, including Google. I’d like to understand why this might be happening and what steps I can take to resolve it. Here are the details of my issue: File

        • Next Page