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


    Nederlandse Hulpbronnen


      • Recent Topics

      • I'm so confused by the new (?) look

        I've been off Notebook for a long time, neglecting the app and never visiting the website. I decided to renew my commitment to it. It looks completely different! When I logged on before (app or browser page) I'd see a very pretty display of my multiple

      • Custom CSS in Zoho Form

        Hi, Please let me know, how we can add custom css in Zoho Form.  Thanks

      • Deluge Script to Reopen Ticket if Tasks are not Completed

        I have the following script, my goal is to have it automatically reopen the ticket when the ticket is closed if there are Activities assigned to the ticket that are not "Completed". This script seems to reopen the ticket if there are any tasks at all,

      • Zoho Desk & Tasks

        Hi, I'd like to be able to create a set of tasks each time a customer request comes in, as I understand it, currently each would need to be create manually. Project is too much of an overhead for what we want to use. Effectively in various use cases we

      • Export all Zoho desk tickets for past 3 months

        Hi I need to export ticket data from Zoho Desk. Specifically, I'm looking to: Export the last 3 months of tickets⁠ include ticket categories, timestamps, resolutions, agent responses (basically as much data as possible) the ticket content being the most

      • Zoho CRM <> Zoho Desk Account Sync

        I have had custom fields in Zoho CRM for a time and would like that data to sync to Zoho Desk. However, since the accounts are all synced to Zoho Desk already, the newly mapped fields are not updating in Zoho Desk. Is there a way to force the sync to

      • Count Function in Zoho Table

        Hi Zoho Team, Hope you're doing well. We would like to request the addition of a Count function in Zoho Table, similar to what exists in Excel, Google Sheets, and Airtable. Currently, there is no built-in way to count the occurrences of unique values

      • Configuring ZMA Webhook for Zoho Flow : Missing Key Information Error

        I'm looking to send a webhook to Zoho Flow at the end of a Marketing Automation journey in order to perform more actions that I can't do with just a journey. I have the Webhook created in Flow and set up in ZMA, however when I test it I get the error

      • Zoho Billing Record Refund vs Refund

        When looking at a paid invoice, the payment record can be viewed. In the more actions, there is a "Record Refund" option. If you click the payment referernce you see a "Refund" option. They bring up different forms. It appears as if "Record Refund" is

      • Emoticons to Slack in Zoho Flow

        When using the Slack integration in Zoho Flow, is there a way to send emoticons in the message? When I tried :emoticon: it didn't translate it to the emoticon.

      • 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

      • Set connection link name from variable in invokeurl

        Hi, guys. How to set in parameter "connection" a variable, instead of a string. connectionLinkName = manager.get('connectionLinkName').toString(); response = invokeurl [ url :"https://www.googleapis.com/calendar/v3/freeBusy" type :POST parameters:requestParams.toString()

      • How to set default filter to CRM integration field

        I have a products subform in my order form and I'm using the CRM integration field to connect the Products module from my CRM to this subform. I want to filter the data that is fetched to the field from the CRM based on a status field in the Products

      • Restore Report in Zoho Creator After Changing Report Type

        I created a report in Zoho Creator and have been using it regularly. While editing, I accidentally changed the report type, and all the fields disappeared from the report. I am using the development version, but I don’t want to revert all the changes

      • Zoho Creator Upcoming Updates - March 2025

        Hello everyone, We hope you’ve had the chance to explore Release Projection 1 for 2025! This month, we’re keeping up the momentum by bringing even more powerful features and enhancements to Zoho Creator. Here's what you can expect in March: App menu builder

      • Why can't you make a layout rule based on a lookup field?

        Hello :) I am wanting to build a layout rule based on the selection of a lookup field. I have 3 fields that I want to hide for all options, but only show one if the lookup is one of the 3 options needing the extra field. It doesn't seem to give me the

      • Client Script | Update - Introducing Subform Events and Actions

        Are you making the most of your subforms in Zoho CRM? Do you wish you could automate subform interactions and enhance user experience effortlessly? What if you had Client APIs and events specifically designed for subforms? We are thrilled to introduce

      • How to associate a document sent in Zoho Sign with an deal in the CRM?

        Hi, often documents are loaded in Zoho sign and sent for signature. These sometimes are linked to a deal in the Zoho CRM and would be nice to see the status of the document within the CRM. I am aware of the integration, but that assumes that the document

      • Why Sharing Rules do Not support relative date comparison???

        I am creating a Sharing Rule and simply want to share where "Last Day of Coverage" (Date field) is Greater than TODAY (Starting Tomorrow). However, sharing rules don't have the option to compare a date field to a relative date (like today), only to Static

      • How to add "Forever Free Plan" to existing mail lite plan?

        There's an offer for: "Up to five users, 5GB/User, 25MB attachment limit." I already have a mail lite plan. I really like zoho mail and would like this added but I can't seem to access it. Keeps redirecting me to my existing inbox when i click the o

      • CRM x WorkDrive: File storage for new CRM signups is now powered by WorkDrive

        Availability Editions: All DCs: All Release plan: Released for new signups in all DCs. It will be enabled for existing users in a phased manner in the upcoming months. Help documentation: Documents in Zoho CRM Manage folders in Documents tab Manage files

      • i can't create other user with my lite plan

        hello, I have paid little plan and I have added two domains but each has its own user however zoho shows me this message You do not have enough licenses. Purchase the necessary licenses to add, invite or import users I don’t know why if I have another

      • Zoho Books & Zoho CRM - Funcionalidade do campo moeda

        Pessoal bom dia, O Zoho Books tem uma funcionalidade nos campos de moeda, que ao colar números decimais com vírgula ( , ), ele automaticamente transforma para o formato de ponto ( . ). Ex: R$ 2,50 --> R$ 2.50 Esse comportamento está disponível no Zoho

      • Does Mail Lite allow SMTP?

        I am looking to use SMTP access, however I am not sure what plan I have to purchase, please assist.

      • No image image comes out in the recipient when I sent an email

        Hello to the entire forum, when I send an email from Zoho, my profile picture does not come out. On the other hand, if you do, using Gmail accounts. How is it configured to leave ??? Thank you Greetings !!

      • Iphone receipt capture stopped working

        I have been having difficulty getting receipt capture to work on the iPhone app. I have been using a work around by taking a photo with my camera then uploading it into the app instead of taking the picture through the app. This adds way too much extra

      • cant receive emails

        I have checked the Dns and everything seems to be fine pls check the print screens attached below help me cause i need to solve this fast

      • Create View to See Tickets Closed within the last 3 days

        I'm trying to create a view in Zoho Desk that shows me "recently closed ticket," which I will define as tickets closed in the last 3 days. I want this view to update so that whenever I click to view it is recalculates and shows me tickets closed within 3 days from that moment. When I try to Create a view and use the criteria of "Ticket Closed Time" I have to specify a discrete time frame (on or before a specific date). It doesn't allow me to define time/date dynamically like I can do with date fields

      • ERROR 554 5.1.8 Sender Address Blocked code(554)

        We have an email with Zoho ( comercial@bruiser.com.br), but, when we try associate the account in GMAIL, the server shows this message:  554 5.1.8 Sender Address Blocked code(554) I see this error appear when the limits of returns exceded 10 messages,

      • Unable to send message;Reason:550 5.4.6 Unusual sending activity detected. Please try after sometime

        Hello i'm unable to send any email because i keep getting this error Unable to send message;Reason:550 5.4.6 Unusual sending activity detected. Please try after sometime i have literally sent less than 10 emails today i'm not sure why i'm getting this

      • IP Addresses for Whitelist

        Hi,  Where can I get a list of the IP addresses I need to whitelist for accessing Zoho Desk? TIA

      • Recording overpayment?

        So a customer just overpaid me and how do I record this? I can't enter an amount that is higher than the invoice amount. Eg. Invoice is $195 and he sent $200. He's a reccuring customer so is there a way to record so that he has a $5 advance for future invoice?

      • Rejected Accounts still listed for Deal

        Hello guys I have a approval process thats validate the Accounts in CRM The issue is even when a account is rejected you can open a deal with it It's not supposed to appear in the lookup field or the approval process become pointless Can you guys help

      • Zoho Rentals

        Team, Zoho Inventory provides great features for Retail Sales and Purchases. On a similar note, There are significant portion of Rental industry would be missed out, if not looked into. Can we have a Zoho Rentals which can integrate with Zoho Inventory? Thanks!

      • zet pack not working

        We are using the zet pack command to package our Zoho extension. However, after running the command, the extension gets packed, but the resulting package is empty. We've attached a screenshot for reference. Could you please assist us with resolving this

      • How can I view Help Center articles in 'Sandbox' mode?

        I have published some help center articles but when I try to preview the knowledge base page, it says 'We have no content to display'.

      • Zoho Books API down

        We've been using the zoho books api for the last few weeks to pull open invoices, and the code has stopped working suddenly. When making the same API call as always, we're getting a 400 error.

      • Loop in Blueprint but it works. Why? How should this be set?

        see picture

      • Introducing Keyboard Shortcuts for Zoho CRM

        Dear Customers, We're happy to introduce keyboard shortcuts for Zoho CRM features! Until now, you might have been navigating to modules manually using the mouse, and at times, it could be tedious, especially when you had to search for specific modules

      • POS System

        Has anyone had any luck integrating a POS system with the zoho crm? Any advice where to look for a zoho proven solution? Thanks in advance.

      • Next Page