Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 14

Dynamic Tool Listing with URL Parameters

Recommended resources

Hello! In our last lesson, you mastered how to use URL parameters to make a single page display data for any tool in your database. This was a crucial step in building a scalable platform. Now, we're going to expand on that by organizing your tools into categories.

Today's goal is to create a dynamic category page. This page will receive a category name from your homepage, display a filtered list of only the tools belonging to that category, and then link each of those tools to the correct dynamic tool page. By the end of this lesson, you will have built the complete navigation flow: a user can click a category on the homepage, see a list of tools for that category, and then click a tool to view its dedicated page.

Step 1: Building the Category Page and Repeating Group

First, we need a new page to display the lists of tools.

  1. In your Bubble editor, create a new page and name it category.
  2. On this new page, add a Repeating Group element. This is where the list of tools for the selected category will appear.

This setup should feel familiar. Now, let's configure this repeating group to fetch and display the right data.

Step 2: Filtering the Repeating Group with a URL Parameter

This is the core of today's lesson. We need to tell the repeating group on your category page to display only the tools that match a category name passed in the URL (e.g., .../category?name=calculators).

  1. Select the Repeating Group on your category page.
  2. In the Appearance tab, set the Type of content to Tool.
  3. For the Data source, click the field and select Do a search for.
  4. In the search window, ensure the Type is Tool. Now, click Add a new constraint.
    • For the first dropdown, select Category (the field you created on your Tool data type).
    • The second dropdown should be =.
    • For the value, click Insert Dynamic Data, scroll to the bottom, and select Get data from page URL.
  5. A new pop-up will appear. Here's how to configure it:
    • Parameter name: Type name. This is the key we will use in the URL.
    • Type: In the dropdown, select your Category Option Set. Bubble will cleverly match the text from the URL parameter to the correct option in your Option Set.

This configuration tells the repeating group: "Search for all Tools in the database, but only show me the ones where the Category field matches the category option corresponding to the name value in the URL."

The video below from Building With Bubble demonstrates this exact technique of filtering a repeating group's data source. While the example uses concerts and locations, the principle of adding a constraint based on a URL parameter is identical.

How to Use URL/Page Parameters in Bubble.io

This video provides a clear walkthrough of using URL parameters to filter a repeating group, which is exactly what you need for your category page.

Pay close attention to the section on updating the data source. You will follow the same steps: performing a search, adding a constraint, and using 'Get data from page URL' as the constraint's value.

With the data source configured, you can now populate the repeating group's cell with elements like a Text element for Current cell's Tool's Name and another for its description.

Step 3: Navigating from the Homepage to the Category Page

Now that the category page is ready to receive information, we need to send it from your homepage (or wherever you list your tool categories).

  1. Navigate to your homepage, where you have the repeating group displaying your Category Option Set.
  2. Inside the repeating group cell, select the element that users will click to open a category (this could be the text element with the category's name, or a group containing it).
  3. Start a new workflow for that element.
  4. Add the action Navigation > Go to page....
  5. In the action's properties:
    • Set the Destination to your category page.
    • Check the box for Send more parameters to the page.
    • Set the Key to name.
    • For the Value, use dynamic data: Current cell's Category's Display.

Your setup should look exactly like the one in the image below.

This image shows the precise configuration for sending a category's name as a URL parameter to your new category page.

Test it out! Preview your app, click on a category from your homepage, and you should be taken to the category page. The URL should now include ?name=YourCategoryName, and the repeating group should display only the tools from that category.

Step 4: Connecting the Category Page to the Tool Page

The final step is to link each tool in your new filtered list to its individual tool page. This is a direct application of what you learned in the previous lesson.

  1. Return to your category page in the editor.
  2. Inside the repeating group that lists your tools, select the element you want users to click to view a tool (e.g., a "View Tool" button or the tool's name).
  3. Add a Navigation > Go to page... workflow to this element.
  4. Configure the action:
    • Destination: tool (your dynamic tool page).
    • Check Send more parameters to the page.
    • Set the Key to id.
    • Set the Value to Current cell's Tool's unique id.

The image below shows a similar configuration, sending a project_id. You will do the same, but with your Tool's unique id.

Your workflow action for linking to the tool page will use the same logic, sending the 'unique id' of the 'Current cell's Tool'.

Now you have completed the entire chain. A user can navigate seamlessly from a broad category to a specific tool.

Conclusion

Excellent work! You have now built a scalable and logical navigation structure for your multi-tool platform. By combining filtered repeating groups with the URL parameter techniques from our last two lessons, you've created a dynamic and user-friendly experience.

Let's summarize the key achievements:

  • You created a category page capable of displaying a filtered list of tools.
  • You learned how to filter a repeating group's data source by adding a constraint that reads a value from the page's URL.
  • You successfully built the full, three-step navigation flow: Homepage -> Category Page -> Tool Page.

This robust structure is a major milestone for your project. In our next lesson, we will shift our focus to the user interface. You'll learn how to build a reusable header and footer to ensure your platform has a consistent look and feel across all these new pages.