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. The figure below 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.
If you’re unfamiliar with lists and tables of data in weave.ly 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 below.
Moreover, we’ve already linked our table to our list of cards as shown in the figure below. 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 the gif below. 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 block’s filter configuration. Using the configuration panel on the right (once a table block is selected) you are able to configure on which columns you want to filter. Moreover, you’re also able to determine how you want to filter (e.g. for text values you can choose from contains, exact match, starts with, etc. while for numeric values you can filter using arithmetic comparators).
In our example we want to search on the name column, and we’ll filter anything that contains the given piece of text. We can now connect our search input to the table block.
The gif below 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 the figure below. 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
We can combine our pill filters with our search bar as shown on the figure below. Namely, the pill filters output either the text Payroll or Freelance depending on the users’ selection (see the configuration in the plugin in the figure above). We added an additional filter in the table block’s configuration to filter on exact match with the output of the pill filter.
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 the gif below.
