After reading this article, you will know the following:

A detail view page serves as an expanded view of details about your products, projects, tasks, clients, etc. After you create your page with the data table showing an overview of your all items (parent page), the next step is to enable users to view the details of every single record of this table (child pages). Therefore we need to create a separate page using page variables that show information from a model.

To demonstrate the step-by-step process of configuring our detail page, we’ve created a simple Task overview page with a data table showing a ‘to-do’ list. It is based on the Task model but shows only the data from ID, Name and Created at properties. If one wants to see some details (Description and Status, in our case), they have to open each separate item from the table.

Then let's create a new page from scratch (or with a Header & footer template) via the Pages. This page is aimed to show the extended details of each task from the Task model.

Come up with a name for it (e.g. Task detail), and take a closer look at what needs to be done with a page path.

Within the page path, we need to use a task ID, because every time a single task is opened, we need to give this task ID with the URL, so that the application knows which exact task number we are referring to. Therefore, put down the following into the page path:

Select the type of page and hit Create page.

We will set up the Task detail page to display the extended data from the task model on every unique page using two types of variables.

Open the Task detail page and go to the page builder menu > Variables tab. We can start by adding an input variable called task_id (Number type) that will define the number of a task.

The next step is creating a page variable from the same menu. This way, we'll grab one task object for our page in a dynamic way, matching it with the newly created input variable id.

Go to Variables > Page and press New variable. Choose Object type and select Task model. Then click + Create filter rule and set the following rule:

Finish by clicking Apply and save this new page variable.

We now have data on our page that corresponds to the task with an ID matching the page ID. This also means that if someone attempts to find a task with a non-existent ID, the filter will be denied, and no data will be displayed.

To further dynamically display the content of a single record, you have to add some page components to the Task detail page. It's a matter of use case and personal preference but for demonstration, let's just add a few content components - Title and Text, for instance.

In the Title component options, press + in the content field > insert variables (x), and select the needed property from the Task model - Task.Name in our case. Repeat the same actions for the rest of the components on the detail page.

Press the compiler button ('Play') to enable changes and see what details on your page look like. For now, you can only switch between tasks manually by changing the task’s number ID in the URL field. E.g:

Lastly, we need to get back to the projects overview page to add one more piece of functionality - a row click that will enable users to open the details of a single task on a separate detail page that we’ve just created.

Go to the Task overview page and click on the data table. In options, direct to the Task detail page and input variable Task.Id by selecting them in Row click.

From this point, you can press one of the rows with a certain task to be redirected to its unique detail page:

The method of creating a parent-child pages using object page variables provides a faster and smoother experience. If you're curious about other ways of working with data on pages, see Page variables versus data containers article.