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. }

  6. else 
  7. {
  8. elem.setVisibility(true);
  9. }

  • 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. });

  12. log("products selected from widget: ", selected_products);

  13. // Update Selected Products from the widget Popup 
  14. if (selected_products.length) {
  15.     
  16.     selected_products.forEach(product => {
  17.         products_list.push({ Product_Name1: { id: product.id, name: product.Product_Name }, Quantity_of_Products: 1, Unit_Price1: product.Unit_Price });
  18.     });
  19.     console.log(products_list);
  20.    ZDK.Page.getField('Product_List').setValue(products_list);
  21. }

  • 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



      Zoho Campaigns Resources


        • Desk Community Learning Series


        • Digest


        • Functions


        • Meetups


        • Kbase


        • Resources


        • Glossary


        • Desk Marketplace


        • MVP Corner


        • Word of the Day


        • Ask the Experts


          Zoho CRM Plus Resources

            Zoho Books Resources


              Zoho Subscriptions Resources

                Zoho Projects Resources


                  Zoho Sprints Resources


                    Zoho Orchestly Resources


                      Zoho Creator Resources


                        Zoho WorkDrive Resources



                          Zoho CRM Resources

                          • CRM Community Learning Series

                            CRM Community Learning Series


                          • Tips

                            Tips

                          • Functions

                            Functions

                          • Meetups

                            Meetups

                          • Kbase

                            Kbase

                          • Resources

                            Resources

                          • Digest

                            Digest

                          • CRM Marketplace

                            CRM Marketplace

                          • MVP Corner

                            MVP Corner




                            Zoho Writer Writer

                            Get Started. Write Away!

                            Writer is a powerful online word processor, designed for collaborative work.

                              Zoho CRM コンテンツ






                                ご検討中の方

                                  • Recent Topics

                                  • How to work with getFieldNames formdata functions ,Any Examples

                                    I don't find any example showing usage of getFieldNames. Where do i find .is there any Help documents available
                                  • Why don't we have better integration with Mercado Pago or Pagseguro?

                                    Currently, the integration between Zoho Commerce and Mercado Pago for Brazil is very poor... Since it is old, it does not include the main payment method in Brazil today, which is PIX. Is there a date for this to finally be launched? There are numerous
                                  • Empowered Custom Views: Cross-Module Criteria Now Supported in Zoho CRM

                                    Hello everyone, We’re excited to introduce cross-module criteria support in custom views! Custom views provide personalized perspectives on your data and that you can save for future use. You can share these views with all users or specific individuals
                                  • How to Bulk-Update Sales Orders in CRM

                                    Hi - I need to bulk update existing sales orders with dates from our ERP of when the sales orders were created. I made a date field on the Sales Order module where I want to insert that data. I can't Mass Update because I am not updating the fields to
                                  • How to track salesiq on google analytics without GTM

                                    Hello! We had to move the installation of the SalesIQ widget from GTM to directly do it in our wordpress site. The SalesIQ widget was being blocked by Adblockers which caused a lot of our visitors to not be able to see it. This issue was fixed from deleting
                                  • Feature Request - Improved booking layouts, specifically for individual booking links

                                    I would like to see more layout options and specifically to have the meeting description beside the calendar booking function, when sharing booking links to specific consultations/meetings. Below is a screenshot from Calendly. I love this layout and it
                                  • Announcing New Features in Trident for macOS (v.1.2.0)

                                    Hello Community, Trident for macOS has quite a few new features that will improve your business email communication. Let's take a quick look at them. Creating templates Earlier, you could save email drafts as templates in Trident. With the current update,
                                  • Zoho Commerce

                                    Hi, I have zoho one and use Zoho Books. I am very interested in Zoho Commerce , especially with how all is integrated but have a question. I do not want my store to show prices for customers that are not log in. Is there a way to hide the prices if not
                                  • Products in time entry

                                    Morning, Is there a way to add the product field to the time entry layout? Giving us the ability to identify a product per time entry. Thanks Rudy
                                  • Zoho.eu and U.S. Cloud Act? Can U.S. request Zoho.eu data?

                                    Given the current political situation in the U.S. and possible near future implications for data privacy and security, I am curious about Zoho’s obligation to comply with the U.S. cloud act or other U.S. requests for private customer information from
                                  • Zoholics Europe Awards

                                    We're excited to announce that at this year's Zoholics events across Europe, we're holding customer awards for the first time ever! This is your chance to shout about the amazing things you've created, connected, or achieved with Zoho's developer application!
                                  • Fetching whole month availability via API

                                    We are currently building a custom calendar component that books directly into our client's Zoho Bookings instance. The challenge we are facing is that your API only allows fetching availability one day at a time, which is problematic. Our second workaround
                                  • Why "balance due" for the VOIDED INVOICE is not zero?

                                    We wonder why the "balance due" for the VOIDED INVOICE is not zero? For example our case, we issued invoice for a client for MYR1000, then after client request for cancellation. Client haven't make payment yet. So we marked the invoice as void. We think
                                  • Cross module filtering is now supported in CRM

                                    Editions: All DCs: All Release plan: This enhancement is being released in phases. It is now available in AU, JP, and CN DCs. Help resource: Advanced filters The Cross-module filtering enhancement is now available to all CRM accounts in the following
                                  • Format handling error

                                    Hi, I'm having an issue when merging a document using a custom function when with decimal numbers. In my template preview, it's seems correct ,but when I do the merge and attach the file to a record, all types of docs aren't displaying the number correctly.
                                  • Archiving Contacts

                                    How do I archive a list of contacts, or individual contacts?
                                  • Problems with clipboard paste into ticket comments

                                    Problem as title. Using Chrome get to paste contents of clipboard but submit gives 'you've exceeded the character limit of 30,000 for this comment' irrelevant of actual number of characters. Edge just pastes txt 'undefined' irrelevant of actual contents of clipboard All other areas of Zoho desk work fine with clipboard paste (i.e. new ticket description) it's just comments on existing tickets that seem to have problem. Was all working fine until early yesterday (14th) Client is Windows 10 Pro 1803
                                  • Support Mixed Visibility Settings in Knowledge Base Categories

                                    Hello Zoho Desk Team, We hope you're all doing well. We’d like to submit a feature request regarding visibility settings in the Knowledge Base module. 🎯 Current Limitation As of today, when a category is set to a specific visibility level (e.g., Public),
                                  • Is there a way to set Document Owner/Sender via the API

                                    When sending requests for zoho sign, it would seem zoho uses the id of the person that created the zoho api cred to determine the owner_id, is there a way to set a default for this?
                                  • Announcing New Features in Trident for macOS (v.1.20.0)

                                    Hello everyone! Trident for macOS is here with interesting features and enhancements to elevate your workplace communication and productivity. Let's take a quick look at them. Change the "From" email address easily. When composing or replying to an email,
                                  • we need to add a Customer Number field to the PDF document templates

                                    Hello everyone. We are currently using Zoho Inventory for our small business operations and have found it to be a valuable tool. However, we’ve encountered a specific requirement: we need to add a Customer Number field to the PDF document templates (such
                                  • Announcing new features in Trident for Windows (v.1.27.6.0)

                                    Hello Community, Trident for Windows is here with exciting new features to elevate your email communication. Let’s dive into what’s new! View and manage .pst files. A .pst (Personal Storage Table) file is an Outlook Data Storage file format for storing
                                  • Email limit reached

                                    I'm assessing whether zoho crm will work for our startup, however I tried to send emails to my leads and after 12 emails got the notification that email limit has been reached. That is ridiculously low. Whats wrong and how can you fix that. I am still
                                  • Error in Deluge script, but all should be OK

                                    I get an error when using the following deluge script (sensitive info changed with ***). This script should parse a projectnumber out of the subject or body text and put it in a custom field of the ticket. The error: Validation failed for the condition
                                  • Importing Into Zoho CRM

                                    Do you have a list in Excel that you would like to import into Zoho CRM? If your administrator has not restricted your ability to import, the process is fairly easy to accomplish, but understanding the options can make everything go smoother. First you may need to prepare the spreadsheet Remove any extra rows from the top of the spreadsheet, like titles or blank lines. Row 1 should be the column headers. Row 2 should be where the data starts. Make sure that there is a column for any required fields
                                  • Agent working hours

                                    Hi, I know it is possible to set company business hours but is it possible so that agents can have different ones? I.e. some agents cover later hours on specific weeks - can these be set so those agents that are "working" get notified about tickets etc. 
                                  • Analyze the Name of the Deal Owner and Created by

                                    I need to display the Name of the User who created a deal and the Deal Owner. Since both fields are lookups to the same table (Users), it defaults to the user record of the Deal Owner and I cannot display the name of who created it. I can generate the
                                  • Date Import Problems

                                    I'm trying to import products from csv/xls files, but I can't get the Sales Start Date field to import. I know the import is working because all the other information is imported, but the Sales Start Date field is left empty. I think it must be a format
                                  • Canvas and Related lists

                                    Hi, As much as I like canvas, when adding in a asection with related lists,it doesnt mimic the same functionality as the standard view within the CRM e.g left hand panel will show the module and total number of records. Is there a way of indicating this
                                  • Conditional Layouts On Multi Select Field

                                    How we can use Conditional Layouts On Multi Select Field field? Please help.
                                  • Zoho Notifications - Received two notifications for one message and none for the other

                                    We had a client reply to a ticket twice in one minute. The ticket owner received two emails for the second message but none for the first (which was crucial content and unfortunately was therefore missed). I'm assuming this created a race condition -
                                  • New Search Function

                                    Hey Team, The search function updated in our CRM about a week ago, so I assume it was an automated update across Zoho. It no longer displays leads/deals etc in Chronological order so that the most recently created or updated is the first to display which
                                  • Better integration between Zoho CRM and Zoho Bookings

                                    I've noticed that when a meeting which was created in Zoho Bookings is updated by a sales person in Zoho CRM, the change is not reflected back into Zoho Bookings. I have raised this with support who advised that meetings created in Bookings need to be
                                  • Offline mode on Android TV app?

                                    Hello! Is there a way to use Zoho Show offline in the Android TV app? I have an Android TV based projector, and I travel with it, and don't want to have to rely on a steady internet connection when giving a presentation.
                                  • Enhancements to Custom Connectors in Zoho Creator

                                    Hello everyone, At Zoho Creator, we believe in providing you with the necessary tools to achieve a well connected ecosystem of apps. Our Custom Connectors feature is a testament to this, enabling you to integrate with a wide range of external services
                                  • issues with manually shipping sales orders - advise needed please

                                    we are new to zoho inventory. we are going to roll the program out to our company within a couple of weeks and during the implementation process we have come into a roadblock with manually packaging and shipping sales orders. its important to note important
                                  • Problem with the "Search" function

                                    Hi, I've been using Workdrive for a few days and lately, the files I added in Workdrive don't appear in the search. It looks like my latest files aren't indexed. Are you aware of this issue ? 
                                  • Connect Woocommerce new order to zoho books via zoho flow

                                    Hello i want help to create a flow to create a new sales order from woocommerce to zoho books. Can someone send me step by step flow, functions and fields?
                                  • [Webinar] Deluge Learning Series - AI-Powered Automation using Zoho Deluge and Gemini

                                    We’re excited to invite you to an exclusive 1-hour webinar where we’ll demonstrate how to bring the power of Google’s Gemini AI into your Zoho ecosystem using Deluge scripting. Whether you're looking to automate data extraction from PDFs or dynamically
                                  • Getting error "invalid warehouse_id" when trying to update any transaction in Zoho books

                                    I got a message from Zoho saying that the Warehouse and Branch has been merged into one category "Locations" Once I migrated to this setup I was no longer able to edit any invoice / create creadit notes - got an error saying "invalid warehouse_id" I never
                                  • Next Page