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

    • Why can't I see images uploaded by other users in the Library for Campaigns

      We are several users of zoho Campaign. I have uploaded visuals of our company, but my team members can't see them.

    • zoho sheet stuck

      I Need help. ZOHO sheets stuck on the loading screen. I've already deleted the system cache and cookies of my browser (google chrome) but it's still not opening. 

    • Tip of the Week #78 – Cut response time with multichannel shared inboxes

      If you’ve ever felt your team juggling between multiple email accounts, social pages, and chat apps just to reply to customers, you’re not alone. Managing conversations in multiple channels can quickly turn messy. Important messages across inboxes, replies

    • Need a way to run a client script longet than 10 seconds

      By The Grace of G-D. Hi, Currently, Client Scripts are Timing out at 10 seconds. We have complex logics that needs more time. Can you add a feature request to increase the timeout?

    • FSM Improvement Idea - Show an Import button when there is no data

      I am setting up FSM for a client and I noticed that there is no option to import data, see screenshot below. Even when you click Create Contact there is only an option to Import from Zoho Invoice. It is only after you add at lease 1 record that the Import

    • UI Improvement - Ability to Collapse Flow

      The UI for Flow is generally pretty good. However, when multiple decision trees are used, the layout can get pretty convoluted and hard-to-follow (see one of my Flows below): In these cases, even the auto-arrange fails to make this something that a normal

    • Tasks Statuses

      Hi, The task status "Completed" is a final status which closes the task. We need to have a status "Cancelled". However, when the status is set to "Cancelled", the task prompt still has a blue button to Close Task. When the customer clicks that and closes

    • Add Lookup Field in Tasks Module

      Hello, I have a need to add a Lookup field in addition to the ones that are already there in the Tasks module. I've seen this thread and so understand that the reason lookup fields may not be part of it is that there are already links to the tables (

    • Create New Tasks Layout in CRM

      I am able to do this in Leads, Contacts, Meetings, Calls - every other module, but cannot create a new layout in tasks. I have the appropriate access but it's simply not appearing as an option. Only "Standard" option shows. Please help!

    • Using IMAP configuration for shared email inboxes

      Our customer service team utilizes shared email boxes to allow multiple people to view and handle incoming customer requests. For example, the customer sends an email to info@xxxx.com and multiple people can view it and handle the request. How can I configure

    • Auto-sync field of lookup value

      This feature has been requested many times in the discussion Field of Lookup Announcement and this post aims to track it separately. At the moment the value of a 'field of lookup' is a snapshot but once the parent lookup field is updated the values diverge.

    • Zoho Recruit Subscription

      Hello Zoho Recruit Team, Good day! I would like to inquire about your recruitment subscription plans and would also like to verify the current subscription our company is enrolled in under Zoho Recruit. Thank you, and I look forward to your response.

    • Is it possible to create a meeting in Zoho Crm which automatically creates a Google Meet link?

      We are using Google's own "Zoho CRM for Google" integration and also Zoho's "Google Apps Sync" tools, but none of them provide us with the ability to create a meeting in Zoho CRM that then adds a Google Meet link into the meeting. Is this something that

    • Automatic Portal invite

      We have numerous customers we move through a blueprint in deals, when they get to a certain point we need to give them portal access, how can this be done through deluge or a workflow? Latest Update (December 2025): The option to automate portal invitations

    • Marketer's Space: Why mobile optimization deserves a place in your email strategy

      Hello Marketers, Welcome back to Marketer's Space! Today, we'll talk about the importance of creating mobile-friendly email designs. While mobile phones were once used only to make phone calls, today they're used for almost everything, including texting,

    • Enhancements in Canvas

      Dear All, Greetings! Canvas lets you design the record details page to suit your brand or business preferences. We are glad to introduce the following enhancements to uplift your design experience. Reusable Components Style Presets Let's go! Reusable

    • Introducing Dark Mode / Light Mode : A New Look For Your CRM

      Hello Users, We are excited to announce a highly anticipated feature - the launch of Day, Night and Auto Mode implementation in Zoho CRM's NextGen user interface! This feature is designed to provide a visually appealing and comfortable experience for

    • ABN with Legal Entity Name

      Hi, How can I execute this? The ABN number is entered in Accounts Module and ideally, it should display or suggest the correct Legal Entity Name based on the ABN lookup. ex. Account Name: JPG Resources ABN Number: 65 067 761 871 Legal Entity Name: (auto

    • Issue: Ticket Export Does Not Include Ticket Threads

      Dear Zoho Desk Support Team, I hope you’re doing well. I wanted to bring to your attention that the current ticket export feature in Zoho Desk does not seem to include the ticket threads or conversation history. When exporting tickets, only the summary

    • Pushover Notification Module

      Hello, it would be good if there would be a "Pushover" (https://pushover.net/) module besides the standard SMS module. Pushover is now very well known, especially in IT, and is becoming more and more popular. The biggest advantage are the customizable

    • Forward - no Ticket Number

      Hello, when I send an email to Zoho Desk via Reply or Reply All, the ticket number is in the subject line. But if I use forward then not. Is there an option to change this? We often forward e-mails and a reply to this will of course create a new ticket

    • Checkout: Adding Images

      Hello everyone, I’m trying to add a small GoGreen logo in the shipping section of the checkout to promote our sustainable shipping. While I can insert text without any issues, it seems that adding images is not supported in this area. Is there currently

    • [solved] #original_sender trick not working for us

      Hello community ! We really like DESK.. it's working like a charm for us but I have a request. Some users are sending emails personnaly to me (instead of using the support adress).. and I saw there was a possibilty to use : #original_sender {mail@mail.com}

    • SalesIQ Chat Notifications

      I am the admin of our salesIQ implementation. About two weeks ago, I started hearing/seeing notification for ALL chats messages from monitored agents/chat participants. I don't need to see these, we have a manager who deals with this. I can't stop the

    • Correlated subqueries not supported in Zoho Analytics. This creates huge limitations

      Running into a major limitation in Zoho Analytics: correlated subqueries simply don’t work, even in completely standard SQL patterns inside a JOIN. Example: LEFT JOIN "Bills" b ON d."Id" = b."Deal ID" AND EXISTS ( SELECT 1 FROM "Bill

    • Batch Emails in CRM Plus without using a template?

      Hi guys. Is it possible to send the same email to multiple people at the same time within CRM Plus without using an email template? At the moment we create a custom view in Contacts to display the people that we need. We then click the boxes on the left, and click 'Send Mail', but always need to select a template. Sometimes its better to write a quick one off message, without needing to set up a template first. Thanks.

    • bank charge

      a charge to my account was made that I did not authorize, of $16.46, for something that looks like "computer maintenance or something to that matter". please refund.

    • [Free Webinar] Product Updates: Quick Catch-Up Session - Part II - Creator Tech Connect

      Hello Everyone! We welcome you all to the upcoming free webinar on the Creator Tech Connect Series. The Creator Tech Connect series is a free monthly webinar featuring deep-dive technical sessions designed for developers, administrators, and app builders.

    • Introducing Liquid Glass UI on the Zoho Mail iOS app

      Hello everyone! We're excited to announce that the Zoho Mail app is now fully optimised for iOS 26's Liquid Glass design on both iPhone and iPad! The updated interface features transparent layers, smooth animations, and refined visual elements that enhance

    • Plan change from Zoho One to Zoho Workplace

      Hello Zoho, Following the recent pricing update for Zoho One, we are interested in transitioning to Zoho Workplace products. Please inform us about the necessary steps for this process so we can proceed promptly. Kind regards,

    • Links in Instagram

      Hi there, I have been using Later for a while now but keen to come back to Zoho Social as Later doesn't offer tagging of pages on Facebook but they offer something Zoho doesn't. You can add a link to your bio which opens up your profile feed where images

    • Spotlight #7 - Automatic Transitions in Blueprint

      Previously, records could not be moved from one state to another without user intervention. With automatic transitions, move records from one state to another automatically, when it elapses its pre-defined time. This Spotlight discusses how automatic

    • Sub Folders

      It would be great if there could be sub-folders in reports. We have a ton of individual reports and folders that would be easier to navigate this way 

    • Zoho CRM Community Digest - November 2025 | Part 2

      Hello Everyone! Second half of November brought several exciting updates, especially around Zia, making AI assistance smarter, faster, and more context-aware. We also feature engaging community snippets highlighting members who went the extra mile to

    • Zoho CRM - Writing Assistant Tone

      Hi Zoho CRM Team, Text in my emails often gets underlined in yellow because I tend to use a more informal tone with my client's, like using "I'm" instead of "I am". Is there some way for me to tell the system that this is my preferred writing tone, so

    • Hide Contact Number for Field Users & Agents

      Is it possible to hide the contact number in both the Service Appointment and Work Order modules for field users and agents? The agents are using the Zoho FSM mobile app, and we want to restrict them from viewing the contact number.

    • Form Submission Emails

      Is there a current delay with submission emails being sent? We've had 10-20 forms completed today but only a handful of emails.

    • Subform edits don't appear in parent record timeline?

      Is it possible to have subform edits (like add row/delete row) appear in the Timeline for parent records? A user can edit a record, only edit the subform, and it doesn't appear in the timeline. Is there a workaround or way that we can show when a user

    • 【Zoho CRM for Everyone】設定画面のアップデート

      ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 今回は「Zoho CRM アップデート情報」の中から、Zoho CRM for Everyone の設定画面のアップデート情報をご紹介します。 目次 設定ホーム画面の追加 設定画面での検索結果の表示形式の変更 設定画面でのよく使用する機能の表示 設定メニューの展開/折りたたみ状態の保持 1. 設定ホーム画面の追加 ホーム画面の設定項目は、直感的に分類できるように"カテゴリごと"で分けられています。 このような一元化された表示により、各ツールが1つの画面に集約され、必要な機能をより簡単に見つけられるようになりました。

    • What's New - November 2025 | Zoho Backstage

      A new month, a new set of updates. With a mix of new features and thoughtful improvements, you get smoother workflows and better control across registrations, exhibitors, and communications. Let's take a look at what's new and enhanced in Zoho Backstage

    • Next Page