Configuring the search element

The input your users enter in the search element is captured by the internal variable  input.searchString . Each search element has a  Search result component  - the report or page that will be filtered using this variable. When your users enter input and search, the configured component is opened in the target window.

Refer to the following sections for configuring and customizing the search element:

• How to add a search element to a page
• Show the search results in a report
• Show the search results in a page
• Style the search element
• Limitations

Showing the search results in a report

This is achieved by setting the target report as that search element's  Search result component . You'll have to set a criteria that uses the search input to filter the target report. You can also set the following properties. Learn  how to show search results in a report

• Open in  - This defines the window in which the selected report will be displayed when user clicks or taps the button in the search element
• Default   value  - This is the value that will appear in the search bar by default
• Placeholder  - This is the value that will appear in the search bar until the user enters an input in it

Showing the search results in a page

This is achieved by setting the target page as that search element's  Search result component . You'll have to map a parameter from the target page to  input.searchString . You can also set the following properties. Learn  how to show search results in a page

• Open in  - This defines the window in which the selected report will be displayed when user clicks or taps the button in the search element
• Default   value  - This is the value that will appear in the search bar by default
• Placeholder  - This is the value that will appear in the search bar until the user enters an input in it

Example: Zylker Homes is a home staging company in the United States. They design the home interiors and use a custom app to manage their projects and marketing efforts. They've built the a page in their app that enables users to search the company's upcoming projects state-wise. Here's how the page looks and works on a web browser:

1. User accesses the  Search Property  page. It sports a search element that's configured to redirect to the  Search Results Page  such that the search input is passed as a value to the  state  parameter in  Search Results Page.
   

2. User enters a search input:
   

3. Upon search, the  Search Results Page  is opened in the same window:
   

The  Search Results Page  sports:

• A search element that filters itself (the "search results page"). This ensures that users can keep searching and view results.
• The  Upcoming Projects  report that's filtered using a page parameter. This ensures that the report displays just the relevant records, which in the above example are Zylker Home's upcoming projects in the state of Florida.

Styling the search element

The page builder enables you to customize the  Style  of the search element in your page. Depending on the template you select, you'll be able to customize:

• Search box's shape
• Search button's style
• Search bar's style
• Search input's font
• Search element's padding
• Search element's background: This can be an image, color, or both

Limitations

• In the search component, you cannot use different fields types while setting the criteria to filter the report. For example, you cannot set the search criteria using a  single-line  field and  number  field in the same criteria.

Learn  how to customize the search element's style

Related Topics

1. Add search element
   
2. Customize search element