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





        • Recent Topics

        • Zoho CRM Portal User Timeline History Unavailable

          Hi Support Team, We have noticed a feature limitation in the Zoho CRM portal. We created a portal for our vendors to edit records directly, but when vendors make updates, the Modified Time and Date fields are not being updated. Additionally, these updates

        • Zoho Desk - Custom Module Related List Columns on Tickets

          I have a custom module in Zoho Desk called Asana Tasks, each task has a lookup to a Ticket. On the Ticket I want to see the columns of the Asana Tasks in the related list . Is there a way to do this? Right now it just has the name of the record and I

        • New in Smart Prompt: Record Assistant for contextual assistance, and support for new AI models

          Smart Prompt helps teams stay informed and move faster by providing relevant suggestions where work happens in CRM. With this update, Smart Prompt becomes more adaptable to your organization’s AI preferences. You can now choose which Large Language Model

        • Changing the Default Search Criteria for Finding Duplicates

          Hey everyone, is it possible to adjust the default search criteria for finding and merging duplicate records? Right now, CRM uses some (in my opinion nonsensical) fields as search criteria for duplicate records which do nothing except dilute the results.

        • My followed tickets extension is not working under the All departments view

          Hi. I've installed the My followed tickets extension. However, when I try to open the extension under the all departments view, I get the following message: 'Sorry, this extension is not supported in the All Departments view.' How can I solve this p

        • Ticket Time Entry to Timesheet

          The title just about sums it up. I have searched here and not found anything relevant, but If I overlooked, then please set me straight.  We have staff that do nothing but close tickets in desk all day long. These tickets represent their timesheet. Is there a way to have this information sync or for a tech to go into their timesheet themselves and sync it with their tickets of the same timeframe?? We waste a ton of time doing timesheets and the old "Clock in/Clock out" isnt detailed enough for us!!

        • Creator HTML page refresh

          Hi, I have added around 5 different html snippets in single creator page. I understand, I can refresh the entire page from page script using Navigational URLs https://help.zoho.com/portal/en/kb/creator/developer-guide/others/url-patterns/articles/navigational-urls

        • Calls undetected.

          The call is not showing on the call log.

        • Calls undetected

          Zoho is not reading calls made.

        • Related Lists filter

          I have Contacts showing in our Accounts module. I customized the Contacts module with an Employment Status field, with the following picklist options: "Primary Contact", "Secondary Contact", "Active Staff(not a main contact)", and "No longer employed".

        • Multi-currency and Products

          One of the main reasons I have gone down the Zoho route is because I need multi-currency support.  However, I find that products can only be priced in the home currency, We sell to the US and UK.  However, we maintain different price lists for each. 

        • Archiving Contacts

          How do I archive a list of contacts, or individual contacts?

        • How to add to Subforms via Zapier with Zoho Writer?

          I have the following layout for a Zoho Writer Document. As you can see there is a repeating subform taking in "Items". I am trying to make a Zapier integration with it, and I can see there is 1 field saying: "Items", but it does not specify how I'm supposed

        • Zoho Books | Product updates | November 2025

          Hello users, We’ve rolled out new features and enhancements in Zoho Books. From translating email notification templates to the new transaction locking restrictions, explore the updates designed to enhance your bookkeeping experience. Making Tax Digital

        • Missing information data Zoho inventory

          there some missing data in Zoho inventory connection. pick list stock counts bin location we have requested it via mail and the support team doesn’t gove feedback. has anyone achieve to get these info or to ask other ya les

        • Calendar Events Issues

          Not able to view scheduled events on my calendar

        • Extensions 101 webinar series: Build, integrate, and monetize with extensions

          Attention developers! Are you ready to take your extension development skills to the next level? We're excited to bring back the Extensions 101 webinar series with an expanded lineup of Zoho products and an introduction to more platform features. Last

        • Custom Related List Inside Zoho Books

          Hello, We can create the Related list inside the zoho books by the deluge code, I am sharing the reference code Please have a look may be it will help you. //..........Get Org Details organizationID = organization.get("organization_id"); Recordid = cm_g_a_data.get("module_record_id");

        • Ask the Experts 25: Experience the full spectrum of Zoho Desk’s autumn and spring releases for 2025

          Hello Everyone, We’re on the 25th episode of our ATE series! It's a true milestone in our live community interactions! It’s been an amazing journey since we started in October 2018. Zoho Desk has come a long way, evolving with the support of a wonderful

        • Where are recordings stored?

          I have hosted a couple of test meeting, used the "record" button to start and stop the recording but I am unable to find where are those recordings saved?  Can anybody help? Thanks

        • Zoho Desk's integration with Microsoft PowerBI delivers advanced analytics insights

          Hello everyone, Gaining advanced insights through reports and dashboards is one of the critical requirements of every business. In addition to key metrics tracked in Zoho Desk, such as agent performance, SLA adherence, and ticket lifecycle, businesses

        • Create static subforms in Zoho CRM: streamline data entry with pre-defined values

          Last modified on (9 July, 2025): This feature was available in early access and is currently being rolled out to customers in phases. Currently available for users in the the AU, CA, and SA DCs. It will be enabled for the remaining DCs in the next couple

        • IMAP error message in Zoho mail

          I cannot send emails today. Everything fine for years until today. Get a message: "You are yet to enable IMAP for your account. Please contact your administrator". Does anyone know how to correct this?

        • Enhancements to Zoho Map integration tasks

          Hello everyone, We're excited to announce enhancements to the Zoho Map integration tasks in Deluge, which will boost its performance. This post will walk you through the upcoming changes, explain why we're making them, and detail the steps you need to

        • IMAP stopped working today

          Hello! I've been a paid customer for more than 10 years, IMAP was always working fine. But today this is the error I've got on my iPhone: I've tried toggling the IMAP for my account (Mail -> Settings -> Mail accounts) off and on again, but that did not

        • Duplicating report but custom layout does not

          Dear Zoho Creator, I need to duplicate a report into 10 copies, but unfortunately the custom layout (detail view) doesn’t copy along with it. I tried exporting and importing the custom layout, but the field mappings are incorrect. I believe everyone are

        • Are custom portals accessible on the Zoho learn smartphone app?

          In other words, can users external to my organisation, once signed up, use the app in the same way as internal users? Thanks

        • When will Zoho Learn be able to support SCORM files on the mobile app?

          When I click the SCORM content, I just get a message saying it's not possible yet. Yet implies that it will be coming soon. All I'm asking for is a realistic timeline so I know whether or not to invest my time in using it. If it will be soon, then I will

        • 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

        • Conditional Layouts On Multi Select Field

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

        • Multiple columns in a form

          I am evaluating Zoho Creator. However, I am seeing almost no layout control on a form.  Just a basic 1 or 2 column format that is then imposed on the entire form.  That's not going to work for many, many real world cases. We need multiple columns per line, and we need each line/section to occupy a single column or be able to span the columns.   Someone please tell me that I'm missing something and the capability is actually there.  

        • Global search

          Hi! I think it would be great to have a global search that would give you results from all records of a database, no only for a single field of a single form as we have now. Thanks!

        • Any insights about API/v2? Having problem for a while.

          I don't know why it is throwing a 404 error, my report name is correct. Has someone had this issue and how you fix it?

        • Edit QR code with redirect to form

          Guten morgen, wir haben ein Formular Reklamation_erstellen. Dort soll ein QR Code erstellt werden, der im Lieferschein angezeigt wird. Beim Scannen auf dem soll das jeweilige Formular zum BEARBEITEN geöffnet werden. Leider bekomme ich es nur so hin, dass

        • Getting all the ingredients together for baking an app

          Good day everyone. After reading a lot of the help docs and watching videos, I now started on my app. To prevent hours and hours wasted on going down the wrong track, I would like some clarification on the following. But first some background: I have

        • Help Needed with Configuring ZC Microservice

          I'm attempting to create a simple microservice, but am running into problems with scope and auth. Using Custom API Builder, here's my setup: 1. Method: GET 2. Auth: OAuth2 3. User Scope: All users 4. Response: Standard 5. Function: A function that returns

        • Creator Simplified #10: Predefine Form Field Values and Make Them Read-Only for Users

          Hey Creators, Ready for this week's tip in the Creator Simplified series? Today, we will explore how to have read only fields in a form. Use Case: Assume a scenario where the default value for a Department field needs to be English Literature, but you

        • Direct link to Record Summary

          Hi everyone, In one of my reports, I have built a Record Summary template to display the details of one record. I would like to be able to link directly to this Record Summary once I submit a new record, without having to go to the list of records first and click on View. Is there a possibility to do so ?  Should I use the URL by passing some parameters ? Thank you very much for your help ! Guillaume

        • To Assign a genrated pdf to a file upload field using delug

          content = "<html><body>HTML Content on page One <div style='page-break-after:always'></div> HTML Content on page Two </body></html>"; file = zoho.file.convertToPDF(content); file.setFileName("Name of the file"); <variableName> = <FormLinkName>[ID == input.ID];

        • Zoho Mail : Email Outgoing Blocked

          I suddenly received the following message yesterday. I cannot send any mail. Please resolve as soon as possible, I cannot work without sending email. Dear User, We regret to inform you that your email outgoing has been blocked and you will not be able

        • Next Page