What filtering methods are you using in Bubble.io?
Are you using custom states to filter the searches in your Bubble app? If the answer is yes, I'd suggest giving URL parameters a try.
Wouldn't it be great if you could share the Bubble app link with someone, and they would see the same results that you saw? Welcome to the world of URL parameters.
Major tech companies like Amazon and Airbnb use URL parameters to search their database.
If you take a look at the URL structure of Amazon, you'll see that they use URL parameters to filter search results. This is useful because you can then show the same results to someone else.
In this tutorial, we'll see how you can use URL parameters to filter your Bubble app's repeating group.
What are URL parameters?
URL parameter is the text of a URL that follows a question mark. It consists of a key and a value, separated by an equal sign. Multiple parameters can be added to a single page by using an ampersand.
Why are they better than custom states?
A custom state is a temporary variable that can be assigned to a page or an element in Bubble. The custom state is temporary, and it is reset every time a page is refreshed.
This means if we use custom states to set constraints and filter a Repeating group, these constraints will get reset and we'll lose the filters that we had applied if the user reloads the page.
URL parameters, on the other hand, change the URL structure. The user will see the same results even if they refresh the page because the URL will stay the same.
How to filter a Repeating group?
To filter a Repeating group, we need to define the constraints using the parameters defined in the URL.
In this Repeating group, I want to extract the "company" and "type" from the URL. The method to extract these values is simple. In the dynamic text, select "Get data from URL". Upon selection, you'll see another inspector panel
Here you need to accurately specify the parameter that is being passed in the URL. My sample URL structure looks this - https://nocodeassistant-tutorials.bubbleapps.io/version-test/url_parameters?company=Apple&type=Refurbished
I need to ensure that the parameter key that I am passing, matches the parameter name here. Also, make sure to tick "ignore empty constraints" if you want to show results even when the URL parameters are not defined or are incomplete.
Himanshu Sharma
Is it important to navigate to a new page?
It's not important to navigate to a new page in order to use URL parameters. You can navigate to the same page where the user currently is and still use URL parameters.
As you can see, I have the dropdown and the Repeating group on the same page. I navigate to the same page with fresh URL parameters.
Himanshu Sharma
What if one of the parameter is empty?
There will be cases when due to some reason, you'd end up with empty parameters. Although it won't break your Bubble app and will have no effect on the Repeating group results as we have ticked "ignore empty constraints", it is a good practice to remove empty parameters.
Install this free plugin, and on page load, remove the empty parameters from the URL.
Himanshu Sharma
Editor - https://bubble.io/page?type=page&name=url_parameters&id=nocodeassistant-tutorials&tab=tabs-1
Preview - https://nocodeassistant-tutorials.bubbleapps.io/version-test/url_parameters
If you need some help with your Bubble app or if you need a team of Bubble developers to build a Bubble app for you, reach out to me at [email protected]. You can also follow me on Twitter.
Join the conversation.