Searchable list

The user interface of the binding editor has been updated since this tutorial. See what has changed here. Don't worry though, the tutorial is otherwise still completely functional!

In this tutorial, we'll go through the steps to make a basic searchable list with data coming in from a REST API integration.

Fetch data from the backend and show it in a list

We start with adding the RestCountries example resource into our app via the Marketplace.

Open the Marketplace via the Component market button at the top of the component library on the left.

Switch over to the Data tab and find the RestCountries resource.

Add it to your app, after which you can find it in the Data section of the global toolbar at the top. You can read more in the Configuring data resources guide.

You can find the RestCountries resource in the Marketplace

Next, switch to the Variables configurator via the switch at the top of the view canvas in the middle. Select Data variables from the left menu, click Add data variable and select RestCountries.

The default logic will fetch the data from the backend and set it to the data variable. You can read more about how data variables work in the data variables guide.

On the view canvas side, we add a List item component and set it to repeat based on our RestCountries data variable, then bind its Primary label and Secondary label properties to our data via the Currently repeated property value binding type.

You can test your app now and see how we get a list of all the countries in the world.

Implementing search

We want to show only the countries whose name matches a search input.

To do this, we first define a searchText page variable. Then, we add a Search bar input field onto our page, and bind its Value property to the searchText page variable.

Search bar with Value bound to pageVars.searchText

Now, whatever we type into the search bar is accessible elsewhere via the searchText page variable.

All we need to do now is just show the items whose name matches our search text. We do this by binding the Visible property (found under the Advanced accordion) of our List item to the formula:

CONTAINS(LOWERCASE(current.name), LOWERCASE(pageVars.searchText))

You can see the reference documentation of CONTAINS and LOWERCASE for more details.

That's it! You can now try out your search in your app.

Filter dropdown

We can also follow the same principles to create a filter, where you select a value from a dropdown with the dropdown values coming from the data to filter.

Let's say we want to filter our countries by the subregion key in the data.

Drag in a Dropdown component onto the canvas. The Option list property requires an array of objects with the label and value properties.

We can use MAP to construct such an array from our RestCountries data variable:

MAP(data.RestCountries, {label: item.subregion, value: item.subregion})

Now, this produces duplicate entries, so we need to wrap it with UNIQUE_BY_KEY, and we can sort alphabetically with SORT_BY_KEY:

SORT_BY_KEY(UNIQUE_BY_KEY(MAP(data.RestCountries, {label: item.subregion, value: item.subregion}), "value"), "value")

Finally, we can add a (Clear filter) option at the top of the list with CONCAT:

CONCAT([{label: "(Clear filter)", value: ""}], SORT_BY_KEY(UNIQUE_BY_KEY(MAP(data.RestCountries, {label: item.subregion, value: item.subregion}), "value"), "value"))

Now, all we need to do is add a new subregionFilter page variable and bind it to the dropdown's Selected value property.

Finally, we update our List item's Visible formula to incorporate our filter term.

The && operator is logical AND, meaning the formulas on both sides of it must evaluate to true. Note that we also don't need LOWERCASE as we're selecting the exact matching text via the dropdown.

CONTAINS(LOWERCASE(current.name), LOWERCASE(pageVars.searchText)) && CONTAINS(current.subregion, pageVars.subregionFilter)

Test it out – you can now choose a subregion filter and do a text search on entries within that subregion.