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

        • Lookup field in User module cannot look up to custom modules!

          Hi there, Expense has been great so far but it's sad to see that a simple thing such as allowing a lookup to custom modules from the Users module is not yet implemented. Hope to see this in the next release. Do you have any plan for that?

        • Trigger Zoho Cliq Channel Workflows for API Messages

          Dear Zoho Cliq Team, I hope this message finds you well. We have noticed that reminders or messages posted to Zoho Cliq channels via the API do not trigger channel-based workflows. This limitation means that any bot configured with a participation handler

        • Webhook Trigger for New Messages in Cliq Channels

          Hello, I would like to request a feature to enable webhook triggers when a new message is added to a Cliq channel. This functionality would allow us to seamlessly send important information from Cliq to other relevant systems. This webhook trigger can

        • Ability to Edit the "Current Job Title" dropdown field

          Current experience/Issue: When a user (candidate) uploads resume to Zoho Recruit candidate portal, some fields are prefilled with the info from the resume/cv correctly. However, we've observed that; 1. the "Current Job Title" dropdown field is usually

        • I'm getting an "Invalid_scope" error, even though I used an access token generated with the correct scope.

          I'm getting an "Invalid_scope" error, even though I used an access token generated with the correct scope. Here’s what I did in Postman: Generated the code to create an access token using the following URL: https://accounts.zoho.eu/oauth/v2/auth?scope=ZohoCampaigns.contact.UPDATE&client_id=<client_id>&response_type=code&access_type=offline&redirect_uri=https://1882-2-26-193-161.ngrok-free.app

        • Problem configuring/customizing sales pipeline steps

          Hello, I have created several sales pipelines with different stages in them. Unfortunately I forgot to properly configure these steps (conversion probability, forecast category). How can I modify and customize all these steps? Thnak you by advance M

        • workflow for bounced email gets triggered, but email is status = opened

          Hello, I have a workflow that sends me an email if outgoing email are bounced. Now I got some kind of this emails, but the corrosponding contacts have status = open at the email. Why this bounce-workflow is triggered? Reports > Email Reports > Bounce

        • Power of Automation :: Automatically start / pause / stop timer on task status update.

          Hello Everyone, A Custom function is a user-written set of code to achieve a specific requirement. Set the required conditions needed as when to trigger using the Workflow rules (be it Tasks / Project) and associate the custom function to it. Requirement:-

        • Website Access Blocked (from one pc only) when attempting unattended access to any device

          Hello From one of my laptops I cannot access any remote device using unattended access. A Zoho Assist error page didplays 'Website Access Blocked. See attached.

        • Zoho Analytics to Zoho Sheets - automatic update?

          Hi all, If I create a zoho sheet from an Analytics Report or Analytics Data, is there a way for the zoho sheet to automatically update as the Report / Data in analytics updates?

        • Fixed Assets Register

          Thank you Zoho Books for adding fixed assets register. BUT there are certian tweeks that needs to be implemented. I found the following issues and seek improvements. 1) Fixed Asset Register Report in the Report Section has columns which are so much confusing.

        • Why can't I sync my Zoho Mail tasks and notes with my mobile device, and is there a way to fix this issue?

          I'm having trouble syncing my Zoho Mail tasks and notes with my mobile device. Despite following the usual steps, the tasks and notes don't appear on my phone. Is there a way to fix this issue? Regards, Adamjes, Tekskills India Pvt Limited, India.

        • Link to Desk tickets

          Hello, We are using Analytics to analyze data in Desk. Is there a way to embed a link to a ticket in reports? We'd love to be able to see the drill down data, and click a value in a result row that would launch the Desk Ticket in another window/tab. Thanks

        • Announcing new features in Trident for macOS (v.1.11.0)

          Hello everyone! Trident for macOS (v.1.11.0) is here with interesting features and enhancements to elevate your workplace communication and productivity. Let's take a quick look at them. Export emails. You can now export emails in the .eml file format

        • Zoho Sign Product updates - H2 2024

          Hello! We have almost come to the end of 2024! Here's a list of features and enhancements that went live in the later half of the year. NOM 151 certification Witness signing Formula, conditional, and custom fields Zoho Sign's extension for Bigin by Zoho

        • Build custom AI solutions with Catalyst’s QuickML capabilities in CRM

          Hello everyone, We’re thrilled to announce an improvement for our Zoho CRM Enterprise users: the ability to create custom AI solutions using Catalyst’s QuickML directly from Zoho CRM. As you may already know, Zia, Zoho CRM’s AI-powered assistant, offers

        • 【Zoho CRM】Webフォームに関するアップデート

          ユーザーの皆さま、こんにちは。コミュニティチームの中野です。 「Zoho CRM アップデート情報」の中からWebフォームに関するアップデートについて紹介します。 今回、以下２点のアップデートがありました。 ダブルオプトイン（2段階の同意確認）後の確認メッセージのカスタマイズ 登録から確認まで一貫したユーザーエクスペリエンスを顧客に提供するために、カスタマイズされた確認メッセージを作成できるようになりました。 ダブルオプトイン認証メールのカスタマイズ 顧客に最初から興味を持ってもらえるよう、パーソナライズされたメールを作成できるようになりました。ユーザーのブランドに合った本文を作成し、パーソナライズすることで、様々な顧客に対応することができます。

        • Converting Time and Time Zones

          Hi Everyone I am trying to convert a time Zone to the local time of the user. I am fetching some data from an API, and it is coming back in this format: 2024-12-09T16:49:23Z This is in UTC/GMTZulu time. I am looking to convert it to the user time. In

        • Tip of the week 34 - 5 ways to maintain your email list

          A proper email list often reflects the reach of an institution. This reach is coveted by all but achieved by some. We often forget about drawbacks and incline towards numbers. Success is often reflected by quality and not quantity. This simple message reverberates in maintaining a hygienic email list. Here are five tips which will help you maintain a proper email list.    Organic email lists   Non-stop competition can make us susceptible to shortcuts like buying and renting lists from third party

        • Whatsapp Limitation Questions

          Good day, I would like to find out about the functionality or possibility of all the below points within the Zoho/WhatsApp integration. Will WhatsApp buttons ever be possible in the future? Will WhatsApp Re-directs to different users be possible based

        • Can not send campaign

          Hi, I'm trying to send a newsletter to my subscribers, but seems is not working - or maybe I did some wrong steps re. upgrades. I'm the admin for this account, no other person is using Zoho for my campaigns and I did not access the platform during last

        • Multilingual Newsletter

          Hi, Can Zoho campaign give the possibility to create and send a campaign in English and French, giving the possibility to the person receiving it to switch from default language chosen for a campaign? thnaks

        • Re: constant rejected email form and to my account

          Hi, have had several rejection when I sent an email to Zoho account as well as other people have sent emails to my as your health Centre they have account and all aspects have been ejected. i wonder why the email are rejecting to and from. If you see

        • Top Menu Disappeared from Blog Page

          Hi, Our top menu disappeared at Blog Posts page. However, it's still visible any other page on the website. I attached two screenshots, so it can be understood clearly. How can we bring back top menu? Thanks, K.

        • Add Comment/Notes to Each Action in Zoho Flow for Internal Documentation

          It would be great if Zoho Flow could introduce a field to every action where we can make an internal note about why we are doing something with a specific action. This is especially helpful if more than one person from the organization handles automation

        • Questions about To Do

          1. I created a To Do note on Android and there is a line sorting option in the options drop down menu. But I didn’t find such an option in the PC client. I really need this option. 2. Why is there no search in To Do on the PC client? 3. Why is there no

        • Tip of the week 03 - Sending emails in batches

          Today's marketers not only want their email marketing to be efficient, but also smart. For an email campaign, you may think you have all the essential elements for lead conversion—a big mailing list, an attractive template design, and the most-engaging message content, but after hitting the ‘send’ button, you may not get the expected conversions. Wondering why? Here’s one of the major reasons. Many marketers miss out on sending the email campaign the right way. Did you know that you should not be

        • Sites Speed and Performance Grades

          I noticed that there are no recent inquiries or complaints about load speed or performance issues with Zoho Sites websites. However, I wanted to understand what Zoho has done to ensure that speed remains optimized, images are compressed and lazy loaded,

        • Feature Request - Configurable Payment Icons + Pay Now link in email.

          The PAY NOW buttons (icons) on invoices are really small. It would be great if we could make that a big, colored icon. Better would be to add a button to emails as well. 

        • Survey end date extension

          Hi, Is there any way to extend the end date of my survey? I needed more time in finding respondents that is why I need to extend the end date of my survey. Help. Thanks

        • AI read notes or explanation

          It would be such a great feature to have AI voices be able to read our Notes or Explanation If not having the AI speak the notes at run time, how about a feature where inside of Zoho Show you can have it look at all the notes of all the slides and have

        • Help with technical problem

          Hello, I want to make it so I can say how many days are left until a date is reached, and for it to give me a status on if its VALID, EXPIRED, or ABOUT TO EXPIRE, but the problem I'm having is I want it to be compared to the date every day, not just the

        • How do I redeem credits?

          How do I redeem credits that are shown in billing section?

        • Managing Prepaid Hours for Consulting

          We are a consulting firm that bills clients a flat upfront annual fee plus an hourly rate and offer a discount for pre-paying a block of hours. Hours that surpass the pre-paid block are billed monthly at the normal rate. If there are any pre-paid hours remaining at the end of the project they are banked for future use. I'm not seeing a method of doing this in Projects/Books/CRM... thoughts?

        • Email Verification Tool

          Hi there, just came across this tool for Google Sheets https://www.producthunt.com/posts/email-verification-tool-for-google-sheets-2 How would one do to automatically verify/validate email addresses entered on the CRM in a similar way?

        • Get DealID when Deal Created?

          Hi What's the easiest way to grab the DealID when a deal is created?  I want to add it to a custom field on the deal. Thanks

        • ZOHO Widget SDK not loading in html

          I have this code below, I have imported the widgetsdk however I get the error shown in the image, I have tried many different ways of importing and initiating the function ZOHO but nothing is working. can someone explain what I'm doing wrong, if I am

        • Enhancements to Zoho Corp Help Center "Team Requests" View

          Dear Zoho Team, I hope this message finds you well. The ability to view both my tickets and my team’s tickets in the Zoho Corp Help Center is a fantastic feature, especially as the focal point for Zoho in our organization. However, we’ve encountered a

        • Allow Multiple Scheduled Appointments with Zoho Support

          Dear Zoho Team, I hope you're doing well. First, thank you for introducing the option to schedule support calls via the Zoho CRM booking link. This has been a fantastic enhancement, eliminating the need for back-and-forth coordination when scheduling

        • Projectwise budget ---

          Can we have a Project wise subject in addition to the Monthly, and quarterly ACCOUNT LEVEL budget?

        • Next Page