Build a simple HRM app 4: Enrich the GUI with Filter Options

Last update: Download PDF Edit

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 completing this how-to you will know:

  • How to create an enumeration
  • How to build a search field

1. Preparation

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

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

2.1 Create an enumeration

  1. Right-click on the MyFirstModule module.
  2. Click on Add > Enumeration. Click here to learn more about enumerations.  
  3. Enter _Level_ in the Name field.  
  4. Click OK.
  5. Click New to add a new enumeration value.
  6. Enter Junior in the Caption field.  
  7. Click OK.
  8. Repeat steps 5 through 7 for enumeration values Medior and Senior.
  9. Click OK.

2.2 Add a new attribute with type enumeration

  1. Open the Domain Model of the MyFirstModule module.
  2. Open entity Employee
  3. Click on New to add a new attribute.
  4. Enter _Level_ in the Name field.
  5. Select Enumeration in the Type drop down.  
  6. Select enumeration Level of the MyFirstModule module.
  7. Click Select.
  8. Click OK.
  9. Click OK.

2.3 Add new attribute to the overview page

  1. Open the page Employee_Overview of the MyFirstModule module.
  2. Right-click on the Department column.
  3. Click on Add column right.
  4. Change the caption of the column to Level.
  5. Drag-and-drop the attribute Level of the entity Employee from the connector to the Level column on the data grid.
  6. Right-click on the Master Detail data grid.
  7. Click on Reset column widths.

2.4 Add a search field 

  1. Right-click on the search bar.
  2. Click on Add search field > Drop-down.  
  3. Change the caption of the new search field to Level.
  4. Drag-and-drop the attribute Level of the entity Employee from the connector to the new search field.  

2.5 Add a drop-down input field

  1. Click on Input.
  2. Click on Drop down.  
  3. Add the drop down beneath the department field in the user details container.  
  4. Drag-and-drop the attribute Level of the entity Employee from the connector to the new drop down.  
  5. Open the page Employee_NewEdit of the MyFirstModule module.
  6. Repeat steps 1 through 4 on this page.  

3. View your app

  1. Click on Run in Sandbox.
  2. Click on the Save and continue button.
  3. Click on View App.
  4. Click on Employees in the navigation list.
  5. Click on NEW to add a new employee.
  6. Enter Owen Nickelson in the Name field.
  7. Enter _owen@nickelson.com_ in the Email field.
  8. Enter _New York_ in the City field.
  9. Select Sales in the Department dropdown.
  10. Select Junior in the Level dropdown.
  11. Click on SAVE.
  12. Repeat steps 4 till 10 with the following details:
Harvey Specterharvey@specter.comNew YorkSalesMedior
Hugo Reyeshugo@reyes.comSydneyMarketingSenior
Michael Scofieldmichael@scofield.comChicagoMarketingMedior
  1. Click on SEARCH to open the search bar.  

  2. Select level Medior.

  3. Click on SEARCH.

Only the employees with level Medior will be shown. Click here to go the fifth how-to on how to create a simple HRM application and learn how to smarten up your app with business logic.

Learn more about this topic using the following helpful links: