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

        • CLIENT PORTAL (If clients can place orders directly on the portal)

          Zoho client portal is excellent. Everything is there except one thing. Client should be able to place orders directly on the portal. This would enhance the portal and end users will be extremely happy. This suggestion infact came from one of our client.

        • Portal Default View

          Hello! My company is about roll out portals for some users, but we were wondering if it was possible to set the Record Detail Page View to default to a custom view that we made. That way the information they need would be streamlined and easier to see.

        • Macro Email to be determined by a ticket field

          Hi, we are a commercial energy brokerage and are implementing Desk as our helpdesk tool to replace manual emails, personal whataspp and telephone. We have setup a macro rule when we can trigger an email, update ticket status and trigger a task.... but

        • Welcome Link Expired

          Hi The links sent to the users didn't get clicked on in time and now all the links have expired. Is there a way to send a new link without deleting them and re-adding them>

        • Zoho expense linked with Campaign instead of customers

          Hi, Is there a development planned for linked an expense or a report to a zoho campaign? Indeed, suppose I created a campain in which I add different clients (for example a trip to a foreign country where I meet 3 different clients), I would like this campaign to be linked to the expenses I have. Say I have a plane ticket, taxis and 1 hotel night, I would like those expenses to be linked to the 3 clients. With Zoho expense, it is not possible at the time (or maybe it is but I do not know how!). thanks

        • 🎄 Jingle, Mingle, and Automate: Spread Christmas Cheer with Zoho Desk Auto-Replies! 🎄

          Hello Everyone! Welcome to this week's episode of the Community Learning Series. Christmas is in the air, and I’m sure we can all feel the jingle and the mingle of the season! The folks at Zylker Techfix are no exception—they’re busy with holiday plans

        • Adjusting Physical Inventory

          Not getting very far with support on this one, they say they are going to fix it but nothings happened since November. Please give this a thumbs up if you would like to see this feature or comment if you have some insight. Use Case: Inventory set to be

        • Print PO receipt

          Hi I would like to print the PO receipt. There does not seem to be any way to do this. I track batch numbers and printing the PO does not show this. Only the receipt would show the details of the receipt. Currently I print the screen which does not have

        • Create a purchase order in vendor's currency

          I am having a problem working this out and would appreciate some suggestions. We have Books and Inventory working in tandem. We are in Australia, our product is sold in Australia in $A and obviously all our invoices, accounts and reports need to be in

        • 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

        • Getting error during inserting a record in form of zoho people using zoho api

          import requests import json # Set your access token and Zoho People API base URL access_token = '1000.XXXXXXXXXXXXXXX.XXXXXXXXXXXXXXXXXXXXX' api_base_url = 'https://people.zoho.in/people/api/' # Set the form name and data to be inserted form_link_name

        • This domain is not allowed to add. Please contact support-as@zohocorp.com for further details

          I am trying to setup the free version of Zoho Mail. When I tried to add my domain, theselfreunion.com I got the error message that is the subject of this Topic. I've read your other community forum topics, and this is NOT a free domain. So what is the

        • Change script to add fields

          Hi, I have a custom function (writen by a different implementation company in the beginning) which I would like to edit to add a different field as well. Can't get it to work on my own though. - The script now adds the address fields to a new quote (needs

        • 1 API to all channel

          hi zoho team: I am the product manager of anywheel, we are planning to integrate zoho, we want to integrate multiple channels through 1 API, please can you send me the integration document and guideline?

        • Revamped Print in Zoho Sheet—customized for paper

          The latest enhancements to Zoho Sheet's Print settings allows you to print a worksheet or a selected range, with customizations that make the data comprehensible, even on paper.   Customize header and footer Make your spreadsheets meaningful with a relevant header and footer. You can now choose to display the file name, sheet name, current page number, total pages, date, and time as the header and footer in your print view. Besides the predefined elements, you can also give a custom text for header/footer.

        • Adding Bluesky channel

          Hello, Is Bluesky (AT protocol) soon added on Social ? Bluesky is being developped and is now open to anyone (no more invitation) Thank you

        • How Can i put a form in Zobot

          Hi,how can i integrate a form which has a multiple options to choose from.the form should be opened or displayed by zobot after it meets a requirement in the conversation. Thanks in advance !

        • Unified customer portal login

          As I'm a Zoho One subscriber I can provide my customers with portal access to many of the Zoho apps. However, the customer must have a separate login for each app, which may be difficult for them to manage and frustrating as all they understand is that

        • message on click of button

          Hi, i added insert task on 'Quick view' below  'Action'  of report just below 'Delete' button,  so i am trying to add a message on click of button that, "This item is now added into Pending Request" like this .... So, how can i achieve this ; because

        • Is it possible to disable Chat Waiting Time, or to make it indefinite?

          We have used many online chat services over the years. However, Zoho's SalesIQ appears to be the only one we've tried that has a mandatory time limit where we must respond to new customer queries. We are a small business so we have no dedicated staff

        • Is Drawing feature supported in zoho Sheets?

          Is there any option to draw arrows and some basic shapes such as circle , rectangle etc in zoho sheets? if so, can someone help me find it 

        • Access CRM Variables from Formula field

          Is it possible to use a CRM variable (defined in Developer Space -> CRM Variables) in a formula field for calculations ?

        • Client Script: $Client.refresh({ triggerOnLoad: true }); not triggering onLoad Client Scripts

          Hey friends! I'm trying to store a temporary var, refresh the page for the user, then check that temporary var and do some actions. Theoretically using the title's code: $Client.refresh({ triggerOnLoad: true }); should refresh the page and trigger on

        • Super Admin login to delete certain folders and passwords and clearing the trash folder, they are still appearing on my dashboard

          Hi Zoho Team, I need help with an issue I've encountered. Despite using the Super Admin login to delete certain folders and passwords and clearing the trash folder, they are still appearing on my dashboard. I would like to understand why this is happening

        • Pulling Specific Products from Sales Orders in Books to a CRM Record

          We currently process orders directly through our website (woocommerce) as well as through manual sales orders in zoho books. When an order comes through the website, all of the individual products from that order show up in the CRM record of that customer.

        • Automatically add a retainer to every estimate

          Hi all, I've been trying to find a way to automatically add a retainer at a set % to every estimate we create and send. So far I haven't been successful, does anyone know of a way to do this? Thanks,

        • Clear String field based on the value of other field

          Hello everyone, We would like to be able to clear a string field (delete whatever has been written and make it empty) when another field (picklist) is changed to a specific value. While I can empty other types of fields, I noticed that I can't do this

        • Custom Deal Name in Lead Conversion Mapping

          I know there are ways to change the name of a Deal after conversion using a custom function, so no need to repost that information. I would like to see the CRM Improved with Deal Name Customisation and I think the Lead Conversion Mapping page would be

        • Within the Basic KPI component in Analytics, it is impossible to set "next" day range as a filter

          Hi there, I am currently setting up a deal dashboard for the Sales team. While it is possible to filter deal records to show records that were created LAST X days only, it looks like a NEXT X days Closing date filter is not available. Would it be possible

        • 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

        • For each loop with available time slots

          I am very new to Deluge, and this question was unable to be answered by Zoho Creator tech support upon request. Task at hand: I have a Form with 4 fields: - Date Start - Date End - Dropdown: Time Start: contains time slots (12:00PM, 12:15PM, etc) - Dropdown:

        • Can we have Backorder Management ?

          Can we have Backorder Management ?

        • Converting Amazon Sales Order to Invoice

          Hi there, We need  advice on the Amazon integration with Zoho Inventory. Now, we want to convert all the Sales orders synced from Amazon to Invoices. We want also to include and record the Amazon fees associated with the sales (Amazon fees, FBA fees, Cost of Advertising etc.) However, Sales order only captures the sales proceeds (Gross Sales) in Zoho Inventory. Does anyone currently work with Amazon and can suggest how to correctly process the sales and Amazon payments through Zoho Inventory and

        • Zoho Inventory | Can't uncheck/turn off Advance Tracking

          Hi, I wanted to know if there's a way to turn off Advanced Tracking (such as Serial Number or Batch Tracking) for an item in Zoho Inventory. I’ve read that you might need to delete associated transactions and clear the opening stock to disable these features.

        • Landed Cost application to Vendor Bills from dropship Purchase Orders

          When trying to apply a Landed Cost to a Vendor Bill generated from a dropship Purchase Order, the Landed Cost pop-up window generates a message that "Landed Cost cannot be applied to Bills from dropship Purchase Orders" when trying to save the landed

        • Condition-based data sharing rules are now available in CRM

          Dear All,   We are excited to introduce a much awaited feature: condition-based data sharing rules. We'd love to explain more about this enhancement.   Specify record conditions in data sharing rules Data sharing rules enable you to share all the CRM

        • 2 serial numbers for 1 item (Mac address and Serial number)

          There is a way to track 2 serial number type for 1 Item. Ex: Some electronic devices have a MAC address and a serial number. I need to track those 2 numbers

        • Zoho Projects Roadshow, USA - 2024

          Dear Users, We are happy to announce the Zoho Projects Roadshows 2024 in USA. This is an excellent opportunity to learn more about Zoho Projects and gain in-depth knowledge of the advanced features. Our team will also discuss industry specific solutions

        • [Zoho Writer Webinar] Tips on collaboration control in Writer

          Hi Zoho Writer users, We're excited to announce the Zoho Writer webinar for the month of October 2023: Tips on collaboration control in Writer. This webinar will help you understand the various features available in Writer to control collaboration. We'll

        • [Zoho Writer Webinar] Working with tables in Zoho Writer

          Hi Zoho Writer users, We're excited to announce the Zoho Writer webinar for the month of September 2023: Working with tables. This webinar will help you understand the various ways you can use tables to meet your specific needs. The webinar will take

        • Next Page