Searching database using URL parameters

Database Jan 08, 2021

Once you begin using URL parameters rather than custom states, you'll soon find yourself asking how you can use them to search and fetch records from your database.

The method to using URL parameters is not very different. You need to ensure that you use the URL parameters in the constraints of the Data source.

Searching using unique id of a record

Assume that you have a data type called Product

searching-database-url-parameters-bubble-app-nocodeassistant-tips-and-tutorials

And you're passing the unique id of a Product in the URL to another page where you want to display the Product details.

searching-database-url-parameters-bubble-app-nocodeassistant-tips-and-tutorials

Here, your URL would resemble https://your-app-name.com/cart?prod-id=1596786382090x752535090689481000

The text after the ? is your URL parameter where prod-id is the key and 1596786382090x752535090689481000 is the unique id of the Product.

On the next page, create a dummy group of 1x1 and position it at 0x0. We'll use this group to find the Product record and use this group's value to reference data where we need.

searching-database-url-parameters-bubble-app-nocodeassistant-tips-and-tutorials

The Type of content of this group will match with the Type of content of the data type whose unique id we are sending. Here, it is Product. For the Data source, we'll search our database for the entry whose unique id matches the one in the URL.

searching-database-url-parameters-bubble-app-nocodeassistant-tips-and-tutorials

We need to remember that we are only searching for a single record and not filtering a Repeating group. That's why we are using a Group to hold the Product information. And because of this, we need to use :first item in the Data source of the Group. This tells Bubble to find and associate the first Product that matches with the constraint. As there can be only one Product record with the same unique id, this will always give us the correct Product record.

We can now refer to this dummy group where we want to display the Product's information.

searching-database-url-parameters-bubble-app-nocodeassistant-tips-and-tutorials
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.

Searching using other fields

searching-database-url-parameters-bubble-app-nocodeassistant-tips-and-tutorials

Here, we are passing the two parameters, name and company. The approach to find the correct Product record will remain the same. The only difference will be in the constraints that we will apply.

searching-database-url-parameters-bubble-app-nocodeassistant-tips-and-tutorials

Note: You can either create a dummy group and reference to it whenever required or you can directly search for the record in the element itself.

searching-database-url-parameters-bubble-app-nocodeassistant-tips-and-tutorials

Both the approaches are correct and will work in all cases. Yet, I recommend creating a dummy group. This keeps your app organized. And if in future you want to change the data source of a URL parameter, it is simpler to change.


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