Reading query params from URL

This navigation use case focuses on how you can pass and read query params from the URL. Let's say you have a Table component and on row select you want users to be transferred to the Details page of a specific record. This can be achieved using the Navigation action step.

Check out the instruction below👇

1. First, navigate to the Pages tab in the left side panel and create a new page (we'll name it Customer since it will display customer details).

2. Select your Table component and navigate to the Triggers section.

3. For the On Row Select trigger, click Create action to create a new action navigating to the Customer page.

4. Select the Navigate action step and set the destination page as {{routes.customer.url}}.

5. Next, in the Query params specify the following: id = {{ui.customersTable.selectedRow.data.customer_id}}.

6. Now, go back to the Customer page and add a Detail component there to display the data of a selected record from the table.

7. Create a new action of the Load Row type for your current Table.

8. In the Filters section, for customer_id specify the following variable to receive the URL query parameter on the child page:

   {{activeRoute.queryParams.id}}

9. Assign the Load Row action to the Detail component.

That's it! Now, when selecting a row in the Table, you'll immediately navigate to the child page with the selected customer displayed.

This option can be also useful when creating a redirect after a form submit.