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!
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.
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).
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.
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.
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.
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.
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 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.
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.
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.
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.