Skip to main content

Setup Server-side Filter on Select

This page shows you how to set up server-side filtering on the Select widget, which allows you to refine query results based on specific search terms.

If you are using the one-click binding feature to connect data, Appsmith automatically generates server-side filtering query for you. However, if you prefer to manually configure the server-side setup, you can do so by following the instructions in this guide.

Server-side Filtering on Select
Server-side Filtering on Select

Prerequisites​

  • A Select widget.
  • A query that contains the data you want to filter.

Configure query​

Most databases and APIs support server-side filtering, although the methods of implementation can vary.

Example: lets say you want to display names in a Select widget, and when a user searches for a specific term, you want to filter the displayed data accordingly.

Configure the query to fetch data using filterText reference property. 

SELECT id, name FROM users 
WHERE name LIKE '%{{Select1.filterText}}%'
ORDER BY id LIMIT 10;
note

Ensure that you turn off prepared statements in the query editor for this configuration. For more details, see Prepared statements.

The above query retrieves data using id and name from the users database. It filters results based on text entered in the Select widget's search box, using the filterText reference property.

Configure Select widget​

Follow these steps to configure the Select widget to display fetched data, and implement server-side filtering:

  1. Connect the filter query to the Source data property of the Select widget, and set the Label key and Value key properties as required. For this example, set the Label key to name and the Value key to id.
  1. Enable the Server-side filtering property.
  1. Set the Select widget's onFilterUpdate event to run the filter query.

After completing these steps, you can search for specific terms using the Select widget's search box.

Check out this sample app for Server Side Filtering.

See also​

Video on How To Setup Server-side Filtering For The Select Widget.