When working with your data, you'll likely need to show data from a connected table. For example, say you have a Projects Table and each project belongs to a particular user, you'll likely need to reference fields from the Users Table and display those fields in the Projects Table. This article will discuss how we can accomplish this.
First, let's review our data structure. We have our Users Table as well as our Projects Table which connects to each user (each project belongs to a particular user).
In this example, let's assume that anytime we show the Projects Table we'd like to include a column with the phone number of the associated user. In the above screenshot, you can see that Project #1 belongs to Jhon Smith, but there is no column in the Projects Table to display Jhon Smith's phone number and email information. Let's see how we can create this column so that we can display the associated user's info within the Projects Table.
While we'll soon be enabling this feature for every component, you can currently display connected fields in 2 locations:
1. In the data table component
2. In the details page of a Project
1. First, we'll talk about displaying connected fields within a data table:
- Open the data table which is the Parent connection, which is the Projects Table in our example. (Parent Connection= Projects Table, Child Connection= Users Table)
- Add any fields you wish to include in your table
- Select the Connected Fields menu item and you'll see a dropdown of all connections from this table to any other table.
- Add any connected field you wish as columns in your Projects Data Table.
In the screenshot below you can see we've now added the Email and Phone fields from the connected Users Table:
2. Display connected fields within the details page of a Project:
In the same example, we'll now discuss how we can display connected fields within the details page of a project so that we can view the details of a project and the details of its associated user on one details page.
To accomplish this, let's select the Project Table's Detail Page, as seen in the screenshot below:
Within this Project Details Page, let's now add a new Details Component and select Users as the data table that joins with the Project Details Page record, as seen in the screenshot below:
Now we can add the User details we'd like to display within our Projects Details Page by selecting the details from the Fields menu on the left:
When we preview our app, we can now see the Project details as well as the project's associated User details side by side: