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

        • Always display images from this sender – Is this feature available?

          In Zoho mail, I had my "Load external images" setting set to "Ask me", and that's fine. That's the setting I prefer. What's not fine though is I always need to tick "Display now" for each email I get, regardless if I've done that multiple times from several

        • Simplify your day-to-day sales operations with new List View actions

          Greetings everyone, Here are a few enhancements for quick actions in modular List Views that will make your day-to-day CRM operations much easier. List Views in modules display records in rows and columns based on set criteria, and are useful for presenting

        • Placeholder for Agent Signature in Email Templates

          Dear Zoho Team, I hope this message finds you well. We currently face a limitation when designing email templates in Zoho Desk. While we can create email templates and include a footer at the end, the agent signature is always appended by default at the

        • Some emails are not being delivered

          I have this problem where some of my mail just seems to disappear. When I send it, it appears as sent with no mention of any problem, but my recipient never gets it, not even in the Spam folder. Same for receiving, I have a secondary e-mail address, and

        • Unbilled Items Report?

          Hello! Is there any way to display a list of items that remain unbilled, without creating an invoice for each customer to see if the unbilled items box is displayed? ;-) Ben

        • Making Calls Using ZDialer on Zoho Creator Widgets

          The Zdialer Browser Extension does not seem to recognize phone numbers on custom widgets. What is the best way to work around this?

        • ALL sent mails from my zoho email id go to spam

          when we send emails out of Zoho as like Gmail , ALL mails go to spam... more than urgent to get a solution !!!!!!

        • Não consigo enviar e nem receber e-mails

          Estou com problemas pra enviar e receber e-mails. Não consigo enviar (recebo uma mensagem de domínio inválido) e os e-mails que recebo estão voltando. Como devo proceder?

        • Time Field

          Good Day, I have a question, when I save a draft and reload it. Why does the time field format keeps goes from hh:mm to hh:mm:ss? Is there a way I can force it to load to hh:mm only? I have tried example = totime(input.TimeField, "hh:mm") in the -created

        • Receiving email problem

          I can send an email but can't receive from other platform like Gmail

        • Mas de 48 horas sin correo

          Estimados, llevamos más de 48 horas sin poder recibir correo y en este periodo hemos recibido información confusa y lo mas relevante es que Zoho dice que esta todo bien y no encuentra el error. Como deben comprender el perjuicio de no contar con un correo

        • Your account has been blocked due to security reasons.

          Hi everyone. Faced a problem that is wreaking havoc on my business! On December 14, blocked login via WEB, IMAP and POP3 with the reason of unusual activity, allegedly because of VPN/Proxy and suspicion that my account was hacked. I created a ticket to

        • Displaying related quotes in sales order and back

          Hi, My colleague liked to see to which sales orders, the quote has been converted. Quote shows Invoices, but not SO. Same, they would like to see the quotes in the sales order, as they can see invoices, packages, shipment, How can we achieve this ? Thank

        • Details & Limitations of the Free Forever Plan

          I cannot find any comparison/details about the Free Forever Plan. Can you please publish details of what are its limitations?

        • Missing Folders on iPhone Zoho Mail

          Under mailboxes on my iPhone, I don't have an inbox, sent folder, deleted photo, etc. See pics.

        • Functions - How to pass Dynamic Parameters / Arguments?

          I am trying to create a generic function that I can use to update a given field with the name of the user and a given field with a datetime. The purpose of this is to have a history of major actions within the CRM record itself so it is easier to query

        • Directly Edit, Filter, and Sort Subforms on the Details Page

          Hello everyone, As you know, subforms allow you to associate multiple line items with a single record, greatly enhancing your data organization. For example, a sales order subform neatly lists all products, their quantities, amounts, and other relevant

        • Query table pull last 12 months

          I am tying to pull the following criteria and the date is always what causes me the issue. I want to pull people (pco_id) who have entries of "event_id" being these 2 events and whos "kind" is Regular or Guest and where the event_starts_at (date column)

        • How to Iterate a Function in Zoho Desk Workflow with Delay Between Calls?

          Hi everyone, I’m working on a function in Zoho Desk that searches for a specific ticket record. If the ticket is not found, I need to retry the search multiple times with a delay between each attempt until the ticket is located or a maximum number of

        • ChatGPT only summarize in English

          Hello i' v enabled chatgpt in salesIQ, it works great inside conversation (revise, Rephrase etc) add tags works well with another language than English. But when I want to summarize it render only in English, despite sales IQ is set to another language.

        • Vendor Assignment issue for staff in User Roales

          there is a limitation in software that we can't assing Vendors to our staff - we can only assign Customers on staff wise!! There is a limitation of this software that in case i want to assign limited vendors to my staff - it's not possible. Either i will

        • No Hope for Zoho Meeting

          Zoho Meeting is just the poorest meeting app I've come across in a long time. The support sucks too. I called to see if there was anything that could be done on the backend and while I was on a test meeting with support the video was lagging and freezing

        • Inventory Management for Manufacturer

          Hello, We are a manufacturing company in the FnB industry. We want to use the inventory management system to manage our raw material stocks and at the same time once we produce items, we need to increase our final product inventory while decreasing the

        • Multiple templates (Settings > Email templates)

          Hi Zoho, We would like to have more options to select a template when sending an email in Zohosign. Currently we can only add 1 template per option: Is this possible? Kind regards, Tristan

        • Does Zoho campaign de-duplicate based on mobile for SMS campaigns?

          Hi - We recently sent our first SMS campaign using Zoho Campaign integrated into Burst SMS and got feedback that some of our customers received multiple messages. Upon inspection, this was due to multiple contacts in our list containing the same mobile

        • Why is Zoho Meeting quality so poor?

          I've just moved from Office 365 to Zoho Workplace and have been generally really positive about the new platform -- nicely integrated, nice GUI, good and easy-to-understand control and customisation, and at a reasonable price. However, what is going on

        • Chat issues

          I am having a couple problems with the zoho chat feature. When I use Chat from the App bar, not everyone is getting messages (these are to different accounts, Yahoo & Gmail). I did finally get the Users to show up correctly. However, when in an active chat with someone, I only get one sound notification. No other notifications, pop up or otherwise, come through to alert if another message was sent. Also, the bottom Chat bar that shows Active chats while I am in email does not show any online contacts

        • How to Download Expense Attachments from Zoho Expenses Using Document Details?

          I am currently working on syncing Zoho Expenses with our internal portal. While syncing, I can successfully retrieve expense details, including document-related information such as file_name, document_id, and other metadata. However, I am facing an issue

        • Zoho Creator Upcoming Updates - December 2024

          Hi all, We're excited to be back with the latest updates and developments on the Creator platform. Here's what we're going over this month: Deluge AI assistance Rapid error messages in Deluge editor QR code & barcode generator Expandable RTF and multi

        • How to Retrieve and Store Expense Attachments from Zoho Expenses?

          I am currently syncing Zoho Expenses with our internal portal. During the sync process, I can successfully retrieve expense details, including document-related information such as file_name, document_id, and other metadata. My goal is to retrieve these

        • タスクを問い合わせテンプレートに追加

          タスクを問い合わせテンプレートに自動で追加されるようにしたいです。どうしたらいいですか

        • Introducing Formula Fields for performing dynamic calculations

          Greetings, With the Formula Field, you can generate numerical calculations using provided functions and available fields, enabling you to derive dynamic data. You can utilize mathematical formulas to populate results based on the provided inputs. This

        • Sending my emails to Spam Folder

          I am loosing my business because of this issue, many of my customers are receiving their email in the spam sometimes no one checks them

        • 5名限定 課題解決型ワークショップイベント Zoho ワークアウト開催のお知らせ （12/19）

          ユーザーの皆さま、こんにちは。Zoho ユーザーコミュニティチームの藤澤です。 12月開催のZoho ワークアウトについてお知らせします。 ※定員に達したため、受付を終了しました。 ━━━━━━━━━━━━━━━━━━━━━━━━ Zoho ワークアウトとは？ Zoho ユーザー同士で交流しながら、サービスに関する疑問や不明点の解消を目的とした「Zoho ワークアウト」を開催します。 Zoho サービスで完了させたい設定やカスタマイズ、環境の整備など……各自で決めた目標達成に向け、 他の参加者と同じ空間で作業を行うイベントです。先輩ユーザーや他の参加者と意見交換をしながら集中して作業に取り組むことが可能です。

        • Does an email preview pane view register as opened?

          Hi, If a recipient of one of my campaigns views it in a preview pane, opposed to opening the email, does Zoho Campaigns register that email as being opened (viewed)?

        • Display duplicate image canvas

          Now in canvas view image field, It will display both normal and conditional styling image. Please help with this bug.

        • Portal orders

          Is it possible to set up an ordering system through the portal so that my customers can place orders through their portal?

        • 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

        • Next Page