This is the third how-to in a series of five on how to create a simple HRM application. In this how-to, you will expand your app with management pages for departments and divide employees into departments.
This how-to will teach you how to do the following:
- Create a relation between two entities
Before starting with this how-to, make sure you have completed the following prerequisite:
- Complete the second how-to in this series: Build a Simple HRM App Step 2: Perform the First Steps in Building a Rich GUI.
3 Expanding Your App
In this section, you will create an association between two entities and use the attributes of one entity in the pages of another entity.
3.1 Creating an Entity
To create an entity, follow these steps:
- Open the Domain Model of the MyFirstModule module.
- Click Entity to create a new entity, and in the Name field, enter Department.
- Click New to add a new attribute, and in the Name field, enter Name.
- Select String as the Type, and click OK.
Repeat steps 3–4 for the following attribute:
Name Type Description String
The entity will look like this:
3.2 Creating an Association
To create an association, click the border of the Employee entity and drag a line to the Department entity:
This creates an association between the two entities so that they can use each other’s data. To learn more about associations, see Associations in the Mendix Reference Guide.
3.3 Creating Pages for the Department Entity
To create pages for the department entity, 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 Department_Overview.
b. Click Grids and select Datagrid basic.
c. In the Navigation layout drop-down menu, select Sidebar_Left, and then click OK.
- Right-click the data grid and select the Department entity available in MyFirstModule.
- Select the Auto-Fill option and click OK.
- Select and right-click the New button and select Generate page.
- On the Create Page screen, do the following:
a. In the Page name field, enter Department_NewEdit.
b. In the Navigation layout drop-down menu, select PopupLayout, and then click OK.
c. Select Form basic horizontal.
3.4 Adding Department Attributes to the Employee Overview Page
To add department attrbitues to the Employee Overview page, follow these steps:
- Open the Employee_Overview page of the Responsive module.
Right-click the City column and select Add column right:
Change the caption of the column to Department.
Expand the Employee_Department association in the Connector, and then expand the Department entity.
Drag the Name attribute of the Department entity from the Connector to the Department column on the data grid:
Right-click the Master Detail data grid and select Reset column widths:
Click Input and select Reference selector:
Add the reference selector below the Email field in the User details container:
Drag the Name attribute of the Department entity from the connector to the new reference selector:
The reference selector will now enable selecting a department while editing an employee.
Open the Employee_NewEdit page of the Responsive module.
Click Input and then click Reference selector.
Add the reference selector beneath the Date of Birth field:
Drag the Name attribute of the Department entity from the Connector to the new reference selector:
The reference selector now allows you to select a department while creating an employee.
3.5 Adding the Department Overview Page to the Navigation
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.
- Click New item to add a new menu item.
- In the Caption field, enter Departments.
Select the Department_Overview page of the MyFirstModule module, click Select, and then click OK.
4 Viewing Your App
- Click Run and then click Save and continue.
Click View. On the left side of your app, the Departments menu item is shown:
Click Departments, and then click NEW to add a new department:
In the Name field of the Edit Department dialog box, enter Marketing, then click SAVE:
Repeat steps 3–4 for the Sales department:
Click Employees in the navigation list, and then click NEW to add a new employee.
In the Department drop-down menu (where the created departments are shown), select Marketing:
Enter the following data in the other fields:
Name Address City State Phone Date of birth Thomas Shelby 50 Pinfold St Birmingham West Midlands +12345678 email@example.com 5/25/1976
You can now see the selected department in the Employee Overview page.
To continue creating your simple HRM app, see Build a Simple HRM App Step 4: Enrich the GUI with Filter Options.
5 Related Content
- Build a Simple HRM App Step 1: Create, Manage, and Deploy the App
- Build a Simple HRM App Step 2: Perform the First Steps in Building a Rich GUI
- Build a Simple HRM App Step 4: Enrich the GUI with Filter Options
- Build a simple HRM App Step 5: Smarten Up Your App with Business Logic
- How to Build a Simple HRM App
- Testing Microflows Using the UnitTesting Module