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. }
6. 
   
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. });
12. 
    
13. log("products selected from widget: ", selected_products);
14. 
    
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

Client Script Overview

Creating a Client Script

Client Script Events

Client Script IDE

Use cases of Client Script

Previous Post: Kaizen #151 - Leveraging ZDK CLI with VCS   |     Kaizen Collection: Home

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

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

• Kaizen #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

• Kaizen #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 Client

• Recent Topics

• ACH Returns Don’t Trigger Dunning or Reverse Payment in Zoho Subscriptions

  Zoho Billing marked an ACH payment as successful and kept the subscription active — even though the payment was later returned by the bank (NSF). There was no update to the invoice or subscription status, and I had to manually clean it all up. For credit

• Zoho Sheet - Split cell diagonally fill half color

  is it possible to split a cell diagonally, fill different text in each half and ideally color them differently as well?

• Adding a work order for Assets vs. changing the contact person

  When adding a work order for an existing Assets (e.g. service), the assigned contact cannot be changed (deleting the contact deletes the selected Assets). This results in such an illogical operation that if you want to change the person to be contacted,

• Calling Token API in Postman returning "error: invalid_client"

  Hello, I've been working on setting up an API to get data from zoho crm into a third-party application. I'm currently testing the setup in Postman, but I'm getting an error from the API to retrieve the access token. It keeps returning "error: invalid_client".

• How to handle this process need using a Blueprint?

  See one minute screen recording: https://workdrive.zohoexternal.com/external/eb743d2f4cde414c715224fc557aaefeb84f12268f7f3859a7de821bcc4fbe15

• bulk scheduling youtube shorts and facebook reels

  how do i flag the video as facebook reel rather than normal video, it's vertical, 20 seconds, yet still being posted as video on facebook for youtube, it's being rejected out right both videos are to standard, can be posted normally with normal scheduler

• Invitation-Based User Access in Zoho Analytics

  Hello everyone, We’re rolling out an important update on how users are added to your Zoho Analytics Organization and Workspaces. Previously, when admins added users, they were automatically added to the organization. Moving forward, to improve security

• Add Comprehensive Accessibility Features to Zoho Desk Help Center for End Users

  Hello Zoho Desk Team, We hope you're doing well. We’d like to submit a feature request to enhance the client-facing Help Center in Zoho Desk with comprehensive accessibility features, similar to those already available on the agent interface. 🎯 Current

• "Recently Changed Payload Format" for webhooks in Zoho Billing

  We are seeing a message about recently changed payload format for webhooks in zoho billing. I cannot find any notification about this change can you give me more information on this?

• CRM x WorkDrive: File storage for new CRM signups is now powered by WorkDrive

  Availability Editions: All DCs: All Release plan: Released for new signups in all DCs. It will be enabled for existing users in a phased manner in the upcoming months. Help documentation: Documents in Zoho CRM Manage folders in Documents tab Manage files

• Filtert products by multi select custom field

  Hello, this is seems like a must addition, why it can not be done now?

• Multiple images

  Hi Is there a way to insert multiple images in one image record or any way that instead of one image, I could upload 5 to 10 images together. Looking forward for a solution. Regards

• Cannot delete old accounts

  Hello, I try to delete old accounts from CRM, but it won't permit, saying documents are still linked to them. I searched in CRM and BOOKS, found some documents and deleted them, but still CRM won't delete them. Any idea how to do that ? I have a lot of

• Low Stock View

  We use the Low Stock view frequently as a guide to inform us when to reorder items, but the view is misleading because it does not take into account Purchase Orders that have already been raised. Unless you are aware and check item by item, this can lead

• Client Script | Update - Introducing Subform Events and Actions

  Are you making the most of your subforms in Zoho CRM? Do you wish you could automate subform interactions and enhance user experience effortlessly? What if you had Client APIs and events specifically designed for subforms? We are thrilled to introduce

• Multi Line Text Character Limit

  I want to export my Help Center articles but I realized that the text in the Answer column is being cut off. I'm guessing there is a character limit for multi line text fields. How can I get around this?

• blank page after login

  blank page after logging into my email account Thanks you

• Zoho Projects - Custom Objects

  Hello, is there the ability now, or in the near future, to add custom objects to Zoho Projects? The requirement here would be to have the ability to track change requests to a project's budget. The idea here is to have the ability to create a custom Object

• Whats App Automation

  It would be nice to be able to send out an automated whats app message template on moving stages or creation of a ticket (same as you can do for automated emails). Currently only automated emails can be sent. Also, if whats app could be used more effectively

• Access CRM Variables from Formula field

  Is it possible to use a CRM variable (defined in Developer Space -> CRM Variables) in a formula field for calculations ?

• Customising Sign Up Page in Zoho Help Centre Sandbox

  Hi, I would like to customise the Sign Up page in my Help Centre Sandbox Environment but when I try to access it I get this message: What setting or permission do I need to achieve this? Many thanks, Kunal

• Announcing Bigin India Meetups Across 8 Cities: July 29 - Aug 07

  Hello Biginners, We've got some exciting news to share! We're hosting our first round of Customer Meetups for 2025 in India, from 29th July - 9th August. Whether you're a Bigin newbie or a seasoned pro, this is your chance to meet customers from your

• Why isn't there an Expense description field / column?

  Hello! I'm new to Zoho Books and accounting. I'm surprised there isn't a proper expense description field (and column in the overview "all expenses" page)? I thought this was a given in accounting, as visualizing expenses facilitates tracking them down?

• New in Zoho PDF Editor: Watermarks, password protection, signature collection, and more.

  Hi Zoho Sign users! We are delighted to introduce the latest enhancements to Zoho PDF Editor, designed based on user feedback and feature requests. This update enables you to reorder, extract, and rotate PDF pages, add watermarks, and collect signatures.

• Payment Gateways - A unified hub to manage all your payment integrations in Zoho Creator

  Hello everyone, We're thrilled to announce that we've completely reimagined the way payment gateways are handled in Creator. The result is a centralized Payment Gateways section that provides a clean, user-friendly interface to configure and manage all

• Tip #13: Identify where your bookings come from with Source Tracking

  Source tracking is the practice of identifying where your bookings originated. This is important, because online bookings come from a wide variety of sources like social media platforms, your website, email and ad campaigns, partner websites, organic

• Kit Items Breaking Automations - "Provide mapped components for all kit items"

  This has been brought up in other threads, but I believe this issue warrants its own topic. Whenever a sales document (Estimate, Sales Order, Invoice) is created or manipulated programmatically, trying to include a Kit as an Item throws this error: "Provide

• How do you print a refund check to customer?

  Maybe this is a dumb question, but how does anyone print a refund check to a customer? We cant find anywhere to either just print a check and pick a customer, or where to do so from a credit note.

• Fully functional FSM workflow

  I am using Books, FSM, Begin and Desk. At this moment, FSM is not fully functional even on its own. For example, Customer A buys 4 air-cons and 3 brackets from us. We are fine to create WO manually in FSM. This should be the full loop for a FSM workflow:-

• Cant't update custom field when custom field is external lookup in Zoho Books

  Hello I use that : po = zoho.books.updateRecord("purchaseorders",XXXX,purchaseorder_id,updateCustomFieldseMap,"el_books_connection"); c_f_Map2 = Map(); c_f_Map2.put("label","EL ORDER ID"); c_f_Map2.put("value",el_order_id); c_f_List.add(c_f_Map2); updateCustomFieldseMap

• Zoho Books CREDIT LIMIT is completely USELESS due to a BUG!!! Please fix it ASAP!!

  Credit Limit should not be taken into account if payment terms on the Invoice are without credit. If selected Credit 0 days (Prepayment) why in this world would a notification pop up saying credit limit is exceeded and not allowing to create an invoice?

• Printed Reports, Increase Font SIZE

  I need to send some printed copies of financial reports to my attorney. The reports print out with microscopic fonts. How do I increase the font size so that a normal human can read the text? Every other accounting app can do this so I imagine I have

• Avoid email sending!

  Hello, Thanks you Zoho for the wonderful apps you provide. Question: Is there a way to disable sending emails when: - creating an estimate or billing. Thanks Tommy

• Need to show discount before total after subtotal

  Need to show discount before total after subtotal on my estimate template (see attachment)

• Email a "thank you" note for this payment is NOW checked by default

  Hello Team, Just noticed that Email a "thank you" note for this payment is now checked by default. I tried searching in Preferences and there is no way to turn this off. I do not want this to be the default. Is there a way to turn this off?

• End-to-end services hours

  We are trying to determine the best method of quoting service hours on quotes but only present the sum amount to a customer, without losing the tracking of quantity of hours for invoicing purposes. Does anyone have a good method they have determined?

• Specific Approval Question

  Hi everyone, Just a quick question here. I have located the "Approval Type" in the preferences, which is great, and I am sure we could make use of it. However, I am trying to understand how I can implement an approval "workflow". The business call it

• Zoho Books - Show Discount Totals When Greater Than Zero

  Hi Books Team, I understand that to show or hide discount amount on a Quote or Invoice, I need to use different templates. It would be a great quality of life improvement for users if we had an option to show or hide the discount amount at line item and

• Zoho Books - Sales Person Information

  Hi Team, On Invoices, Quotes, etc... I can include the Sales Person, but it only shows their name and not their email or phone number. It would be great to have place on invoice templates where we can manage what sales person information should be shows

• Specifying a filename for Schedule Reports

  Is it possible to specify a filename to use with scheduled reports? For example: With a general ledger report, instead of general_ledger.pdf I would like to include the date the report was generated in the filename so it is called general_ledger_202

• Next Page