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

        • Integrate Multiple ZohoBooks organization with zoho projects

          We have successfully connected our Zoho Books with Zoho Projects for synronizing timesheet data. Our Business specialty is, that the staff of the Main company (A) is working on several projects, but the Clients are sometimes contracted and paying to a

        • Ways to calculate the difference form two years or months

          Hi to everyone I have this request: I need to show the difference or variation from two periods (years or months) whether using a Pivot View or a graph, in this is case is better in a Pivot view. In the pivot view I will have the amount or results from

        • Career site URL - Suggestion to modify URL of non-english job posting

          Hi, I would like to suggest making a few modification to career sites that are not in english. Currently, the URL are a mix of different languages and are very long. It makes for very unprofessional looking URLs... Here is an example of one of our URL

        • 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

        • How to update "Lead Status" to more than 100 records

          Hello Zoho CRM, How do I update "Lead Status" to more than 100 records at once? To give you a background, these leads were uploaded or Imported at once but the lead status record was incorrectly chosen. So since there was a way to quickly add records in the system no matter how many they are, we are also wondering if there is a quicker way to update these records to the correct "Lead Status". I hope our concern makes sense and that there will be a fix for it. All the best, Jonathan

        • Introducing Contract Settings & Backdated Contracts in Zoho Contracts

          We are rolling out updates that give you more control over how contracts are created and managed in Zoho Contracts. From defining default workflows with Contract Settings to aligning agreements with real timelines using Backdated Contracts, these enhancements

        • Celebrating our customers on International Client's Day

          Hi everyone, Every customer is part of our Zoho Desk family, and we wouldn’t want to miss celebrating you on this special day. This International Client's Day, we’d like to take a moment to appreciate every customer who has helped us grow and build meaningful

        • Zoho Books | Product updates | February 2026

          Hello users, We’ve rolled out new features and enhancements in Zoho Books. From Advanced Reporting Tags to the ability to mark projects as completed, explore the latest updates designed to improve your bookkeeping experience. Introducing Advanced Reporting

        • Faster Ticket Response with use of Snippets in comments

          Hello everyone, Responding to tickets often involves repeating the same messages, whether it is sharing updates with customers or leaving notes for internal collaboration. To make this easier and more consistent, we are allowing agents to use snippets

        • Improving Zoho Creator's email deliverability

          Hi all, We're pleased to announce updates to email handling in Zoho Creator to improve the deliverability of the emails sent from the Creator platform. These updates have been designed keeping in mind the fact that emails from domains with strong sender

        • What's New in Zoho Billing | February 2026

          February brings a powerful set of updates to Zoho Billing, from smarter subscription management and flexible payment options to better reporting and more control over your hosted pages. Here's everything that's new this February. Create Subscriptions

        • Reassign Partially Saved Entries

          Hi, I would like to be able to go to Partially Saved Entries and like the option to delete them I would like the option to multi-select and be able to reassign them to another user to complete (Such as when a user has left the company). Thanks Dan

        • Can we rely on order of returned ids when inserting multiple records?

          Hello! API https://www.zoho.com/crm/developer/docs/api/v8/insert-records.html does not mention that the response array will match the input array*, keeping this important information implicit and someone might have doubts to rely on it. (*the response

        • Displaying only unread tickets in ticket view

          Hello, I was wondering if someone might be able to help me with this one. We use filters to display our ticket list, typically using a saved filter which displays the tickets which are overdue or due today. What I'd really like is another filter that

        • 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

        • Best Way to Manage Approvals Within Blueprint Stages?

          Hi, I am working on a requirement involving Blueprint and approval logic in Zoho CRM and would appreciate some guidance. I understand that approval processes do not trigger when a record is currently within a blueprint, which makes it challenging to implement

        • Zoho Books: tax is not automatically pulled from product-data anymore - why?

          Hi, until a short time ago, you could set a default taxrate for each product/item. This taxrate automatically appeared each time the item was chosen in an invoice or quote. Why does this not work anymore? The field is still there at the product record,

        • Issue creating a YTD report with last years numbers

          I am looking to create a widget to compare the YTD leads we have in 2023 to the YTD leads we had in 2022. I'm having issues with the aggregate formula creation to gain access to the 2022 Leads YTD data point. Feeling like this is a common view of data

        • Brand Studio Projects in Analytics

          Hi All, Currently pulling my hair out over trying to link together some social media posts for a reporting dashboard in Analytics, so I thought I'd see if anyone on here had a solution. Our Marketing Team created a LinkedIn campaign in Zoho Brand Studio,

        • Manage Testing Process in Zoho Sprints

          Agile framework supports a robust quality assurance system that incorporates continuous testing throughout the development lifecycle of the product. The agile testing team focuses on planning the testing around the development, identifying defects early

        • Announcing the Zohotshots of the ZDC Hackathon 2025

          Hey everyone, The wait is finally over! After weeks of building, experimenting, and pushing creative boundaries, we’re excited to announce the winners of the second edition of the ZDC Hackathon. This edition brought together an incredible community of

        • ZOHO CRM Button Integration

          Hi Team, I’m currently working with Zoho CRM along with a custom application where I fetch deal details from the CRM and use them based on my requirements for each deal. Now, I want to enhance this setup. I plan to create a button on the Deal Detail page

        • Major journey crash and not loading. Zoho Marketing Automation

          Hi all. Last night (19MAR, 2026) Marketing Automation for a specific journey completely crashed, and since the crash the specific journey has failed to load at all (blank journey canvas, no journey appears, no menu accessible) but other separate journey's

        • Candidate Assessments, no workflows.

          I have an issue where I would like to trigger a workflow based on a candidate assessment being completed. Sometimes a returning candidate will complete a second assessment, on completion the status of the candidate will be updated to "Unqualified" if

        • Mail Merge in Zoho Desk

          Hello Team, Do we have an option of mail merge within Zoho Desk like we have in Zoho CRM? We have a requirement to generate some pdf file in the form of mail merge doc from the ticket.

        • Workdrive backup and default storage selection

          Hi community, I have been informed by Zoho that workdrive will be the default storage mechanism for crm and projects. These 2 Apps seem to have different design on how they interact with workdrive for storage. 1. Crm: seems to have files saves at the

        • Zoho vault filling in a form it's not supposed to fill in

          Hey there, I have a problem with ZOHO Vault autofill. In a software package, we have these options: For some reason zoho vault always replaces what's in the top option and fills a 2fa password in there, and then saves that value.. Meaning whatever was

        • Zoho Booking Integration with Desk

          Just wanting to share something in case it helps someone else who may run into a similar use case as we did. Issue: Currently, the Zoho Booking integration with desk will drop a comment into the ticket when a customer books a time, however it won't change

        • Let us view and export the full price books data from CRM

          I quote out of CRM, some of my clients have specialised pricing for specific products - therefore we use Price Books to manage these special prices. I can only see the breakdown of the products listed in the price book and the specialised pricing for

        • Syncing calendar with Google Calendar doesn't work when events are sent to auto repeat

          Hi... The ZOHO CRM -- GOOGLE CALENDAR sync is broken. If I create a single event on either side, sync works, but if I create an event with auto repeat on either side it doesn't work. Furthermore, events created before the sync don't show up in the calendar.

        • Organization wide Account and Contacts Visibility/Sharing Capabilities?

          Has anyone figured out a way to make visibility or sharing of Accounts and Contacts to be available across the entire organization without having to have every individual user edit their Sharing permissions? For our sales folks they need to be able to

        • Notification of Interaction Assignment

          If a user is assigned an interaction, they should be notified via email. These are almost useless because if I assign an interaction for someone to respond to, they dont know that I assigned it to them without me telling them or them logging in and discovering

        • Countries List Global Set- Complete with Phone Country Code and Continent.

          Dear Zoho Team I saw your recent addition to the Global Sets regarding the Countries list and states. While working on it, why didn't you also add things like Continent and Phone Country Code? Also, some ISO codes from some Countries/regions are mis

        • Custom Display Field for Lookup Dropdowns in Zoho CRM

          Could Zoho CRM support changing the display field in lookup dropdowns, like Zoho Creator does? This would make it much easier to select the right record by showing a more useful field instead of only the default one. It would improve speed, clarity, and

        • Message as bot

          I would like to be able to send a Cliq message truly as a bot. the current implementation of this function, while it sends the message as a bot it sends that message inside a chat from the user how authenticated the flow cliq connection instead of directly

        • Books <-> CRM synchronisation with custom Fields

          Hello, We are synchronising Books Customers with CRM Accounts. In CRM Accounts I set up last year a "segments" multiselect field shown below In Books, I set up a custom multi-select field with the same value as in the CRM And set up the synchronisation inside Books. Want to synchronise the Books Segments with the CRM Segments, but the later doesn't exist, and another non-existing is there ?! First, I don't understand where the field Segmentation is coming from. Second, I set CRM Segmentation to sync

        • Trouble with using Apostrophe in Name of Customers and Vendors

          We have had an ongoing issue with how the system recognizes an apostrophe in the name of customers and vendors. The search will not return any results for a name that includes the mark; ie one of our vendors names is "L'Heritage" and when entering the

        • Recording overpayment?

          So a customer just overpaid me and how do I record this? I can't enter an amount that is higher than the invoice amount. Eg. Invoice is $195 and he sent $200. He's a reccuring customer so is there a way to record so that he has a $5 advance for future invoice?

        • Introducing the New Zoho Assist Quick Support Plugin

          We are thrilled to announce the new Zoho Assist Quick Support Plugin, the upgraded and enhanced version of the Zoho Assist Customer Plugin. This new plugin allows organizations and IT administrators to deploy it directly onto their customers’ devices,

        • Automate your signing workflows with Zoho Sign + n8n

          Hello! We're excited to announce that Zoho Sign is now available as a community node on n8n, a popular open-source workflow automation platform used by tens of thousands of teams worldwide. n8n lets you connect apps, APIs, and services through a visual

        • Next Page