Dynamic Page Data Loading with URL Parameters

What are URL Parameters?

Before we dive into Bubble, let's clarify what URL parameters are. They are small pieces of information, structured as key-value pairs, that are appended to the end of a URL. They always start with a question mark (?), and multiple parameters are separated by an ampersand (&).

For example, in a URL like myapp.com/tool?id=123x456&theme=dark:

• The first parameter's key is id, and its value is 123x456.
• The second parameter's key is theme, and its value is dark.

Your Bubble app can both create these URLs and read the information within them. This allows us to pass data—like the unique ID of a tool—from one page to another without using the page's built-in data type.

The following article from Amlie Solutions provides an excellent, detailed overview of URL parameters.

Now that you understand the concept, let's put it into practice. We'll configure the navigation from your list of tools to the tool page.

Step 1: Sending the Tool's ID as a URL Parameter

Our goal is to make each tool in your repeating group link to the tool page and tell that page which tool to display. We'll do this by passing the unique id of the tool as a URL parameter.

1. Navigate to the page where you have the repeating group that displays your list of tools (e.g., your homepage or a category page).
2. Inside the repeating group's cell, choose the element you want users to click to navigate. This could be a "View Tool" button, the tool's name, or the group containing the tool's card.
3. Select that element and add a workflow.
4. In the workflow editor, add the action Navigation > Go to page....
5. Set the Destination to your tool page.
6. Here is the crucial step: check the box that says Send more parameters to the page.

This will reveal fields to define a key and a value. We will create a parameter with the key id and set its value to be the unique ID of the tool in the current repeating group cell.

• For Key, type id (you can use any name, but id is a common convention).
• For Value, click "Insert Dynamic Data" and choose Current cell's Tool's unique id.

This workflow now tells Bubble: "When this element is clicked, navigate to the tool page and add ?id=[the unique id of this specific tool] to the URL."

This video from Building With Bubble provides an excellent demonstration of this entire process, using a search page as an example. The principle is identical.

Step 2: Reading the URL Parameter on the Tool Page

Now that we're sending the tool's ID to the tool page, we need to configure that page to use it. The URL will look something like this: .../tool?id=168....

In the last lesson, we set the page's "Type of content" to Tool. This works when Bubble sends the full data object to the page (which puts the ID in the URL path, like /tool/168...). However, since we are now sending the ID as a parameter, we need a more flexible setup. We will use a group as our main data container instead of the page itself.

Here's how to adapt your tool page:

1. Remove Page Content Type: Open the tool page. If you select the page itself, find the Type of content dropdown and set it back to be empty.
2. Create a Container Group: If you don't already have one, add a Group element to the page that will contain all the elements for displaying your tool (the name, description, icon, input/output sections, etc.). Make it span the full page.
3. Set the Group's Data:
   • Select this new container group.
   • Set its Type of content to Tool.
   • For the Data source, we'll build an expression to find the tool using the ID from the URL. Click "Insert Dynamic Data" and choose Get data from page URL.
   • In the pop-up, set the Parameter name to id (the key we defined in our workflow).
   • Change the Type from text to Tool. This tells Bubble to not just read the ID as text, but to use that ID to look up a record in the Tool data type.
4. Update Dynamic Expressions: Your text and image elements inside the group were probably referencing Current page Tool's.... Since the data is now in the parent group, not the page, you must update these. Change each expression from Current page Tool's Name to Parent group's Tool's Name, and so on for the description and icon.

The image below illustrates the final step of setting the group's data source.

This method is extremely powerful. The group now acts as a self-contained component that fetches its own data based on the URL.

The article from Amlie Solutions clearly explains this "reading" part of the process.

Once you've completed these steps, preview your app. Click on different tools in your list. You should be taken to the tool page, and you'll see the content change to reflect the tool you clicked, with the tool's unique ID visible in the URL bar.

Conclusion

Fantastic work! You have now mastered a critical technique for building scalable applications in Bubble. By using URL parameters, you've successfully connected your list of tools to your dynamic tool page, allowing users to select exactly what content they want to see.

Here are the key takeaways from today's lesson:

• URL parameters are key-value pairs in the URL used to pass information between pages.
• You can send parameters using the Go to page workflow action and enabling Send more parameters to the page. The most common value to send for a database record is its unique id.
• On the destination page, you use the Get data from page URL expression to read the parameter. By setting the correct data type, you can instruct Bubble to fetch the full database record.
• Using a group as a data container (instead of the page itself) provides a flexible and powerful way to load content based on URL parameters.

In our next lesson, we will formalize the structure of your category pages. We will build a dynamic list of tools belonging to a specific category and ensure each one links correctly to the tool page using the URL parameter technique you just learned.