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

      • Announcing new features in Trident for Windows (v.1.39.4.0)

        Hello Community! Trident for Windows just received a major update, with a range of capabilities that focuses on strengthening communication and simplifying workflows. Let’s dive into what’s new! Upload email attachments to WorkDrive. Until now, you could

      • Introducing Automatic Field Addition (Text Tags) in Zoho Sign

        Hello, Today we are excited to announce the general availability of automatic field addition (text tags) feature in Zoho Sign. Now, you can now add text tags in the content of your documents and Zoho Sign will automatically add the corresponding fields when they are uploaded for the signing process. For example: when you add text tags to your sales orders, new employee contracts, and NDAs, Zoho Sign will add the corresponding fields when these documents are uploaded for the signing process. If you

      • Introducing Built-in Telephony in Zoho Recruit

        We’re excited to introduce Built-in Telephony in Zoho Recruit, designed to make recruiter–candidate communication faster, simpler, and fully traceable. These capabilities help you reduce app switching, handle inbound calls efficiently, and keep every

      • Do not use isnull()

        Does not always return booleans. Can also return null. Never use this function. Just use var==null instead.

      • Write-Off multiple invoices and tax calculation

        Good evening, I have many invoices which are long overdue and I do not expect them to be paid. I believe I should write them off. I did some tests and I have some questions:  - I cannot find a way to write off several invoices together. How can I do that,

      • Splitting Transactions in Zoho Books

        I have read in past forum posts that the ability to split bank transactions would likely be implemented - it's definitely a typical accounting program feature.  I'm new to Zoho and thought I'd found nirvana until I realized this feature doesn't seem to

      • Statement Aging On Cutomer Statement

        Hello, Is it possible to put aging on customer statements? Current 1-30days 31-60days 61-90days 91-120days Over 120 days. See attached image from another accounting package. Many customers pay off a statement and clear older invoices.

      • Unveiling the next iteration of Ask Zia in Zoho CRM: An all-new chat interface, conversation history, actions, and much more

        Your CRM assistant just leveled up. Zoho CRM's Ask Zia functionality now offers a more conversational and context-aware experience to help you not just understand your data, but act on it—all from one chat window. With its redesigned interface and expanded

      • Response rate and time on social media

        Hello, I just want to know if it's possible to manage the response rate and response time from my social media on zoho social ? I don't see any statistical reports on the online scoreboard ? Thank you in advance for your response and sorry if the question has already been posted

      • Whatsapp BOT with CRM

        Hello, how do you use Whatsapp integrations in zoho CRM?

      • Ability to translate Zoho CRM Kiosks

        Hi team, Is support for translating kiosk text and screen names in the Zoho CRM translation tool planned on the roadmap? Thanks,

      • Whatsapp Limitation Questions

        Good day, I would like to find out about the functionality or possibility of all the below points within the Zoho/WhatsApp integration. Will WhatsApp buttons ever be possible in the future? Will WhatsApp Re-directs to different users be possible based

      • Editing the list of Categories in the Categorize Manually section of Banking in Zoho Books

        Hi, I need to create two new Categories called Withdrawals and Deposits to categorize payments in a bank account. How do I edit the Categories list?

      • [Free Webinar] Intelligent document processing with Zoho RPA

        Hello everyone! Greetings from the Zoho RPA team! We're excited to invite you to our upcoming webinar on intelligent document processing with Zoho RPA, where we'll introduce powerful new capabilities designed to make your automation journey smarter, faster,

      • Zoho People > Performance Management > Appraisal cycle

        Hello All I am using this 2 users to test out how it work on Performance Management User 1 - Reportee User 2 - Reporting Manager : Li Ting Haley User 1 : Self Appraisal Error How do i fix this error?

      • Send emails directly via Cases module

        Greetings all, The ability to send emails from the Cases module, which users have been eagerly anticipating, is now available, just like in the other modules. In Zoho CRM, Cases is a module specifically designed for managing support tickets. If your organization

      • Webinar Alert: Supercharge landing pages with data insights | Zoho LandingPage

        Every visitor to your landing page leaves behind valuable data, but are you leveraging it to improve conversions? Join our expert-led Landing Page Analytics webinar to learn how to track, analyze, and optimize landing page performance with Zoho LandingPage’s

      • Bulk Deletion of Zoho Projects Using Node.js and Zoho Projects API

        Zoho Projects currently does not provide a built-in option to delete multiple projects in bulk from the UI. When working with testing environments or large numbers of temporary projects, deleting them one by one becomes time-consuming. To address this,

      • Show unsubscribed contacts ?

        Hello, I would like to display the unsubscribed contacts. Unfortunately, I do not have this subscription type as described in the documentation (https://help.zoho.com/portal/en/kb/marketing-automation-2-0/user-guide/contacts/contact-management/articles/subscription-type-24-1-2024#Subscription_Type_field.)

      • Track Marketing Automation Campaigns in Zoho CRM

        Hello, I've been searching but haven't found the exact answer to this question. I am looking to track Marketing Automation email campaigns and activities inside of Zoho CRM. Use Case: Action: Prospect Submits A Lead Form Outcomes: Prospect created in

      • Validation rule for Date field

        The condition settings for a Date field are are absolutlly usless. Conditions can only be set for a specific date, which is logically ineffective in most cases. When setting a condition for a Date field, users usually need to compare the value relative

      • Easily map shift data fields during user imports

        Greetings all, You can now include all your shift-related data for your users without any hassle during user imports. With this enhancement, the Map Import Fields to Zoho CRM option includes all shift-related fields: Current Shift, Next Shift, and Shift

      • Unable to send

        Hello, I am unble to send any single email during the whole time due to the Zoho IP 136.143.188.16 being bloked by SpamCop.net Please help can somebody help me?

      • How do you arrange order in which the speakers are listed in a session once they have been selected?

        Probably another simple thing I've missed but I can't find how to arrange the order in which the speakers are listed in a session once they have been selected. We usually want the speakers listed alphabetically by last name, but sometimes not. Once the

      • Product Updates in Zoho Workplace applications | February 2026

        Hello Workplace Community, Let’s take a look at the new features and enhancements that went live across all Workplace applications for the month of February. Zoho Mail Organize Personal Notes with Collections You can now create collections under My Personal

      • Bank Feed shows redacted description numbers (xxxx)

        Hi All, Is there any way to change this behaviour? Either Zoho or Yodlee is redacting important numbers from the transaction description, preventing us from being able to easily recognise and reconcile transactions. For example, a transaction with a description

      • Introducing note actions and dynamic visibility in Kiosk Studio

        Hello all, We are introducing enhancements to Kiosk Studio that will improve the product scope and meet your custom needs more precisely. What's new? Add notes as Actions: You can add notes to CRM records as kiosk Actions, as well as insert merge fields

      • Regarding the Recipient Email change

        I was not being able to change the Recipient email. Kindly resolve the problem

      • Request to Customize Module Bar Placement in New Zoho CRM UI

        Hello Support and Zoho Community, I've been exploring the new UI of Zoho CRM "For Everyone" and have noticed a potential concern for my users. We are accustomed to having the module names displayed across the top, which made navigation more intuitive

      • kanban view for client portal

        Are kanban views an option for client portals? Access to Kanban views in the client portals would solve some mobile-compliant issues I have with the UI. Kanban functions very nicely on mobile and would be a super asset for my clients and vendors as they

      • 【Zoho CRM】サンドボックスのアップデート：メール送信トレイ機能の追加

        ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 CRMのサンドボックス（テスト環境）にメールの送信トレイ機能が追加されました。 本番環境でメール配信の前に、サンドボックスで送信される全てのメールを確認・検証できます。ワークフロー、承認プロセス、一括送信など、あらゆる送信パターンに対応しています。 「メールの送信トレイ」機能を使うと、顧客へ送信する前にメールの内容を事前確認できます。項目の欠落や書式の乱れなど、あらゆる問題をサンドボックス内でチェックできるため、本番環境でのトラブルを未然に防ぐことに役立ちます。

      • Force mandatory entry on one of two fields on Contacts

        We are finding our users aren't always entering a phone number or email address of a contact. We would like to make these fields mandatory but realize they won't always have both pieces of information, but should at least have one. Is there a way to make

      • How can I prevent having recepients from being added as contacts in Zoho Desk?

        How can I prevent having recepients from being automatically added as contacts in Zoho Desk? There's no option to disable this.

      • Agent Concern

        would like to ask the difference between an agent and a light agent. can a light agent close a ticket. thank you.

      • Train Zoho Answer Bot Based on Customer

        Hi all, Is it currently possible to mark Help Centre articles to a specific customer, and restrict the answer bot to only use relevant information if it is either marked as "General", or tagged for the specific customer in question? We currently have

      • Non-depreciating fixed asset

        Hi! There are non-depreciable fixed assets (e.g. land). It would be very useful to be able to create a new type of fixed asset (within the fixed assets module) with a ‘No depreciation’ depreciation method. There is always the option of recording land

      • An internal server error occurs when attempting to upload the FCM Credential (JSON) to enable push notifications

        When I go to the Push Notifications Configuration section of the SalesIQ dashboard and try to upload an FCM credential file, a server error appears.

      • Errorcode 554

        Hello, I am unble to send any single email during the whole time due to the Zoho IP 136.143.188.16 being blocked by SpamCop. Please can somebody help me?

      • Spamcop

        Have been trying to email several of our clients and many of our emails keep getting bounced back with an error that states: ERROR CODE :550 - "JunkMail rejected - sender4-op-o16.zoho.com [136.143.188.16]:17694 is in an RBL: Blocked - see spamcop.net/bl.shtml?136.143.188.16"

      • Will Zoho Search work with Zoho Learn

        Currently, Zoho Search only works with Zoho Wiki which will be phased out.  Moving forward, will Zoho Search be enabled for Zoho Learn? Thanks.

      • Next Page