Client Script support for Canvas Forms

Client Script support for Canvas 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 Assist

          Hi, We are using zoho assist unattended access in some windows server 2012 and recently the agent lets you connect but not let you do anything on the remote machine. Sometimes you can click on something but nothing happens. There's a issue with this new

        • Zoho CRM Webinar – Automate everything across Customer Journeys in CommandCenter 2.0

          How efficient is your current CRM automation setup? As customer journeys become more dynamic, it's common for data and actions to get scattered across teams and modules. This leads to broken processes and inconsistent customer experiences—especially across

        • Experience effortless record management in CRM For Everyone with the all-new Grid View!

          Hello Everyone, Hope you are well! As part of our ongoing series of feature announcements for Zoho CRM For Everyone, we’re excited to bring you another type of module view : Grid View. In addition to Kanban view, List view, Canvas view, Chart view and

        • Modify workflow from "ON CREATE & EDIT" to "ON CREATE" only

          Salut, Is there a way to easilly change my choice of trigger of workflow from on create & edit to on create only, or do I have to re-do the whole worklow from scratch ? Sylvain

        • Access custom modules via API?

          Is it possible to access a custom module in Zoho Inventory via the API? I can not find any reference to this in the API docs.

        • Welcome to the Zoho Service Plus community

          Hey everyone, We are excited to welcome you to be a part of the Zoho Service Plus community. Here's a quick overview of what Service Plus is all about and how the community can help us work together. What's Zoho Service Plus? Zoho Service Plus is a unified

        • 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

        • Restrict Zoho Cliq Webinars and Announcements to Admins Only

          Hi Zoho Team, We hope you're doing well. We would like to raise a feature request regarding in-app announcements in Zoho Cliq, such as the recent webinar popup about the Cliq Developer Platform: While these announcements are useful, they are not always

        • Track ZohoForm Conversion using Postmessage event

          Hi, I’ve been using a third-party lead tracking tool to capture leads from my website along with their source. Earlier, with the HubSpot form, the third-party script was able to detect the postMessage event that iframe forms typically send back to the

        • 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".

        • Share Notebook with group created in Zoho One

          I have created a group in Zoho One for a section in my company. Is it possible to share a notebook with that Zoho One Group? Currently, it seems only possible to share to emails. Unfortunately for large teams, this will mean we are constantly having to

        • Backorder For Composite Items

          Hello If i released SO for composite item and use backorder feature of zoho inventory then it should backorder child item items of composite and not composite item.This is basic of backordering.I conveyed this to zoho call center but no solution yet.

        • Create Tasks in arbitrary Zoho Project triggered from CRM [Zoho Flow]

          Community, hello What I'm trying to do is to create a Zoho Project when a Deal is created in CRM and then to be able to add tasks to this Project also from Zoho CRM with the trigger (Blueprint/ Workflow). I succeeded in creating Project using Zoho Flow,

        • Zoho Sheet - Desktop App or Offline

          Since Zoho Docs is now available as a desktop app and offline, when is a realistic ETA for Sheet to have the same functionality?I am surprised this was not laucned at the same time as Docs.

        • not able to access Zoho from home WIFI

          for some reasone i am not able to access Zoho on my laptop or my iphone while i am connected to my home Wifi, i am able to access these sites both on laptop as well as Iphone and associated apps on any other Wifi as well as when I am on my 4G connection

        • Multi-Select lookup field has reached its maximum??

          Hi there, I want to create a multi-select lookup field in a module but I can't select the model I want the relationship to be with from the list. From the help page on this I see that you can only create a max of 2 relationships per module? Is that true?

        • Outlook Add-in security times out needs to login 10 times a day

          hi we've just switched the Zoho. We use Azure SSO. All users have stopped using it. Sometimes it asks every 5 minutes. What should I lot at to solve this?

        • Simplify Zoho API integration with Deluge’s invokeAPI task

          Hello all! Happy New Year! As we kick off 2025, we’re excited to share some of the latest updates to enhance your Deluge experience. While Deluge already offered robust API integration capabilities, we’ve taken it to the next level with the introduction

        • Simplify Zoho API integration with Deluge’s invokeAPI task

          Hello all! Happy New Year! As we kick off 2025, we’re excited to share some of the latest updates to enhance your Deluge experience. While Deluge already offered robust API integration capabilities, we’ve taken it to the next level with the introduction

        • Attention: Display Issues on Chromium Browsers with Intel® Core™ Ultra Processors

          Dear Customers, We've recently identified a display-related issue that may affect some of our Zoho Assist users, particularly technicians using devices powered by Intel® Core™ Ultra Processors. What’s Happening? If you're running a Chromium-based browser

        • [WEBINAR] Smooth year-end closure with Zoho Books (KENYA)

          Hello there, This webinar is for all Kenyan businesses looking to wrap up their financial year smoothly! Join our free session to learn how Zoho Books can simplify your year-end process. What to expect from this webinar: - All the latest updates in Zoho

        • Is the "schedule 10 mass emails/module" limit a per user or per organization limit?

          For scheduling emails out of Zoho CRM, there is a 10 scheduled mass emails per module limit according to Zoho documentation (https://help.zoho.com/portal/en/kb/crm/faqs/emails/articles/how-to-schedule-mass-emails-in-zoho-crm). Is this limit per user or

        • How do I show file uploads in my Zoho Creator approval workflow?

          As far as I can tell I'm not able to add the file upload field to the approval workflow show fields list. As a work around I'm making a plain text field that links to the files URL. But I'm not sure how to get a link to that url that will me to preview

        • Kaizen #194 : Trigger Client Script via Custom buttons

          Hello everyone! Welcome back to another interesting and useful Kaizen post. We know that Client Scripts can be triggered with Canvas buttons and we discussed this with a use case in Kaizen#180. Today, let us discuss how to trigger Client Script when a

        • Zoho Payroll US?

          Good morning, just reaching out today to see if there's any timeline, or if there's progress being made to bring Zoho Payroll out to be available to all states within the USA. Currently we're going through testing with zoho, and are having issues when

        • Zoho Bookings - variable appointments

          Hello, I am looking to see if its possible for zoho bookings to recognise booking slots in the calendar or a way to do this. I would like appointments only booked in at certain times of the day and this could vary per host. I have provided a calendar

        • Ability to add notes to an appointment and add notes/attach docs to a consultation

          As an idea for the future, it would be helpful to be able to add notes to an existing appointment--there is a place to add notes for the customer, but I don't see one for the appointment. It would also be helpful to be able to add notes or attach documents

        • Limited review (/questions) for Bookings 2.0

          Hi all, I'm writing this review of Bookings 2.0 for two reasons: 1) it may be of interest to others, and 2) I'd like to be corrected if I'm wrong on any points. It's a very limited review, i.e. the things that have stood out as relevant, and particularly

        • Zoho Books | Product updates | June 2025

          Hello Users, We’ve rolled out new features and enhancements in Zoho Books, from the option to record advances for purchase orders to dynamic lookup fields, all designed to help you stay on top of your finances with ease. Introducing Change Comparators

        • Best Practices - Extensions for Zoho Finance Suite

          With Sigma, the extension developer platform, you can create custom extensions that enhance the functionality of Zoho Finance apps like Zoho Books, Zoho Billing, Zoho Inventory, Zoho Expense, and Zoho Invoice. Here’s how to get started: Sign up: Create

        • MS Teams Meeting to Zoho CRM

          Has anyone figured out a good way to push MS Teams meeting info on a trigger of "meeting end" to Zoho CRM? We're looking for a way to take attendees of a meeting and meeting duration and push it into Zoho CRM after the meeting has ended. If I can just

        • QR code image is not exported in PDFs

          The new QR code field works fine when I include it in a report template and I choose the print option: https://creatorapp.zoho.com/<username>/<app_link_name>/record-print/<report_link_name>/<record_ID>/ But when I try to save the document to a .pdf file

        • Zoho Form to Zoho Form Integration

          I've created an application form that asks for references. I would like the submission of the application form to trigger a form to the reference using the email id and name entered in the first form. In the reference form that is triggered I need to

        • Get Workflow Metadata via API

          Is there a way to get metadata on workflows and/or custom functions via API? I would like to automatically pull this information. I couldn't find it in the documentations, but I'm curious if there is an undocumented endpoint that could do this.

        • CRM: related table using module queries, are links possible?

          Hello. I was exploring the possibility of using a module query to get a filtered related list. For example, I'm using a Canvas custom details page and if an account has an open deal I'd like it to appear at the very beginning of the account page, with

        • Tracking Emails sent through Outlook

          All of our sales team have their Outlook 365 accounts setup with IMAP integration. We're trying to track their email activity that occurs outside the CRM. I can see the email exchanges between the sales people and the clients in the contact module. But

        • Posibility to add Emoticons on the Email Subject of Templates

          Hi I´ve tried to add Emoticons on the Subject line of Email templates, the emoticon image does show up before saving the template or if I add the Emoticon while sending an Individual email and placing it manually on the subject line. Emoticons also show

        • Introducing Assemblies and Kits in Zoho Inventory

          Hello customers, We’re excited to share a major revamp to Zoho Inventory that brings both clarity and flexibility to your inventory management experience! Presenting Assemblies and Kits We’re thrilled to introduce Assemblies and Kits, which replaces the

        • Global Sets for Multi-Select pick lists

          When is this feature coming to Zoho CRM? It would be very useful now we have got used to having it for the normal pick lists.

        • Im trying to white list domain dynamically in zoho desk extension

          Im trying to white list domain dynamically in zoho desk extension. But it show error Error: {errMsg: 'No entry found in plugin-manifest whiteListedDomains for requested URL'} syntax "config": [ { "displayName":"Shopify Admin API access token ", "name":

        • Next Page