Understanding search bar element

In a nutshell

The search element of a page allows users to find and locate record data on a report. It can be set up in a page to directly search a report component to filter results based on user input. Alternately, this functionality can also be configured if the intended report is embedded on a page.

Availability

Search element can be created in all plans of Creator.
Only the super admin, admins, and developers can create and manage search bars.

1. Overview

he search bar in Zoho Creator is designed to filter records from a target report, offering users a streamlined way to access specific data without navigating across multiple reports or pages. It enhances user interaction by allowing quick, keyword-based filtering of data within the report.

The report being filtered can either be a standalone report component or one that is embedded within a page. Depending on where the report resides, the configuration of the search bar varies for:

Standalone reports - The search bar is directly linked to the required report component. When users enter a keyword (like a name, ID, or place), it is passed to the built-in system variable input.searchString. Based on this, the search bar filters the report in real time, and shows only the records that match the keyword. You can configure it to evaluate only specific records based on conditions relevant to your use case. This can be ideal for quickly narrowing down large record numbers like customer lists or transaction logs.
Embedded reports on a page - The search bar works through page variables. The user input is passed to the built-in system variable input.searchString, which is then assigned to a page variable configured on the target page. This page variable acts as a dynamic filter, evaluating records of the embedded report based on a specified condition. This setup is useful for dashboards where you want to search or filter data (like events, inventory items, or leads) without leaving the page. For example, using this configuration, a search bar is placed above an embedded report on a page. The report below will dynamically display filtered records based on the keyword entered in the search bar.

The target report can be either shown as a popup, redirected to in the same window, or opened in a new one. If the report is embedded in the same page as the search element, and you've configured for it to be shown in the same window, the embedded report will dynamically refresh to show the filtered results.

Zoho Creator offers four design layouts for the search element to suit different branding and styling requirements.

You can configure the following for a search bar:

Properties - The configuration based on which the user input filters and displays data on a target report or page.
Style - The visual properties such as font, color, styling, and so on, for the search bar.

1.1. Use cases

1. Search bar in an Employee Directory dashboard - In an Employee Directory dashboard for the HR team, multiple page elements are set up, including a search bar to view regional employees. The search bar is linked to the field Office Location in the Employees form. It is set to search by keyword, and the target component is a report named All Employees. As the user types a location, a report dynamically filters the target report based on the Office Location field and displays only matching employees. This helps them quickly locate regional profiles for updates or leave tracking.

1.2. Navigation guide for search element

After you've created a page in the edit mode of your application, you can find the search element on the left pane of the page builder. When Search is clicked, different layouts of a search bar are displayed alongside from which you can drag and drop the desired one onto the building space.

1.3. Style

You can customize the following style properties for the search bar:

Styling options	Description
Search box shape	The displayed search button's type can be rectangular or rounded.
Font family	A font that applies to the content present inside the button. You can choose from six different font families.
Search bar	Style - The content of the button can be emboldened and italicized. Color - The color of the user text input and the default input in the search bar, and its background color. Font size - The font size of the user text input, the default input, and the placeholder of the search bar. The preset font sizes range from 12px to 40px, but custom values can be set between the range 1 to 99 pixels.
Padding	The space between a search element and its border can be customized in pixel values.
Background color	The background color for the container that holds the search element.
Background	The image that runs through the background of the search bar's container.

2. Related topics

What's next

Learn how to add and manage the search element to enable record filtration from a page directly.