Hello all,
I am a novice to SAPUI5 applications and I started the Navigation and Routing tutorial from sapui5.hana.ondemand.com and I wanted to use an OData service created by me but the navigation from step 7 it's not working(Navigation tutorial). The list with the employees is displayed, but when I want to navigate to the page with details about an employee it's not working.
I will add below a screenshot from the metadata file and from the code.

manifest.json:
"routes": [{
"pattern": "",
"name": "appHome",
"target": "home"
}, {
"pattern": "Employee",
"name": "employeeList",
"target": "employees"
}, {
"pattern": "Employee/{employeeId}",
"name": "employee",
"target": "employee"
}],
"targets": {
"home": {
"viewId": "home",
"viewName": "Home",
"viewLevel" : 1
},
"notFound": {
"viewId": "notFound",
"viewName": "NotFound",
"transition": "show"
},
"employees": {
"viewId": "employeeList",
"viewPath": "de_stersdana.de_stersdana.view.employee",
"viewName": "EmployeeList",
"viewLevel" : 2
},
"employee": {
"viewId": "employee",
"viewName": "employee.Employee",
"viewLevel" : 3
}
EmployeeList.Controler:
onListItemPressed : function(oEvent){
var oItem, oCtx;
oItem = oEvent.getSource();
oCtx = oItem.getBindingContext();
this.getRouter().navTo("employee",{
employeeId : oCtx.getProperty("employee_id")
EmployeeList View:
<mvc:View
controllerName="tutorial.controller.employee.EmployeeList"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Page
id="employeeListPage"
title="{i18n>EmployeeList}"
showNavButton="true"
navButtonPress=".onNavBack"
class="sapUiResponsiveContentPadding">
<content>
<List id="employeeList" headerText="{i18n>ListOfAllEmployees}" items="{/Employee}">
<items>
<StandardListItem
title="{employee_name}"
iconDensityAware="false"
iconInset="false"
type="Navigation"
press=".onListItemPressed"/>
</items>
</List>
</content>
</Page>
</mvc:View>
EmployeeDetails controller
onInit: function () {
var oRouter = this.getRouter();
oRouter.getRoute("employee").attachMatched(this._onRouteMatched, this);
// Hint: we don't want to do it this way
/*
oRouter.attachRouteMatched(function (oEvent){
var sRouteName, oArgs, oView;
sRouteName = oEvent.getParameter("name");
if (sRouteName === "employee"){
this._onRouteMatched(oEvent);
}
}, this);
*/
},
_onRouteMatched : function (oEvent) {
var oArgs, oView;
oArgs = oEvent.getParameter("arguments");
oView = this.getView();
oView.bindElement({
path : "/Employee(" + oArgs.employee_id + ")",
events : {
change: this._onBindingChange.bind(this),
dataRequested: function (oEvent) {
oView.setBusy(true);
},
dataReceived: function (oEvent) {
oView.setBusy(false);
}
}
});
},
EmployeeDetails View
<mvc:View
controllerName="tutorial.controller.employee.Employee"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:f="sap.ui.layout.form"
busyIndicatorDelay="0">
<Page
id="employeePage"
title=" {employee_name}"
showNavButton="true"
navButtonPress=".onNavBack"
class="sapUiResponsiveContentPadding">
<content>
<Panel
id="employeePanel"
width="auto"
class="sapUiResponsiveMargin sapUiNoContentPadding">
<headerToolbar>
<Toolbar>
<Title text="Employee Id {employee_id}" level="H2"/>
<ToolbarSpacer />
</Toolbar>
</headerToolbar>
</Panel>
</content>
</Page>
</mvc:View>
Can you please take a look and tell me what I did wrong?
Thank you in advance
Dana