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

    • printing individual labels - Dymo LabelWriter

      I am trying to print individual labels to my Dymo LabelWriter - has anyone done this? Latest Update (December 2025): The Canvas Print View is now available! We encourage you all to try it out and share your feedback with us. Learn more here: Zoho CRM

    • Zoho Creator for Agriculture

      Greetings, I am starting to work on  Zoho Creator specifically for the agricultural field, any recommendations, tips or ideas that might be helpful ? Also, if you are interested by any means in working on such project, kindly contact me. The project is

    • Custom Print Layout

      I would like to create a custom print layout of a Lead or Contact. Is there a way to do that? What I mean is that if I'm viewing a specific lead or contact I'd like to be able to print or export that lead/contact and only print and/or export certain information.

    • Print View

      Nothing happens when I'm in a module , ie; Contacts, and I hit the Print View Button. Even when it does come up and say "loading", nothing loads

    • Get Holiday ready with Zoho Mail's Offline mode

      With the holiday season right around the corner, this is the perfect time to get ready to unplug, relax, and enjoy a well-deserved break. In addition to preparing yourself, you can also make sure your organization members are set for their time away from

    • Solution to Import OST File into Office 365.

      MailsDaddy OST to Office 365 Migration Tool is an outstanding solution to recover OST files and migrate them into Office 365 without any hassle. Using this software users can multiple OST files into Office 365 with complete data security. It offers users

    • Zoho CRM Kiosk issues

      Firstly this is for a system on the AU servers if that makes a difference. Issues are as follows (For Kiosk): 1. Re-ordering fields in the screen builder is broken. The fields seem to be re-ordering themselves, unless you order everything by moving the

    • Email Template Edits Not Saving

      I can make an edit, click save, and see the blue bar annimation at the top, but the edits don't actually save. Important, because my email templates are now broken and clients are receiving bad emails. Tried on Chrome, Firefox and IE.

    • Default Ticket View - Table?

      Guys, We mostly use the table view to queue tickets. Maybe I am missing it - but how can I set that view as 'default" for all our agents? Thanks JV

    • Can I have different users see different pick list values for Potential Stage?

      We have some users focusing on new business and others focusing on existing business, and they follow different sales processes/cycles, so we would like them to see different pick list values for Stage (eventually leading up to Closed Won/Lost in both cases).   And just to keep it interesting - some of these users will of course do a combination, so would need to see one pick list for their New business potentials and a different pick list for their Existing business ones.   Salesforce does this

    • Tracking Snippet not working in Zoho Marketing Automation!

      First off, the fact that you have to wait about 12-24 hours for every response is terrible. How are we supposed to conduct business? Second, we have been trying for several days to get the Tracking Code Snippet in marketing automation to work, to no avail.

    • Is there any way to send an Excel received by email to Dataprep?

      Every day I receive an email alert with an Excel file that I want to process through a Dataprep pipeline. To do this, I need to: -Save the file to disk -Open the pipeline -Run the pipeline -Update the source -Several clicks to select and open the saved

    • Read webpage - MSXML2.ServerXMLHTTP

      I have the following VBA script, put together from various sources (mainly zoho forum/help/support, so it once worked, I guess): private Sub GetListOfSheets() Dim url As String Dim xmlhttp As Object Dim parameters As String Dim html As String range("B1").value

    • Zoho Creator Form Search

      I'm new to Zoho Creator and so far i do like it but im shocked there seems to be no easy way to add a search function and/or navigation to there forms as this readily available in every platform i have used in the past. Anyway i have a form which i have

    • How to setup DKIM / SPF in Zoho Mail

      Hello there! I'm having a hard time understanding how to setup the TXT records for SPF and DKIM with Zoho Mail. I'm following the instructions here: https://www.zoho.com/campaigns/help/setup-spf-dkim.html Specifically, when it comes to the value for the

    • Mass update cant trigger a workflow?

      Hello there, Is this a normal Creator behaviour? In a report, if I manually edit each data row, it will pass those changes to all other reports. However, if I perform a Mass Update on a few data rows at once, the new data is not pushed to other reports.

    • search and Smart Bar both missing in Mail

      One of the users on my account does not have the search bar at the top right or the Smart Bar at the bottom left of the desktop Mail app. Any ideas how to get those back?

    • Let us add Lookup fields in the Blueprint Transitions

      We are unable to add Lookup Fields in the blueprint transitions in Zoho Desk, we wanted to make it a requirement for our workflow but since it's not available in the transition we cannot. The lookup field exists in the Layout: But it cannot be added/selected

    • Zoho Projects API Scope for Issue Attachments

      I try to download issue attachments via the API, unfortunately I always get the following error code when trying to download the file from the supplied URL: {"ERROR_MESSAGE":"INVALID_OAUTHSCOPE","ERROR_CODE":401} indicating an auth scope error. I've tried

    • How to fetch custom fields for time entries in Zoho Project API v3

      In the previous Zoho Projects REST API, we were able to retrieve custom field details for time entries, including picklist options, using the endpoint: GET /restapi/portal/[PORTAL_ID]/timesheetcustomfields In the new Zoho Projects API v3, we tried using

    • Zoho Survey Enhancements

      We love Survey. We use it a ton. It needs some enhancements. Maybe some of these are already on the roadmap? API - this is crucial. We have some complex surveys that take place and need to update records, trigger other functions/automations, etc. I would

    • Images Don't Display on Blog

      Hi, I've just posted a new blog entry, but regardless of format (png or jpeg) Images that display in Preview mode do not display on any browser in the published post.  I've not done anything different with this post than others regarding images, please advice. Thanks! Edit:  I've discovered that moving the image files from a my sub directory folder "Pics for Blog" to the top level of the "Files" folder on my site allows the images to display live.  This, even though my other blog posts are correctly

    • Checkbox Field Mapping Zoho Forms to Zoho Sign

      I have an application that will be filled out via Forms that I am mapping into a PDF Filler on Zoho Sign. I need to have a series of checkboxes mapped to the corresponding fields in Sign and I only see single checkboxes available via the mapping, though

    • Books P&L by Customer

      Lately, we have found that the Customer field filter for the Profit & Loss report in Zoho Books is no longer available. We have several projects with the same customer and look at the P&Ls by project AND by Customer (overall). Can you please add back in this field selection alongside the Project field to the P&L report filter? Thanks! -Gina

    • Sent mail sort by date disappeared

      Hello, We used to be able to sort the emails by date in the sent folder, but this feature has recently disappeared. Can we bring it back?

    • I cannot check out to Zoho People.

      When I tried to check out today, there's prompt that inhibits me to check out: To add entry in Attendance, log time for any of your jobs

    • Pricing Strategies: #2 Plan your Service Offerings using Plans

      Meet Harvey & Mia, hailing from the same Tech school, carrying the dream of setting up their own IT maintenance firm in their location. They drew up a clear business plan and put their business in motion on New Year's Eve. They had great reception right

    • Open a record to edit based on another form being edited

      Hi all, I am trying to edit a record based on another record being edited. It works out like this: When I create a Monthly_Update and then submit I open the Monthly_Levels form and pass the ID from the Monthly_Update to a field called mu. I want it to

    • Problem with signature on zoho survey

      Hello, I'm trying to export individual responses with signatures on zoho survey. But the signatures on some of my surveys are not exported as the original image, but as a generic image, same for all (screen joins). Is there a solution to have the signatures

    • Change in Zoho CRM API?

      Hello, I am using the Zoho API trough the PHP SDK v2.1 Since few days, I noticed that I have to change the way I pass the data to the API when I create, update, or upsert a record. Dates Before I was passing a PHP date object to "$record->addKeyValue(...)",

    • MTA - BAD IP reputation by outlook/hotmail

      Messages to Microsoft email servers are bouncing back due to poor reputation. Message: 4.7.650 The mail server [136.143.188.206] has been temporarily rate limited due to IP reputation. For e-mail delivery information see https://postmaster.live.com (S775)

    • QuickBooks Extension for Zoho CRM - Advanced Features -2025

      Hello Everyone, We’re happy to announce the latest version of our QuickBooks Extension for Zoho CRM, now officially live on the Zoho Marketplace! This release introduces one-click data sync, a user-friendly UI, enhanced performance, and a powerful set

    • Changing Department often causes the Firefox tab to freeze

      Title, it doesn't seem to happen with neither Opera nor Chrome. And even in Firefox, sometimes it just lets me change the department I'm in no problem, even to All Departments which is probably the most, like, resource heavy? But most of the time, the

    • Need to integrate Zoho Mail Mobile app with Zoho Meeting Mobile App for Android and Apple

      Hello Zoho Team, Please bring integration of Zoho Mail Mobile app with Zoho Meeting for Android and Apple Thanks

    • ¡Muchas gracias por participar a los Meetups de Usuarios de Zoho! Y Novedades del ecosistema Zoho

      ¡Hola Comunidad de Zoho en Español! 👋 Después de un breve lapso de tiempo, volvemos con una nueva edición de nuestro Community Digest, donde te contamos las novedades de los productos de Zoho en los últimos meses. Estas mejoras se centran en nuestros

    • Anyway to move mail from one account to another yet?

      Hello, Is there any way to move email from one mailbox account to another mailbox account in zoho yet? Thanks, Ryan.

    • Using a CRM Client Script Button to create a Books Invoice

      Hello, I need help handling error messages returned to my client script from a function. The scenario I have setup a client script button which is available from each Deal. This CS executes a crm function, which in turn creates an invoice based on the

    • Building Toppings #2 - Learn how to use Bigin's Developer Console to build toppings

      Hey Biginners, In our last post, we discussed what toppings are, why they're essential to extending Bigin's capabilities, and how the Bigin Developer Center serves as the starting point for building them. As a cloud platform, the Developer Center empowers

    • Links are incorrect when sent out

      I'm adding in hyperlinks into my eDM. When I send a test email, it's all correct. However, when I send out the eDM, all the hyperlinks jump up one space so none of the links are opening to the correct page. Why is this happening and how can I fix it?

    • Tip of the week #16 - Search and filter threads based on criteria

      Zoho TeamInbox lets you search and filter threads with any information that you have about the thread. You just have to input the criteria and Zoho TeamInbox will list all the threads that match the condition.   Firstly, there is a global search you can

    • Next Page