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 forms3. Supported ZDKs4. Use Case5. Solution6. Summary7. 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.
- let elem = ZDK.UI.getElementByID('shipping_address');
- if (value==true)
- {
- elem.setVisibility(false);
- }
- else
- {
- elem.setVisibility(true);
- }
- 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.
- let products_list = ZDK.Page.getField('Product_List').getValue();
- log(products_list);
- if (products_list.length === 1) { // Clear subform if empty row
- !Object.values(products_list[0]).every(value => !!value) && products_list.pop();
- }
- // Open widget with product category & max. allowed rows based on existing subform data
- let selected_products = ZDK.Client.openPopup({
- api_name: 'Choose_Products', type: 'widget', header: 'Choose Products', animation_type: 1, height: '570px', width: '1359px', left: '280px'
- }, {
- product_category: "Dental Instruments", max_rows: 25 - products_list.length
- });
- log("products selected from widget: ", selected_products);
- // Update Selected Products from the widget Popup
- if (selected_products.length) {
- selected_products.forEach(product => {
- products_list.push({ Product_Name1: { id: product.id, name: product.Product_Name }, Quantity_of_Products: 1, Unit_Price1: product.Unit_Price });
- });
- console.log(products_list);
- ZDK.Page.getField('Product_List').setValue(products_list);
- }
- 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
Access your files securely from anywhere
New to Zoho Recruit?
Zoho Developer Community
New to Zoho LandingPage?
Zoho LandingPage Resources
New to Zoho Survey?
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Bigin?
Topic Participants
Maadhari M
Andres
Sticky Posts
Client Script | Update - Introducing Commands in Client Script!
Have you ever wished you could trigger Client Script from contexts other than just the supported pages and events? Have you ever wanted to leverage the advantage of Client Script at your finger tip? Discover the power of Client Script - Commands! CommandsKaizen #165 : How to call Zoho CRM APIs using Client Script
Welcome back to another exciting Client Script post! In this post, we will discuss one of the most frequently asked questions: How do you call Zoho CRM APIs from Client Scripts? In this kaizen post, 1. Ways to make calls to Zoho CRM APIs using ClientKaizen#162 : Add Tags and Open Pre-filled Email Drafts via Client Scripts
Hello everyone! Welcome to another informative Kaizen post. In this post, let us see how to accomplish the following using Client Script. 1. How to auto-tag a record based on field update? 2. How to Open a pre-filled email draft This post will provideExtension Pointers - JS SDK series #4: Managing data from a widget using ZOHO.CRM.HTTP
Handling and managing the data between two applications is a major factor for an efficient business. There are a variety of ways to handle data between Zoho CRM and other third-party applications. You can use deluge CRM tasks, create connectors, use APIKaizen #152 - Client Script Support for the new Canvas Record 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
New to Zoho TeamInbox?
Zoho TeamInbox Resources
Zoho CRM Plus Resources
Zoho Books Resources
Zoho Subscriptions Resources
Zoho Projects Resources
Zoho Sprints Resources
Qntrl Resources
Zoho Creator Resources
Zoho CRM Resources
Design. Discuss. Deliver.
Zoho Show Resources
Get Started. Write Away!
Writer is a powerful online word processor, designed for collaborative work.
Zoho CRM コンテンツ
-
オンラインヘルプ
-
Webセミナー
-
機能活用動画
-
よくある質問
-
Ebook
-
-
Zoho Campaigns
- Zoho サービスのWebセミナー
その他のサービス コンテンツ
Nederlandse Hulpbronnen
ご検討中の方
Recent Topics
Please Enable Snippets for Agents Adding Comments
Snippets and templates are currently enabled for agents when they use the reply functionality. There is currently no way to add a template or snippets when an agent comments. This is really weird. Our agents don't use the reply functionality, only theIm trying to white list domain dynamically in zoho desk extension
Im trying to white list domain dynamically in zoho desk extension. But it show error Error: {errMsg: 'No entry found in plugin-manifest whiteListedDomains for requested URL'} syntax "config": [ { "displayName":"Shopify Admin API access token ", "name":Subforms and Reports
I am trying to do a report that shows various data from subforms. eg I want a report that shows what Bill Status are Approved Required. Or show the status of all bills. It doesn't look like Zoho Reports picks up information within reports. Is there anotherTime Entry : Auto fill fields Hours minutes seconds
Hello world, Do someone know a script (for workflow rules) which fill automatically fields hours spent, minutes spent, seconds spent when we fill Executed time and End time Formula should start from (End time - Executed time) Thx in advancePass variables to Zoho Desk via URL to create a fast new ticket landing page
We are integrating our phone system into Zoho Desk. Currently when a helpdesk agent answers the phone, a soft client opens a new tab with zoho desk at the new case page. https://desk.zoho.com/support/companyname/ShowHomePage.do#Cases/new We would like【Zoho CRM】アナリティクス機能のアップデート：ウォーターフォールの導入
ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 今回は「Zoho CRM アップデート情報」の中からアナリティクス機能のアップデートをご紹介します。 本記事は、以前紹介された機能に新たに追加された機能です。 以前の記事：https://support.zoho.co.jp/portal/ja/kb/articles/zoho-crm-visualize-your-data-with-a-new-set-of-charts-treemap-butterfly-sankey-and-cluster-chartsWebhook - Configuration failed: 200 response not received for POST request
Hello, I am trying to set up a webhook to connect with an automation software but I receive the following error from Zoho: Configuration failed: 200 response not received for POST request I have tried testing it on webhook.site as well and receive theWorkdrive Upload Notification
Is there a way to be notified when someone externally has uploaded files to a folder? The "Unread" tab is really worthless because it shows all files from every directory on the system. I just need an email (or bell at worst) that says "someone has uploaded into <foldername>".Cannot reorder fields in Page Layout in Expenses and Purchase Requests
It is very inconvenient that the custom fields in Page Layout cannot be re-ordered. The only way is to remove the fields and re-create them; however, it is impractical. This would affect the reports and dashboards we are having. Not able to re-order theWorkflow for "Expenses" module?
Hi there, over the last 2 years, Zoho Expense has seen tremendous growth and we are happy with it. But, sometimes it is frustrating to see things are being implemented halfheartedly, or so it seems. For example, There is the possibility to create workflowsThe Grid is here!
Hey Zoho Forms Community! 👋 We’re thrilled to announce the launch of a feature that’s been on your wishlist for a while: Grids What is Grids? Grids let you place form fields side by side in multiple columns to create a more concise and organized formAutomated Shopify adjustment problem. "An inventory adjustment has been created by the system to set the initial stock from Shopify"
Has anyone noticed issues since the Shopify Sync has been updated recently? If you sync with Shopify, check to see if there are automated adjustments for old products that keep recurring. We have this problem for 6 SKU's that Zoho is doubling the stockStock count by bin location
Is there a configuration to make a stock count by bin or area and not by product. these is useful to manage count by area RegardsIntroducing Assemblies and Kits in Zoho Inventory
Hello customers, We’re excited to share a major revamp to Zoho Inventory that brings both clarity and flexibility to your inventory management experience! Presenting Assemblies and Kits We’re thrilled to introduce Assemblies and Kits, which replaces theBest website platform to sync to Zoho Inventory
Anyone like to suggest the best website platform for syncing to Zoho Inventory? We DO NOT want to sync stock, only orders. Shopify - not an option as we have more than one website and Shopify requires 2 accounts and Zoho will not sync with 2 different accounts. Magento and WooCommerce both sync via Kloudconnectors - does anyone have any experience with this? I have trialled it and there are flaws - eg purchase order numbers are not populated. Discussion welcome!Convert Item to composite item
When using Zoho CRM integrated with Zoho Inventory/Books, the item creation process is a little messy. After a few years of trial and error, we have settled on creating items in CRM, which are sync'ed to Zoho Inventory using Zoho's own internal integration.Include product images in data sync between Zoho CRM and Zoho Inventory
Currently the item image does not sync between Zoho CRM and Zoho Inventory when using the internal Zoho sync functionality. This requires users to manually update the item image in Zoho Inventory for products created in CRM and vice versa. Including theZoho Inventory Item History
Hi Zoho Inventory Team, I 've been testing the History feature on Inventory Items in a demo system and I noticed that when I changed the value of a field to a new value, the history just says "updated by - user1", it doesn't say what what field was changedShow ordered quantity on packing slips and invoices
Hello Is there any way possible to show the original ordered quantity of an item (as recorded in the sales order) on subsequent package slips and sales invoices, so that these documents can show the customer the ordered qty vs the qty being currentlySearch Zoho Inventory Items module via API
How can I search Zoho Inventory Items by custom fields, categories, etc using the API? This is not documented. Is there an advanced search function like CRM's COQL search available via the Zoho API? If there is an undocumented way to search Items viaHow can I get my images to display correctly on mobile site?
I have just created a site and uploaded images, which look perfect on the desktop version. However when I view the site on my mobile device some of the images are not displaying correctly. They are all blurry. Anyone else experience this?Email parser rule will only parse emails with an exact match? What madness is this?
I finally got myhead around deluge and scripting, but wondered why my parser wasn't working. (https://help.zoho.com/portal/en/community/topic/extract-11-digit-number-in-any-position-from-enail-subject) Problem: There are *zero* characters or phrases thatDoes Creator support HTMX?
I love the Zoho ecosystem and Zoho Creator does a lot of things really well. However, I'm needing more real-time interactivity in my forms. Is the only option to create a JS widget? How about HTMX?My fix for "This report is not accessible" in published pages
Hi Community, after having the same issue as many others here and going through the community's posts, i found a solution on my own. Again, the quality of support from Zoho is pretty awful: if you cannot help yourself, you're lost. I really like Zoho,Tip of the Week #59– Enhance team collaboration with multichannel shared inboxes!
Struggling with scattered customer conversations and missed follow-ups across your team? When messages are everywhere, it's easy for them to fall through the cracks—leading to delays, duplicate replies, and miscommunication among team members. Zoho TeamInboxSubforms in stateless forms
I think the title says it all. We need to be able to add subforms to stateless forms. Currently the only workaround is to create a Form and delete each record upon submission of the form. I need to build an interface to update our inventory. BasicallyDelete standard e-mailtemplate
Hello, Is it possible to delete or hide a standard e-mailtemplate? I would only like to show my own created e-mailtemplates to my staff. I only find a 'delete' option at my custom made e-mailtemplates, but the standard e-mailtemplates do not show thisShuffling between one note to the next
I usually start all my notes per interaction with a contact with the date and then a little detail. But when I search for it it only see a small portion of the note and can't immediately tell which contact its associated with. can we make the note content column wider to fit more information and please have a column header that says which contact its associated with.CRM notes
I want to be able to add notes to a task that do not necessarily get rolled up into an account or contact. For example, I tasks to work on a Court Order for John Doe divorce account. There might be lots of updates (in the form of notes) that employeesAdd values to Countdown Mode
Is it possible to add values to the countdown mode drop down? The longest is 2 days. I would like values for 5 days, 10 days, 15 days...Experience effortless record management in CRM For Everyone with the all-new Grid View!
Hello Everyone, Hope you are well! As part of our ongoing series of feature announcements for Zoho CRM For Everyone, we’re excited to bring you another type of module view : Grid View. In addition to Kanban view, List view, Canvas view, Chart view andRefresh token not appearing
Hello, I was wondering if there is another way of obtaining a refresh token, as following the usual 60-second-code procedure generates a new access token, but not the refresh token, and so i have to repeat everything to get a new token every hour or so,How would I collect a signature in person on Zoho sign?
Suppose I have a customer show up at my office and we close a deal. I have an iPad ready to go, and I need to have the customer sign the document right there. How would I do it?What's New in Zoho Analytics - June 2025
Hello Users, We're delighted to bring you new features and enhancements designed to make your analytics experience smarter and more powerful than ever. AutoML Enhancements We’re thrilled to introduce powerful new AutoML enhancements, making machine learningShare saved filters between others
Hi, I am in charge to setup all zoho system in our company. I am preparing saved filters for everybody, but the only one can see its me. How can others see it? ThanksZoho Books | Product updates | June 2025
Hello Users, We’ve rolled out new features and enhancements in Zoho Books, from the option to record advances for purchase orders to dynamic lookup fields, all designed to help you stay on top of your finances with ease. Introducing Change ComparatorsHow to handle this process need using a Blueprint?
See one minute screen recording: https://workdrive.zohoexternal.com/external/eb743d2f4cde414c715224fc557aaefeb84f12268f7f3859a7de821bcc4fbe15Creator roadmap for the rest of 2022
Hi everyone, Hope you're all good! Thanks for continuing to make this community engaging and informative. Today we'd like to share with you our plans for the near future of Creator. We always strive to strike a good balance of features and enhancementsCRM Client scripts via extension?
I've made a lot of industry specific customization to zoho CRM, using custom modules, workflows/automations, deluge scripts, api calls, and client scripting. I have had organic interest explaining what i've done to other small business owners in my industry.How to import data via Excel for a multi-select lookup field?
In the Accounts module, I have a multi-select lookup field to the Contacts module. When I import Accounts data via Excel, I want to enter the contact email address (which is used as the identifier) under the column name for the multi-select lookup field.Next Page