Simple guide to master URL parameters in Bubble for beginners

You have two options to send data between two pages in your Bubble app. You can either set the page's 'Type of content' or use URL parameters to send information.

Now let's assume that, for some reason, you can't give the destination page a 'Type of content'. In such a case, you are bound to use URL parameters.

What are URL parameters in Bubble?

URL parameters are the text of a URL that follows a question mark. It consists of a key and a value, separated by an equal sign.

The key is a variable name that you define when creating the navigation. The value is the information that you want to pass.

You can send multiple parameters to a single page using an ampersand (&). For example http://example.com?product=1234&source=google

How can you use URL parameters in Bubble?

You can use URL parameters with single-page apps as well as multi-page apps.

• Create navigation in single-page apps
• Trigger workflows
• Filtering a repeating group
• Search your database for items
• Manage OAuth authentication
• Hide and show groups using conditional statements and URL parameters

Why use URL parameters in Bubble?

The most significant benefit of using URL parameters over custom states is that users can use their browser's back button. This is not possible with custom states, as the custom state is lost when you refresh the page.

URL parameters will allow your users to share a URL, and Bubble will open and show the correct data/group.

There can also be a situation where you cannot set a 'Type of content' of the destination page, or you might need to send more than one database record to another page.

In both cases, you will need to use URL parameters to pass the slug or unique id of the records.

Sending URL parameters in Bubble

You need to use the 'Go to page' action to send URL parameters in the workflows.

I created the two input elements on a page and a button to trigger the navigation workflow. One input element is a simple input field, and the other is a dropdown.

To send the values of the two input elements as a URL parameter

1. Create a trigger to start the navigation workflow.
2. Check the 'Send more parameters to page' checkbox.
3. Specify the key. It can be anything you like. But remember that you'll need to use the same key value to extract data from the URL parameter.
4. Pass a value for this key. You can enter static text, dynamic text, a value from a database record or an Option set value.
5. Click 'Add another parameter' to send more URL parameters and repeat steps 3-5.

In the example above, 'q' and 'q2' are the keys or identifiers of the parameters.

Below, we'll see how to pass a database record, an Option set, and a custom state value in the URL parameters.

Sending an Option set as a URL parameter

You can send an Option set's value in the URL in your Bubble app. We must pass the Option set value in the 'Go to page' action.

You can pass the Display or any attribute value in the URL parameter.

Sending a database record as a URL parameter

You can send the value of a database record in the URL in your Bubble app. The best approach is to send the slug of the database record. You can also use the unique id of the record, but slugs are shorter than the unique id.

You can pass the unique id if you are not creating a slug for the data type.

We need to pass the record id in the 'Go to page' action to send the record id as a URL parameter.

Sending a custom state value as a URL parameter

You can send a custom state value in the URL in your Bubble app.

The custom state shouldn't be a list of items. It's not impossible to pass a list as a URL parameter, but it is complex.

We need to pass the value in the 'Go to page' action to send the custom state as a URL parameter.

Reading URL parameters in Bubble

You can use URL parameters wherever you can use dynamic data. You can use URL parameters in text expressions, workflows, conditional statements etc.

For this example, I've created a text element.

To access the URL parameter information in our Bubble app, we need to use Dynamic data.

1. Select Insert dynamic data.
2. Scroll down to the bottom to find 'Get data from URL'.
3. Select this Option to open another section where you need to define the key of the URL parameter.
4. Put the key of the URL parameter that you want to access. In our example, it will be 'q'.

Examples of using URL parameters in Bubble

You can use them for all sorts of things.

Marketplace

Assume that you have a marketplace, and the user enters their query, location and category on one page. You want to structure your site to display the results on a different page.

There is no other way to send this information to the next page without URL parameters.

You can filter your repeating group using data from the URL on the destination page.

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.

NocodeAssistantHimanshu Sharma

For example, in the constraints, the location constraint will be location = Get data from URL.

Single-page apps

Another way you can use it is in a dashboard.

You can use them to show and hide various sub-sections in the dashboard. We will create collapsible groups hidden on page load and visible only when the URL contains a specific keyword.

We will create workflow actions to go to the same page when a menu link is clicked but with a different parameter.

Filtering a repeating group in Bubble with URL parameters

We can also filter a repeating group using the URL parameters. The URL parameter can hold a value we can use as a constraint in the repeating group.

In this example, we have passed the country's name in the URL, and we want to filter results based on this parameter.

Filtering a Repeating group’s data using URL parameters in Bubble.io

Learn how to filter a Repeating group using URL parameters. A better approach that using custom states.

NocodeAssistantHimanshu Sharma

We will fetch the country name from the parameter and use it in the constraints of the repeating group.

How to remove a URL parameter

There are two steps if you'd like to remove a URL parameter from the URL.

1. Assign an empty value to the URL parameter.
2. Use a third-party plugin to remove empty URL parameters from the URL.

We can put the parameter's value as blank in the workflow action. It will lead to the URL resembling https://nocodeassistant.com?product=

Next, we'll create a workflow that runs on page load to remove empty URL parameters.

Editor - https://bubble.io/page?type=page&name=param&id=nocodeassistant-tutorials&tab=tabs-1

Preview - https://nocodeassistant-tutorials.bubbleapps.io/version-test/param

How do you use URL parameters in your app? Do you find them better than custom states?

If you need some help with your Bubble app or 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.