Filtering data using URL parameters

If you observe the URL structure of Amazon, you’d notice that they use URL parameters to filter search results. This is useful because you can then share the link with someone and they would then see the same results.

This is a better approach compared to using custom states in Bubble.

To understand how URL parameters work in Bubble and how to send URL parameters from one page to another, read this.

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.

A custom state is just a temporary variable that can be assigned to a page or an element in Bubble. As it is temporary, the custom state is reset whenever a page is refreshed. What this means is that 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 refreshes the page.

URL parameters on the other hand, change the URL structure. So even if the user refreshes the page, they’ll still see the same results because the URL would still be the same.

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.

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.

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.

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 himanshu@nocodeassistant.com. You can also follow me on Twitter.

I help people bring their ideas to life with Bubble. http://nocodeassistant.com/