TUTORIAL – Filter data with a select dropdown

[Joyce]

In WeWeb, we have two dropdown elements:

• The 2 – dropdown element that you can style and would use in a navigation menu for example
• The 14 – select element that you can’t style as beautifully but can bind to a collection list and use to filter a collection

In this tutorial, we’re going to show you how to use the 14 – select element.

This will enable your users to filter through items on a page. For example, to select only job offers in the Marketing category.

If you prefer video, here’s a link to a video tutorial on the select dropdown in WeWeb.

Otherwise, read on!

Pre-Requisites

On the page, you have at least two elements:

1. the 14 - select element as shown above
2. a collection list element

In your data sources, you have at least two collections and these two collections have at least one field in common:

1. one collection with a list of categories. In our example below, we’ll use a “Locations” collection with a list of car rental locations
2. one collection with the data you want to filter. In our example below, we’ll use “Fleet” collection with a list of rental cars with the mileage of the cars and the car rental locations

Keep in mind that, if you want to filter data based on multiple select dropdowns, you’ll need several select dropdown elements and one collection for each select dropdown.

The way to think about it: one filter condition = one select element = one collection.

Step 1 – Bind the select dropdown

In our case, we’re binding to the “Locations” collection that has 6 rental car locations:

Note that, in the right sidebar, we made sure to change the “Display field” and “Value field” to correspond to what we want to filter by, i.e. the Location name.

Step 2 – Bind the collection list

In our case, we’re binding the “Fleet” collection that includes all our cars at all the locations BUT we’re adding a couple of no-code formulas to display only the cars for which the “Location” field is the same as the value in the “dropdown - value” variable which you can see in the left sidebar:

What our formula is saying above:

• if the dropdown value is nothing, then display all the data from the collection
• otherwise, check the “Location” field (the “key” in coding terms) in the collection (an “array” or “list” in coding terms) and display the items where the “Location” field has the same value as the “dropdown - value” variable

There you go! That’s all there is to it

Pro tip – when you hover on a no-code function in the editor, you can see help text that explains how the function works.

[RCS]

Is there a way to have a select / multi-select dropdown, be a collapsible list? It would be much easier to have the dropdown start out as “dropped down” and then be able to collapse it instead of the following alternative.

The alternative I can think of is to create a collection list, and then set up a workflow and variable that adds to the variable on click. But that sounds extremely tedious and not sure what issues I might run into by setting that up.

[Mael]

For select you have this option “is open” to do what you want

For multiselect, it’s not possible with our element. You can create it by yourself, it’s not very complicated and you will learn a lot by doing it

[FJP84]

What do you mean by creating by yourself?

• Create a custom component for it (vue coding)
• Create it with existing elements already available, like show/hide a collection list with a select checkbox in the first column?

[Antiokh]

Hello, @Joyce!

Thank you for the tutorial. I met the problem (I use Supabase):
When I have plenty of items in the collection, when I bind collection.data, it hangs the system, loading 8k null entries instead of 25 from the page. I use multiselect element. Is there a solution on how to make it work without loading the whole collection?