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


    Nederlandse Hulpbronnen


      • Recent Topics

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

      • 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

      • Reports - custom layout - duplicate report

        Do you also have this problem and what is the possible solution? I duplicate a report that has a "custom layout". Unfortunately the custom layout is not duplicated. To be improved for a future release by Zoho. I export the custom layout and import it...

      • Included in Zoho One?

        Will LandingPage eventually be included in Zoho One?

      • Select CRM Custom Module in Zoho Creator

        I have a custom module added in Zoho CRM that I would like to link in Zoho creator.  When I add the Zoho CRM field it does not show the new module.  Is this possible?  Do i need to change something in CRM to make it accesible in Creator?

      • Zoho LandingPage is integrated with Zoho One!

        Greetings to the Zoho One users out there! We're delighted to let you know that Zoho LandingPage is available in Zoho One too! With Zoho LandingPage, you can host custom-made landing pages, and persuade the visitors to dive deeper by making further clicks,

      • LinkedIn verification link and otp not receiving

        For the last 2 to 3 weeks I'm trying to verify my LinkedIn account to access my company's LinkedIn page, Linkedin is sending verification links and codes to this email address but I have not received any codes or links. Please help me here. Looking forward

      • Unlocking New Horizons: A Year in Review

        As we bid farewell to 2024, let's celebrate and revisit the key highlights of the year. From adding a new edition to cross-platform enhancements, here’s a roundup of all the feature updates designed to simplify accounting, optimize financial management,

      • 2024 Wrap: Rediscover these features and enhancements in Zoho CRM

        Hello everyone! I wish all of you a joyful and prosperous 2025! As we welcome 2025, I’m excited to share a recap of the year 2024 and highlight some of the coolest new features and enhancements we’ve added to the Zoho CRM platform. Last year, we announced

      • A quicker way to provide accountants access to Zoho Books, similar to Xero and Quickbooks

        Hey guys, I'm finding the procedure to give access to an external accountant to Zoho Books less than ideal. Having to create an account by Zoho instead of myself, and then wait for it to be given a license to then pass to the accountant seems a bit time

      • "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

      • Upgraded to Zoho One but Zoho Meeting still says Free Plan

        I signed-up for the Zoho One plan. When exploring the applications included, I came across a problem with Zoho Meeting. It says it's the free plan. I emailed support but they sent me a link that doesn't work and, when I found the article on my own, it

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

        Hello, Just signed up to ZOHO on a friend's recommendation. Got the TXT part (verified my domain), but whenever I try to add ANY user, I get the error: This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details I have emailed as well and writing here as well because when I searched, I saw many people faced the same issue and instead of email, they got a faster response here. My domain is: raisingreaderspk . com Hope this can be resolved.  Thank you

      • 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]"

      • This mobile number has been marked spam. Please contact support.

        Hi Support, Can you tell me why number was marked as spam. I have having difficult to add my number as you keep requesting i must use it. My number is +63....163 Or is Zoho company excluding Philippines from their services?

      • Update Candidate Status Through Workflow in Blueprint

        Hi Team,  We have a blueprint built out with custom functions that update particular fields based on candidate actions. When particular fields are updated we need to move the candidate forward in the blueprint. We tried to do this through a workflow,

      • Zoho Canned respond do have a huge lag issue.

        Previously the Zoho canned respond works perfectly ... on once server update and all the Canned respond enconter huge lag... in the end cause most of the canned respond just shown code with /xxx and not the sentence....

      • Pay Contractor Timesheets

        I have contractors that fill out a timesheet. Each hour must be assigned to a current client. I need the easiest way to get the contracts paid. They are paid on an hourly bases. How can this be done?

      • ShipStation and Zoho Inventory

        Hello, I am looking to sync zoho inventory with shipstation ZOHO INVENTORY           SHIP STATION Sales Order  ==>  create ORDERS INVOICE  <==    Shipments What exactly does BETA mean on the Shipstation connector?  This is required for me to sign-on in the next month. Thanks in advance for your efforts

      • Saving slide elements

        I have created grouped items including text and animation that I want to use in later slides. (Like an animated logo) Is there a way to save these grouped elements in my library?

      • Are downloadable product available in Zoho Commerce

        Hi all. We're considering switching to Zoho Commerce for our shop, but we sell software and remote services. Is there a features for downloadable products? I can't find any information about this. Thank you very much Alice

      • Function #10: Update item prices automatically based on the last transaction created

        In businesses, item prices are not always fixed and can fluctuate due to various factors. If you find yourself manually adjusting the item rates every time they change, we have the ideal time-saving solution for you. In today's post, we bring you custom

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

      • Move site from WIX to ZOHO Sites

        I have a simple website on WIX.  I am wondering if someone is available to help me move this website - https://www.videothreezero.com/ to ZOHO.  Michael  Boston

      • zoho calendar week view - "super compact by default"

        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?

      • 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

      • Change work hours per day for employees

        Hello, Is there a way to modify the work hours per day for employees in Zoho projects? This would be helpful for resource allocation to more accurately see when an employee who works 35 hours a week vs 40 hours has a full schedule. Thanks.

      • Zoho CRM Automation Help: Send Email When Fault is Marked as Done & Module Relationships

        Hi everyone, I have the following User-Created Modules in Zoho CRM: Clients Assets Faults Handymen Every client can have multiple assets. Every asset can have multiple faults. Every fault is assigned to one handyman. What I Want to Achieve: ✅ I want to

      • Adding New Domain to Zoho mail

        Hi, I have one Zoho account already called for example "Awesome Animals". Under this account I have one domain already setup with zoho mail, example: - awesomecats.com I have another website as well which I want to add under this "Awesome Animals" account,

      • I cannot receive emails.

        I need help, I've tried everything but I still can't receive emails from other people. I can send it but I can't receive emails, When I created the email it was all in order and suddenly I can't get emails from anyone anymore.

      • Incoming Gmail Email Not Coming Into Zoho

        My outbound email from Zoho is working, but when people respond to the email, it's not coming back into Zoho. I can see it when I'm in Gmail, but it's not in Zoho.

      • Não foi possível enviar a mensagem;Razão:554 5.1.8 Email Outgoing Blocked.

        Preciso de ajuda não consigo enviar emails,conta recen criada

      • ERROR_CODE :554, ERROR_CODE :rejected due to spam

        Please verify bounce message: This message was created automatically by mail delivery software.  A message that you sent could not be delivered to one or more of its recipients. This is a permanent error.  xxx@thalesesec.com Error, ERROR_CODE :554, ERROR_CODE :rejected due to spam content yyy@thalesesec.com Error, ERROR_CODE :554, ERROR_CODE :rejected due to spam content  Received:from RMRPC (190.102.146.226 [190.102.146.226]) by mx.zohomail.com with SMTPS id 1376415816667533.3706558194896; Tue,

      • Request to Customize Module Bar Placement in New Zoho CRM UI

        Hello Support and Zoho Community, I've been exploring the new UI of Zoho CRM "For Everyone" and have noticed a potential concern for my users. We are accustomed to having the module names displayed across the top, which made navigation more intuitive

      • Expand Zia's Language Support and AI Capabilities

        Dear Zoho Desk Support, I would like to submit a feature request to improve Zia, the AI-driven support assistant in Zoho Desk. Currently, Zia only supports the English language, while other AI agents such as Gemini, ChatGPT, and Claude can work with a

      • Average Costing / Weighted Average Costing

        Hello fellow maadirs. I understand Zoho Books uses FIFO method of dealing with inventory costing, but do you guys have any plans to introduce average costing? We indians need average costing. It's part of our culture. Please. I beg thee. Thanks.

      • Links in Instagram

        Hi there, I have been using Later for a while now but keen to come back to Zoho Social as Later doesn't offer tagging of pages on Facebook but they offer something Zoho doesn't. You can add a link to your bio which opens up your profile feed where images

      • Zoho Social integration with Zoho Flow

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

      • Unable to push Contact Score to CRM as shown in documentation

        Hello: According to the documentation found on the link below, which specifically states this is for the new CRM-Campaigns integration model, there is an option to push Contact scores in Campaigns to a field in the CRM. For reference, I have included

      • 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