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
|
|
|
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
Previous
What's next
Previous
Learn about gauges, how they contribute to the visual representation of you Creator application data, and their usecases.
Access your files securely from anywhere
Zoho CRM Training Programs
Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.
Zoho DataPrep Personalized Demo
If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
New to Zoho Writer?
Create. Review. Publish.
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
You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
Configuring and managing search bar
What does this page cover Learn to add and manage search elements on a page to enable speedy query search to filter records from a standalone report, or from a report embedded on a Page component. Availability Search bar can be created in all plans ...Create a search functionality to dynamically filter a report
Requirement Create a search functionality for users to find specific records based on their search queries. Use Case An order management app is used by a business to store its customer details, and by billing agents to order products. There are three ...Conditions to filter records based on Creator fields
In a nutshell Learn about the criteria that you can set to filter records and run workflows within the Creator application. 1. Overview Conditions help in filtering records from a Zoho Creator report. Based on the criteria set in a condition, actions ...Configuring a chart within a page
What does this page cover Learn the steps to build various types of interactive and informative charts including column, bar, line, scatter, area, web, pie, and funnel, based on your specific business needs. They help display real-time updates and ...Understanding charts
In a nutshell Charts are interactive elements that can be embedded inside pages of a Creator application, providing a visual representation of data. They offer various chart types like bar, pie, and line charts, along with customizable features such ...
New to Zoho LandingPage?
Zoho LandingPage Resources