Build a simple HRM app 2: First steps in building a rich GUI

Last update: Download PDF Edit

This how-to is based on the video “Build a simple HRM app: 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 completing this how-to you will know:

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

1. Preparation

Before you can start with this how-to, make sure you have completed the following prerequisites.

2. Create 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.

  1. Open the Domain Model of the MyFirstModule module.  
  2. Click on Entity to create a new entity. Click here to learn more about entities.  
  3. Double-click on the new entity.
  4. Enter Employee in the Name field.
  5. Click on New to add a new attribute. Click here to learn more about attributes.
  6. Enter Name in the Name field.
  7. Select String as the Type dropdown.
  8. Click OK.

  9. Repeat steps 4 through 7 for the following attributes:

    DateOfBirthDate and time

    The entity will look like this:

3. Build 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 the data view and the data grid.

3.1 Add a page

  1. Right-click on the MyFirstModule module.
  2. Click on Add > Page.  
  3. Enter _EmployeeOverview in the Page name field.
  4. Click on Master Detail.
  5. Select Master detail big.
  6. Select _SidebarLeft in the Navigation layout dropdown.  
  7. Click OK.
  8. Click on the data grid below the label Master Detail.
  9. Drag-and-drop the entity Employee from the connector to the data grid.
  10. Deselect the Auto-Fill option.  
  11. Click OK.

3.2 Add attributes to your page

  1. Double-click on the Full Name column.
  2. Click on the Select button.  
  3. Select the attribute Name.
  4. Click Select to select the attribute.
  5. Click OK.
  6. Repeat steps 1 through 5 for the following columns with corresponding attributes:

    Caption ColumnAttribute
  7. Double-click the first text box below the image.

  8. Click Select to select an attribute.  

  9. Select attribute Name.

  10. Click Select to select the attribute.

  11. Click OK.

  12. Repeat steps 7 through 11 for the second text box and select attribute Email.

  13. Delete the link button.

  14. Click on the Name text box in the user details container.  

  15. Drag-and-drop the attribute Name from the connector to the Name field in the User details container.  

  16. Drag and drop the following attributes to their corresponding:

EmailNameUser details
  1. Delete the containers and input fields that are not being used.  

3.3 Add buttons to your page

To create or delete employees, you need to add a button to the data grid.

  1. Right-click on the grid control bar of the data grid.
  2. Click on Add button > New.  
  3. Right-click on the grid control bar of the data grid.
  4. Click on Add button > Delete.  

3.4 Generate a page

  1. Right-click on the New button.
  2. Click on Generate page.  
  3. Enter _EmployeeNewEdit in the Page name field.
  4. Select Form basic horizontal.
  5. Select PopupLayout in the Navigation layout dropdown.  
  6. Click OK. The new page will be shown in the project explorer.

3.5 Create 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.

  1. Open the Navigation of the project.  
  2. Click New item to add a new menu item.  
  3. Enter Employees in the Caption field.

  4. Click Select to select a target.

  5. Select the Employee_Overview page of the MyFirstModule module.

  6. Click Select.

  7. Click OK. The Employee Overview page will be shown in the navigation list.  

4. View your app  

  1. Click on Run in Sandbox.
  2. Click on the Save and continue button.
  3. Click on View App.

    At the left side of your app the menu item Employees is shown.  

  4. Click on Employees.

You can now add and edit employees! Click here to go the third how-to on how to create a simple HRM application and learn how to show related data in the GUI.

Learn more about this topic using the following helpful links: