Filtering data using URL parameters

Database Jan 04, 2021

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.

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

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.

Searching database using URL parameters
We can search and filter our Bubble.io app database to find a record using URL parameters. You can search using unique id or any field in the data type.

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.

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.


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.


Tags