# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.acho.io/app-builder/popular-use-cases/set-up-dynamic-routing.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
