How to Use Path Parameters to Link Pages in Baserow Apps

Parameters allow you to pass values through URLs so pages in your app can stay connected to the right data. This lets you build multi-page apps where users can click a row, open a new page, and view or edit data related to that specific record.

They are essential for building multi-page apps such as detail pages, edit forms, or contextual actions.

Typical use cases:

  • Open a detail page for a selected row
  • Edit a record on a separate form page
  • Add files, comments, or related data to a specific row
  • Create clean, shareable URLs like /tasks/123

Before setting anything up, it’s important to understand that Baserow supports two types of parameters.

Parameter Types in Baserow

1. Path parameters

Path parameters are part of the URL structure and must always be provided.

Example:

/tasks/42

In this case, 42 is passed via a path parameter.

Use path parameters when:

  • Loading a specific row
  • Building detail or edit pages
  • Creating clean, shareable URLs

2. Query string parameters (optional)

Query string parameters add extra information to the URL and are not required.

Example:

/tasks/42?view=compact 

Use query parameters for:

  • UI preferences
  • Filters
  • Optional configuration

This guide focuses primarily on path parameters, since they are the most common way to link pages to data.


How it works?

1. Create a Page with a Path Parameter

  1. Add a new page to your application.

  2. Open Page settings.

  3. In the Path field, add a parameter using a descriptive name:

    /tasks/:task_id
    

Other good examples:

  • /customers/:customer_id
  • /orders/:order_id

:light_bulb: Avoid generic names like :id. Descriptive names make apps easier to understand and maintain.

  1. Once added, a Path parameters section appears automatically.
  2. Set the parameter type to Numeric.

Why Numeric is important

Always use Numeric for row IDs:

  • In build/preview mode, Numeric parameters default to 1
  • This usually matches an existing row
  • Text parameters default to "test", which almost never matches a real row

This small choice makes building and previewing apps significantly smoother.


2. Use the Path Parameter in a Data Source

Now that the page receives a parameter, you can use it to fetch data.

Option A: Get a single row (most common)

  1. Add a new data source.

  2. Choose Get single row.

  3. Connect it to the relevant database and table.

  4. Rename the data source to something meaningful

    Example:

    Task (by task_id)
    
  5. For Row ID:

    • Click the Οƒ (expression) icon
    • Select Parameter β†’ task_id

The page now loads the correct row based on the URL.

Option B: Use the parameter as a filter (multiple rows)

Path parameters can also be used in filters β€” this is often missed.

  1. Add a data source that returns multiple rows (e.g. List multiple rows).
  2. Open the Filter tab.
  3. Click the Οƒ (expression) icon next to the filter value.
  4. Select Parameter β†’ task_id (or your parameter name).

This is useful for:

  • Related records
  • Comments
  • Attachments
  • Child tables

:warning: Many users miss this because they don’t click the sigma icon β€” calling this out explicitly helps a lot.


3. Bind Page Elements to the Data Source

Once the data source is connected to the parameter, you can use it across the page:

  • Text elements β†’ show values like name, status, description
  • Inputs β†’ prefill data in forms
  • Tables β†’ show related records
  • Buttons β†’ trigger actions for the current row

Everything on the page stays in sync with the URL parameter.


4. Link to the Page from Another Page

To pass the parameter value into the URL:

  1. Go to a page that lists records (for example, a table).
  2. Select a button, link, or clickable field.
  3. Set Link type β†’ Navigate to page.
  4. Choose the page with the path parameter (/tasks/:task_id).
  5. For the parameter value:
    • Select your properly named data source

      Example:

      Tasks list β†’ Id
      

:light_bulb: Naming data sources clearly makes this step much easier to understand later.

Each row now links to its own dynamic page.


6. Preview and Test

  • Preview or publish the app.
  • Click a row in your list page.
  • Confirm the URL changes (for example, /tasks/42).
  • Verify the page loads and updates the correct data.

Key Concept to Remember

Path parameters are the bridge between pages.

One page sets the value (the row ID), the other page reads it and uses it in data sources and actions.

Key Takeaways

  • Use path parameters to link pages and load the correct data
  • Always use Numeric parameters for row IDs
  • Prefer descriptive parameter names (:task_id, not :id)
  • Name your data sources clearly
  • Use the Οƒ (expression) icon to access parameters in filters and fields
  • Path parameters work in both preview and published mode

Once users understand this pattern, they can reuse it across:

  • Detail pages
  • Edit flows
  • Multi-step processes
  • Contextual actions
2 Likes

Never thought about using them in filters! Thanks for the hint.

1 Like