This how-to describes how to add cargo type pages to the Mendix Logistics IoT app and add an extra input option for the association of shipments with cargo types.
This how-to will teach you how to do the following:
- Add another data dimension
- Improve the look and feel of a page
- Add a new input to a page
Before starting with this how-to, make sure you have completed the following prerequisite:
- Use the previous how-to in this series: Step 3: Handle the Sensor Data
3 Adding Another Data Dimension to the App (Step 4)
3.1 Adding Cargo Type Pages (Step 4.1)
Not every cargo type should have the same threshold. Before you start implementing alerts, you are going to introduce a cargo type and register its thresholds for different measurements (for example, temperature and light). For an example scenario here, if a ship is transporting perishable goods, you will want to see an alert for any extreme activity with the indicators.
To add the cargo type pages, follow these steps:
- Add an entity to the domain model and name it CargoType.
- On the Attributes tab of the entity Properties editor, click New.
- Name the new attribute Description and set the Type to String, then click OK.
- Click New to add another attribute and name it TemperatureThreshold. Set Type to Decimal.
- Click New to add another attribute named HasTemperatureThreshold. Set Type to Boolean.
On the Access rules tab, click New to create a new access rule:
a. Select User for Rule applies to the following modules roles.
b. Check Allow creating new objects and Allow deleting existing objects.
c. Grant Read, Write privileges for all members using the Read, Write button.
d. Click OK.
In the Domain Model, drag an association from Shipment to CargoType (make sure this is not the other way around!). This means that each Shipment object can be associated to one of the Cargo type objects available.
Open the Homepage again. The right-side menu is a snippet, which means it can be reused across various pages. Right-click it and select Show snippet. This will open the snippet editor.
The snippet contains a navigation list widget. To edit the third navigation list item, follow these steps:
a. Right-click the gray bar in the row of the navigation list where the Cargo Types label is located and select Edit action > Show a page.
b. To connect a new page to the navigation list item, click New in the Select page dialog box. This opens the Create Page editor.
c. Enter CargoType_Overview for the Page name and select TopBar_Sidebar_Full_Responsive for the Navigation layout.
d. Select Grids and then Listview basic.
e. Click OK.
Right-click the row of the navigation list in which the Cargo Types label is located and select Go to page, which will take you to the CargoType_Overview page.
In the Properties pane of the newly created page, set the Navigation visibility to User.
Right-click the list view and select Select entity….
In the Select Data Source dialog box, select the CargoType entity that you just created.
Keep Database selected for the Type, but clear the Automatically fill the contents of the list view check box.
Right-click the top input field with the No attribute selected caption and select the Description attribute.
Delete the other two input fields as well as the See details button (because you only want to show the Description).
In order to add new Cargo type items in the app, you need to create a page where you can submit new cargo types. To do this, follow these steps:
a. Right-click the gray bar in the row of the outer layout grid and select Insert row above.
b. Select the default full row option.
c. Right-click the new row and select Add widget > Button > Create button.
d. In the Select entity dialog box, select CargoType.
e. Right-click the New button and select Generate page…. The preconfigured name of the page is CargoType_NewEdit.
f. In the Create page editor, change the Navigation layout to PopupLayout, then choose Form basic horizontal.
Back on CargoType_Overview, right-click the New button and select Go to page.
On the CargoType_NewEdit form, click the Cancel button and in the Properties pane, change the Button style to Danger.
Click in the page so that its properties become visible in the Properties pane. Set Navigation > Visible for to User.
Return to CargoType_Overview, which needs the same look and feel as the other pages. Right-click the left-side column in the grid and select Add column right. Please note that the layout grid is based on the Bootstrap Grid system, which enables easy responsive layout options.
Click the left-side column to edit it and change the (Column) Weight to 1 (because the weight of the columns in a layout grid has to add up to 12).
In the new column (which is now the middle column), right-click and select Add widget > Button > Open page button.
Select the CargoType_NewEdit page that you just created.
Click the new button and change its caption to Edit.
Drag the DataAdministrationMenu snippet (from the Step 4 folder) into the right-side of the page to make it consistent with the other pages.
Click the New button on the page and in the Properties pane, change the Button style to Success so that it is in line with the styling on the other pages.
Click the Description input field in the right-side column and in the Properties pane, change Show label to No.
Save the changes, click Run Locally, then click View.
Refresh the browser and navigate to the Cargo Types page.
No items are found, but now you are able to click New and edit a cargo type.
Add the Description of Bananas, set the Temperature threshold to 10.00, and set Has temperature threshold to Yes. You will now see the Bananas cargo type you just created in the list.
3.2 Improving the Look and Feel of a Page (Step 4.2)
When you observe the Cargo Types page in the app, you can see that it is not in line with the other pages you have created. In this section, you will improve the title and the attached image for the cargo.
To improve the look and feel of this page, follow these steps:
- Open the CargoType_Overview page in the Desktop Modeler.
- Right-click the row with the New button, select Insert row above, then select the default full row option.
- Click View in the top Desktop Modeler menu bar and select Toolbox.
- Drag the Page title widget from the Toolbox to the new row.
Select the whole page by clicking the grayed-out area, go to the Properties pane, and change the Title to Cargo types.
Right-click the avatar in the left-side column and select Select image. Enter cargo for the filter and select cargotypes_black.
Save the changes, click Run Locally, then click View.
Observe the changes in the app.
Looks better, right?
3.3 Adding a New Input to a Page (Step 4.3)
At this point, you have created the possibility to associate shipments with cargo types from a data perspective.
In this section, you are going to enrich the UI with an extra input option so that a user is able to associate shipments with cargo types.
To add a new input to the page, follow these steps:
- Select the Shipment_NewEdit page (from the Step 4.3 folder).
- Select the area below the Cargo value input.
- In the Connector pane, double-click Shipment_CargoType and select CargoType > Description.
- Save the changes, click Run Locally, then click View.
- In the app, choose the Shipments page from the right-side menu.
- Click Edit for the TK124097987 shipment.
- In the new Cargo type field in the Shipment editor, select Bananas from the drop-down menu, then click Save.
With these app improvements, go through Step 5: Create Alerts and implement alerts that will act on any outliers in the data.