Create Your First Two Overview and Detail Pages

Last modified: August 19, 2024

Introduction

This how-to explains how you can create overview and detail pages in Mendix.

This how-to teaches you how to do the following:

Create overview and detail pages
Configure navigation and security

Prerequisites

Before starting with this how-to, make sure you have completed the following prerequisite:

Create a domain model by following Configuring a Domain Model:

Creating Overview and Detail Pages Automatically

To create the overview and detail pages for your data structure, follow these steps:

In the domain model, right-click the Customer entity and select Generate overview pages.
Select both entities in the Generate pages dialog box.
Click OK.

And there you go! For each entity, an overview page and a detail page is generated. Also, an Entity_Menu snippet is created and added to each overview page.

Mendix can do even more work for you if you create an Excel spreadsheet with two tabs (one for the header and data for Customer, and the other for the header and data for Order). When you are creating a new app, select App from a spreadsheet and upload your Excel spreadsheet.

Creating Overview and Detail Pages Manually

For a better understanding of Mendix Studio Pro, this section describes the manual steps for creating these pages.

Creating the Overview Page

To create a new overview page and add it to your app, follow these steps:

Right-click the module and select Add > Page.
Click Responsive.
Enter CustomerOverview in Page name.
Select Sidebar_Full_Responsive as the navigation layout.
Click Blank, then select the Blank page template and click OK:
Click Data Grid in the menu bar of the page builder to select the data grid widget:
Click inside the page editor to create the data grid widget:
Right-click the data grid and select Select Entity.
Select the Customer entity in the Select Data Source pop-up window and click Select:
Click OK to auto-fill the data grid with search fields and columns:

You should now have an overview page with a data grid like this:

Creating the Detail Page

To create a new detail page manually, follow these steps:

Right-click New on the data grid on the overview page and select Generate page.
Select PopupLayout as the Navigation layout.
Select Form Horizontal and then click OK:
Right-click New on the data grid on the overview page again and select Go to page:

You should now have a detail page like this:

Now create a navigation item for your overview page to start using it. For details on Setting Up Navigation, see Setting Up Navigation.

If you switched on security for this application, you also need to configure page access on both the overview and detail pages. For more information, see How to Create a Secure App.