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

    • Streamline Custom Dashboards

      I'd like every brand have the same dashboard. Is there a way to streamline them so every brand has one? Or that I can use the same dashboard from another brand?

    • Integrate MS Teams with Zoho CRM for faster collaboration

      Availability Editions: Standard and above DCs: All Release status: This feature has been released for all users in all DCs. Help resource: Microsoft Teams integration Hello everyone, We're adding MS Teams to our lineup of CRM chat integrations—Cliq, Slack,

    • Easy way to delete attachments

      I've reached my data limit and would like to run a view/report, and mass delete attachments. Is there an easy, fast way to do this? Moderation Update: Post Summary: There are two features the post discusses a) Easy way to remove Email attachments Will

    • Ho to restrict access to row level to Zoho Analytics users

      Let me explain the scenario we are trying to achieve. We have an online system our team members work with. On it we have 6 users that manage data from different areas (North, South, East and West). We would like to transfer this information to a Zoho

    • Remove the link between app admin roles and org admin privileges

      Greetings Zoho One Team, Currently, assigning someone as an admin in certain Zoho apps, such as Cliq, Connect, Mail, Vault, or Forms (and maybe other apps as well) automatically grants them org admin privileges, even though they are not listed as org

    • Standalone function is not working

      Hi, We have created a standalone function to integrate with a third-party service using OAuth. However, the standalone function's REST API key is expiring automatically after some time. When we regenerate the API key from the admin account, the function

    • All Deluge environments draggy! Negatively impacting productivity

      Hello, I have been using Zoho flow, CRM, Project, etc to develop custom functions, integrations. etc. for over 5 years. However, just about 3 days ago, I observed the deluge integrated environment is now acting draggy across all Zoho products using Chrome

    • Pass json to ZDK.Client.openMailer TO parameter

      Hello I try to make send emails to a list of emails with : ZDK.Client.openMailer({ from: 'example@zoho.com', to: details_output, subject: 'test Mailing List', body: 'Test Mailing List Body' }); where details_output is an array like : [{ "email": "testcarte18078@test.com",

    • How to remove banners at the top of email web page

      Every day, I find valuable screen real estate being consumed by Zoho advertising themselves at the top of my email web page. I can dismiss that "announcement", but something else will come back the very next day. How do I permanently dismiss them as 99%

    • My domain provider does not support to DKIM records

      My domain provider does not support to DKIM records in zoho mail. It does not allowed underscore in a TXT name but zoho had provide DKIM records already with an underscore This is the zoho provides But my domain provider does not allowed

    • Zoho email experiencing delay when receiving emails from AWS SES

      When sending an email from our SES, our non-Zoho email is receiving emails almost instantly with a 1-2 min delay, however, the zoho email we send to is experiencing delays from 3-4 hours and sometimes dont recieve them at all. Any idea what might be going

    • How to listen to ticket change

      Hello community, I created a widget, which checks all departments, if the user has written there as well, as some customer do this. Overall it works fine, except that I have to refresh the widget tab every time I go to another ticket. How can I listen

    • Filter report using dynamic filter using function not working

      Hi - I am trying to dynamically filter a report as follows: when I save the filter it looks like this: However when I run the report it is not returning results as I expect. I have tested the function. If I copy and paste the output of the function and

    • Did you know you can secure your content with Zoho Writer?

      Sometimes you need to protect certain parts of your content to conceal sensitive information or prevent changes to important sections of a document. Zoho Writer offers several tools for securing content to help maintain privacy, security, and confidentiality

    • Webhook when estimate is refused is not firing

      Hello, I use a workflow through make that sends estimate with zoho books (I paid books and sign). -Those estimates when accepted are firing the webhook that I create in zoho sign (photo 1) -However when refused they are not firing the webhook that I created

    • How to add coloring on List Reports

      Hi guys, I would like to add colors to List reports. Is there an option to apply table colors other than using the custom layout? Thank You!

    • How do I delete a test email address to which I am supposed to send a test email?

      How do I delete an email address added to a test email recipient that is no longer needed due to resignation or other reasons?

    • Formula fields - Request for dynamic recalculation / proper implementation

      Hi Guys, I have a big problem with Zoho formula fields. They don't recalculate each time the record is viewed - only when a record is edited. Formula fields should be updated dynamically each time a record is retrieved. As an example: I have a formula

    • Create custom rollup summary fields in Zoho CRM

      Hello everyone, In Zoho CRM, rollup summary fields have been essential tools for summarizing data across related records and enabling users to gain quick insights without having to jump across modules. Previously, only predefined summary functions were

    • Creating smart filters manually

      Hi Team, One of my colleagues accidentally deleted the Notification folder in Zoho Mail. Now all the emails are directing to spam instead of inbox. Is there any way to create the smart filter manually?. With Regards, Logeswar V

    • Is there a way to get Guided Conversation responses to appear on a ticket?

      Hello When using the Create Ticket block, is there a way to save all of the responses the user has inputted on the ticket once it's been made?

    • Tickets Assigning Automation

      I am trying to build a bot which can automatically assign the tickets to the concerning team as of now we have a dedicated person who read the emails, understands the query and then assign it to the dedicated team. I have built an prototype of the same

    • PDF API FROM ZOHO CREATOR DELUGE SCRIPT

      Hi I am in need of using a PDF Api to compress and Merge PDF files from zoho creator. Any support on this would be really helpfull any sample code for any PDF API would be extremely heplfull

    • Zoho Desk using APIs

      We have generated the necessary tokens and successfully executed the following calls: • List all tickets • Get a ticket • Create a ticket We have encountered difficulties when attempting to perform searches using the APIs related to SEARCH, as it returns

    • Knowledge Base - Import PDF/Doc

      Our company already has guides and manuals in PDF/word format. Is there a way to directly important these as articles for our customer portal? When doing a copy/paste the formatting gets a little skewed and images don't post over either. 

    • Paid Support Plans with Automated Billing

      We (like many others, I'm sure) are designing or have paid support plans. Our design involves a given number of support hours in each plan. Here are my questions: 1) Are there any plans to add time-based plans in the Zoho Desk Support Plans feature? The

    • Credit Card Terminal for Zoho Books

      Hello, Instead of punching the credit card number manually for customer payment, do you have a third-party hardware credit card reader that works with Braintree? Thank You

    • Checklist/ save to onedrive/ a group of items invoicing in Zoho FSM

      hi, is there a way to add a specific checklist to any WO without passing eachtime by the model customization? can we save file such picture directly in our sharepoint ak onedrive? is there any way to add a group of item pre defined to make invoicing easier

    • Splitting a List into different rows

      I am getting a List from a for each loop. But I can't figure out how to separate each item that is separated by a comma. Example Zone 1 - Front Door,Zone 2 - Rear Door,Zone 3 - Side Door I need it too look like this: Zone 1 - Front Door Zone 2 - Rear

    • This domain is not allowed to add. Please contact support-as@zohocorp.com for further details

      I am trying to setup the free version of Zoho Mail. When I tried to add my domain, theselfreunion.com I got the error message that is the subject of this Topic. I've read your other community forum topics, and this is NOT a free domain. So what is the

    • Zoho Analytics - CRM Sync Failure

      We have experienced consistent sync failures between our Zoho CRM and Analytics apps, but there aren't any details provided as to why this failure might be occuring. Please advise on troubleshooting steps so we can figure out how to restore the sync.

    • Setup Leave Policy which increases based on years of service

      Please confirm if this is correct. Effective after 0 days of employment, Opening Balance is 6 days. Valid only for the first year of employment and Accrual and Reset are disabled. Effective after 1 year of employment, Opening Balance is 10 days. Valid

    • Zoho Books Price list associated to a cusomer

      how we can associate a price list to a costumer? pls don't send me to your FAQ section (Associating Price List to a Customer:: Knowledge Base | Zoho Inventory) nothing it's explained and there no place where we add price list to a customer

    • How to create Sepa Direct Debit XML file: solution and code

      Even though Books provides a payment integration for Stripe and Gocardless (in Europe) there are customers that want to use the Sepa services of their own bank. Mainly because Stripe and Gocardless are quite expensive. In that case they would need a Sepa

    • Why can't I see the email from Zoho Campaigns Automation under Zoho CRM Leads module?

      I recently did update the field mapping on our Leads sync services between Zoho CRM and Zoho Campaigns. The end goal is to create tailored email drip campaigns with the use of segments and automation. I understand you can build cadences, email templates,

    • Zoho Payments integration

      What are you going to get Zoho Payments integrated with Zoho Forms? It's kind of embarrassing to have several payment options... but not your own, which has been out for quite a while.

    • Query About Updating Records in Batches via API

      We are working on integrating the Creator application with an external app, and we need to update thousands of records daily. I understand that the "Update Records" API is available; however, it appears to be designed for updating multiple records with

    • 📣📣 Zoho Bookings - Feature Roadmap 2024

      Hi Everyone, Thank you for all the support you have been showing Zoho Bookings. We had a fabulous 2023, with a bunch of new features and over 60K new users. In 2024, our prime focus will be on user experience, and we have a few vital features coming in

    • Allow Selection of Multiple Threads and Notes for Splitting into a Separate Ticket

      Dear Zoho Team, We would like to request an enhancement to the Split as New Ticket feature within Zoho Desk. Currently, users can only select one incoming thread to split into a new ticket. However, there are many scenarios where the ability to select

    • Final reminder: Zoho Desk Old UI will be deprecated on December 15th, 2023

      Greetings Zoho Desk users! Effective December 15th, 2023, the Zoho Desk old UI will be deprecated. This means that the option to switch between the old and new UI will no longer be available. We kindly request all users to move to the new UI by clicking

    • Next Page