Here's my guide to advanced filtering in Bubble.

For example, and this is great for an e-commerce platform where you wanted to filter products, I have a list of four products. I've got a product that is red and green, a product that is red, a product which is black and white, and a product that is black. How do I filter these with AND statements? Meaning, if I was to click red, I would get the red shorts and the red trainers. But if I was to click red and then green, I would only get the trainers. Now, AND statements like this can be particularly difficult above all, especially when you're using option sets, which I'm doing here. All of my colours, if I show you in data, all of my colours are option sets, and I'm going to be using custom states to get them filtering into my group and giving that visual representation.

Setting Up Custom States for Filtering

But before I get started, did you know that Planet No Code members can get access to Bubble tutorial videos that you can't find on YouTube? Just head to planetnocode.com to find out more.

But right now, we'll dive into the tutorial, which will be... First of all, I'm going to demonstrate one way of doing it. And then in part two, I'm going to demonstrate a second way. And honestly, the second way I prefer, but the first way is simpler. And so I'm going to need to set up a custom state in order to track the colors that are being clicked. And custom states are a great way of temporarily storing data. It's not saved to the database, but it's accessible to the user unless they refresh the page, in which case it's lost. So I'll say, color(s) selected. And this is going to be of type color. That's my option set. And it's going to be able to receive more than one. It's a list.

And then I'm going to add in an icon. And then I'm going to add in an icon. And make it square and align it at the top. And then I will put these both into a group. So that way I can run one workflow, whether it's the icon that's clicked or whether it's the type text, I'm going to run the workflow on the group that contains both of them. So put that into a row.

Filtering Using Constraints

Right. And just as a recap, I currently have everything shown as a do a search for. So all of my products, here's the data source for my repeating group product. But I want that to change. I want to filter it when this group here, my group color is clicked.

So I'm going to say, first of all, let's go with set state where my page, because that's where I put the custom state, that's where I've stored it. Custom states can be stored anywhere. I like putting on the page because then they're easier to find. And then this is going to be... Now, when you're doing a list with custom states, unlike if you're doing a list with database, you can't add to the list in one motion. You actually have to refer to the full list and then plus an item, so current status, color. I'm then going to add in a bit of visual representation for that. So I'll say when the custom state, color selected contains, then groups color. I'm going to change the icon to the check. Let's demo that. So if I click, I'm setting the custom state. And if I refresh, because it's a custom state, it's cleared out.

Using Color Codes to Unfilter Data

Okay, next step is getting that feedback into the repeating group. So here's the first way you could do it. You could use constraints. And so I could say color contains, and then my filter, color selected. Now, remember, this is a list in the custom state of colors. So I'm going to say item 1. Now, to get item 1, I could have also said first item, but I actually want to be able to copy and paste this expression. So this is going to check to see if the first color, which is black, if black is in the color field for the product, in which case it's going to display. I'm then going to add in color contains and copy and paste this expression. Item2. I'm also going to check ignore empty constraints because this one will be empty if I've only selected one cup.

So let's test it out. So let's see all the red products, and then let's see all of the red and green products. Now, I'm going to add one thing into this tutorial, but also, before actually, before I do that, I'm going to point out what you may have already noticed, which is that this isn't very dynamic in respect to... I've set it up to filter if up to two colours are picked, but then what if three colours are picked? And I have a choice here. Either I can add in a third colour, but then what a third constraint for a third color, but then what if someone tries to enter four? So I could, in the UI, limit my users to only filtering by X number of colors, and then only set up X number of constraints for those colors. That's one way to limit it.

A More Advanced Approach to Filtering

In part two, I'm going to demonstrate a completely different approach, but also using custom states and option sets, where it's going to be much more dynamic. But like I say, this is quicker.

And what I'm going to do to finish off this tutorial is demonstrate how I can unfilter. So I've currently got one workflow, and I need to make this conditional. And I like to like using color codes here. So I'm saying green if data is put in. And I only want data put in if the filter product, color selected, doesn't contain current sales color. And then I'm going to copy and paste the workflow and change this one to red because it's taking out.

So if it does contain this color, I want to minus item. Let's demo that. And this time we'll go with black. So let's view both black items and then let's view black and white. And let's say, oh, no, let's go back to black. Okay, there you go. So that is one way that you can use custom states, option sets, and constraints to filter a list using AND statements. Remember, we're saying whether it is black and white and white. Okay?

Subscribe for Part Two

Now, if you're not already subscribed to our YouTube channel, I'd really recommend that you subscribe because I'm going to be recording part two right away where I show a more advanced and slightly more complicated but more less limiting approach to filtering option sets on a list of products perfect for something like this, which is a marketplace or an e-commerce site.