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.

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.

2. Create a parameter in your data node to filter by See Query 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.

Query:

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

Parameter initialization:

{
  "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.

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}.

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.