Dynamic collection pages

Display data from a specific item on a dedicated page.

For example, you might have a list of blog posts, products, team members, or characters, and want each one to open on its own detail page.

Two ways to build a dynamic page

Bind to variable data

This means you store the selected item in a variable and bind the page to that variable.

This can work well for quick prototypes, but it has one major limitation: if a visitor opens the page URL directly, the variable may be empty and the page will not have any data to show.

Bind to table view data

This is the recommended approach for most real apps.

The page reads an ID or slug from the URL, sends that value into a Table View, and retrieves the matching record. That means the page can load the correct data even when someone opens the URL directly.

Build a dynamic page with a table view

What you'll need

1. A detail page to display one item
2. A list page or repeating list that links to that detail page
3. A table and a Table View in Data & API

Step 1: Create the detail page

Create the page layout that will display the record details, such as:

• Title
• Image
• Description
• Back button

Then set the page URL to use a path parameter, for example:

• characters/{{id|1}}
• products/{{slug|sample-product}}

Learn more about configuring URL parameters →.

Step 2: Create a table view for the detail page

In Data & API → Tables:

1. Open the table that stores the records you want to show
2. Create a new View
3. Add a parameter such as id or slug
4. Add a filter so the view only returns the matching row

For example:

• Parameter: id
• Filter: id is equal to parameter id

If you are using a slug:

• Parameter: slug
• Filter: slug is equal to parameter slug

Learn more about Views →.

Step 3: Fetch the table view on page load

In the Interface tab, create a page workflow on your dynamic page:

1. Open the page workflow
2. Add Fetch table view
3. Select the view you created
4. Pass the value from From path in current page

For example:

• View parameter id gets From path in current page → id

Learn more about Fetch table view →.

Step 4: Bind the result to the page

Once the table view has been retrieved, bind its returned data to your elements.

In many detail-page setups, your view returns one row, so you will usually bind to the first matching item from the view data.

Common examples:

• Bind a heading to the record name
• Bind an image element to the record image
• Bind text blocks to the record description, price, or status

Step 5: Link to the page from your list

On the page that displays your list of records:

1. Add a link or Change page action
2. Point it to the dynamic page
3. Pass the current record's ID or slug into the page path

That way, clicking one item opens the same page template but with a different URL value.

When to use variable data instead

The variable-based approach can still be useful when:

• You are building a quick prototype
• The detail page is only ever reached from inside the app
• You want to avoid an extra request for temporary UI state

But if the page should still work after refresh, when shared as a link, or when opened directly, use a Table View.

Collection-based setup

LEGACY APPROACH

The rest of this page keeps the older collection-based instructions for projects that still rely on that setup.

If you are starting a new project, use the table view approach above instead.

Overview

Display data from a specific item on a dedicated page.

Example: We have a list of characters of Rick and Morty and a dynamic page to show character details of a specific character.

Option 1: Bind to variable data

Step 1: Create a dynamic collection page

Create a template page of the information you want to display.

Here’s a basic example of a page for the character details. The page has sections for texts, a picture, and a back button to return to my initial page of items.

After you create the dynamic collection page, navigate to the initial page with the items you want to have on the dynamic collection page.

For this example, we’re starting with the Rick and Morty Database page with all the show's characters.

Step 2: Add a variable workflow

Step 3: Bind the information on the dynamic collection page

Go to the template page and bind the information found in the variable.

For our example, we’ll bind the following information: name of character, picture of the character, species of character, and location.

Option 2: Bind to collection data

Step 1: Create a dynamic collection page

Create a template page of the information you want to display.

Here’s a basic example of a page for the character details. The page has sections for texts, a picture, and a back button to return to my initial page of items.

After you create the dynamic collection page, navigate to the initial page with the items you want to have on the dynamic collection page.

For this example, we’re starting with the Rick and Morty Database page with all the show's characters.

Step 2: Create a new collection

To retrieve a specific character instead of the entire collection, create and configure a new collection as an API endpoint for a GET call.

Step 3: Bind data on the dynamic collection page

Step 4: Add a variable to the URL path on our template page

Learn more about configuring URL parameters →.

Step 5: Add the parameter to the API call

Step 6: Link to collection page with dynamic id

LEGACY TROUBLESHOOTING

If the dynamic collection does not update when retrieved, turn off Fetch collection automatically for the collection.

Then, on the template page, create an On page load workflow and add Fetch collection.

See the older collection refresh example

If the dynamic collection does not update when retrieved, turn off Fetch collection automatically for the collection.

Then, on the template page, create an On page load workflow and add Fetch collection.

CONTINUE LEARNING

Next, learn how to configure and test the path values that make dynamic pages work.

URL parameters panel →