> For the complete documentation index, see [llms.txt](https://docs.acho.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.acho.io/app-builder/popular-use-cases/set-up-dynamic-routing.md).

# Set up dynamic routing

Dynamic routing means that rather than specifying static routes for a page, they’ll be dynamically generated using forwarded data.

For example, let’s say we have a table of products and would like to take the user to a separate page with more details about the product when they click it. Rather than manually creating a new page for each product, y,ou can create a single page and pass in the product that’s been clicked. This will create identical pages, but filled with different data.

## How the pieces come together: diagram

The diagram below illustrates a simple case of dynamic routing.&#x20;

<figure><img src="/files/oF5dzp2h5rjMvCn9sULY" alt=""><figcaption></figcaption></figure>

When a user clicks on a table, a navigation action to the new, dynamic page is triggered. The navigation event will pass in a parameter, such as an `id`, to the dynamic page.

When the dynamic page is loaded, it will filter the data node based on the `id` passed to the page.

## Tutorial

**1. Create a new (dynamic) page**\
Set up page parameters for dynamic routing in the page's path. The parameter name is preceded by a colon, `:month_year`.\
![](/files/N2b67brFTZEqov2kPeEH)

**2. Create a parameter in your data node to filter by**\
See [Query](/app-builder/app-construction/query.md) for more details on how to set up parameters for your node. Make sure that the parameter is the same as defined in step 1.&#x20;

<figure><img src="/files/XxMdCNlWRzwc769lzk8a" alt=""><figcaption></figcaption></figure>

Query:

```sql
SELECT * FROM {{revenue_sample}}
WHERE month_year = '{{month_year}}';
```

Parameter initialization:

```sql
{
  "month_year": "2023-01-01"
}
```

**3. Set up a navigation event on the origin page to the navigated-to page**\
Enter in the parameter value you’d like to pass in to the page. This is the value that will be used to filter your data node.<br>

This example is set up on a table, and we're passing in the `month_year` value for the selected row using `${event.rowData.month_year}`.

<figure><img src="/files/byZNhrpz4vt4oCuoqx7K" alt=""><figcaption></figcaption></figure>

**4. Filter data based on page route.**\
The previous event set the route parameter for the dynamic page. Now, we can use that parameter to filter our node.

Set up a Before Render event on the dynamic (second) page. For the action, select API Service -> Set SQL Parameter. Under action parameters, type `${event.page.routeParams.month_year}`.

This will prompt the data node to re-execute the query with the new parameter value before the page loads. Your page will now display data only for the given `month_year`.

<figure><img src="/files/xGFyzAJPpvA7SuMB26ur" alt=""><figcaption></figcaption></figure>
