Skip to content

Commit f99257a

Browse files
committed
Added everything for Step 7 of navigation tutorial; Navigating with mandatory parameters;
1 parent 3259062 commit f99257a

7 files changed

+126
-4
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
sap.ui.define([
2+
"com/mrb/UI5-Navigation-and-Routing/controller/BaseController"
3+
], function (
4+
BaseController
5+
) {
6+
"use strict";
7+
8+
return BaseController.extend("com.mrb.UI5-Navigation-and-Routing.controller.employee.Employee", {
9+
onInit: function () {
10+
var oRouter = this.getRouter();
11+
oRouter.getRoute("employee").attachMatched(this._onRouteMatched, this);
12+
// Hint: we don't want to do it this way
13+
/*
14+
oRouter.attachRouteMatched(function (oEvent){
15+
var sRouteName, oArgs, oView;
16+
sRouteName = oEvent.getParameter("name");
17+
if (sRouteName === "employee"){
18+
this._onRouteMatched(oEvent);
19+
}
20+
}, this);
21+
*/
22+
},
23+
_onRouteMatched: function (oEvent) {
24+
var oArgs, oView;
25+
oArgs = oEvent.getParameter("arguments");
26+
oView = this.getView();
27+
//use oDataModel to resolve the path and attach events
28+
oView.bindElement({
29+
path: "/Employees(" + oArgs.employeeId + ")",
30+
events: {
31+
change: this._onBindingChange.bind(this),
32+
dataRequested: function (oEvent) {
33+
oView.setBusy(true);
34+
},
35+
dataReceived: function (oEvent) {
36+
oView.setBusy(false);
37+
}
38+
}
39+
});
40+
},
41+
_onBindingChange: function (oEvent) {
42+
// No data for the binding
43+
if (!this.getView().getBindingContext()) {
44+
this.getRouter().getTargets().display("notFound");
45+
}
46+
}
47+
});
48+
});

webapp/controller/employee/EmployeeList.controller.js

+10-1
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,14 @@ sap.ui.define([
22
"com/mrb/UI5-Navigation-and-Routing/controller/BaseController"
33
], function (BaseController) {
44
"use strict";
5-
return BaseController.extend("com.mrb.UI5-Navigation-and-Routing.controller.employee.EmployeeList", {});
5+
return BaseController.extend("com.mrb.UI5-Navigation-and-Routing.controller.employee.EmployeeList", {
6+
onListItemPressed: function (oEvent) {
7+
var oItem, oCtx;
8+
oItem = oEvent.getSource();
9+
oCtx = oItem.getBindingContext();
10+
this.getRouter().navTo("employee", {
11+
employeeId: oCtx.getProperty("EmployeeID")
12+
});
13+
}
14+
});
615
});

webapp/i18n/i18n.properties

+10-1
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,13 @@ NotFound.description=Please check the URL and try again.
99
DisplayNotFound=Display Not Found
1010
ShowEmployeeList=Show Employee List
1111
EmployeeList=Employee List
12-
ListOfAllEmployees=List of all employees
12+
ListOfAllEmployees=List of all employees
13+
formEmployeeDetailsOf=Employee Details of
14+
formEmployeeIDColon=Employee ID:
15+
formFirstName=First Name
16+
formLastName=Last Name
17+
formAddress=Address
18+
formCity=City
19+
formPostalCode=Postal Code
20+
formPhoneHome=Phone (Home)
21+
formCountry=Country

webapp/i18n/i18n_en.properties

+10-1
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,13 @@ NotFound.description=Please check the URL and try again.
99
DisplayNotFound=Display Not Found
1010
ShowEmployeeList=Show Employee List
1111
EmployeeList=Employee List
12-
ListOfAllEmployees=List of all employees
12+
ListOfAllEmployees=List of all employees
13+
formEmployeeDetailsOf=Employee Details of
14+
formEmployeeIDColon=Employee ID:
15+
formFirstName=First Name
16+
formLastName=Last Name
17+
formAddress=Address
18+
formCity=City
19+
formPostalCode=Postal Code
20+
formPhoneHome=Phone (Home)
21+
formCountry=Country

webapp/manifest.json

+10
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,11 @@
9898
"name": "employeeList",
9999
"pattern": "employees",
100100
"target": "employees"
101+
},
102+
{
103+
"pattern": "employees/{employeeId}",
104+
"name": "employee",
105+
"target": "employee"
101106
}
102107
],
103108
"targets": {
@@ -118,6 +123,11 @@
118123
"viewPath": "com.mrb.UI5-Navigation-and-Routing.view.employee",
119124
"viewName": "EmployeeList",
120125
"viewLevel": 2
126+
},
127+
"employee": {
128+
"viewId": "employee",
129+
"viewName": "employee.Employee",
130+
"viewLevel": 3
121131
}
122132
}
123133
}
+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<mvc:View controllerName="com.mrb.UI5-Navigation-and-Routing.controller.employee.Employee"
2+
xmlns="sap.m"
3+
xmlns:mvc="sap.ui.core.mvc"
4+
xmlns:f="sap.ui.layout.form" busyIndicatorDelay="0">
5+
<Page id="employeePage" title="{i18n>EmployeeDetailsOf} {FirstName} {LastName}" showNavButton="true" navButtonPress=".onNavBack" class="sapUiResponsiveContentPadding">
6+
<content>
7+
<Panel id="employeePanel" width="auto" class="sapUiResponsiveMargin sapUiNoContentPadding">
8+
<headerToolbar>
9+
<Toolbar>
10+
<Title text="{i18n>EmployeeIDColon} {EmployeeID}" level="H2"/>
11+
<ToolbarSpacer />
12+
</Toolbar>
13+
</headerToolbar>
14+
<content>
15+
<f:SimpleForm minWidth="1024" editable="false" layout="ResponsiveGridLayout" labelSpanL="3" labelSpanM="3" emptySpanL="4" emptySpanM="4" columnsL="1" columnsM="1">
16+
<f:content>
17+
<Label text="{i18n>formFirstName}"/>
18+
<Text text="{FirstName}"/>
19+
<Label text="{i18n>formLastName}"/>
20+
<Text text="{LastName}"/>
21+
<Label text="{i18n>formAddress}"/>
22+
<Text text="{Address}"/>
23+
<Label text="{i18n>formCity}"/>
24+
<Text text="{City}, {Region}"/>
25+
<Label text="{i18n>formPostalCode}"/>
26+
<Text text="{PostalCode}"/>
27+
<Label text="{i18n>formPhoneHome}"/>
28+
<Text text="{HomePhone}"/>
29+
<Label text="{i18n>formCountry}"/>
30+
<Text text="{Country}"/>
31+
</f:content>
32+
</f:SimpleForm>
33+
</content>
34+
</Panel>
35+
</content>
36+
</Page>
37+
</mvc:View>

webapp/view/employee/EmployeeList.view.xml

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<content>
66
<List id="employeeList" headerText="{i18n>ListOfAllEmployees}" items="{/Employees}">
77
<items>
8-
<StandardListItem title="{FirstName} {LastName}" iconDensityAware="false" iconInset="false"/>
8+
<StandardListItem title="{FirstName} {LastName}" iconDensityAware="false" iconInset="false" type="Navigation" press=".onListItemPressed"/>
99
</items>
1010
</List>
1111
</content>

0 commit comments

Comments
 (0)