1. Home
  2. Guides & Tutorials
  3. Searching & Filtering Data

Searching & Filtering Data

In this short tutorial we’ll show you how you can implement search bars, pill filters and manipulate the data you show to your users in general.

Don’t feel like reading? Don’t worry we got you covered. Sit back, relax and let us run you through it in this video!

Example Setup

To explain you how filtering works in weave.ly we’ll be using an example. Figure 1 shows the example’s design in Figma. Concretely, the example contains two important parts. First, a component defining a card which is used to populate a list of cards at the bottom of the white frame. This list of cards will contain our data which we’ll search and filter. Second, a search bar which we will use to search the cards.

A screenshot of Figma showing a list of cards containing personal information
Figure 1: Example used to explain searching and filtering data in weave.ly
Tagging the Example in the Plugin

Using the weave.ly plugin we tagged the frame containing the cards with the List functionality and the text layer containing “Search” with the Text Input functionality (see Figure 2 and 3).

Screenshot of Figma with the weave.ly plugin opened showing how a frame can be tagged with the List functionality
Figure 2: Tagging the frame cards with the List functionality
Screenshot of Figma with the weave.ly plugin opened showing how a text later can be tagged with the text input functionality
Figure 3: Tagging the search text layer with the Text Input functionality

If you’re unfamiliar with these functionalities we recommend you to check out this and this tutorial.

Example in the Flow Editor

Our example has been setup in the weave.ly flow editor as follows. First, a table has been created which contains example data, as shown in Figure 4.

Figure 4: Table containing the data used in our example

Moreover, we’ve already linked our table to our list of cards as shown in Figure 5. Concretely, we mapped the Initials, Name and Title columns in the table to their corresponding Figma layers in the card design.

Figure 5: Linking our table to our list

The result of this example setup is shown in Figure 6. Our list of cards is correctly populated with the data, but it is not yet searchable.

Figure 6: Example setup in action

Making our List of Cards Searchable

Our example starts with a working list of cards and a working input field for our search bar, the question is how you connect the two. To do this we’ll use the Table Filter block, which you can find in the block menu in the left panel of the flow editor. This block essentially takes table data as input, and returns filtered table data as output. You can configure what the block filters on in the block’s configuration panel (i.e. by selecting it in the flow editor).

Concretely, once you’ve selected the input table you want to filter from the dropdown you can select which column you’ll want to filter on. In our example we’re filtering on the “Name” column.

Figure 7: Configuring the Table Filter block

You can then further refine your filter by specifying how you want to filter. For example, for text columns you can specify that the column data must exactly match, contain, start with, etc. a given piece of text to filter by. This piece of text to filter by can be static, in which case you type it into the text input field in the block’s configuration panel. Or it can be provided dynamically by linking it to a block that produces data in your web application.

In our example we want to dynamically filter, we therefore link the table filter block to the search bar as shown in Figure 8.

Figure 8: Linking the search bar to the Table Filter block

Figure 9 shows the result once everything is linked. As we type into our search bar our list of cards is dynamically updated based on the searched name.

Figure 9: Example working once all blocks are linked together

Adding Pill Filters to Our Example

Besides supporting search bars, the Table Filter block also enables you to prototype a number of other kinds of filters. To showcase this we’ll extend our example with pill filters which are going to filter our cards on their type (see Figure 4). We’ve adapted our design as shown in Figure 10. We added two pill buttons (with unselected, hover and selected variants), which we framed together and tagged with the Selectable Text functionality.

See this tutorial for an overview of Selectable Text functionality

Figure 10: Extending our design with pill buttons and tagging them with the Selectable Text functionality

We can combine our pill filters with our search bar as shown on Figure 11. Namely, the pill filters output either the text Payroll or Freelance depending on the users’ selection (see the configuration in the plugin in Figure 10). We use this output to filter the table’s Type column after which we filter based on the search bar as we did previously.

Figure 11: Combining the pill filter with the search filter in the editor

The end result behaves as you would expect, we can use both the pill filters and/or the search bar to filter our data, as shown in Figure 12.

Figure 12: Working example combining pill filters and search bar
Updated on January 20, 2023

Was this article helpful?

Related Articles