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.

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

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

Zoho Developer Community

New to Zoho LandingPage?

Access Zoho LandingPage

Zoho LandingPage Resources

New to Zoho Survey?

Access Zoho Survey

Latest Feature Updates

Explore our Pricing & Plans

Zoho Survey Resources

Android Mobile Surveys

Insurvey Blogs

Insight Blogs

Tips & Tricks

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

New to Bigin?

Signup Now

Access Bigin

Latest Feature Updates

Zoho Desk Resources

Desk Community Learning Series
Digest
Functions
Meetups
Kbase
Resources
Glossary
Desk Marketplace
MVP Corner
Word of the Day

Tout forum

France ZUGs

Zoho SalesIQ Resources

Topic Participants
Maadhari M
Andres

Sticky Posts
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
Extension pointers for integrating Zoho CRM with Zoho products #8: Upload and manage Zoho Workdrive folders and files from within Zoho CRM
Keeping records on your customers and business prospects is essential for tracking data, conducting follow-ups, and running a business smoothly. When you use two separate applications, and store relevant data in each, checking and tracking data becomes
Kaizen #142: How to Navigate to Another Page in Zoho CRM using Client Script
Hello everyone! Welcome back to another exciting Kaizen post. In this post, let us see how you can you navigate to different Pages using Client Script. In this Kaizen post, Need to Navigate to different Pages Client Script ZDKs related to navigation A.
Extension pointers #13: Handle cases with personalized solutions using custom actions
In our last post, we detailed the steps involved in creating a custom action and the workflow from the developer and end user's side. Now let's look at a working example of how we can create a custom action and implement it in a Zoho CRM account to make
Extension pointers - Simple yet significant pointers #13: On change of field value for CRM variables
CRM variables provide global access to a variable across an entire extension. They also help in the storage of user-specific data provided by the user at the time of installation, which can later be fetched to perform data functionalities. Additionally,