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

    • Task List Workflow Rule

      I'm having an issue when creating a workflow rule to notify customers by email of the project progress. I need the criteria to be TASK LIST STATUS not just task status. I don't want our customers getting too many email notifications throughout the project,

    • Using Zoho for Quarterly Forecasts and Tracking Sales

      Hi, I'm trying to set up Zoho to be useful for our company, and am finding it exceedingly difficult. We sell inexpensive products directly to a large number of accounts. All I want to do is to be able to make quarterly sales estimates, then track how

    • Presenting the brand new Zoho Bookings!

      Hello everyone, Greetings from Zoho Bookings! We're happy to announce a new version of our product with enhanced features to simplify scheduling, coupled with a sleek interface and improved privacy across teams. Here's what you can expect from the latest

    • Presenting ABM for Zoho CRM: Expand and retain your customers with precision

      Picture this scenario: You're a growing SaaS company ready to launch a powerful business suite, and are looking to gain traction and momentum. But as a business with a tight budget, you know acquiring new customers is slow, expensive, and often delivers

    • Auto-Generate & Update Asset Serial Numbers using a custom function (Assets Module)

      Hello Team, I’ve been working on a script to automate one of our processes in Zoho FSM, and the core functionality has been successfully implemented. However, I’m encountering an issue related to serial number allocation, which is not working as expected.

    • Adding Sender Address with Basic Plan

      According to the knowledge base, I should be able to add Sender addresses with the Basic Plan. But whenever I try to add an email, it takes me to a search window and I cannot find any emails in the list. Even mine, which is the admin. email.

    • Create custom rollup summary fields in Zoho CRM

      Hello everyone, In Zoho CRM, rollup summary fields have been essential tools for summarizing data across related records and enabling users to gain quick insights without having to jump across modules. Previously, only predefined summary functions were

    • Relocating from Zoho Connect External to Zoho Connect Internal or Zoho CommunitySpaces... or move off of Connect completely.

      This conversation is aimed at Zoho clients that currently use Zoho Connect's External network platform. As I discovered in the comment section of another post, Zoho Connect is halting development of Zoho Connect EXTERNAL networks in favor of the new Zoho

    • Payment for product renewal

      Good morning, I am requesting your kind assistance to renew my subscription because when I try to make the payment I get this way

    • Como puedo mover un prospecto "Cliente" de modulo

      Tengo un modulo llamado Seguimiento de Ventaa y otro llamado Cierre de Venta. Que cuando se marca como venta efectiva o venta no efectiva, pase a Cierre de Venta, Esto sin duplicarlo "Que esten en ambos modulos" ,Como esta en una base de datos "Excel"

    • Email with uppercase letters causes problem with portal

      Hello, When my customers register on a form, if they use uppercase letters in their email adress it causes problem with the portal. When I send the invitation for the portal, all letters are automatically modified in lowercase by the system, and when

    • How to make Deal field required for "Standard" layout and hidden in "Customer Portal" Layout?

      How to make Deal field required in tge "Standard" layout and hidden in "Customer Portal" Layout?

    • Introducing Color and Order Preferences for Blueprint Transitions

      Blueprints exist to improve the efficiency of your company's processes and ensure compliance — but only if your users follow them promptly. More often than not, your users may find it challenging to adopt your processes and follow through on them, especially

    • The Status in Zoho Finance is inaccurate

      We have many overdue invoices, but when we try to filter it by Status Overdue in the Zoho Finance Module it shows it as none This is also creating a problem when I need to Create a Chart or KPI for overdue Invoices If I open the Invoice I can see the

    • Permissions within a sub-folder

      Hi all, I am interested to know if it is possible to remove a member from a subfolder, even if he/she is member of a folder of higher hierarchy. As an example, let's assume I add 5 members in folder X with Edit privileges and folder X has several sub-folders, let's say X1, X2, ...., X1.1, X1.2, ... In this case, all 5 members inherit the same privileges to all sub folders. Is it possible to go and change the privilege in one of the subfolders? So far, I have not managed to do it. thank you, Sofoklis

    • Workdrive - permissions inside folders

      Is it possible to set folder permissions inside team folders that are different to the main folder? My specific case is so that I can share a team folder with my sales team, to access shared docs, but have one folder per user that are shared only with

    • Hide subfolders in a team folder

      Hello, I am starting to use Zoho WorkDrive to manage files and I find the need to restrict access to a subfolder in the team folder for some users until all of the documents in it are ready to be printed. However, I do not want to create separate team

    • Introducing WhatsApp Marketing with Zoho Marketing Automation

      Dear Marketers, In the world of marketing, personalizing engagements with customers is often exhaustive but—thanks to WhatsApp—not exactly mysterious. WhatsApp has evolved from a simple messaging platform to a sophisticated tool for sending out marketing

    • How can I bulk import product images to Zoho crm.

      How can I import product images to Zoho crm within bulk imports. I am using an excel sheet or csv and want to include an image (via URL) for each product. This topic is the closest I have found to a solution but I need further help to implement it: https://help.zoho.com/portal/en/community/topic/import-file-upload-and-image

    • Rich-text fields in Zoho CRM

      Hello everyone, We're thrilled to announce an important enhancement that will significantly enhance the readability and formatting capabilities of your information: rich text options for multi-line fields. With this update, you can now enjoy a more versatile

    • Zoho Creator delete validation seems like does not support <br> html code

      Validation Workflow in Create or Edit, We can use this styling code eg: <br>, <b>, <u> Those very simple code in those validation (in Create or Edit) But, for Validation (In Delete) Zoho Creator seems like does not support it. The alert task just shown

    • Create Funnel to Track Email Outreach Conversion

      Hello, We would like to create a funnel that measures: N° of emails sent -> N° of emails opened -> N° of emails responded We would like to measure this email response conversion rate for each of our SDRs. We use the analytics tool of Zoho CRM and not

    • Data Model - CRM Adjusting size of Entity boxes

      (Sorry if duplicate, previous post seems to have disappeared.) I am viewing the Data Model for CRM, and while it is great to see such a model, there is an obstacle. Many of the entities show only a subset of their fields. The entity boxes have scrollbars

    • Mapping a new Ticket in Zoho Desk to an Account or Deal in Zoho CRM manually

      Is there any way for me to map an existing ticket in Zoho desk to an account or Deal within Zoho CRM? Sometimes people use different email to put in a ticket than the one that we have in the CRM, but it's still the same person. We would like to be able

    • Zoho CRM - Analytics: How Can I Set Monday as First Day of The Week?

      Hello, In the analytics section of our Zoho CRM (not Zoho Analytics), we would like to track our SDRs' outreach activity. However, it appears that Zoho CRM treats Sunday as the first day of the week for the "This Week" and "Previous Week" filters. How

    • CRM Hack #3: How to update formula functions for already created records.

      Hello everyone! It’s Wednesday and we are back with yet another hack.. I'm sure you've used formula fields to meet some requirements specific to your business. Let's consider an example each for external (customer-facing) and internal facing scenarios

    • Location functionality now deletes bundle information if changed

      With the introduction of Locations, we are experiencing several issues. 1. When bundling an item, the 'default' is to the organisation, not a location. This is not a significant issues, other than when you change the value, any batch tracking information

    • Improved RingCentral Integration

      We’d like to request an enhancement to the current RingCentral integration with Zoho. RingCentral now automatically generates call transcripts and AI-based call summaries (AI Notes) for each call, which are extremely helpful for support and sales teams.

    • Is Zoho Abandoning Zapier Integrations in Favor of Flow?

      I recently invested in a paid Zapier account to automate key parts of my Zoho workflows, but I’m hitting roadblocks. Zoho’s automation tool, Flow, clearly gets the lion’s share of development effort, and their Zapier connectors feel neglected. When I

    • Zoho Flow y subformularios de Zoho CRM

      Buenas tardes, En mi empresa vamos a empezar a usar los subformularios de zoho crm pero estos los voy a tener que rellenar con zoho flow ya que va a ser el encargado de rellenar dichos campos del subformulario. El problema es que a la hora de intentar

    • FSM Job Sheets data to CRM

      Hello, is there anyway of getting the data collected in the job sheets into the CRM. We are collecting inspection data which we were using zoho forms for but the job sheets in fsm seem like a lot better way to collect it but we need to be able to get

    • Bookmark order

      Hi all, We have a very big document/template that requires manual editing after doing a mail merge. To make this easier, I thought I would add bookmarks to navigate to the areas that will require editing. I thought these would be in order that they appear

    • Zoho Books | Product Updates | April 2025

      Hello partners, We’ve rolled out new features and enhancements to elevate your accounting experience. From FEC report to BillPay Add-on, these updates are designed to help you stay on top of your finances with ease. Export Transactions in Factur-X Format

    • Zoho Bookings API, timezone is not recognized when passed

      Has something changed? Time zone is being passed through API but it is NOT being recognized. response is not showing time zonetime that was passed through request. This is an URGENT issue as it is preventing bookings! Seems like this is due to a recent

    • Voicemail to Text Transcription

      Hello, We use the Twilio phone integration in Zoho Desk. When a voicemail is left, it creates a Ticket in Zoho Desk, and we are able to listen to the audio recording in the Ticket. My hope is to also have a voicemail-to-text transcription show up in the

    • Please don't remove the option to modify tax.

      Hi, I saw that the option to customize tax will be removed. This is VERY PROBLEMATIC for US companies who ship to different states because each zip code in the USA has its own tax rate for a single product. This is an awful idea. Please don't take this away.

    • Workflow to update the field "Deposit To" in Sales Receipt/Invoice

      After an invoice/sales receipt is created, I can't find a way to create a workflow that would update the field "Deposit To". Apparently, some other fields are visible in the workflow, but not the "Deposit To". Any insight?

    • payment gateway disabling in my ecommerce store

      hi i have disabled my payment gateway paytm from my website soigne from the backend but it is showing in my front end part when someone orders my products i want to remove it completelty so that it does not show in the front end part plz give me a suitable

    • Record GST Paid for Imported Goods

      In Australia, goods that imported from overseas needs to pay GST per invocied value. In most case, the freight forwader (logistic agent) paid this on behalf of importer (us), and invoice us in together in their freight invocie.  How do we setup a proper

    • subscribe email list for offer and updates is not working for zoho commerce

      my subscribing to email list is not working for offers and updates for my ecommerce website soignee it is saying please wait can anyone tell me the reason for this

    • Next Page