Step 6: Navigate to Routes with Hard-Coded Patterns

You can view and download all files in the Explored app in the Demo Kit under Routing and Navigation - Step 6.

Figure 3: Folder structure for this step

sap.ui.define([
	"sap/ui/demo/nav/controller/BaseController"
], function (BaseController) {
	"use strict";
	return BaseController.extend("sap.ui.demo.nav.controller.Home", {
		onDisplayNotFound : function (oEvent) {
			// display the "notFound" target without changing the hash
			this.getRouter().getTargets().display("notFound", {
				fromTarget : "home"
			});
		},
		onNavToEmployees : function (oEvent){
			this.getRouter().navTo("employeeList");
		}

	});
});

The new event handler onNavToEmployees calls navTo("employeeList") on the router instance. The parameter employeeList is the name of the route that we want to navigate to.

{
	"_version": "1.1.0",
	"sap.app": {
		...
	},
	"sap.ui": {
		...
	},
	"sap.ui5": {
		...
		"routing": {
			"config": {
				"routerClass": "sap.m.routing.Router",
				"viewType": "XML",
				"viewPath": "sap.ui.demo.nav.view",
				"controlId": "app",
				"controlAggregation": "pages",
				"transition": "slide",
				"bypassed": {
					"target": "notFound"
				}
			},
			"routes": [{
				"pattern": "",
				"name": "appHome",
				"target": "home"
			}, {
				"pattern": "employees",
				"name": "employeeList",
				"target": "employees"
			}],
			"targets": {
				"home": {
					"viewName": "Home",
					"viewLevel" : 1
				},
				"notFound": {
					"viewName": "NotFound",
					"transition": "show"
				},
				"employees": {
					"viewPath": "sap.ui.demo.nav.view.employee",
					"viewName": "EmployeeList",
					"viewLevel" : 2
				}

			}
		}
	}
}

To make the navigation work, we have to extend the routing configuration of the app in the descriptor file. We add a new pattern called employeeList; this is the name we used in the controller to trigger the navigation.

The pattern of the route is the hard-coded value employees, meaning the matching hash for this route is /#/employees in the address bar of the browser. The target employees should be displayed when this URL pattern is matched.

The employees entry in the targets section references the sap.ui.demo.nav.view.employee.EmployeeList view. As you can see, we added a new namespace employee for all views related to employees with the property viewPath. This overrides the default settings in the config section for the current target.

The view that we are about to create has to be placed in the webapp/view/employee folder accordingly. This approach helps to structure the views of the app according to business objects and to better understand the navigation patterns of the app in larger projects.

Setting the viewLevel to 2 helps the router to determine how to animate the (in our case) slide transition. For us, this means that a navigation from the home page to the employees target will be animated with a “Slide to Left” animation. In contrast to that, the back navigation from the employees target to the home page will be animated with a “Slide to Right” animation. This behavior is due to the fact that the home page has a lower viewLevel than the employees target.

<mvc:View
	controllerName="sap.ui.demo.nav.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="{/Employees}">
				<items>
					<StandardListItem
						title="{FirstName} {LastName}"
						iconDensityAware="false"
						iconInset="false"/>
				</items>
			</List>
		</content>
	</Page>
</mvc:View>

We now create a subfolder employee below webapp/view and a file EmployeeList.view.xml.

We name the folder after the business object, to make it obvious from looking at the hash (included in the browser's address bar) where a view file for a certain business object is located. For example, we can determine from the URL /#/employee that the corresponding view must be somewhere in the folder ./employee (in our case: webapp/view/employee) just by looking at the URL.

In the view, we use a sap.m.List control and bind its items to the data from our simulated OData service. Note that we have also registered the onNavBack handler from the base controller again to be able to navigate back to the overview.

This view can be referenced by sap.ui.demo.nav.view.employee.EmployeeList.

sap.ui.define([
	"sap/ui/demo/nav/controller/BaseController"
], function (BaseController) {
	"use strict";
	return BaseController.extend("sap.ui.demo.nav.controller.employee.EmployeeList", {
	});
});

Finally, we will add a new controller. Create a subfolder employee inside webapp/controller folder and place the file EmployeeList.controller.js there. As you can see, the folder structure of the controllers is in sync with the folder structure of the views.

...
ShowEmployeeList=Show Employee List
EmployeeList=Employee List
ListOfAllEmployees=List of all employees

Add the new texts to the i18n.properties file.

Now you can open the app and press the Show Employee List button to navigate to the employee list. From there, you can press either the browser’s or the app’s Back button to get back to the home page.