Repeating Groups Advanced Filter - AND Filters, Option Sets, Custom States

Advanced Filtering in Bubble

Here's my guide to advanced filtering in Bubble. For example, and this is great for an e-commerce platform where you want 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.

Using Option Sets and Custom States

Now AND statements like this can be particularly difficult, especially when you're using option sets which I'm doing here. All of my colors, I'll show you in data, are option sets and I'm going to be using custom states to get them filtering into my group and giving that visual representation. 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.

Two Approaches to Filtering

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.

Setting Up Custom States

I'm going to set up a custom state in order to track the colors that have been 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 colors 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 make it square and align it at the top.

Creating a Group for Workflow

I will put these both into a group so that way I can run one workflow even if it is the... whether it's the icon that's clicked or whether it's the text, I'm going to run the workflow on the group that contains both of them. So put that into a row.

Setting Up the Repeating Group

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.

Implementing the Workflow

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 them 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 kind of motion. You actually have to refer to the full list and then plus an item so current cells color.

Adding Visual Representation

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 group's color I'm going to change the icon to the check. Let's demo that. So if I click I'm assessing the custom state and if I refresh because it's a custom state it's cleared out.

Filtering the Repeating Group

Next step is getting that feedback into the repeating group. 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 one. Now to get item one I could have also said first item but I actually want to be able to copy and paste this expression.

Adding Multiple Constraints

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 item two. I'm also going to check ignore empty constraints because this one will be empty if I've only selected one color. 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.

Limitations of This Approach

Now I'm going to add one thing into this tutorial but also 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 colors I picked but what if three colors I picked and I have a choice here. Either I can add in a third color but then what a third constraint for a third color but then what if someone tries to enter four.

Possible Solutions

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

Adding Unfilter Functionality

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 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 selves 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.

Demonstrating the Functionality

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.

Conclusion and Next Steps

Okay 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 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.