Skip to Content
0
Jun 02, 2020 at 06:47 PM

SAPUI5 routing

361 Views

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

Attachments

metadata.jpg (217.6 kB)