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

    • Unable to invite contacts

      Hi! I'm unable to invite contacts as end-users from my trial account. The green pop-up displays "Invited succesfully" but the email never arrives, nor the re-invitation - even though it's "sucessfully" as well. Tried with several e-mail accounts, even

    • Enable Full Theme Editor for Help Center (Disable Express Builder)

      Dear Zoho Support, We are currently using the Elegant theme in Zoho Desk Help Center, but we only have access to the limited Express Builder. We would like to switch to the full Theme Editor to be able to: Access Language Strings Edit all pages (HTML/CSS/JS)

    • 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

    • Zoho Desk - account and contact lookup by phone

      Hi team, Does Zoho Desk allow to lookup Accounts and Contacts by phone or not? I am using this endpoint- GET https://desk.zoho.eu/api/v1/accounts/search?phone=987-654-3210 But I am getting this error- { "errorCode": "UNPROCESSABLE_ENTITY", "message":

    • Add picklist in subform lookup

      Hello, I am trying to rewrite a script that works on a from as parent form, to the same form when is is a subform. Here is what I did in the form itself : RefCat = Offre_de_produits.distinct(Categorie_OFFRE); clear Categorie_LIGNE; for each Record in

    • Way to export / import a Flow between different accounts?

      Hi, I developped some flows in my account and see that for some other organisation I'm working with, they would need the same or similar flows. Is there a way for me to export one flow from one account and import it to another ? This would be handy, as

    • Setting admin only field values in widget

      Hello If I'm using a Widget addRecord function invoked by a user input (the user has write permission not developer) can he set values to a field that is set to be visible to Admin only?

    • Exclude Segment from Campaign Recipients

      I've created two Segments in order to separate Non-Marketing Contacts from Marketing Contacts. I'd like to send an Eblast to all Marketing contacts in my lists, but when I go to select Recipients, I have two options: 1. To Choose Lists to Send to; 2.

    • Option to Delete Chats in IM

      Currently, there is no option to delete any chats in IM, regardless of their source.

    • Installing EMAIL Setup in New Domain

      Respected Support team, I'm facing an issue with cloudflare in Pakistan, I want to setup Zoho Mail Setup but I Don't know how to enable Zoho mail setup without cloudflare. My Website https://stumbleguymod.com/ is using CF, and I want a different Zoho

    • Stop completed task lists from disappearing?

      Is there any way to stop projects from making tasks lists disappear when all the tasks in the list are completed? That's one of those little things where we're constantly fighting the product. For instance we have some projects which are ongoing - no start and end date. We use Kanban view to show the various task lists. We don't want the kanban list to disappear every time the items on it happen to be closed out. Thanks

    • Adding Coloured Picklist Based On Email Body Text

      Hey All, So i am having this problem, Im currently trying to automate a coloured picklist so that when the body of an email contains a specific word it will assign one of my coloured picklist i have created automatically, But it appears this only works

    • Automation #11 - Auto Update Custom Fields with Values from Emails

      This is a monthly series designed to help you get the best out of Desk. We take our cue from what's being discussed or asked about the most in our community. Then we find the right use cases that specifically highlight solutions, ideas and tips to optimize

    • Email notification for followers

      Is there a way to enable email notification for followers of a support ticket? ie: Ticket #123 is owned by Agent#1, Agent#2 adds themselves as a follower. Whenever ticket #123 receives an email from the customer, Agent#1 receives an email. Agent#2 would

    • Unified WhatsApp Number Management in Zoho Desk and SalesIQ

      Dear Zoho Desk Support Team, We are currently utilizing both Zoho Desk and Zoho SalesIQ for our customer support operations. While both platforms offer WhatsApp integration, we are facing challenges due to the requirement of separate WhatsApp numbers

    • Zoho Desk is extremely slow

      Hi Team, We are facing extreme latency issue with Zoho Desk. It is currently unusable. I have submitted a ticket already could you please look into this asap. Regards, Priya Sharna

    • Zoho Desk is extremeley Slow

      Hi, Zoho Desk seems to be extremely slow for the last 15 mins for everyone in our team (5 people). https://status.zohocloud.ca/ didn't show any status in this regard. Would it be possible to have an idea what is happening and when this should be resolved?

    • Help Centre - Widget or Tab for Customer Downloads

      USE CASE: We are a software vendor, using Zoho Desk (as part of a Zoho One subscription) to help mange support issues from our customer base. Customers can log tickets via email or Help Centre portal. QUESTION: I need to provide the capability for our

    • Integración Books para cumplir la ley Crea y Crece y Ley Antifraude (VeriFactu)

      Hola: En principio, en julio de 2025, entra en vigor la ley Crea y Crece y Ley Antifraude (VeriFactu). ¿Sabéis si Zoho va a cumplir con la ley para cumplir con la facturación electrónica conectada a Hacienda? Gracias

    • How to let only account-bound products visible to users

      Hello friends, I'm trying to leave only the Products linked to the accounts visible to Zoho Portal users. If the user clicks "All Products," they can open tickets incorrectly for products that do not belong to the account that are registered. Is it possible

    • Work Orders / Bundle Requests

      Zoho Inventory needs a work order / bundle request system. This record would be analogous to a purchase order in the purchasing workflow or a sales order in the sales cycle. It would be non-journaling, but it would reserve the appropriate inventory of

    • Try CRM for everyone button in the way of workflow

      Please consider using the bottom bar for offers. Using the top bar for offers like "Try CRM for everyone" really gets in the way of my day to day workflow.

    • Markdown for Desk?

      Hi, my company wants to use markdown for formatting text in Desk (in all modules there, especially Tickets and Helpcenter). Zoho already offers use of markdown in several products (see https://help.zoho.com/portal/en/kb/backstage/microsite-guide/formatting-with-markdown/articles/formatting-with-markdo)

    • Limits on workflow never disclosed, not documents and now being applied. I feel scammed and there is no reply for support.

      Hello everyone, I’m facing a critical issue with Zoho Recruit and would appreciate any insights from fellow users or someone from Zoho. For months, I’ve been receiving daily emails stating that I have reached the maximum workflow custom functions limit.

    • Variables in Zoho Mail Signatures defined by Administrator

      Good afternoon, I'm looking at the Admin component of Zoho Mail, and I see we have the capability to define signatures for end users. We also have the ability to associate with multiple email addresses. Are we able to use any variables such as [FirstName}

    • Invoice status on write-off is "Paid" - how do I change this to "Written off"

      HI guys, I want to write off a couple of outstanding invoices, but when I do this, the status of the invoices shows as "Paid". Clearly this is not the case and I need to be able to see that they are written off in the customer's history. Is there a way

    • report on lead status history in zoho crm

      I have enabled the lead status history. I want to understand how many days a lead is waiting in which stage and the number of leads vs. stage history, like 0 days, 1-4 days, 5 days above, and 10 days above.

    • Cannot send a Campaign. No Send or Proceed button

      I have built a Campaign. I had to drop Leads and only use Contacts because only one group can sync. But now I do not see any errors but I do not see anyway to proceed with sending the campaign?

    • Default Lookup Field Value based on Picklist

      How do I change a lookup field value based on another field's value, while creating/editing a record using form? I have a picklist of different types of Loans. For example: PPP, EDIL, Term, etc. When I create a record using the form, if I choose PPP from

    • Accounts module not displaying in Campaigns sync

      When syncing CRM to Campaigns, I can only sync Leads and Contacts. Accounts module is setup and not sure why I can't select it. I won't be able to make segments for all our email campaigns. What is the resolution?

    • Trouble fetching custom fields from Zoho Booking

      I'm following the instructions from here : https://help.zoho.com/portal/en/kb/flow/user-guide/app-specific-documentation/articles/zoho-bookings#1_Problem_with_accessing_custom_fields But I can't get this to work. Here is the result of a test booking :

    • Missing Date Field Type Blocking VAT Calculations in Custom Zoho CRM Module

      I'm working on a custom VAT calculator within Zoho CRM where I need to store the purchase date of a product and calculate VAT based on that date, since VAT rates can vary over time. However, while creating custom fields, the only available data type is

    • Different Page Numbering

      I want the page numbers not just 1,2,3... but i,ii,iii,iv,... or even I,II,III,IV.... How can I do this?

    • Remote Control Functionality During Screen Sharing in Zoho Cliq

      Hello Zoho Cliq Team, We would like to request the addition of remote control functionality during screen sharing sessions in Zoho Cliq. Currently, while screen sharing in Cliq is very useful, it lacks the ability for another participant to take control

    • How to validate Rich Text in Zoho Creator! Urgent!

      Hi members, Recently I just started to use Rich Text field. Now I have a requirement where I need to validate to ensure this Rich Text field must contain a value. Meaning must contain something. I use the below script if(input.Rich_Text == null) { alert

    • Real-Time Screen Annotation During Zoho Cliq Screen Sharing

      Hi Zoho Support Team, Hope you're doing well. We’d like to request the addition of real-time screen annotation tools during screen sharing sessions in Zoho Cliq video calls. 🔍 What We're Looking For: The ability for the presenter—and optionally, other

    • Simplify ticket replies with intelligent writing and content analysis tools

      Introducing a smarter, faster way to handle ticket responses with generative AI-powered capabilities, now available in the ticket detail view. These enhancements are designed to reduce agent effort, improve clarity, and elevate the overall support experience.

    • Zoho Books - Feature Request - Show Custom Template Preview

      When using a custom template is would be a great user experience if the custom template could be previewed when viewing the record. I have found that it's very confusing for users, when they see an invoice preview but the out put file is different. Additional

    • run a macro on a contact that bounced from crm email merge

      how would one run a macro on a contact that bounced from crm email merge? how would i tell zoho to run a macro that SIGNALS said bounced?

    • Workflow : Update a multiline text field

      Hello, I'm creating a workflow to update a multiline text field. But it looks like I only can format my text as a one-line. How can I format the text to multiple lines ? Thanks

    • Next Page