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 Desk Resources

    • Desk Community Learning Series


    • Digest


    • Functions


    • Meetups


    • Kbase


    • Resources


    • Glossary


    • Desk Marketplace


    • MVP Corner


    • Word of the Day


      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 Campaigns 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

                                • In Zoho Projects, is there a way to create a folders template under documents that can be used once a project is created?

                                  We have a specific folder structure that we would like to use that is standard across every project. Instead of having to create this structure every time a project is created, is there a way to create a template for the folders that can be added?
                                • Zoho Payroll in France

                                  When will Zoho Payroll be available in France ?
                                • Blueprint - 'On hold' state with an automatic transition?

                                  I think I'm missing something here so I'm hoping if I explain what I'm trying to achieve someone might be able to give me a way around it. We sometimes get request far in advance but we don't want to action them unless it is 7 days from when they are
                                • HOW TO VIEW INDIVIDUAL COST OF NEWLY PURCHASED GOODS AFTER ALLOCATING LANDED COSTS

                                  Hello, I have been able to allocate landed costs to the purchase cost of the new products. however, what i need to see now is the actual cost price (original cost plus landed cost), of only my newly purchased products to enable me set a selling price
                                • 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
                                • Calculate months and years between 2 dates on subform

                                  I am looking for a function syntax for an employment candidate to calculate the number of years and months (decimal format. eg 1.2 years) they are employed. I have their start date entered, but if the end date is blank, that tells me they are still employed
                                • Combine related grouping values into categories in CRM analytical components

                                  Hello everyone, Analyzing large datasets can be challenging when dealing with numerous individual data points. It's often difficult to extract meaningful insights when information is scattered and ungrouped. To address this, we're adding options to create
                                • How Kiosk Studio can simplify sales for bank employees | Kiosk Studio Session #4

                                  Hello everyone, Banks can boost revenue by cross-selling to their current customers. For example, they can sell credit cards, personal loans, and more to existing account holders. To do this, bank employees move all around the CRM, open and close records,
                                • Tip #19 - Create checkbox tracker in your spreadsheet

                                  Hello Sheet users! We are here with yet another tip to help you get the most out of Zoho Sheet. Spreadsheets can be used to handle a variety of tasks, but ever tried using checkboxes to track the progress of your action items dynamically? Here's a sample
                                • Integrate Oracle with ZOHO CRM

                                                       Please let me know if its possible to Integrate Oracle with ZOHO CRM. If yes then help me in doing it. 
                                • UUIDs

                                  Has anyone coded a Universal Unique Identifier (UUID) generator in Deluge?
                                • Introducing signer groups: Streamline signature collection and make it even faster

                                  Hello everyone, We're excited to introduce signer groups, a feature designed to make your signing process quicker, more efficient, and collaborative. With signer groups, you can send an envelope to a group of people, and any member of the group can open
                                • Calendar - Recurring Event - End of Month and Last Weekday of Month

                                  How do I set a calendar event to recur on the last day of every month? How do I set a calendar event to recur on the last weekday of the month?
                                • Duplicate Zoho Invoices and Sales Receipts

                                  We have been running into an issue where upon saving an invoice or a sales receipt, we get a duplicate: same information saved twice but with a different invoice id/number and sales receipt id/number. I have logged a ticket but so far no response. It
                                • Introducing revamped Zoho Creator Developer Console—a powerful platform for developing and distributing apps

                                  Hello everyone! We're thrilled to announce the launch of the revamped Zoho Creator Developer Console—a dedicated platform designed specifically for Creator developers and Partners to build, test, and distribute apps to your clients. Developer Console
                                • Phone App of CRM doesn't find contacts

                                  I open the crm to and do a contact search but nothing comes up. If I do a full zia search it will find an old note that is attached to a contact and I can open the contact. BUT I still can't enter notes of calls, set appointments, etc. It requests I go
                                • [Product Update] Deprecation of 'Inbound Transport Details' module in Zoho Analytics - Amazon Seller Central integration

                                  Dear Customers, Please be informed that the Amazon Seller Central will be deprecating the 'Inbound Transport Details' module APIs effective December 20, 2024. As a result, this module will no longer be supported in the Amazon Seller Central - Zoho Analytics
                                • Is there any support for Drivers license and other forms of ID scanning capabilities?

                                  When scanning a drivers license barcode for data input to a Form, the scanning tool receives all the raw data but there doesnt seem to be a function to limit or remove the unnecessary fragmrnts, like a prefix. Is there any support or info in the help
                                • Exciting Update: Multi WhatsApp Business Account (WABA) Support Now Available in SalesIQ!

                                  We’re pleased to share an important update that will enhance the way you manage your WhatsApp Business accounts (WABAs) within SalesIQ. With the launch of Multi WABA support, you can now connect and manage multiple brands more effectively, each under
                                • Gravity Forms plugin not passing some fields

                                  I use the gravity form zoho plugin to push data from my lead form into my lead page in Zoho CRM. Everything was working file for about 6 months. Suddenly on Oct 1st, some of the fields are no longer getting passed to Zoho. The fields with the problem
                                • Can't delete bank transactions (i changed from 14 days trail to free just now)

                                  Hi, I manually added one bank transaction When i try to delete it, it say below: What should I do?
                                • Feature Request: Search in the PC client. Some thoughts about the search.

                                  Hi all. I'm really excited to start using Zoho Notebook, but I'm missing some of the search capabilities on my desktop. There are also some thoughts on improving search in general. Search is very important to me, without it it is difficult for me to use
                                • Leave Policy for Brazil

                                  Hi, Brazil asked us to configure Zoho People to apply the following policy: · To block starting vacations 2 business days before holidays or weekends; Employees cannot start their vacations 2 days before holidays or weekends. Example: If December 25th
                                • Adding date field to each individual Items when creating Invoices?

                                  When adding items into an invoice I need to be able to have a date for each item. Example below: Date Item Description Qty Rate Discount(%) Tax Amount 31/07/13 Brown Sugar Performance 1.00 3,000.00 0.00 10% $3300 Is this possible or will it be in the
                                • Auto-Create OneDrive Folder Structure Upon Lead Creation

                                  Hello, New to Zoho and looking for help on a critical process automation I'm looking to implement. My company currently utilizes OneDrive for file management and the folder structure is Proposals -> Client Name -> Address (where I need to initially create
                                • Profile Page View Customization

                                  I need to change the fields, sections from the profile view of an emplyoyee.
                                • What do the Image Sizes mean in Zoho CRM Email Templates?

                                  Below you can see the image options in email templates: Banner, Fit, Small, Medium, Original, Custom. Can someone from Zoho please share with me: What each is/means? How each will look on desktop AND mobile? How to edit "custom"?  If I choose "Custom"
                                • Translate any published presentation to the language of your choice

                                  As part of our constant effort to enrich your presentation experience, Zoho Show has rolled out a new feature for translating published presentations. Consider the following scenario: Zylker IT services, a multinational corporation, has announced product
                                • Blueprint: multi-select lookup field not available in the criteria option

                                  I read this old forum post which stated that multi-select lookup fields are now selectable as an option in a Blueprint transition configuration: https://help.zoho.com/portal/en/community/topic/blueprint-multi-select-lookup-field-not-available-within-blueprint-transition
                                • Apply Credit Note Automatically

                                  We need the ability to apply open Credit Notes toward invoices generated by recurring invoice as the first, priority payment. This should be an option that we can enable/disable in the recurring profile and/or the Credit Note. Other invoicing systems can do this. I'm not sure why Zoho Invoice doesn't have it. Here's an example for a Recurring Invoice... If a customer has open Credit Notes, and a saved credit card set for auto-pay, once an invoice goes out, the credit balance gets automatically applied
                                • Workflow for "Expenses" module?

                                  Hi there, over the last 2 years, Zoho Expense has seen tremendous growth and we are happy with it. But, sometimes it is frustrating to see things are being implemented halfheartedly, or so it seems. For example, There is the possibility to create workflows
                                • Record Template - Conditionally printing sections

                                  Is there a way to conditionally print a section of a Record Template? More specifically I am printing records from a Form "Invoice". That Form has 3 SubForms. I'd like to print the content of those SubForms using a Record Template but only if they have at least one line item. If they have no line items, I'd like to hide the headers for that section on the printout.
                                • User can choose the PDF report

                                  Hi. I would like to find out if a user (Creator or customer portal) to choose from the different PDF customised reports that have been built?
                                • 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)
                                • PLEASE FIX Search options and consider a Global seach option

                                  A recent update has removed the ability to search for addresses and phone numbers under contacts. We cannot find where this moved to (If it is still available). Please put these options back as we cannot locate specific projects anymore. Also please consider allowing for a Global search. This would really improve the search engine. For example: If I search for "Sally Jones" then all invoices , estimates, vendors etc.. would populate.. Please let me know if you need any more information. Thank You....
                                • Customize your calendar based on personal preferences

                                  Greetings, We're happy to introduce a few new capabilities to the Activities module's Calendar View! Now you can tailor your calendar's appearance and notification settings to suit your needs. In the past, the Calendar View lacked customization options
                                • BUG ALERT: Client Script + Commands -> $Page contextual data is not updated

                                  When using the new Client Script Commands feature, there is an issue with the Client Script $Page contextual data not accurately being updated each time a Command is run. Assuming a Client Script Command called "Client Script Command Bug" with the following
                                • Show iFrame of related List inside of Blueprint Transition

                                  Hey, is it possible to show an iFrame of a related list like this inside of a Blueprint transition?
                                • Lookup Fields not Converting

                                  I manage holiday properties. I have a lookup to the Accounts (Properties) in the Leads module. The lookup is connected to the property address field. When I convert it the lookup field does not update in Deals, although the property address does. There
                                • 2024: A Year of Transformation with Zoho Forms

                                  As we close the curtain on another exciting year, it’s time to reflect on the strides Zoho Forms has taken in 2024. From empowering businesses with advanced tools to simplifying workflows and enhancing user experiences, our updates this year were all
                                • Next Page