V. Adding details page related to multiple Tables

Add a page with data from different Tables

In this section, we will add another page that will contain the information about a certain customer - their details and order history. We will add some visualization components as well. Here's the resulting page we're going to have:

First of all, add a new page and rename it into Customer Details.

Adding Navigation to a new page

Go back to the main application page and select the Customers table. The idea is to open the Customer details page upon a click on a certain row. To achieve this follow the below steps:

1. Go to the Triggers section - On Row Select trigger

2. Choose Add New Action from the dropdown

3. Add new action - Condition.

4. There, specify the code: return {{ ui.loadCustomersTable.selectedRow.index}} >= -1;. This code ensures the system doesn’t automatically send you to the details page, even when no row is selected.

5. For the True condition, add another action step Navigation. Specify Page Path as {{ routes.customerDetails.url }} and add query params id {{ ui.loadCustomersTable.selectedRow.data.customerNumber}}

Adding Condition

Navigation step

Customizing the page

For the Customers Info page, we will add a Details component, a Table, and a couple of visualization metrics.

Let’s start with displaying Customer information.

1. Add a Details component to the working area.

2. To display the data of a selected record from the Customers table, add a new action - Load Row.

3. Configure a filter to retrieve a row as Customer Number ={{ activeRoute.queryParams.id}}

4. Click anywhere on the Details component and assign this new action in the Data field: {{ actions.loadCustomerInfo.data }}

5. Now, as you select a certain row in the Customers table, you will be sent to the Customer Details page

Customers Info action configuration

Nice job!

Next, we will add a Table that will display all Orders records of the selected customer. To achieve that, follow the below steps:

1. Start with adding a new action - Load Table.

2. Specify the source and resource (Orders) for the action

3. To display the data ONLY about a selected customer, add a filter: select Customer Number as an identifier, and set the filter to ={{ activeRoute.queryParams.id}}

4. Add a new Table to display the orders

Displaying customer's orders

Try to select any row in the Customers table and see how the data on the Customer Details page changes. Perfect!

Your Customer Details page already looks nice and easy to use, yet we will add some visualization metrics for a complete view 👉