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

    • Need manual aggregate column pathing help

      See linked video here: https://workdrive.zohoexternal.com/external/a5bef0f0889c18a02f722e59399979c604ce0660a1caf50b5fdc61d92166b3e7

    • Merging contacts does fail because of help center membership

      I'm trying to merge two contact records (they are the same contact) where one of them is a member on the help center. The system warns me about this situation and then I de-activate this contact as an "End User" for the help center. Right now the system

    • Duplicate Contacts - how to get merge or delete

      I have noticed that our list of contacts in Zoho Desk duplicates contacts periodically.  I have yet to identify when or why.  How do I merge or delete them?  I see there is a "Deduplicate" but I am unable to find anything that explains this feature.

    • Admin Access to Direct Messages in Zoho Cliq

      Hi Zoho Cliq Team, We would like to request a feature enhancement to enable admin access to one-on-one conversations (direct messages) conducted through Zoho Cliq. Use Case: As administrators, there are situations where it becomes essential to access

    • "Mark as Spam" not working as expected

      Dear support, in the below scenario, clicking on "Mark as spam" identifies only the first of the checked emails as spam, removes that email from the visible list and leaves the rest of the list still visible & unchecked. I've tried check-marking them

    • Massive price increase for user licenses of Zoho Portal

      This actually a complaint about this announcement: https://help.zoho.com/portal/en/community/topic/free-user-licenses-across-all-portal-user-types You present this as an enhancement. And, yes, while reading the main part, I'd agree that (for smaller companies),

    • Calendar - "super compact" week view

      every time i go to my calendar i have to re-engage the "super-compact view" for the week view...is there a way to make "super-compact" a default view so I dont have to keep on setting it manually?

    • Calendar - "pop up" locations

      One of the attractive features of google calendar and outlook calendar is that locations for events will start to automatically populate the location drop down menu as you type. Adding this feature to zoho calendar would be the final feature i need.

    • Using Zia in Zoho Sheet data to research the internet and return answer to a cell in Zoho Sheet

      I'm trying to see if Zia (connected with OpenAI key) can take data parameters stored in a Zoho Sheet to conduct research out on the internet then return an answer into the same Sheet. I'm trying to do the equivalent of using something like the =AI() function

    • [Free Webinar] Learning Table Series - Creator for the Education Industry

      Hello Everyone! We're thrilled to invite you to the Learning Table Series—a year-long initiative to demonstrate how Zoho Creator can transform industries with innovative and automated solutions. Each month focuses on a specific industry, and this time,

    • Remove the [## XXXX ###] from subject replies

      For our organisation we would like to have the [## XXXX ###] removed from subject replies. Cheers, Jurgen 365VitaalWerken

    • Self Client Authorization Issue

      Hi. Trying to test the api integration for Zoho Desk with the Self Client - Client Credintials flow method. I've created the self client, obtained the client id and secret, inputted "Desk.tickets.ALL" as my scope, and "ZohoDesk.[My Zoho Desk Org ID]"

    • How Can I Easily Access and Manage My GEPCO Online Bill Using Zoho Sheets?

      Hello everyone, I'm looking for an efficient way to access and manage my GEPCO online bills. I've heard that Zoho Sheets can be a powerful tool for organizing and tracking bills, but I'm not sure how to set it up for this specific purpose. Does anyone

    • All notes disappeared

      I've been using the notebook app for over five years on my phone without being logged into an account. A few days ago I opened the app and all my notes had disappeared. Since then I tried restarting my phone, updating the app and logging into my account,

    • How to add tags to a record with jS SDK 1.2/ZohoEmbededAppSDK

      Hello Is it possible to add tags to a record with jS SDK : https://live.zwidgets.com/js-sdk/1.2/ZohoEmbededAppSDK.min.js ZOHO.CRM.API.updateRecord Thanks for insights

    • URGENT: Zoho Forms reCAPTCHA v2 Spam Issue

      Hello Everyone, We are encountering a critical issue with Zoho Forms despite having reCAPTCHA v2 enabled. Our business is accessibility-focused, and we are receiving a high volume of spam submissions, which is significantly affecting our workflow and

    • View all Products by pipeline deal

      Very good CRM I use it everyday only problem is modules not being interconnected especially products module. The main problem of products module are separated from contacts and company modules and only being connected to the Deals module. This way there's

    • Add "Lead Image" in Bulk?

      Each of our Leads is accompanied with a URL containing a photo of the lead when they come in. We currently have to manually download then upload the photo to the lead. This is a HUGE waste of time. Is there any way to AUTOMATICALLY add the photos to the

    • Map fields from CRM record to Finance Suite/Books Invoice fields

      I'm trying to auto-fill unique record specific field inputs that I have in my Contacts and Deals modules onto Invoices created from the record's finance suite related list upon creation.  One example is a field called "Job Number" that I have in my Contact

    • What's New in Zoho Analytics - December 2024

      Hello Users! We’re excited to bring you a roundup of the latest features and improvements in Zoho Analytics. These updates are designed to elevate your data analytics experience, making it more powerful, interactive, and seamless. Let’s dive in! Expanded

    • trying to access CRM Variables with JS SDK

      Hello i built a widget with Sigma, i create CRM VARIABLES in custom properties. I try to access them in function : ZOHO.embeddedApp.on("PageLoad",function(data) with : ZOHO.CRM.CONFIG.getVariable("mycrmvariable").then(function(data){ console.log("mycrmvariable

    • Writing on sketch cards is bugged when zoomed in

      When zoomed in, it writes a noticeable distance above or to the side of where you're actually trying to write. The further you're zoomed in, the more noticeable it is. Zooming is also entirely absent on the desktop version.

    • Private Project

      Hi, I would like to know if a user can create a Private project that only he's able to see it. Not even the ADMIN user. Thanks

    • Accordion in tabs to create FAQs, etc.

      Accordion elements do not seem to be able to be placed in the tabs. It would be useful to be able to do this. Thank you.

    • Which are the IP addresses to use for 'split delivery' with Office 365? (Zoho mail inbound gateway)

      Hi, I'm trying to set up 'split delivery' (email routing) with Office 365. I'm following the instructions to set up Office 365 as the primary server (https://www.zoho.com/mail/help/adminconsole/coexistence-with-office365.html) One of the prerequisites

    • Zoho Projects 2024 Recap

      Dear Users, As we conclude another remarkable year, it's the time to reflect on the journey we've just completed. The year 2024, defined by significant milestones, challenges, achievements, and important lessons. Every moment has contributed to the story

    • Custom Fields at Line Level

      Hi, is there an ability to add custom fields at line level? I need to track the start and the end date for each product within an invoice and I can't seem to find an option to do this.

    • Zoho API Error Code 7019 when adding job.

      Hello, I am following the documentation found here. https://www.zoho.com/people/api/timesheet/adding-jobs.html Regardless of how I try and post the data (including just using the example requests), I receive back the response {'response': {'message':

    • How to see changes with ZOHO.CRM.API.updateRecord(config) without reload page

      hello got a widget in account, trigger with a button i copy data to account when click on a button, in my popup All is working well. But i need to reload the page to see the update. How can i see the changes without reloading page, only when close the

    • How to call a Creator function which is in a different Creator application?

      How to call a Creator function which is in a different Creator application?

    • Unable to send message; Reason: 554 5.1.8 Email Outgoing Blocked

      My account is mino@flawless-frames.com, or flawlessframesstudio@gmail.com Could you please unblock my account, I've got restricted from sending more emails

    • Stock Count

      The stock count is a nice new feature, but we cannot figure out how to: 1. Use it without assigning to a person, we have a team or one of multiple do stock counts as do most any company. 2. Add any extra fields to what the "counter" sees. The most important

    • Move a Contact from Current Account to a NEW Account

      I do not believe the functionality to Move a Contact from a Current Account to a New Account is not available. Please someone tell me I am missing something! I have been through designing, developing, using and selling CRM systems for over 25 years and had this functionality20+ years ago in other CRMs.  In the real world people move from one organisation to another. In the sales, finance and technical world it is nice to see the communication history with that person in their old account and also

    • Force Specific Layout for CRM Contacts Portal

      Hello: We're in trial on ZOHO One and looking at the CRM Portal (just for the contacts module). We have a client layout set up for Contacts that is working well for our internally, but for the portal we don't want to require (make mandatory) some of the

    • Automatic Removal of Departments and Groups for Inactive Employees in Zoho One

      Hi Zoho One Team, We hope you're doing well. Currently, when an employee is marked as inactive in Zoho One, they remain listed as a member of their department and associated groups. This creates a challenge in maintaining accurate records and ensuring

    • Change eMail Template for Event-Invitations

      Hello ZOHO-CRM Team How I can change the eMail Template for Event-Invitations? I work with the German Version of the Free Version. I know how I can modify eMail alerts or Signature Templates, but where I can other eMails modify you send out? Thank you for your answer. Regards, Juerg

    • Zoho Social integration with Zoho Flow

      Is there any plans for Zoho Social integration with Zoho Flow?

    • Zoho CRM Widget and translations

      Hi everyone! We're building a Widget with zoho-extension-toolkit, how is localization supposed to work? "zet init" created a translations/en.json file, but what should go inside it and how is it supposed to be accessed from the Widget/javascript? Thanks

    • Bienvenue à Zoho FSM : l'optimisation des opérations locales qui offre une expérience de service impeccable

      Nous sommes ravis de vous présenter Zoho FSM, la plateforme de gestion des services terrain de bout en bout. Les solutions de gestion des services locaux s'adressent aux organisations qui effectuent des activités d'installation, de réparation et de maintenance

    • Adding tag to specific record as an acion in a workflow

      Hi! I've created the following workflow in the module 'Leads'. When a record meets the criteria, there should be a tag added to the specific record in the module 'Contacts'. In the module 'Leads', there is a look-up field named 'Kandidaat' which is connected

    • Next Page