This how-to is based on the video “Build a simple HRM app: Enrich the GUI with Filter Options,” which is part of the Getting Started videos.
This is the fourth how-to in a series of five on how to create a simple HRM application. In this how-to, you will enrich the user interface by adding filter options.
After using this how-to, you will know how to do the following:
- How to create an enumeration
- How to build a search field
Before you can start with this how-to, make sure you have completed the following prerequisite:
- Use the third how-to in this series: Build a Simple HRM App 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 the Enumerations chapter of 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 in Sandbox, 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:
Click SEARCH: Only the employees with the Medior level will be shown.
To use the fifth and 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 1: Create, Manage, and Deploy the App
- Build a Simple HRM App 2: First Steps in Building a Rich GUI
- Build a Simple HRM App 3: Show Related Data in the GUI
- 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