Skip to main content
Creating a detail page

Find out how to create and set up your first detail overview page within our platform.

Updated over a week ago

After reading this article, you will know:

  • What a detail page is and how to build one in your application

  • Show details of a single record from the data table

  • Navigate users between overview and detail pages

The 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, the next step is to enable users to view the details of every single record of this table. Therefore we need to create a separate page with a data container in it showing information from a model.

Check this video as well about creating a detail page:

In order to demonstrate the step-by-step building and configuring of the detail page, first, we’ve created a simple ‘Task overview’ page with a data table showing a ‘to-do’ list from the ‘Task’ model.

A data table on a page builder's canvas

Configuring a page

Create a new page from scratch (or with a header & footer template) via the page builder. Come up with a name for it, in our case it’s ‘Task detail’ page, and let’s 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:


The “task” here is the name of the model.

Select the type of page and hit ‘Create page’.

Changing a page path while creating a new page

Working with data container

Drag and drop the column component and put the data container on top of it. Configure it so that ‘data is coming from another page’ (which is or Task overview page) and select the model ‘Task’.

Adding a data container on top of a column

If you click once on the data container we’ve just added and view the ‘Update filter’, you’ll notice that we already have the rule: ‘Project.Id’ equals ‘project_id’. It means that whenever someone is trying to find the task with a number that doesn’t exist, the filer will be denied and it won’t show any data.

Filtering data in the container

Take the title component and drag it onto the data container.

Click on the title once and in the content field in the component options, choose the insert data icon and pick up the needed properties from the model that you want to be shown in the title of your task overview (for example, ‘Description’ property).

Adding a title component onto a page

Press the ‘Play’ button to enable changes and see what details on your page look like. You can switch between tasks manually changing the task’s number id in the URL field.

A new page's URL

Analogically, you can add more data from the model to be shown on your detail page by extending the data container. For example, here we’ve added the ‘end date’, ‘status’ properties, and an open page button to enable users to get back to the projects overview page.

Working with a component tree

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.

Open the data table options and find the row click. Hit ‘Select a page’ and choose the task detail page. Then in the input variables field, click on the insert data icon and pick up the ‘Id’ property of the ‘Task’ model.

Enabling a row click in the data table

Now when you press on some certain task in the table on the Tasks overview page, the task itself will open on the Task detail page showing all the properties you’ve chosen to be displayed.

Click the ‘Play’ button to enable changes and to check if the functionality of pages works properly.

New tasks overview in the page builder
Did this answer your question?