In this guide, you’ll learn how to use the ‘intersect with’ operator inside of Bubble. To put this feature simply, it allows you to recognize if items from two separate lists overlap with each other.
The process of using ‘intersect with’ between two lists includes:
- Reviewing an example of when to intersect two lists
- Correctly setting up your database to support lists
- Designing the on-page elements
- Understanding the difference between client-side & server-side searches
- Learning how to use advanced filters
- Learning how to ignore empty constraints within a search
Full Transcript of Tutorial
1. Reviewing an example of when to intersect two lists
Before we review our database setup, I wanted to share a real-world use case where you’ll need to use the ‘intersect with’ operator in Bubble.
In a demo application, you’ll see that I have a repeating group displaying a list of restaurants. On the left-hand side of my page, I have a menu that allows users to filter these restaurants by their categories. This filter allows you to select multiple categories at once. Not just one.
If you were to use a traditional dropdown menu, you could easily filter this list of restaurants by one specific category, but what if a user would like to filter restaurants by multiple categories?
For example, if a user selects the categories of; Thai, Japanese, and Burgers – we should display all of the restaurants in our app that contain at least one of the options.
Based on the three categories I mentioned, I can see that a sushi restaurant is displayed as it belongs under the Japanese category.
So in this scenario, the list of categories for my sushi restaurant overlaps with the list of categories that a user has selected. This means that there is an intersection between these two lists.
2. Correctly setting up your database to support lists
To start building this feature, we must first take the time to correctly set up our Bubble database.
Inside my database, you’ll see that I have a data type called ‘restaurant’. This allows users to create and store information about restaurants in my app.
Within my overall restaurant data type, I also have a data field called ‘categories’. As you can see, this data field is set as a list of option sets.
This means that I’ve also taken the time to create an option set list called ‘categories’. Inside this list, it contains all of my different choices e.g. Thai, Japanese, Chinese, Italian, Burgers, etc.
In my database, each restaurant can contain more than one category, making it a list of items.
3. Designing the on-page elements
When designing the interface of your app, you’ll need to first add a multi-select dropdown menu to the page. This will allow your users to select from a list of options.
When configuring the multi-select dropdown, start by setting the ‘choices style’ field to be a list of dynamic choices. This allows you to reference existing data within your database.
Then, from here, set the ‘type of choices’ field to reference the ‘category’ option set you’d previously created.
This multi-select field will now reference and display all of the categories you need.
Now that we’ve finished configuring the dropdown menu, we can focus on building the repeating group element that displays a list of restaurants.
On the page, simply add a repeating group and have it search for a list of all the restaurants stored in your database.
In the example of my app, I’ve also added a constraint to the data search of this repeating group. The constraint only displays restaurants where the address data field is within 10 km of the ‘current user’s geographic position’.
Now, if you were traditionally trying to filter your restaurants by a single category selected from a basic dropdown menu, you could easily use the ‘contains’ constraint. The downside to this, however, is it will only allow you to filter by one option. In our app today, we want to be able to filter by multiple options.
In order to create a solution, we need to leverage what’s known as an ‘advanced filter’ within Bubble. To access this, select the ‘more’ option after the data source of your repeating group. Inside this menu, choose to add an additional filter.
Within your additional filter, you’ll now have the ability to harness the ‘advanced’ option.
4. Understanding the difference between client-side & server-side searches
An advanced filter, as the name suggests, allows you to further refine a data search by some additional options that aren’t provided in a standard search.
Before you can understand how an advanced filter works, it’s important to first know the difference between client-side and server-side searches in Bubble.
When you perform a traditional search, you’re sending a message to your database on a server. Inside that message, you’re telling Bubble what information you’d like it to prepare and send back.
As this data is sent from a server, this is known as server-side loading.
If, however, you add an advanced filter on top of an existing data source, you’re choosing to refine the list of already returned data. This additional filter doesn’t occur on a server. Instead, it occurs on the user’s device (also known as the client). As a result, this is called client-side loading.
It’s important to remember that a server is a dedicated device that can send and receive data almost instantaneously. Each user device, however, is going to be different. All desktops, laptops, and mobiles have different specifications that can alter the speed at which they can process information.
5. Learning how to use advanced filters
Once you understand the difference between server-side and client-side loading, we can proceed to build our advanced filter.
Within the advanced filter, we’ll first select the ‘this restaurant’s categories’ option.
From here, you’ll now have the ability to reference the ‘intersect with’ operator.
In this case, we’ll want to intersect the restaurant’s list of categories with the categories selected from the multi-select input.
Bubble will now combine both of these two lists, then recognise if there’s an overlap between their values.
For example, if there’s a restaurant that contains three categories; Italian, Thai, and burgers. Then, if a user selects Italian, Chinese, and burgers from the multi-select input, there would be two categories that successfully overlap (both Italian and burgers).
If you were to click away and validate this expression, however, you’ll notice that Bubble returns an error message. Inside this message, it mentions that the returned value must be a yes/no function.
As a solution, you can add an additional step to your expression. Simply select the ‘more’ option again, then select the choice to perform a count on the list. This count will calculate how many items overlap between our two lists.
After performing the count, we can then recognise if the returned value ‘is not 0’. By selecting this, it will now create a binary (a yes/no) because the count will either be 0, or it’ll be greater than 0. Now, Bubble will be able to successfully validate this expression.
6. Learning how to ignore empty constraints within a search
Finally, once you’ve successfully identified if two lists intersect, you’ll need to create a way to ignore this constraint if it’s empty. This will allow you to avoid adding a filter if a user has not selected any categories from the multi-select dropdown.
Unfortunately, if we were to run a preview of our app, you’ll notice that simply selecting the ‘ignore empty constraints’ option doesn’t work correctly. This is because Bubble is unable to ignore constraints when using advanced filters.
As a solution, we can instead create a condition on our repeating group that will update its data source when a user selects a category from the multi-select element.
Start by selecting the repeating group element, then open the conditional tab.
For this condition, we’ll recognise when the multi-select dropdown element, when its value is greater than 0. This means that Bubble will recognise when at least one category has been selected.
For the behaviour of this condition, we’ll then just need to copy across the data source we’ve created, including the advanced filter.
Now, this advanced constraint will only affect the list of restaurants displayed when a user wishes to filter them by a category.
And just like that, you now know how to use the ‘intersect with’ feature inside of Bubble.