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
Before starting with this how-to, make sure you have completed the following prerequisite:
- Use the first how-to in this series: Build a Simple HRM App 1: Create, Manage, and Deploy the App
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:
- Open the Domain Model of the MyFirstModule module:
- Click Entity to create a new entity: For more information about entities, see the Entities chapter of the reference guide.
- Double-click the new entity:
- In the Name field, enter Employee:
- Click New to add a new attribute: For more information on attributes, see the Attributes chapter of the reference guide.
- In the Name field, enter Name:
- Select String as the Type:
- Click OK.
- Repeat steps 4–7 above for the following attributes:
|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:
- Right-click the MyFirstModule module and select Add > Page:
- 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.
- Click the data grid below the Master Detail label, and then drag the Employee entity from the Connector to the data grid:
- 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:
- Double-click the Full Name column.
- On the Edit Grid Column dialog box, click Select:
- On the Select Attribute dialog box, select the Name attribute and click Select:
- On the Edit Grid Column dialog box, click OK.
Repeat steps 1–4 for the following columns with the corresponding attributes:
Caption Column Attribute City City
Double-click the first text box below the image:
To select an attribute, click Select:
Select the Name attribute, click Select, and then click OK.
Repeat steps 6–8 for the second text box and select the Email attribute.
Delete the link button.
Click the Name text box in the User details container:
Drag the Name attribute from the Connector to the Name field in the User details container:
Drag the following attributes to their corresponding fields:
Attribute Field Container Name User details Phone Phone Phone DateOfBirth Birthday Birthday City City Location State State Location
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:
- Right-click the grid control bar of the data grid and select Add button > New:
- 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:
- Right-click the New button and select Generate page:
- 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.
- 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:
- Open the Navigation of the project:
- On the Navigation tab, click New item to add a new menu item:
- In the Caption field of the New Menu Item dialog box, enter Employees:
- Click Select to select a target:
- Select the Employee_Overview page of the MyFirstModule module:
- 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:
- Click Run in Sandbox:
Click the Save and continue button, and then click View App:
On the left side of your app, the Employees menu item is shown:
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.
6 Related Content
- Build a Simple HRM App 1: Create, Manage, and Deploy the App
- Build a Simple HRM App 3: Show Related Data in the GUI
- Build a Simple HRM App 4: Enrich the GUI with Filter Options
- Build a Simple HRM App 5: Smarten Up Your App with Business Logic
- Create and Deploy Your First App
- Testing Microflows Using the UnitTesting Module