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

                                • Load form in iframe without header

                                  I am trying to load a form into an iframe without the header, but I am not having any luck. I am using openUrl() to load the iframe with the form URL and zc_Header set to false, e.g. #Form:Add_Case?zc_Header=false but it is still loading the header. Any
                                • Filter embedded report

                                  How to filter embedded report in a page, below code is not working. dateField => startDate & dateField=< endDate The report should print on page containing records from startDate to endDate. params='zc_Header=true&amp;Service_Date__gte=<%=startDate%>&amp;Service_Date__lte=<%=endDate%>'
                                • Creator Simplified #5: Set file upload restrictions in Zoho Creator

                                  Hey Creators, Welcome to the next post in the Creator Simplified series. Today, we’ll explore how to implement file upload restrictions to limit user submissions to specific file types. By implementing an allowed list for file uploads, you can optimize
                                • Field Type: Address, Change District/State to Dropdown with picklist??

                                  Using the Address Field type, is there a way to make the District/State field be a dropdown with a picklist so the users can select rather than type the state name every time? I know this can be done if I use a drowdown field for the State (or entire address information), but that isn't as tidy as using the address field type. I apologize if this is a duplicate. I posted this question the other day, or so I though. Can't find that post.
                                • cutomized fields are not showing up in zoho creator from zoho crm

                                  We have customized fields in zoho crm under accounts module like "Last production upgrade" --> This field is a date. When created a solution in zoho creator i couldn't find any of the customized fields. Would you please help me on this matter? Thanks
                                • How to Add Bulk Data in Zoho Creator Forms Using Deluge Without Exceeding Execution Time Limit

                                  I have a database form with a column named 'Product Name' containing 8000 values in a Zoho Creator form. In another form named 'Returns Data,' I have a column with the same name, 'Product Name.' How do I add these 8000 values to the 'Returns Data' form
                                • Open New Free Zoho Account

                                  Hi Team, Do you guys offer a free email hosting? I do have a domain already. If yes, what is the process to open the new account? Thanks,
                                • 554 5.7.1 : Recipient address rejected: user info@intimspace.de does not exist

                                  554 5.7.1 : Адрес получателя отклонен: пользователь info@intimspace.de не существует I can't send an email to Google at info@intimspace.de. An error comes. I entered everything correctly in DNS https://zohomail.tools/#domainDetails/intimspace.de/ALL
                                • Emails going back unread

                                  Hi all, When in Zoho mail - when I recieve a new mail it puts back all emails read that day back to unread - I then have to go back through and open all emails I have already read! Gets very annoying... Any idea on the bug fix?
                                • Been getting this error, every now and then "Get count limit exceeded, please try again after 3 mins"

                                  it is really annoying.
                                • Constraints on Tasks

                                  We have a use case where we have certain fixed date tasks and need to schedule predecessor tasks around these. Predecessor tasks need to be completed with a lag before the fixed date. We should be able to schedule the start and end date for predecessor
                                • Moving Project Dependencies Not Moving Precedessors

                                  Most of the time we want to base our start dates around an event that is in the middle of the project template. If I set a bar up at the date we want it, it doesn't move the predecessors up. Is there a way to change this? eg. there is no point starting
                                • Can you set task due dates to be "x" days before the milestone?

                                  We have a milestone set as the date of our first event. All of the tasks need to happen in increments prior to the milestone event. Is there a way to configure this without having to set up each task due date? Thanks!
                                • Default ticket template in helpcenter

                                  Hello, I have a web form and a ticket template created. How can I make that my default ticket template? If an user clicks New ticket or create a ticket, I want that template to be the default one. Thank you for the time and info.
                                • Expanded data-capturing capabilities with enhanced tabular sections

                                  We are thrilled to announce an update to Zoho Recruit that brings even more flexibility and customization to your recruiting process. With the addition of 10 new field types to the tabular sections, you now have the power to enhance your tabular sections
                                • Integration of Business Hours in Email Templates

                                  Dear Zoho Desk Team, We would like to propose a feature enhancement to Zoho Desk that would greatly improve the utility of the Business Hours settings and streamline communication with our clients. Feature Request: Integration of Business Hours in Email
                                • Add Owner to deluge-created module record note

                                  Is it possible to include the "owner" aka "creator", of a Note when creating it via delulge? This sets "superadmin" as the Note creator. I need to override it. notemap = Map(); notemap.put("Parent_Id",program_contact_id); notemap.put("Note_Content",program_contact_data.get('Note'));
                                • 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
                                • Send email is not authenticated

                                  Hi, I’m getting an error in Gmail, when receiving an email from my account in zoho, my email is already authenticated in my domain, and I don't know why I keep receiving this message... also testing in outlook, the message goes directly to "junk".
                                • 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
                                • Next Page