Skip to content

Latest commit

 

History

History
87 lines (54 loc) · 4.05 KB

create-your-first-two-overview-and-detail-pages.md

File metadata and controls

87 lines (54 loc) · 4.05 KB
Raw
title linktitle url category weight tags
Create Your First Two Overview and Detail Pages
Create Overview and Detail Pages
/howto7/front-end/create-your-first-two-overview-and-detail-pages/
Front End
20
front end

1 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

2 Prerequisites

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

  • Set up a basic data structure by reading How to Create a Basic Data Layer:

    {{< figure src="/attachments/howto7/front-end/create-your-first-two-overview-and-detail-pages/18582175.png" class="no-border" >}}

3 Creating an Overview Page

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

  1. Right-click the module and select Add > Page.

  2. Click Responsive.

  3. Enter CustomerOverview in Page name.

  4. Select Sidebar_Full_Responsive as the navigation layout.

  5. Click Blank, then select the Blank page templateand clickOK**:

    {{< figure src="/attachments/howto7/front-end/create-your-first-two-overview-and-detail-pages/18581337.png" class="no-border" >}}

  6. Click Data Grid in the menu bar of the page builder to select the data grid widget:

    {{< figure src="/attachments/howto7/front-end/create-your-first-two-overview-and-detail-pages/18581335.png" class="no-border" >}}

  7. Click inside the page editor to create the data grid widget:

    {{< figure src="/attachments/howto7/front-end/create-your-first-two-overview-and-detail-pages/18581334.png" class="no-border" >}}

  8. Right-click the data grid and select Select Entity.

  9. Select the Customer entity in the Select Data Source pop-up window and click Select:

    {{< figure src="/attachments/howto7/front-end/create-your-first-two-overview-and-detail-pages/18581345.png" class="no-border" >}}

  10. Click OK to auto-fill the data grid with search fields and columns:

    {{< figure src="/attachments/howto7/front-end/create-your-first-two-overview-and-detail-pages/18581343.png" class="no-border" >}}

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

{{< figure src="/attachments/howto7/front-end/create-your-first-two-overview-and-detail-pages/18581330.png" class="no-border" >}}

3 Creating a Detail Page

  1. Right-click New on the data grid on the overview page and select Generate page.

  2. Select PopupLayout as the Navigation layout.

  3. Select Form horizontal and then click OK:

    {{< figure src="/attachments/howto7/front-end/create-your-first-two-overview-and-detail-pages/18581327.png" class="no-border" >}}

  4. Right-click New on the data grid on the overview page again and select Go to page:

    {{< figure src="/attachments/howto7/front-end/create-your-first-two-overview-and-detail-pages/18581326.png" class="no-border" >}}

    You should now have a detail page like this:

    {{< figure src="/attachments/howto7/front-end/create-your-first-two-overview-and-detail-pages/18581325.png" class="no-border" >}}

4 Navigation and Security

  1. Now create a navigation item for your overview page to start using it. For details on how to set up the navigation structure, see How to Set Up the Navigation Structure.
  2. If you switched on security for this application, you need to configure page access on both the overview and detail pages. For more information on configuring page access, see How to Create a Secure App.

5 Read More