How to create and set up your first detail (parent-child) page using page variables.
After reading this article, you will know the following:
-
What a detail page is and how to build one using page variables
-
Show details of a single record from a data table
-
Navigate users between overview and detail pages
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.
Preparation
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.
Creating a detail page
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:
task/:task_id
Select the type of page and hit Create page.
Working with variables
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:
Task.id equals task_id
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.
Displaying record details
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:
Enabling row click
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.