1 Introduction

This how-to is based on the video “Build a Simple HRM App: the First Steps in Building a Rich GUI,” which is part of the Getting Started videos.

This is the second how-to in a series of five on how to create a simple HRM application. In this how-to, you will learn how to build pages to manage employees in your application.

After using this how-to, you will know how to do the following:

  • How to create a domain model
  • How to build pages

2 Prerequisites

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

3 Creating a Domain Model

The domain model is a data model that describes the information in your application domain in an abstract way. It is central to the architecture of your application. The domain model consists of entities and their relations represented by associations.

To create a domain model, follow these steps:

  1. Open the Domain Model of the MyFirstModule module:
  2. Click Entity to create a new entity: For more information about entities, see the Entities chapter of the reference guide.
  3. Double-click the new entity:
  4. In the Name field, enter Employee:
  5. Click New to add a new attribute: For more information on attributes, see the Attributes chapter of the reference guide.
  6. In the Name field, enter Name:
  7. Select String as the Type:
  8. Click OK.
  9. Repeat steps 4–7 above for the following attributes:

    Name Type
    Address String
    City String
    State String
    Phone String
    Email String
    DateOfBirth Date and time

The entity will look like this:

4 Building a Page

Pages define the end-user interface of a Mendix application. Every page is based on a layout. A page fills the “gaps” defined by a layout with widgets such as a data view and data grid.

4.1 Adding a Page

To add a page, follow these steps:

  1. Right-click the MyFirstModule module and select Add > Page:
  2. On the Create Page screen, do the following:
    a. In the Page name field, enter Employee_Overview.
    b. Click Master Detail and then select the Master detail big option.
    c. In the Navigation layout drop-down menu select Sidebar_Left, and then click OK.
  3. Click the data grid below the Master Detail label, and then drag the Employee entity from the Connector to the data grid:
  4. Clear the Auto-Fill option, and then click OK:

4.2 Adding Attributes to Your Page

To add attributes to your page, follow these steps:

  1. Double-click the Full Name column.
  2. On the Edit Grid Column dialog box, click Select:
  3. On the Select Attribute dialog box, select the Name attribute and click Select:
  4. On the Edit Grid Column dialog box, click OK.
  5. Repeat steps 1–4 for the following columns with the corresponding attributes:

    Caption Column Attribute
    Email Email
    City City
  6. Double-click the first text box below the image:
  7. To select an attribute, click Select:
  8. Select the Name attribute, click Select, and then click OK.
  9. Repeat steps 6–8 for the second text box and select the Email attribute.
  10. Delete the link button.
  11. Click the Name text box in the User details container:
  12. Drag the Name attribute from the Connector to the Name field in the User details container:
  13. Drag the following attributes to their corresponding fields:

    Attribute Field Container
    Email Name User details
    Phone Phone Phone
    DateOfBirth Birthday Birthday
    City City Location
    State State Location
  14. Delete the containers and input fields that are not being used:

4.3 Adding Buttons to Your Page

To create or delete employees, you need to add a button to the data grid. To do this, follow these steps:

  1. Right-click the grid control bar of the data grid and select Add button > New:
  2. Right-click the grid control bar of the data grid and select Add button > Delete:

4.4 Generating a Page

To generate a page, follow these steps:

  1. Right-click the New button and select Generate page:
  2. On the Create Page screen, do the following:
    a. In the Page name field, enter Employee_NewEdit.
    b. Select Form basic horizontal.
    c. In the Navigation layout drop-down menu, select PopupLayout.
  3. Click OK, and the new page will be shown in the project explorer:

4.5 Creating a Menu Item for Your Page

To view a page in your app, you need to add a menu item so you can navigate to the page. To do this, follow these steps:

  1. Open the Navigation of the project:
  2. On the Navigation tab, click New item to add a new menu item:
  3. In the Caption field of the New Menu Item dialog box, enter Employees:
  4. Click Select to select a target:
  5. Select the Employee_Overview page of the MyFirstModule module:
  6. Click Select and then OK. The employees overview page will be shown in the navigation list:

5 Viewing Your App

To view your app, follow these steps:

  1. Click Run in Sandbox:
  2. Click the Save and continue button, and then click View App:

    On the left side of your app, the Employees menu item is shown:

  3. Click Employees:

You can now add and edit employees!

To use the third how-to for creating a simple HRM application, see Build a Simple HRM App 3: Show Related Data in the GUI.