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.
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 |
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’. |
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. |
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). |
Press the |
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. |
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 |
|
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 |
|