This how-to is based on the video “Build a Simple HRM App: Show Related Data in the GUI,” which is part of the Getting Started videos.
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.
After using this how-to, you will know how to do the following:
- How to create a relation between two entities
Before starting with this how-to, make sure you have completed the following prerequisite:
- Use the second how-to in this series: Build a Simple HRM App 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 they can use each other’s data. To learn more about associations, see the Associations section of 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:
- Click the data grid, and then drag the Department entity from the Connector to the data grid:
- Select the Auto-Fill option and click OK.
- 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. Select Form basic horizontal.
c. In the Navigation layout drop-down menu, select PopupLayout, and then click OK.
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 click OK.
4 Viewing Your App
- Click Run in Sandbox, and then click Save and continue.
- Click View App. 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
Click SAVE: You can now see the selected department in the Employee Overview page.
To use the fourth how-to for creating a simple HRM application, see Build a Simple HRM App 4: Enrich the GUI with Filter Options.
5 Related Content
- Build a Simple HRM App 1: Create, Manage, and Deploy the App
- Build a Simple HRM App 2: Perform the First Steps in Building a Rich 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
- How to Build a Simple HRM App
- Testing Microflows Using the UnitTesting Module