Logo
For example "scheduled tasks"
Search
Info
Content
Category Navigation
  • 📖  Manual

  • 👋Welcome

    Welcome to Tadabase

    What Is No-Code?

    Tadabase Support

    Getting Started With Tadabase

    Platform Overview

    🧰The Data Builder

    Data Tables

    Fields

    Text Fields

    Personal Fields

    Number Fields

    Date Fields

    Option Fields

    File and Image Fields

    Equation Fields (Category)

    Equation Fields

    Connection Fields

    Date Equation Examples

    Records

    Record Logs

    Import Templates

    Export Templates

    Automating Tasks

    Number Equation Examples

    Text Equation Examples

    Multi-Function Equation Examples

    ✏️Page Builder

    Page Builder Overview

    Layouts

    Pages

    Components Overview

    PDF Pages

    📗System Components

    System Components Overview

    Menu

    User Menu

    Breadcrumbs

    PDF Print (Alpha)

    Link Button

    Login

    Signup

    Profile

    HTML

    Image

    Subscriptions (Alpha)

    📘Data Components

    Data Components Overview

    Form Component

    Table Component

    List Component

    Kanban Component

    Calendar Component

    Resource Component

    Map Component

    Timeline Component

    Accordion Component

    Card Component

    Chart Component

    Search Component

    Import Component

    Data Source

    Data Source Filtering

    Links

    Display Rules

    Inline Editing

    Data Component Visual Directory

    Custom Component

    Custom Component Helpers

    Writing Your Own Component Helpers

    🙋Users

    Users

    Roles

    Single Sign On (SSO)

    Adding Stripe Subscriptions

    🔒Security and Reliability

    Tadabase Builder Security

    App Security

    User Security

    🔗Integrations

    Zapier Integration

    Using Webhooks

    Saving files to Dropbox

    Adding PayPal payment buttons to your app

    Exporting records to Google Sheets

    Viewing data in Microsoft BI

    Chat Widgets

    REST API

    Using SendGrid for emails

    Saving files to AWS S3 Bucket (IAM Method)

    Incoming Webhooks

    Embeddable Components

    Saving Files to Custom S3 Bucket (Account Method, Recommended)

    PDF Forms

    Stripe Checkout

    JavaScript Callbacks and Actions

    Twilio Integration

    ⚙App Settings

    General Settings

    Layout & Format Settings

    Custom Domain

    Customizing CSS

    Changing app themes

    Support Settings

    404 Error Page

    💳Account

    Plans

    Managing Your Account

    Sharing your app builder

    Managing your Apps

    🧩Pipes

    Introduction to Pipes

    Adding Pipes

    Using Pipes

    PDF Gen V2

Categories
📖 Manual
📘 Data Components
Search Component

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. 

New-Search-Gif.gif

 

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:

jPWimage-1594239814820.png

 

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. 

HNNSearch-Gif-Final.gif

How did we do ?

Previous Article
Chart Component
Next Article
Import Component
Article Navigation
  • What is the Search Component?
  • Adding the Search Component
  • Customizing the Search Component
  • Select searchable fields
  • Select search operators
  • Pull search values from URL
  • Select result display options
  • Back to top
    Developer portal Tadabase Community
    API
    100% Operational
    Apps
    100% Operational
    Builder
    100% Operational
    Overall Status
    100% Operational