Showing Parent-Child Records in the Live App

Connections in Knack allow you to create relationships between your tables. You can build a hierarchy of data in your app with "parent-child" records, where you can select a single records profile in the Live App and then display multiple connected records associated with that record profile.

Parent-child records mean one parent records connects to many child records. Here are some examples of parent-child records:

• Company connected to many Contacts: where a single parent company connects to many child contacts

• Customer connected to many Orders: where a single parent customer connects to many child orders

• Project connected to many Tasks: where a single parent project connects to many child tasks

Scenario

In this scenario, we will use our contact directory app. In that app, we don't need to view all the Contacts for every Company in one grid. Instead, it is more intuitive to first select a Company and view a profile for that Company record. Then on that Company details view, we will display all the Contacts connected to that Company.

Requirements

You will need to have at least two connected tables in your app to show parent-child records. You can read more about adding tables and connections here.

In this scenario, we will be using a Companies and Contacts table which are connected.

 

Steps

1. Add a Page to Display the Parent Record

2. Add Views to Display & Create Connected Child Records

Add a Page to Display the Parent Record

In order to show connected child records, your app needs a details page to display a single parent record.

To do this, first, we are going to add a page displaying Company records where a user can select a Company to view more details.

In the Pages section of the Builder, click the green "+" button to begin adding a new page.

 

This will prompt you to name your new page, add your first view, and select which table records that view will display. In this scenario, we will add a grid view that displays Company records.

 

 

Add Views to Display & Create Connected Child Records

Now that you have selected the type of view and which tables it will display, you will have the option to add additional links to your view.

In this case, we want the grid view of Company records to link to a details page that displays:

• A details view of a specific Company record

• A grid view of Contacts connected to the Company record

• A form view that adds new Contacts connected to the Company record

 

Once you have selected to link to a details page with those three views, click continue and add the page.

Now, you will have a page displaying the parent Company records which then links to view more details about each Company.

 

On the details page for the Company, you will have a details view for a specific Company record, a grid view of connected Contacts, and a form view to add new connected Contacts.

 

Add a Link to View More Details to an Existing View

The process above adds a link to view more details during the page and view creation process, however, it is possible to add new links to existing views.

These links are called "action links" and can be accessed when editing a view. For example, to add a link to view more details on a grid view, open the view to edit and select the "Add Columns" section and then the "Actions" option.

 

You can read more about adding and managing action links here.

Add Views to Display & Create Connected Records to an Existing Page

The process above adds views to display and create connected records during the page creation process. However, you can add views to existing pages as well by clicking the "Add View" button from the Pages section of the Builder.

 

You can read more about adding and managing views here.

Login & Test

Next, log in to your Live App and test your new pages. To view the Live App, click “Go to Live App” or the open button in the top right corner of the Builder. 

Now, you should be able to view a grid view of all Company records. Then, you can link to view more details to see a specific Company record and connected Contacts, and you can add a form view to add new connected Contacts.