Search Component

What is the Search Component?

The search component enables you to add a search form to a page and pull results from all data components that match your search query.

For instance, say you have an investments page on your app and wish to add a search form to the page to enable users to search through investments based on custom fields. You can accomplish this by adding a Search Component to the page, which will add a search form that will retrieve results from all data components matching the user's search query. 

Adding the Search Component

Like any component, you can add the Search Component to any column within a page. To add a Search Component, click on the blue + icon within the column you wish to add this component and select the Search Component from the drop-down list of components.  

You can then select the data table from which to search from. To learn more adding data components and selecting data tables for each component, please view the Data Components Overview article.

Customizing the Search Component 

Once you have added the Search Component to your page, you can customize several options to configure the search component to your specific needs. 

• Select searchable fields
• Select search operators
• Select result display options

Let's explore each of these customization options for configuring your search components.

Select searchable fields

Double click on the Search Component or click on its pencil icon to open the component. From the left-side menu, select the Search Fields option and click on each field that you wish to include in the search form for searching. Once you click on a field to add it to the search form, it will appear on the right-hand side as a field within the search form. 

Once you have selected the fields you wish to include within your search form, choose if the search should be conducted to Match All or Match Any of the included fields:

Select search operators 

Each field search query includes operator(s) by which to search by. You can choose to allow users to select their own operators by which to search or you can pre-define a specific operator to run the search behind the scenes. 

By default, each field that is added to the search form will include all available operators for that field and users can select which operator they want to search by for that field. 

For instance, if users are searching with a number field within the search form, they will be able to enter the number value to search with and they will also be able to view and select any operator they wish to search with. 

However, if you wish, you can limit which operators are available for users to select from when searching via a specific field, or you can pre-define a specific operator that will run the search for a specific field without giving users the option to select an operator. 

To limit available operators for users to choose from or to pre-define a specific operator and disable users from choosing their own operator,  open the Search Component and either double click on the field or click on the pencil icon of the field that you wish to customize. 

A new window will pop up for you to edit that field. Under the Operators section, select one of the three options: Enable All, Select Operators, or Pre-defined:

1. Enable All is the default operator setting and allows all operators to be used for the field search. Under this default setting, all available operators for this field will be displayed and allowed for use as illustrated in the image below. 

2. Changing the operator setting to Select Operators will allow you to select specific operators to include in this field's list of operators to search by. For instance, if you select only the "is any", "higher than", and "is not blank" operators to be included with this field search, users will only have these three operators to choose from when searching with this field:

3. Changing the operator setting to Pre-defined will allow you to select a pre-defined operator that will run the search for this field, disabling the ability for users to select their own operators to search by for this field.

As you can see in the image below, pre-defining a specific operator will remove the operator drop-down list from the search form and disable the users' ability to choose a select operator. The search will automatically be run with the pre-defined operator you define within this setting. 

Pull search values from URL

When you select Pre-defined as the Operator setting, a dynamic setting will pop up titled Get Value From URL, as illustrated by the image below. 

When the Get Value From URL setting is enabled, the search value will be retrieved from the URL and the search will be triggered when the page loads, automatically using the values in the URL. This can be useful when you need to share a custom search query that will be auto-generated when the page loads. 

Under the Get Value from URL setting, you will be able to enter the parameter name within the Param Name field box. The parameter name refers to the name within the URL after which the values will be used within the search query. 

For instance, if you enter the word "amount" within the Param Name box as illustrated in the image above, whatever values follows the word "amount" in the URL will be used in the search query. 

https://demo2.tadabase.app/myapp#!/search?amount=650000

If you are using several values to be retrieved from the URL, separate each value with a "&" symbol as illustrated in the sample URL below.

https://demo2.tadabase.app/myapp#!/search?amount=650000&stage=Seed

The Get Value From URL setting is only available when using a pre-defined operator. 

Select result display options

When a search is run, results will be retrieved from the data table you selected and displayed via the data components that share that data table.

For instance, if you add a Search Component and select the Investments data table as the data table from which to retrieve the search results, any data components within your app that are based on the Investments data table can be included in the search results for this Search Component.

Of the data components that share the same data table you selected for the Search Component, you can choose which data components you would like to display as part of the search results.

To customize which data components you would like to display in the search results, open the Search Component and select the Search Results option. Select which data components you would like to include within the search results.

For each included data component, you can also specify whether you want the data component to automatically load onto the page or if the data component should only load onto the page once the search is run. If you would like the data component to load only after the search has been run, check the Only Load Upon Search option for each data component that you would like to display with this setting.

If you leave the Only Load Upon Search option unchecked, the data component will load automatically onto the page, even before the search is conducted. Once the search is conducted, the data component will be updated with the corresponding search results.

Alternatively, if you check the Only Load Upon Search option, the data component will only load onto the page with the corresponding search results after the search is run. 

The gif below demonstrates the Only Load Upon Search setting in action. As you can see, the data components only load onto the page with the corresponding search results once the search has been run.