This is the fourth how-to in a series of five on how to create a simple HRM app. In this how-to, you will enrich the user interface by adding filter options.
This how-to will teach you how to do the following:
- Create an enumeration
- Build a search field
Before you can start with this how-to, make sure you have completed the following prerequisite:
- Complete the third how-to in this series: Build a Simple HRM App Step 3: Show Related Data in the GUI
3 Enriching the User Interface
Let’s assume that you want to divide your employees into three different levels: Junior, Medior, and Senior. To achieve this, you need to use enumerations.
3.1 Creating an Enumeration
To create an enumeration, follow these steps:
Right-click the MyFirstModule module and select Add > Enumeration:
To learn more about enumerations, see Enumerations in the Mendix Reference Guide.
Enter Level in the Name field of the Add Enumeration dialog box, and then click OK:
On the Enumeration dialog box, click New to add a new enumeration value:
In the Caption field of the Add Enumeration Value dialog box, enter Junior, and then click OK:
Repeat steps 3–4 for the Medior and Senior enumeration values, and then click OK:
3.2 Adding a New Attribute of the Enumeration Type
To add a new attribute of the enumeration type, follow these steps:
- Open the Domain Model of the MyFirstModule module.
- Open the Employee entity and click New to add a new attribute.
- Enter Level in the Name field.
Select Enumeration in the Type drop-down menu:
In the Select Enumeration dialog box, select the Level enumeration of the MyFirstModule module, and then click Select:
- Click OK.
3.3 Adding a New Attribute to the Overview Page
To add a new attribute to the overview page, follow these steps:
- Open the Employee_Overview page of the MyFirstModule module.
- Right-click the Department column and select Add column right.
- Change the caption of the column to Level.
- Drag the Level attribute of the Employee entity from the connector to the Level column on the data grid.
- Right-click the Master Detail data grid.
Click Reset column widths:
3.4 Adding a Search field
To add a search field, follow these steps:
Right-click the search bar and select Add search field > Drop-down:
- Change the caption of the new search field to Level.
Drag the Level attribute of the Employee entity from the connector to the new search field:
3.5 Adding a Drop-Down Input Field
To add a drop-down input field, follow these steps:
Click Input and select Drop down:
Add the drop-down menu beneath the *Department** field in the User details container:
Drag the Level attribute of the Employee entity from the Connector to the new drop-down menu:
- Open the Employee_NewEdit page of the MyFirstModule module.
Repeat steps 1–4 on this page:
4 Viewing Your App
To view your app, follow these steps:
- Click Run, then Save and continue, and then View App.
- Click Employees in the navigation list, and then click NEW to add a new employee.
- Enter Owen Nickelson in the Name field.
- Enter firstname.lastname@example.org in the Email field.
- Enter New York in the City field.
- Select Sales from the Department drop-down menu.
- Select Junior from the Level drop-down menu.
- Click SAVE.
Repeat steps 2–8 with the following details:
Name City Department Level Harvey Specter email@example.com New York Sales Medior Hugo Reyes firstname.lastname@example.org Sydney Marketing Senior Michael Scofield email@example.com Chicago Marketing Medior
Click SEARCH to open the search bar:
Select the Medior level:
Only the employees with the Medior level will be shown:
To use the final how-to for creating a simple HRM application, see Build a Simple HRM App 5: Smarten Up Your App with Business Logic.
5 Related Content
- Build a Simple HRM App Step 1: Create, Manage, and Deploy the App
- Build a Simple HRM App Step 2: First Steps in Building a Rich GUI
- Build a Simple HRM App Step 3: Show Related Data in the GUI
- Build a Simple HRM App Step 5: Smarten Up Your App with Business Logic
- Create and Deploy Your First App
- Testing Microflows Using the UnitTesting Module