Creating a master-detail page

Build and configure a master-detail page using page variables and 'Select record' interaction.

After reading this article, you'll know how to:

• Build a master-detail page with the following functionality:

  • Update project form

  • Data table showing tasks assigned to a project

  • Update task form with a row click and auto-filled data

This guide demonstrates creating a master-detail page using page variables and the 'Select record' interaction. We’ll walk you through a common scenario where multiple tasks are assigned to a project, and you need to display connected details on the same page. Additionally, you’ll learn how to include a form that updates task details when you click on a task row.

Master-detail page use case

A master-detail page refers to a user interface pattern used to display and manage related data in a structured and connected manner. This pattern is commonly used when dealing with related data models, such as Projects and Tasks, where one entity (the parent) contains or is associated with multiple related entities (the children).

Previously, we explained how to create a simple detail page showing a single record from a data table. This time, let's extend this case to more functionality and use Update form and Data table components to enable editing task details. Everything will be displayed within one Project detail page.

Pre-configuration

This use case stems from the Project management application example of our Essential path guide. See what pre-configurations are needed to understand it clearly.

• Data models Project and Task with Has many relation + Webuser model, also related to Projects model (Webuser has many Projects)

• Create project page with a Create form to start adding new projects and tasks to your application

• Input variables: project_id and task_id to capture the specific IDs of the selected project and task, allowing the system to identify which records are currently in focus

Building master-detail page

Now that we have some items configured, it is time to build a Project detail page. We'll concentrate on using page variables along this use case.

Creating a page and layout

Prepare a new Project detail page with page layout dividing it into various spaces using primarily Column and Box components. See how the layout can look like below:

Would you like to know how to display data within your pages in more detail?

Let's add one more variable before we start filling it in with other page components.

Adding a page variable

Go to Variables > Page > New variable.The page variable is set up as an object type based on the Project model. It fetches and displays the correct project details by matching the Project.Id from the model with the project_id input variable, ensuring the displayed data corresponds to the selected project in the database.

Content components

Start filling out the Project detail page with the content components. Drop some Text components onto a prepared space on your page. To enable the displaying of project details, select the needed Text/Title component, and in its options - go to Content field and press (+) on the right to pick the appropriate page variable (x) based on the Project model.

Continue filling out the rest of the components with dynamic data using page variables. Eventually, we got these details on top of this page.

Update project form

Drop the Create form into a column below the project details and configure it as shown below. Save it and let's make some adjustments by replacing data model properties in form fields with page variables.

Select one of the fields within the Update form. Options are open, go to the Value field and delete the data property from previous configuration with a similar page variable:

Click (+) in the Value field, and in a variables menu, go to page variables view (x) to select Project.Name variable. Proceed in the same manner with other input fields of the Update form.

Create task form

To enable creating tasks on the same page, add the Create form component to the right column. Follow the configuration wizard and select the needed properties from the Task model.

Note: Due to current platform limitations, we won't be using page variables to create new tasks for now.

Data table with tasks

Time to add a Data table component to our page that will display added tasks to a particular project on the same page.

After you're done with the Data table configuration window, rename this component (1) for further reference, and update the filter to Task.Project.Id (relative model) equals project_id (input variable).

Set selected record interaction

The next step is adding a new interaction to our Data table - Set selected record. This interaction informs the Update form or Data container, which are responsible for data querying, by passing the record ID. This allows the component to filter and retrieve the specific record from the database based on the passed ID.

Configure Set selected record as shown below, targeting our Task Data Table.

Adding page variable

To wrap up configuring our Data table, let's create one more page variable, this time - Task model variable. Follow the same path as shown previously, selecting Task.Id property that equals our Task Data Table component in a filter option.

This filter in combination with interaction allows us to create a master-detail functionality. On the row click on the exact Task Data table, the object variable is filtered to display the specific task details.

Update task form

The final step of our use case will be placing another Update record form at the bottom of the Project detail page. This form will enable editing selected record from our Task Data Table as it's going to be set to use the page variables as well.

1. Drop the Update form to an empty Column and in configuration window, make sure you've selected data coming from This page and specifically Task Data Table. Then pick up the needed Task model properties.

2. Replace the values of each input field from data property variables to corresponding page variables as shown in the example below:

Final check

Looks like we're done configuring our master-detail page! Let's have a look at how it is going to function in a runtime.

As you can see from the gif below, we created a solid flow where it's possible to create a new task (assigned to a project we're in) that will be displayed within a table. When clicking on a specific task row, the Task Update form fetches the data from that single record so that you can edit it, also checking the task as 'Is done'.