Kaizen #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 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
Topic Participants
Maadhari M
Andres
Sticky Posts
Kaizen #197: Frequently Asked Questions on GraphQL APIs
🎊 Nearing 200th Kaizen Post – We want to hear from you! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.Kaizen #198: Using Client Script for Custom Validation in Blueprint
Nearing 200th Kaizen Post – 1 More to the Big Two-Oh-Oh! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.Celebrating 200 posts of Kaizen! Share your ideas for the milestone post
Hello Developers, We launched the Kaizen series in 2019 to share helpful content to support your Zoho CRM development journey. Staying true to its spirit—Kaizen Series: Continuous Improvement for Developer Experience—we've shared everything from FAQsKaizen #193: Creating different fields in Zoho CRM through API
🎊 Nearing 200th Kaizen Post – We want to hear from you! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.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! Commands
Recent Topics
when I email a invoice how can i see it was sent and also were i can go to see all emails sent
when I email a invoice how can i see it was sent and also were i can go to see all emails sent?Export Invoices to XML file
Namaste! ZOHO suite of Apps is awesome and we as Partner, would like to use and implement the app´s from the Financial suite like ZOHO Invoice, but, in Portugal, we can only use certified Invoice Software and for this reason, we need to develop/customize on top of ZOHO Invoice to create an XML file with specific information and after this, go to the government and certified the software. As soon as we have for example, ZOHO CRM integrated with ZOHO Invoice up and running, our business opportunitiesShowing description in timesheet and timelogs.
I am wondering if it’s possible in version 5 of Zoho People to have the description show by default or with a manipulation on the user’s part. Let me show you what I mean. As you can see this is the view for the users. Now if they want to see the fullHow can I see content of system generated mails from zBooks?
System generated mails for offers or invices appear in the mail tab of the designated customer. How can I view the content? It also doesn't appear in zMail sent folder.CRM Blueprint Notification by Cliq
Dear Zoho team, In Workflow, there is nofication by cliq, but in blueprint, there is no option as cliq notification. I think it is very convenient to get notified by Cliq , as there are multi modules in apps, but we will always check CliqsZoho People Attendance Regularization – Wrong Total Hours Displayed
While using Zoho People, I observed that the attendance regularization is showing wrong total hours when applied to past dates. For example, if a check-in is added at 10:00 AM and check-out at 6:00 PM for a previous date, the system sometimes calculatesSync Contacts in iOS
What does the "Sync Contacts" feature in the iOS Zoho Mail app do?Live webinar: Craft the ideal sales pitch deck with Show
Every great sale starts with a great story. And your pitch deck? That’s where the story takes shape. But too often, these presentations end up looking generic, overloaded with text, or lacking structure. The good news is, it's easier to fix than you think!Project Statuses
Hi All, We have projects that sometimes may not make it through to completion. As such, they were being marked as "Cancelled". I noticed that these projects still show as "Active" though which seems counter intuitive. In fact, the only way I can get them👋 Welcome to the Zoho MCP Community
Hello all, glad to have you here! This is your space for everything AI agents, MCP tools, and intelligent business apps. This community is for you — developers, partners, creators, and businesses exploring how agents can transform work. Whether you’reSuitability of Zoho One (Single User License) for Multi-State GST Compliance & Cost Analysis
Hello Zoho Team, I am an e-commerce business owner selling on platforms like Amazon, Flipkart, and Meesho, and I'm currently using their fulfillment warehouses. I have two GSTIN registrations and am planning to register for an additional 2-3 to expandDNS Manager
Where Can I find my DNS manager so I can link this to click funnels or AWEBERForwarder
Hi, I tried to add a forwarder from which emails are sent to my main zoho account email . However, it asks me for a code that should be received at the forwarder email, which is still not activated to send to my zoho emial account. So how can I get theForwarder
Hi, I tried to add a forwarder from which emails are sent to my main zoho account email . However, it asks me for a code that should be received at the forwarder email, which is still not activated to send to my zoho emial account. So how can I get theHow do I sync multiple Google calendars?
I'm brand new to Zoho and I figured out how to sync my business Google calendar but I would also like to sync my personal Google calendar. How can I do this so that, at the very least, when I have personal engagements like doctor's appointments, I canNeed to extract date from datetime field
I have a datetime field and need only the date part from it. I am unable to find a built-in function that would be <DateTime>.Date(). I don't think I want to go the string conversion route of converting the datetime to string and then parsing out values and create a date out of it. Any one out there has a better solution to this? Thanks in adavnce. Regards Moiz Tankiwala Smart Training & IT SolutionsHow to Hide Article Links in SalesIQ Answer Bot Responses
I have published an article in SalesIQ, and the Answer Bot is fetching the data and responding correctly. However, it is also displaying the article link, which I don’t want. How can I remove the link so that only the message is shown?New in Cadences: WhatsApp follow-ups, upgraded limits, and options for add-ons
Hello everyone, We're rolling out two key updates to help you engage better and scale smarter with Cadences in Zoho CRM. Reach customers on WhatsApp, directly from Cadences Previously, Cadences have enabled you to automate follow-ups through emails, calls,additional accounts
If I brought 5 emails to my account. Can I later buy additional emails.Issue in Zoho People Regularization – Incorrect Hour Calculation
I have noticed that when applying attendance regularization in Zoho People for previous dates, the total working hours are not calculated correctly. For example, even if the check-in is 10:00 AM and check-out is 6:00 PM, the system shows an incorrectWhy I am unable to configure Zoho Voice with my Zoho CRM account?
I have installed Zoho Voice in my Zoho CRM, but as per the message there is some config needed in Zoho Voice interface. But when I click on the link given in the above message, I get an access denied page.Issue with Hour Calculation in Zoho People Attendance Module
I have noticed an issue in the attendance regularization feature of Zoho People. When trying to regularize past dates, the total working hours are not calculated correctly. For example, if I enter a check-in and check-out time for a previous day, theCliq Meeting Calls No Audio and Screen Share
When in a Cliq channel meeting, the audio does not work at all on pc. When i use my phone as audio source, screen share on pc does not work. I have updated audio drivers but the strangest thing is that during a 1 on 1 call, it works well. Therefore theBug in Total Hour Calculation in Regularization for past dates
There is a bug in Zoho People Regularization For example today is the date is 10 if I choose a previous Date like 9 and add the Check in and Check out time The total hours aren't calculated properly, in the example the check in time is 10:40 AM checkWork anniversary and birthdays on connect
Hello, I like the idea of having employee's work anniversary and birthdays on the dashbaord. Do you have to have the employee complete this information themselves in connect settings, or does it pull from their directory settings? (ie. we use Zoho oneAlias Email Id already exists
Hi I'm trying to create an alias : contact @ yoavarielevy.co.il but i get the message Alias Email Id already exists I had an account with the same name but I deleted it. Can you help? Thanx YoavBANK FEED - MAYBANK , provider from YODLEE IS NOT WORKING
As per topic, the provider YODLEE is not working for the BANK FEED. It have been reported since 2023 Q3, and second report on 2023 Q4. now almost end of 2024 Q1, and coming to 2024 Q2. Malaysia Bank Maybank is NOT working. can anyone check on this issue?Feature Request: Ability to Set a Custom List View as Default for All Users
Dear Zoho CRM Support Team, We would like to request a new feature in Zoho CRM regarding List Views. Currently, each user has to manually select or favorite a custom list view in order to make it their default. However, as administrators, we would likeAdding Multiple Products (Package) to a Quote
I've searched the forums and found several people asking this question, but never found an answer. Is ti possible to add multiple products to a quote at once, like a package deal? This seems like a very basic function of a CRM that does quotes but I can'tZoho Commerce in multiple languages
When will you be able to offer Zoho Commerce in more languages? We sell in multiple markets and want to be able to offer a local version of our webshop. What does the roadmap look like?webinar registration confirmation are landing in SPMA folders
I am trialing zoho webinar and do not have access to custom domains. When I test user registrations, they are working but the resulting confirmation email is landing in a spam folder. How can I avoid this?Making digital signatures accessible to all: Introducing accessibility controls in Zoho Sign
Hi there! At Zoho Sign, we are committed to building an inclusive digital experience for all our users. As part of our ongoing efforts to align with Web Content Accessibility Guidelines (WCAG), we’re updating the application with support that will goIs there a way to set Document Owner/Sender via the API
When sending requests for zoho sign, it would seem zoho uses the id of the person that created the zoho api cred to determine the owner_id, is there a way to set a default for this?Delegates should be able to delete expenses
I understand the data integrity of this request. It would be nice if there was a toggle switch in the Policy setting that would allow a delegate to delete expenses from their managers account. Some managers here never touch their expense reports, andAdd Save button to Expense form
A save button would be very helpful on the expense form. Currently there is a Save and Close button. When we want to itemize an expense, this option would be very helpful. For example, if we have a hotel expense that also has room service, which is aMultiple organizations under Zoho One
Hello. I have a long and complicated question. I have a Zoho One account and want to set it up to serve the needs of 6 organizations under the same company. Some of the Zoho One users need to be able to work in more than 1 organization’s CRM and otherError AS101 when adding new email alias
Hi, I am trying to add apple@(mydomain).com The error AS101 is shown while I try to add the alias.Unbundle feature for composite items
We receive composite items from our vendors and sell them either individually or create other composite items out of them. So, there is a lot of bundling and unbundling involved with our composite items. Previously, this feature was supported in formRegarding the integration of Apollo.io with Zoho crm.
I have been seeing for the last 3 months that your Apollo.io beta version is available in Zoho Flow, and this application has not gone live yet. We requested this 2 months ago, but you guys said that 'we are working on it,' and when we search on GoogleMTD SA in the UK
Hello ID 20106048857 The Inland Revenue have confirmed that this tax account is registered as Cash Basis In Settings>Profile I have set ‘Report Basis’ as “Cash" However, I see on Zoho on Settings>Taxes>Income Tax that the ‘Tax Basis’ is marked ‘Accrual'Next Page