Throughout this guide, you’ll learn everything you need to know about using page parameters within Bubble.
When I first started using Bubble, it took me some time before I fully understood how to leverage URL parameters. Once I understood a few key concepts, however, it completely changed the way I built applications.
This guide will cover the step-by-step process of utilizing URL parameters in Bubble.io. This includes:
- What are URL parameters
- When to use URL parameters in Bubble.io
- How to create custom URL parameters
- How to extract and display URL parameters
Full Transcript of Tutorial
1. What are URL/page parameters
If you’re relatively new to Bubble, you’ll understand that it’s possible to send data between pages that have an associated content type. A practical example of this is if you’re creating a user profile page within your application.
If you were to set the content type of this page to be a user, it’d be possible to send the data of a specific person to this page, then display all of their information on the profile.
But what happens if you’d like to send some additional data from an origin page that doesn’t match the user property type? You wouldn’t actually be able to send that across as a data type.
Page parameters essentially allow you to store any data within a URL string in your application, which you can then retrieve on a destination page. One of my favorite use cases for using page parameters is creating a search experience that redirects a user through to a search results page. Throughout a user’s search, they’ll often select from multiple filters, so things like dates, addresses, or even text fields. This, of course, is all data I can store in my URL, then extract and display on my search results page.
2. When to use URL parameters in Bubble
The fastest way to fully understand URL parameters is by reviewing some real-world examples, so let’s jump over into a Bubble editor and I’ll explain everything you need to know in as much detail as possible.
In my example today, I’m just going to show you how I can search for concerts in my database, then, on a search results page, I’d like to display a list of relevant results pulling through the data that I’ve sent in my page parameters.
Now in order to start this process, I’m going to need to open my homepage. On this page, I’d just like to point out that I’m searching for a list of concerts based on two particular input fields.
I have a standard date time picker, as well as a search menu. This search menu is just set to index a list of geographical places so a user can select a specific city.
This repeating group on my page is also searching for a list of concerts I’ve created in my database. Within each repeating group cell, I’m displaying the band’s name, the city that they’re performing at, the date, as well as the image and the price for that concert.
When it comes to creating my custom search feature, I’d like to create a new workflow every single time our search button is clicked. Within that workflow, I’ll be adding a series of page parameters that will send through the value of our input fields.
3. How to create custom URL parameters
To achieve this, I’ll choose to start a workflow from scratch. Within this workflow, because I’m sending a user between two pages, I’m going to be selecting from a navigation event, which I’m sure you’re already familiar with.
I’m going to then select the ‘go to page’ action and have the destination page be my search results page. Now one thing I should just point out is that I don’t have a type of content set on the search results page, meaning I won’t be sending data through to that page in the traditional sense. Of course, even if I did have a type of content set on that page, I’d only be able to send it through one particular data value.
Instead of sending through just a single data type, I’ll select to instead send through page parameters, which just allow me to attach as many different data types as I’d like within my URL string.
The way I can send a URL parameter is by selecting the box to ‘send more parameters to page’. This is going to give me the option to add my own custom parameters. In our example today, I’ll send through the date that a user would like to search for a concert, as well as the location of where they’d like to visit a concert.
In my workflow tab, I’m going to need to first identify the names of the parameters. Within Bubble, these are just called parameter keys. So this is just the naming convention for each individual bit of data I’ll be sending through.
As I mentioned, the first parameter will be called the ‘date’. Once I’ve given a name to this parameter, I can choose what data I would like to set as its value. In this use case, I want this to be the value of my date/time picker on the page.
While I’m here, I’d also just like to send through an additional page parameter, which is, of course, our location. I’ll select to add another page parameter and I’ll be calling this one ‘location’.
One thing I should point out is that you may have noticed I personally haven’t added any capitalized letters within my URL parameter’s name. Now, this wasn’t a mistake. There’s an intentional reason for doing this. I’ll touch base on this in a moment.
For my ‘location’ parameter, I’ll need to select the data I’d like to send through with my parameter key. This data will be the value of the search box on my page.
At this point, these are the only two values I’d like to send through to my destination page. Of course, if you’d ever like to send through more data, you can add as many page parameters as you would like.
Now before I show you how we can extract the data we’re sending through in the URL on our search results page, I just want to show you what our URL string will now look like once we’ve added our page parameters.
If I open our design tab and run a preview of our application, I can now select to add in whatever date value I would like. Let’s say I want to go to a concert on a Saturday night and I want the location to be San Francisco. I can choose to perform that search and that workflow will run, sending us through to our search results page.
At this point, I haven’t added anything on this page to extract the data we’ve sent through, but one thing I do just want to note is how the page parameters have formatted within our URL string. Within our URL string, the first thing you’ll notice is that it’s quite a long string of text. You’ll notice a number of different characters that are separated by percentage symbols. All of this text is our page parameter.
In our URL parameter, the first thing you’ll see is that my date page parameter has been added, and that’s the name that I gave that parameter key. The value of that parameter is going to be the value I selected within our date/time picker element.
Next to that parameter, you’ll see our location parameter key. The value of that has been set to San Francisco. Now because we’ve sent through this data in our URL, we need to create a way to extract that information, then filter a list of search results by the data that was sent through to this page. Thankfully, this is a fairly straightforward process.
4. How to extract & display URL parameters
I’m going to jump back into my Bubble editor, then I’ll open our search results page within our application. Now, on this page, I just have a title at the top, followed by a repeating group below this.
Within this repeating group, I’ve set the type of content to be a concert, but I haven’t yet added a data source because I want to show you how to do that in more detail.
First, what I’d like to do is customize the title that’s displayed on this page. So at the moment, this is just a static heading that just says, “Concerts In.” What I’d like to do is display a city after that title. Based on my example before, this would display the words, “Concerts In San Francisco”. Then, I’d like to display the date that the user is searching for.
In order to extract that information from my URL parameter, I’ll need to insert dynamic data. The dynamic data I’ll need to add is from the ‘get data from a page URL’ option. By default, this will be set as a page parameter.
Now, in order to extract the city name of the page parameter that was sent through, I’ll need to reference which particular parameter key I would like to pull from a URL.
If you remember, in our original workflow on the homepage, I had created a parameter named ‘location’. It’s at this point that I’ll copy this exact same value and set that as the parameter key I’d like to extract.
One thing I’d like to point out is that this parameter was in fact a geographic address. This means that the type of data you select will need to be related to this format. If you’re sending through a basic field like a user’s name, you could extract this data as a text field. In my case today, I’m going to extract the location parameter, which was a geographic address.
It’s also at this point that I’d just like to point out why I had in fact left all of the parameter keys in lowercase text. I tend to see a lot of people who will add the parameter in lowercase letters on their homepage when building the workflow to send data to the destination page. On their search results page, however, they’ll often use capitals at the beginning of each parameter key. This can then create a bug within the app.
The reason this bug occurs is because the original parameter key doesn’t match the exact same value as the newly typed key. When there’s no exact match between these two values, they become disconnected.
Because my parameter has extracted an address, what I’d like to do is display the city stored within this data field. Now this heading should display the text, “Concerts In San Francisco”.
Following the city’s name, I’d like to display the date in which someone has also added to their search. To achieve this, I’ll once again need to extract and display data from my URL parameter.
Like before, I’ll select the option to insert dynamic data. I’ll then scroll right down to the bottom and choose to ‘get data from my page URL’. The parameter name was of course our ‘date’, and the type of content will be a date as well.
I’ll also need to make sure I format the spelling of the word ‘date’ correctly so it matches the initial key value I’d allocated.
After successfully extracting data from our parameter to create a dynamic title, we can now leverage our URL data to update the data source of the repeating group element on our page.
Within our repeating group, I’d like to display only display concerts within our database that are, first of all within the target location of a user search query, as well as of course the dates that they’re looking for.
For the type of content set in my repeating group, I’m currently performing a search through my database for all of the available concerts. From here, I’ll start adding some constraints to match my page parameters. This will allow me to display concerts where the city is within a 50km radius of a user’s target search location.
To achieve this, I’ll add a constraint and select to insert dynamic data. I’ll then need to select the ‘get data from page URL’ option once again. The data I’d like to extract will be my ‘location’ page parameter. I’ll of course need to label that this data is a geographic address, then this constraint will be validated.
For my final repeating group constraint, I’d like to only display concerts that are on the same date as the user’s target search date. To achieve this, I’ll once again select to insert dynamic data. Of course, from here, I’ll need to ‘get data from my page URL’, only this time the parameter I’ll be fetching is our ‘date’ key.
That is all I’ll need to configure in terms of this data source within my repeating group.
If I was to run another preview of my application, I’m going to once again perform another search on my home page. Similar to before, I’ll search for concerts on the 20th of November and set the target city to be San Francisco.
After performing this search, my workflow will run and we’ll be redirected to our search results page. On this page, the first thing you’ll notice is that our heading at the top of the page has dynamically populated with all of the data from our user’s search query.
Below the heading, we’ll also see that the data source for our repeating group has updated based on the URL parameters we’d sent through to this page. It’s now displaying a list of all of the concerts and bands that are playing on this particular date from which a user could then choose to buy tickets.
And just like that, you can see how easy it is to actually implement the page parameters feature within your application. I think once you unlock the ability to use page parameters, it’ll completely change the way you approach building your application in Bubble.