Showing Parent-Child Records in the Live App

In this article, we will guide you through the steps to display parent-child records in your Live App.

Knack's connections feature enables you to establish relationships between tables, allowing you to create a hierarchy of data in your app. By utilizing "parent-child" records, you can select a single record's profile in the Live App and showcase multiple connected records associated with that specific record profile.

"Parent-child" records means one parent record 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

 

Use Case

In this specific scenario, we will be utilizing our contact directory sample app. Within the contact directory app, the need to view all the Contacts for every Company in one grid view is unnecessary.

Instead, a more intuitive approach would be to initially select a Company and access a profile for that particular Company record. Subsequently, on the Company details view, all the Contacts connected to that specific Company will be displayed.

Requirements

We will need to have at least two connected tables in the app to show parent-child records. In this scenario, we will be using a Companies and a Contacts table which are connected:

 

 

Steps 

1.  Add a Page to Display the Parent Record

To display connected child records, it is necessary for your app to have a details page that showcases 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 about it.

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

 

You will be prompted to provide a name for the new page, add the initial view, and select the table for which the records will be displayed. For this particular scenario, we will include a grid view that showcases the Company records.

 

2.  Add Views to Display & Create Connected Child Records 

Now that we have selected the type of view and which table the view will display, we will have the option to add additional links to the 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 we have selected to link to a details page with those three views, we can select "Continue" and complete adding the views.

Now, we 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, we 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.

 

3.  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.

 

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

The process above adds views to display and create connected records during the view 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.

 

5.  View the Results in the Live App

Next, we can view the Live App and test the new pages. To view the Live App, click the “Go to Live App” button or the "Preview" button both found on the right side of the Builder while viewing a page. 

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

 

How do I show records connected to a specific user?

Users of your app have the ability to display records that are connected to their specific user record. This feature ensures that when a user logs in to the Live App, they will only see their own records and not the records connected to other users.

This functionality is similar to displaying parent-child records. For more information on how to display records connected to the logged-in user, see this article here.

Can I show connected records directly in a view?

Yes! When building views for your Live App, you can choose to add connected fields. For example, this means you could display a grid view of Contact records with a column showing the connected Company record or even other fields from the connected Company table.

---