Showing Parent-Child Records in the Live App

What You'll Learn

This article walks through how to display parent-child records in your Live App using Knack's connections feature. You'll set up a parent page, add a details page for each parent record, and display the connected child records on that details page.

What Parent-Child Records Are

Parent-child records means one parent record connects to many child records. Examples:

A Company with many Contacts
A Customer with many Orders
A Project with many Tasks

Instead of showing all child records in one flat table, you let users select a parent record and see only the child records connected to that specific parent.

Example Scenario

This example uses a Companies table and a Contacts table, where each Company is connected to many Contacts. Users will navigate to a Companies page, select a specific Company, and see a details page showing that Company's information and its connected Contacts.

Requirements

You need at least two connected tables in your app. For this example, your app should have:

A Companies table
A Contacts table with a connection to Companies

For more on setting up connections, see Connections Guide.

Steps

1. Add a Page to Display the Parent Records

In the Pages section of the Builder, click + Page to create a new page.

Name the page (for example, Companies) and add a Table Element that displays records from the Companies table.

This page shows the list of all Companies. Users will select a Company from this table to view its details and connected Contacts.

2. Add a View Record Details Action

With the Companies Table Element selected, open Actions in the right panel and click View Record Details.

This adds a link column to the table and creates a new child page for viewing a single Company's details.

3. Add Elements to the Child Details Page

Navigate to the new child page in the Pages panel. By default, this page contains a Details Element for the selected Company record.

To show the connected Contacts, click the + button to add a new element below the Details Element. Choose Table (or List, depending on the layout you prefer). When prompted for the data source, select the Contacts table and choose the option that shows records connected to this page's Company.

📘
Table or List — same settings either way
Both Table and List Elements have the same right-panel sections and configuration path. Pick the layout that fits your design.

4. Add a Form to Create New Connected Child Records

To let users add new Contacts directly from the Company's details page, add a Form Element to the same child page.

Click the + button again. Choose Form and select the Contacts table as the data source. Configure the form to add a new Contact connected to this page's Company.

Now the details page contains three elements:

A Details Element showing the Company's information
A Table or List Element showing the Company's connected Contacts
A Form Element for adding new Contacts to this Company

5. View the Results in the Live App

Click Go to Live App or Preview Changes to test the setup.

You should see a table of all Companies. Clicking the View Details link on any Company opens a page showing that Company's details, its connected Contacts, and a form to add new Contacts.

Adding Connections to Existing Pages and Elements

You are not limited to adding connected views when you create a new page. You can also:

Add a View Record Details link to an existing Table Element. Select the element, open Actions in the right panel, and click View Record Details. See Action Links for more on action links.
Add a new element to an existing page. From the Pages panel, navigate to the page and click + to add a Table, List, Details, or Form Element.

Related Use Cases

Once you're comfortable with parent-child pages, a few related scenarios build on the same foundations:

Show records connected to the logged-in user. If you want users to see only their own records (for example, "My Projects" or "My Orders"), the setup is similar to parent-child but uses the logged-in user as the parent. See Show Records Connected to the Logged-In User.
Display connected fields directly in a table or list. You can show fields from a connected table as columns in a Table Element without setting up a full parent-child page. For example, a Contacts table can include a column showing the connected Company's name or other Company fields. This is useful when you want to surface connection data inline rather than on a separate details page.
Display the most recent connected record on a parent. For patterns focused on showing "the most recent" child record (last interaction, last order), see Display the Most Recent Child Record Value on a Parent Record.

Next Steps

Connections Guide for foundational concepts on how connections work in Knack.
Action Links to learn more about link columns and action links in Table Elements.
Show Records Connected to the Logged-In User for filtering records by the logged-in user.