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

    • US to EU Data Migration done / Workflows and Custom Functions stopped working

      Hello, I need help to restore my workflow rules and custom functions to work. My data was transferred from the US to the EU (Data center migration). Now all Workflow Rules and Custom Functions not working. I have no idea how to restore them to work again.

    • Possible to customise list of file attachment options?

      Is it possible to customise (disable/remove) the list of file attachment options (see screenshot below)? I would like the users to only use the options "Link (URL)" and "Other Cloud Drives". I have super admin rights to customise the CRM.

    • CRM became very slow

      Plz check asap. image failed to upload , workflow doesn't run

    • Automating CRM backup storage?

      Hi there, We've recently set up automatic backups for our Zoho CRM account. We were hoping that the backup functionality would not require any manual work on our end, but it seems that we are always required to download the backups ourselves, store them,

    • Ayuda con zoho creator x zoho Crm

      Hola a todos, Estoy teniendo dificultades al sincronizar datos entre Zoho Creator y Zoho CRM. Mi objetivo es lo siguiente: Busque un registro en el módulo Contactsde Zoho CRM utilizando el correo electrónico del registro de Zoho Creator. Si se encuentra

    • Invoices with billable time and expenses

      I cannot seem to get a straight answer. We are looking to create an invoice to send to our clients, but it needs to have the following on it: 1. Billable hours for each employee. All hours for the pay period on one line, by employee. 2. Expenses for each

    • URL for downloading uploaded file - THE SOLUTION

      Hi, I would like to share the solution for downloading uploaded files using url. There is no documentation for it and there are multiple forum threads with old solutions that didn't work for me. Here is the updated url - tested and works! fet = form_name[ID

    • All Tasks Queued for Last 3+ Hours

      How does one resolve this? All of my tasks, from many different Flows, are stuck in the "Queued" status. This is interrupting my business processes, which depend on the timely execution of automations.

    • Unable to access Zoho Desk at all - has an extreme slow load and then just remains blank

      This is all I see:

    • Why can't I connect to the software suddenly? Network error, internal error, unable to contact you

      Why can't I connect to the software suddenly? Network error, internal error, unable to contact you

    • Auto Generated Invoice number YEAR

      Auto Generated Invoice number shows transaction year as 25 even though it's 24 still.

    • How to view all departments on one dashboard or ticket view?

      Hi guys, We've just started using Zoho Support and found a very weird quirk. It seems that you need to click into each deparment to view the new tickets instead of just seeing a global dashboard of all tickets across all departments. Seems very odd, is this correct or are we missing something? If this is currently not possible, can someone from Zoho let us know if a global dashboard view is going to be developed soon? How soon? This is going to be a dealbreaker for us as we have lots of departments...

    • The Social Wall: December 2024

      Hey everyone, As the year comes to an end, and the festive spirit fills the air, we're thrilled to bring to you the final edition of the Social Wall for 2024. Let's see what updates went live during December, and then go on with planning the new year!

    • Not displaying a newly created window within an application

      On a specific stock trading application (see image below), when a newly created full screen operation is invoked (File->New) oft times it is invisible (the mouse input is correctly routed to the new window but the hover over contents shows the invisible

    • Chat function not working properly

      Ever since upgrading to plus, the chat is all messed up. it is coming up behind the web page so that I cannot see what I'm typing and cannot read replies. I can only see the bottom of the text box at the bottom of the page, and then it is blocked. I've

    • Unknown error occurred

      Hi, When we want to publish or edit a page in our website, we encounter with "Unknown error occurred" problem. I share a screenshot here. Our website is www.essoft.com. It happens every page. We want to solve this ASAP.

    • Last payroll of the year gives me an error

      Trying to run the last payroll of the year. The payment doesn't get to the employee until 1/1/25, which is correct. However when I try to process it I get the following error: Tax calculation is not supported for the year 2025. Please change the Pay date.

    • What's New in Zoho Analytics - December 2024

      Hello Users! We’re excited to bring you a roundup of the latest features and improvements in Zoho Analytics. These updates are designed to elevate your data analytics experience, making it more powerful, interactive, and seamless. Let’s dive in! Expanded

    • Global Outage - Please Update Current Status

      It looks like Zoho Mail services are down everywhere. Please update with current status and time-to-resolution.

    • Is the filename of an attachment restricted to only certain languages?

      Hi, I tried to create a file card in a notebook, but I encountered an issue: when the filename of an attachment is in languages other than the main ones (such as English, Japanese, or Simplified Chinese......), syncing stops or the filenames become garbled

    • Questions about To Do

      1. I created a To Do note on Android and there is a line sorting option in the options drop down menu. But I didn’t find such an option in the PC client. I really need this option. 2. Why is there no search in To Do on the PC client? 3. Why is there no

    • Sync workspace - table

      I have connected two workspaces and I have imported two different query tables from one workspace to the other one, that was a succes. But now I want to import another query table from the same workspace to the other but I get an error. Why is that? (there

    • Odd Authorization warnings

      I'm a superadmin for Zoho One and double-checed that I was an Admin role in Teams. Every once in awhile, I'll get a strange notification that I can't do something (usually deleting something although I am under the 250 thread limit). Is there somewhere

    • Zoho und die Art, Dinge zu tun

      Zoho und die Art, Dinge zu tun Ich habe Zoho seit über zehn Jahren in verschiedenen Projekten implementiert – einige groß, andere sehr groß – und habe sogar für einen der weltweit führenden Zoho-Partner gearbeitet. Jedes Mal, wenn ich ein Zoho-Implementierungsprojekt

    • ZohoCRM Workflows Not Triggering After Tool Recovery

      I noticed that ZohoCRM experienced an issue earlier, and according to the status webpage (https://status.zoho.com/), all tools were reported to be fully restored as of 03:00 (PST) on December 30, 2024. However, ZohoCRM workflows are still not triggering

    • 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

    • Alternatives to using multi-select lookup field for a 1-many module relationship?

      I have 2 modules where I only need multi-select lookup option on one of them and the other always has a 1-1 relationship. Do I have to use a multi-select lookup field in this case? Is there another way to solve this? Am asking because I've hit the limit

    • View of all Leads (+converted)

      Hi, Is there a View of all Leads this month includung converted? If not how can I create one? Thanks

    • Zoho Projects is down

      Is anyone else having problems getting to Zoho Projects?   We are getting a Zoho server error, impacting our business.... I thought Zoho had HA for their Applications!?

    • Facilitate business processes by mandating Kiosks in your Blueprint's transition settings

      Hello everyone, We've made a few enhancements to Kiosk Studio. Blueprints provide a structured and systematic approach to executing business processes, and you can use Kiosks to build custom capabilities to retrieve, collect, and execute actions on CRM

    • Develop and publish a Zoho Recruit extension on the marketplace

      Hi, I'd like to develop a new extension for Zoho Recruit. I've started to use Zoho Developers creating a Zoho CRM extension. But when I try to create a new extension here https://sigma.zoho.com/workspace/testtesttestest/apps/new I d'ont see the option of Zoho Recruit (only CRM, Desk, Projects...). I do see extensions for Zoho Recruit in the marketplace. How would I go about to create one if the option is not available in sigma ? Cheers, Rémi.

    • Zoho Payroll [India Edition] - ICICI Bank Integration

      It seems that ICICI integration with Payroll (and other Zoho apps) has become progressively more difficult this year. It was great until last year but then some apps started requiring a token generated on ICICI website. The whole point of Direct Deposit

    • Servidores caidos?

      Buenas, Hoy 30/12/2024, mi empresa esta sufriendo bastante problemas para acceder a las aplicaciones de Zoho. No sabemos si es solo nuestra compañia o esta afectado a todos. Cuando intentamos acceder a las aplicaciones nos salta el siguiente error: A

    • Add an action to set agent as a member of a team in zoho desk

      Hi, Please add an action to zoho flow to set agent as a member of a team in zoho desk (add to a team or remove from a team). Regards, Ram

    • Cant add owner to field update in workflow

      Hi there, Currently when i tried to add owner of the record of the module to the field update, i am unable to. Is there a way to do so?

    • Zoho Books API Limit Is RIDICULOUS!!!!!!!!!!!!!

      The 2,500 API call limit in Zoho Books is about as useful as AOL dialup.  Seriously Zoho, not only can I use up 2,500 API calls in no time with my own app but YOUR OWN STUPID IPAD APP blows through them super fast too, so if any one of my clients wants

    • CRM portal users can now log in using their mobile phone numbers

      Hello everyone! You can now invite portal users using their mobile phone numbers. These portal users will be able to log in using their mobile number and OTP. Templates for these portal-related SMS can be customized as per your needs. This enhancement

    • Zoho CRM: Las últimas novedades de 2024. ¡No te las pierdas!

      ¡Hola, Español Zoho Community! Aunque sabemos que en estas fechas muchos de vosotros estáis ya disfrutando de un merecidísimo descanso, no queríamos acabar el año sin haceros un resumen de las actualizaciones más interesantes de los últimos tres meses,

    • Assistance Required: Custom Model Record Not Visible in Zoho CRM Sandbox

      Dear Team, I hope this message finds you well. I have created a custom model in the Zoho CRM Sandbox account and am currently adding records to it using Python. While I am able to fetch the module data programmatically through Python, I am unable to see

    • Automatic Updates for Zoho Desk Extensions

      Dear Zoho Desk Team, I hope you're doing well. We would like to request the addition of an automatic update feature for Zoho Desk extensions. Currently, updating extensions requires manually searching for updates and clicking the update button. This process

    • Next Page