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

    • "Performed changes in the query is not allowed due to following reason" when adding columns or reordering data

      I'm trying to make changes to a query but every time i try to save it i get this error message. I'm not touching the data it's flagging. All I've tried to do is reorder a couple of fields and add a new one. Why won't it let me do this? It's a core query

    • Onboard new users easily with native screen recording in Zoho Projects Plus

      Communication involving both visual and audio elements tends to capture more interest among the audience. Whenever we onboard new employees to the organization, the task of engaging them in the induction sessions, and keeping the spark going in their

    • Request to Add Support for PDF Templates and More Flexibility in Email Editor

      Hi Zoho Campaigns Team, I hope you're doing well. I wanted to share some feedback and request a few improvements in the Email Template feature of Zoho Campaigns. Right now, we can create email templates using the HTML editor, which is helpful. But we’re

    • Can you stop Custom View Cadences from un-enrolling leads?

      I'm testing Cadences for lead nurture. I have set un-enroll properties to trigger on email bounce/unsubscribe, and do NOT have a view criteria un-enroll trigger. However, help documents say that emails are automatically un-enrolled from a Cadence when

    • Zoho Desk Android and iOS app update: Agent detail overview

      Hello everyone! We’ve introduced agent detail overview on the Zoho Desk Android and iOS app update. With this feature, you can get a complete view of agent’s tickets, response times, logged hours (for both tickets and activities), customer happiness ratings

    • Blog Widget: Show recent blog posts on my homepage

      Hey there I am using the Zoho Sites Blog feature. On my homepage, on the bottom I'd like to have a featured content section where I show some of my blog posts (selected, most recent, filtered by category and so on...). It would be nice to have a blog

    • How to iterate through excel data using zoho rpa

      I wanted to iterate or loop through excel data ( datatable). How can i do that

    • Zoho Commerce

      Hi, I have zoho one and use Zoho Books. I am very interested in Zoho Commerce , especially with how all is integrated but have a question. I do not want my store to show prices for customers that are not log in. Is there a way to hide the prices if not

    • Mass (Pull back) (Close WOs) (Close APs)

      Hi develop team. Just idea because Zoho FSM is great but its too manual. we have a lot of task to do every day and the system needs to have more features to automatic our tasks. I need to close several WOs, APs and Pull Back per day. Please we need mass

    • Customising Zohidesk portal default widgets

      Hello, I'm wondering how could I customise the default widgets such as "popular topics", "popular articles" using CSS or to make the tiles at the bottom match the ones that I made in the picture attached. I have made some custom widgets and edited them

    • If there’s a batch at the end, the ‘mark as inactive’ function doesn’t work.

      when my batch has a date to batch end and I "mark as inactive" he batch does not obey the status and reactivates the batch.

    • Seamless multilingual messaging and tone control in Zia IM Composer

      Hello everyone! Managing customer conversations across multiple languages can be time-consuming. Using Zia in the Instant Messaging (IM) Composer helps you overcome this by providing tools to translate content, adjust your tone, and refine your messages

    • Advanced Deluge help needed with custom function and COQL limits

      I have a scheduled function that takes a snapshot of specific metrics and saves them to a custom module. However I'm struggling with the limits of COQL. I attach my full code, but an example of the issues I'm having is that it's erroring with a 'Limit

    • Tip of the Week - Conditional Formatting Chart

      Conditional formatting allows you to highlight your data series based on a pattern or a trend in your data. This makes it easy for you to identify when your data reaches certain values or when it deviates from the trend.  Zoho Analytics allows you to

    • Zoho Learn - AI Translate

      Hi Learn team, I had a situation today where I was providing training to a client team and I had written articles into their Zoho Learn to support their learning. I realised that one of the team members was a non-native English speaker and they were struggling

    • Payroll In Canada

      Hi, When can we expect to have payroll in Canada with books 

    • Power of Automation :: Auto-Sync Custom Date Field Between Related Tasks via Blueprint Transition

      Hello Everyone, A custom function is a software code that can be used to automate a process and this allows you to automate a notification, call a webhook, or perform logic immediately after a workflow rule is triggered. This feature helps to automate

    • Introducing auto-upgrade in Zoho LandingPage

      Hi everyone, We’re excited to share an upcoming update to help you get the most out of your landing pages — the auto-upgrade option, launching on October 22, 2025. Your landing pages are designed to bring in leads, and we want to make sure you never miss

    • Workdrive comment links stopped working.

      I have marked a PDF file with 95 comments, they have worked for a while. When i clicked on them they brought me to the correct page and showed me the outline that i had drew on the plans. The comments included the page number of the outline, but now it

    • How to Bulk-Update Sales Orders in CRM

      Hi - I need to bulk update existing sales orders with dates from our ERP of when the sales orders were created. I made a date field on the Sales Order module where I want to insert that data. I can't Mass Update because I am not updating the fields to

    • Zoho ToDo in Cliq

      Our organization utilizes Zoho ToDo in the Zoho Mail Desktop app. Is there a way for these to show up in Cliq Desktop app as well?

    • 【Zoho CRM】サンドボックス機能のアップデート：カスタムビューが利用可能になりました。

      ユーザーの皆さま、こんにちは。コミュニティチームの中野です。 今回は「Zoho CRM アップデート情報」の中から、サンドボックス機能のアップデートをご紹介します。 目次 1. カスタムビューとは 2. 今回の機能アップデートについて 1. カスタムビューとは カスタムビューは、ユーザーが設定した条件に基づいてデータをフィルタリング・整理し、 重要な情報へ効率的にアクセスできるようにする機能です。 「過去15日間の見込み客」や「受注間近の商談」、「特定の優先度レベルが設定された案件」など 条件を指定してわずか数クリックで設定できます。

    • Changing an agents email address

      How do you change an agent's email address? I keep getting a red circle even though I am an admin. And on one of my agents he has two email addresses? How is that possible?

    • Zoho CRM - Potentials Tab

      Hi! When I create a Deal (Potentials tab) the header looks like this: After a refresh on the page it looks like this: What should I do so that it is displayed like in the second pic without refresh? Also I have a user that as of recently, cannot see this

    • Is there a way to automatically add Secondary Contacts (CCs) when creating a new ticket for specific customers?

      Some of our customers want multiple contacts to receive all notifications from our support team. Is there a way to automatically add secondary contacts to a ticket when our support team opens a new ticket and associates it with an account? This would

    • Unable to create embed code for resource of workdrive using API

      Hello Team, I am trying to create embed code for a resource using workdrive api in powershell, however facing some issues with injecting data in body. Followed Doc: https://workdrive.zoho.com/apidocs/v1/filefoldersharing/shareeveryone Please help, below

    • Feature Request - Insert URL Links in Folders

      I would love to see the ability to create simple URL links with titles in WorkDrive. or perhaps a WorkDrive extension to allow it. Example use case: A team is working on a project and there is project folder in WordDrive. The team uses LucidChart to create

    • not able to convert pdf to jpg and other forms and vice versa.

      i want to change my pdf to jpg, word, etc and some times jpg to pdf. i don't know how to do in this.

    • Enable / show scroll bar when Mega Menu is opened

      Hey there I am using the mega menu add-on and experience a "flicker" whenever the mega menu opens. The reason is, that the scrollbar, which has a width of a few pixels, stops showing when the mega menu opens. As the scrollbar disappears the whole page

    • Shared Mailboxes Disappeared

      Zoho Mail users in our company haven't been able to see their Shared Mailboxes for the past few hours. I've checked with App and Web Access, but they can't access them. When I send emails to their addresses, I get no error messages. They're still visible

    • Reports: Custom Search Function Fields

      Hi Zoho, Hope you'll add this into your roadmap. Issue: For the past 2yrs our global team been complaining and was brought to our attention recently that it's a time consuming process looking/scrolling down. Use-case: This form is a service report with

    • Zoho Inventory - Composite Items - Assembly - Single Line Item Quantity of One

      Hi Zoho Inventory Team, Please consider relaxing the system rules which prevent an assembly items from consisting of a single line item and outputting a quantity of 1. A client I'm currently working with sells cosmetics and offers testers of their products

    • How can I transfer data from Production to Development environment?

      Hi, I am using Creator V6 and would like to bring all the data in production to the Development and Testing environments? Is there an easy way of doing that or I have to export and import each table?

    • Add "Reset MFA" Option for Zoho Creator Client Portal Users

      Hello Zoho Creator Team, We hope you are doing well. We would like to request an important enhancement related to Multi-Factor Authentication (MFA) for client portal users in Zoho Creator. Currently, Creator allows us to enforce MFA for portal users,

    • New portal SAML authentication error: User not found

      Dears, Has anyone else been experiencing this lately? I am creating a new portal authenticated by SAML (Entra ID). I followed the same process as I did with other portals, but any new portal created after this always encounters this error. I’ve been reporting

    • Devis et facture multi page

      Bonjour, je suis sur Zoho invoice et je rencontre un problème sur mes devis et factures lorsqu'ils dépassent 1 page. je me retrouve souvent avec des lignes coupées ou le sous total page 1 et le total page 2. j'aimerai savoir s'il existe une possibilité

    • Rotate an Image in Workdrive Image Editor

      I don't know if I'm just missing something, but my team needs a way to rotate images in Workdrive and save them at that new orientation. For example one of our ground crew members will take photos of job sites vertically (9:16) on his phone and upload

    • Help with Filtering Records, HTML Pages, and Automatic File Uploads in Zoho Creator

      Hi Zoho Creator Community, I’m building a Zoho Creator application and need guidance on a few features I’ve been struggling with. I want to implement them safely and efficiently, and I’d appreciate any examples, tips, or best practices. I want users to

    • How to Send Email from within a custom module (with or without an email template)

      It is possible to send an email from the Deals module. However, I can't find a way to send an email from any of our custom modules. I have tried adding an email field to the modules (even though we don't really want one or need it there). That doesn't

    • Convert invoice from zoho to xml with all details

      How to convert an Invoice to XML format with all details

    • Next Page