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

    • Blueprint - Field Validation Criteria (During)

      When setting validation criteria elsewhere in Zoho, or even workflow criteria etc., there are Is Empty and Isn't Empty options.  Within the Field Validation Criteria within Blueprint, those options aren't available.  Is there a particular reason for this? 

    • Delete Field that is used in a Zoho Flow connection

      I'm trying to delete a Field used in a Webhook created by Zoho Flow with CRM Connection and i get the following alert: When going to the alert i get to the following issue, can't edit it since its been deployed by a pluggin But yes i have here the prompted

    • Use image on img HTML tag

      Hi how could I do to use my image saved in Workdrive to use it in an HTML img tag ? I need to display it on my website without having to use iframes. Regards,

    • ZOHO Compain emails going to spam after authentication is successful

      Hello, I am frustrated right now. I have recently setup the zoho email compaign, The auto responder email went to receipient spam folder. then, I researched a lot and completed authentication (SPF, DKIM) in email deliverability, email relay in zoho crm.

    • Security Policies

      To protect against cyber threats and attacks, organizations need to set up security policies for their employees' accounts. Security policies are rules and regulations for every individual or group using the organization's assets and resources. Enabling

    • Zoho CRM functions editor is not in the programming language deluge

      I am trying to write a function for a button. I helped someone before in deluge and I'm using this new editor I'm not familiar with - I guess it is new. Why is the default code statically typed? The editor will not let me create a variable without a type.

    • "Age in Days" calculation in Advanced Analytics

      Hi Can someone advise how this is calculated? I am getting values on this report which I cannot understand. Thank you

    • Automatically set quotes to "lost" if deal is set to lost

      Hi, Is there a way to automate that if a deal (opportunity) is lost the related quotes are also set to lost? Thanks!

    • Subdomain

      How can i make subdomain in my zoho website

    • A/R Aging Details shows wrong aging days

      In the A/R Summary Report all of the invoices are in the right aging buckets. When I run the A/R Aging Details report I get aged dates of +300 days when they should be in the 0-90 day range.

    • Global Choice List share ownership

      I have created several forms that use one or more Global Choice Lists. These lists have been published to Org. I would like to allow one or more admins to edit the choices in these lists. Any help appreciated. Geoff

    • Domain Transfer

      I have a Godaddy domain, how i can transfer it to Zoha? and how i can move my website to Zoho server? With my best wishes.

    • Project Templates & Reminders

      I am getting projects all set up to work for our company and am running into a problem that I'm hoping is easily fixable. I have created a project template and within that project, there are reminders set on certain tasks. When I create a project from

    • Kaizen #126 - Circuits in Zoho CRM - Part 1

      Hello everyone! Welcome back to another week of Kaizen! Today, we will discuss an exciting topic—Circuits in Zoho CRM. For starters, we will discuss what Circuits are, how beneficial they are for businesses, different views of a Circuit, and the different

    • Create customized SLAs for your customer base with support plans

      Managing customer expectations, prioritizing critical issues, and resolving customer inquiries on time is quite a juggle. Without a clear timelines or defined priorities, a support team may struggle with delays in response, SLA violations, and pending

    • Zoho Flow or Schedules

      I have a process where we text our leads 7 times over a 14 day with different content for each text. I created one flow in Zoho Flow to do this, but wondering if there is a more efficient way to accomplish this via Schedules. It goes on for 6 more times

    • Free webinar: Zoho Sign 2024 wrap-up - Everything that is new and has changed

      Hello, Are you looking up to catch up on all the updates made to Zoho Sign in 2024? Or are you still figuring out how you can use Zoho Sign better to get business paperwork done more efficiently? If so, we invite you to join us this Thursday, December

    • How to Customize Task Creation to Send a Custom Alert Using JavaScript in Zoho CRM?

      Hello Zoho CRM Community, I’m looking to customize Zoho CRM to send a custom alert whenever a task is created. I understand that Zoho CRM supports client scripts using JavaScript, and I would like to leverage this feature to implement the alert functionality.

    • Workflow - Execute Based on Date

      Hello, I have trouble understanding the documentation for Execute Based on Date or Date Time Field's Value. I want to send an email every time I have a Case opened for more than three days with its status unchanged. I set : This rule will be executed 3 days after [date].  Condition : Status is [New]. Instant Action : Send an email notification. However, I'm not sure I follow this part of the documentation: "For all the records matching the rule criteria, rule will be triggered either monthly or yearly

    • Can we set a BCC address as default to show while sending emails?

      Two things inside ZohoCRM are annoying me because it's a repeated work. First one is that I always need to click manually to add the BCC field while sending an email to a lead. Can we set a default address so when I click to send a new email the BCC address

    • Make collecting payments from your customers in Bigin easier with payment links

      Greetings, Efficient payment collection is crucial for business success. Bigin already helps your businesses manage and sell products effectively, but we can further enhance this by making payment collection easier. This integrated payment feature lets

    • Inbox Preference - Saved replies based on message repsonse with specific word

      Hi There, Can one create a workflow where the Save Reply will be generic for all messages that contains a specific word, various channels,. The saved reply should contain a link for download etc. that is a response to the word entered in the message contained

    • Basic Price List Functionality Still Missing

      I am having a problem with the most simple imaginable pricing scenario - you buy cheap, add profit, then sell high. Or in less simplistic terms: business buys a product at a given cost, then adds predetermined percentage markup, and finally sells that

    • How do I hire employees????

      Hi! I own a bookkeeping company, where a few of my clients use Zoho Books as their accounting platform . I started utilizing Zoho Practice to work on the books of my Zoho clients, some have Zoho One and some have Zoho Books plans. I just hired an employee,

    • Automate data upload process like reports

      I'll start with the end in mind.  I want to basically keep certain creator tables updated with data that are in a sql database/tables in our office (employees, active jobs, employee positions) so I can reference that data and not have to duplicate it by hand every time someone adds a new job or employee in the office desktop software.  Here are some thoughts I had about how to do this, but am unsure as to whether any of them are actually possible and how to go about it from there: Is there any way

    • Greylisted, try again after some time

      Can you check my ip, i send to duyna@vietlinkjsc.vn but have an error; my ip is 112.213.94.12 Here is log: 2018-01-09 09:40:29 H=mx.zoho.com [204.141.32.121] SMTP error from remote mail server after RCPT TO:<duyna@vietlinkjsc.vn>: 451 4.7.1 Greylisted, try again after some time 2018-01-09 09:40:32 H=mx2.zoho.com [204.141.33.55] SMTP error from remote mail server after RCPT TO:<duyna@vietlinkjsc.vn>: 451 4.7.1 Greylisted, try again after some time 2018-01-09 09:40:32 duyna@vietlinkjsc.vn R=lookuphost

    • Emails linked to Deal

      Hello everyone, I’d like to ask a question to see if someone can help me out. We are requesting availability from suppliers by sending emails directly from the Opportunity. These emails we send are logged within the Opportunity; however, when we receive

    • How to transfer all my mails from Zoho to Gmail or Office 365

      is there any option to move my emails from zoho to gmail or office 365. i would like to export more than 25k emails from zoho to office 365 or gmail. can anyone help me to guide properly. this will help me to access my emails easily i have both account and can easily  do it with office 365 or gmail. i want two options. direct from zoho to office 365  or exported eml files from zoho to gmail. please suggest me both if possible 

    • Inquiry Regarding Image Display Issue in Campaign Duplication

      We are currently using Zoho Campaigns for email distribution to our clients. I would like to inquire about an issue we encountered. When duplicating a previously created and sent campaign from the "All Campaigns" section, the images used in the header

    • New integrations for Bigin: Zoho Sign, SalesIQ, and Marketing Automation

      Greetings, We're excited to share new integrations that make Bigin more powerful and useful for your business! Zoho Sign for Bigin Zoho Sign now integrates seamlessly with Bigin, enabling you to sign, send, and manage contracts or agreements without leaving

    • Add multiple users to a task

      When I´m assigning a task it is almost always related to more than one person. Practical situation: When a client request some improvement the related department opens the task with the situation and people related to it as the client itself, the salesman

    • What is Attendee Status 0 and 1?

      Hi there, I recently stumbled upon the API to get the attendee list and in the return value, there is a parameter called "status", and 0 supposed to mean not_attending, and 1 means attending. I cannot find this representation anywhere in the attendee

    • ZOHO BackStage

      How to get list of events, using ZOHO BackStage APIs. Is it possible OR not?

    • How to Customize Task Creation to Send a Custom Alert Using JavaScript in Zoho CRM?

      Hello Zoho CRM Community, I’m looking to customize Zoho CRM to send a custom alert whenever a task is created. I understand that Zoho CRM supports client scripts using JavaScript, and I would like to leverage this feature to implement the alert functionality.

    • Zoho Meeting iOS app update - Join breakout rooms, access polls, paste links and join sessions, in session host controls

      Hello, everyone! In the latest iOS version(v1.7) of the Zoho Meeting app, we have brought in support for the following features: Polls in meeting session Join Breakout rooms Paste link in join meeting screen Foreign time zone in the meeting details screen.

    • Calculate hours between 2 date/time fields

      Hi, Does anyone know if it is possible to get the number of hours between 2 date/time fields in a zoho crm custom function? Thanks, Michael

    • External ID validation.

      I added an external ID field as below in one of my custom modules: When creating records via the API using some value (eg: 762115b2-097e-43b2-bdba-f3924a5371a6) for this field, it works without any problem. I can create and even see the records on the

    • 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

    • Create a button that executes a customized function

      Hello, I have created a summary view in which I combine the data from my items table and suppliers table. I would like to know if there is the possibility of adding a button somewhere in the view to be able to execute a function when clicked on it. I

    • Custom field doesn't fill when converting sales order to invoice

      Hi, When I convert a Sales Order to an Invoice one of the custom fields on a product line names "Subsidie" does not seem to fill in automatically. I manually have to select the product again by clicking on the product name in the order line en re-select

    • Next Page