Step 6: Navigate to Routes with Hard-Coded Patterns

Author: wridgeu

webapp/controller/Home.controller.js

@@ -12,9 +12,11 @@ sap.ui.define([
 			*/
 			//display the "notFound" target without changing the hash
 			this.getRouter().getTargets().display("notFound", {
-        fromTarget: "home"
-      });
-
+				fromTarget: "home"
+			});
+		},
+		onNavToEmployees: function () {
+			this.getRouter().navTo("employeeList");
 		}
 	});
 });

webapp/controller/employee/EmployeeList.controller.js

@@ -0,0 +1,6 @@
+sap.ui.define([
+	"com/mrb/UI5-Navigation-and-Routing/controller/BaseController"
+], function (BaseController) {
+	"use strict";
+	return BaseController.extend("com.mrb.UI5-Navigation-and-Routing.controller.employee.EmployeeList", {});
+});

webapp/i18n/i18n.properties

@@ -6,4 +6,7 @@ homePageTitle=Home
 NotFound=Not Found
 NotFound.text=Sorry, but the requested resource is not available.
 NotFound.description=Please check the URL and try again.
-DisplayNotFound=Display Not Found
+DisplayNotFound=Display Not Found
+ShowEmployeeList=Show Employee List
+EmployeeList=Employee List
+ListOfAllEmployees=List of all employees

webapp/i18n/i18n_en.properties

@@ -6,4 +6,7 @@ homePageTitle=Home
 NotFound=Not Found
 NotFound.text=Sorry, but the requested resource is not available.
 NotFound.description=Please check the URL and try again.
-DisplayNotFound=Display Not Found
+DisplayNotFound=Display Not Found
+ShowEmployeeList=Show Employee List
+EmployeeList=Employee List
+ListOfAllEmployees=List of all employees

webapp/index.html

@@ -17,6 +17,7 @@
 			data-sap-ui-oninit="module:com/mrb/UI5-Navigation-and-Routing/initMockServer"
 			data-sap-ui-compatVersion="edge"
 			data-sap-ui-async="true"
+			data-sap-ui-xx-bindingSyntax="complex"
 			data-sap-ui-frameOptions="trusted">
 		</script>
 	</head>

webapp/manifest.json

@@ -15,12 +15,11 @@
 				"type": "OData",
 				"settings": {
 					"odataVersion": "2.0",
-					"localUri" : "localService/metadata.xml"
+					"localUri": "localService/metadata.xml"
 				}
 			}
 		}
 	},
-
 	"sap.ui": {
 		"technology": "UI5",
 		"icons": {
@@ -37,7 +36,6 @@
 			"phone": true
 		}
 	},
-
 	"sap.ui5": {
 		"rootView": {
 			"viewName": "com.mrb.UI5-Navigation-and-Routing.view.App",
@@ -69,9 +67,11 @@
 			}
 		},
 		"resources": {
-			"css": [{
-				"uri": "css/style.css"
-			}]
+			"css": [
+				{
+					"uri": "css/style.css"
+				}
+			]
 		},
 		"routing": {
 			"config": {
@@ -80,17 +80,26 @@
 				"viewPath": "com.mrb.UI5-Navigation-and-Routing.view",
 				"controlId": "app",
 				"controlAggregation": "pages",
-				"transition": "slide",   
+				"transition": "slide",
 				"bypassed": {
 					"target": "notFound"
-				 },
+				},
 				"async": true
 			},
-			"routes": [{
-				"name": "appHome",
-				"pattern": "",
-				"target": ["home"]
-			}],
+			"routes": [
+				{
+					"name": "appHome",
+					"pattern": "",
+					"target": [
+						"home"
+					]
+				},
+				{
+					"name": "employeeList",
+					"pattern": "employees",
+					"target": "employees"
+				}
+			],
 			"targets": {
 				"home": {
 					"viewType": "XML",
@@ -103,8 +112,14 @@
 					"viewId": "notFound",
 					"viewName": "NotFound",
 					"transition": "show"
+				},
+				"employees": {
+					"viewId": "employeeList",
+					"viewPath": "com.mrb.UI5-Navigation-and-Routing.view.employee",
+					"viewName": "EmployeeList",
+					"viewLevel": 2
 				}
 			}
 		}
 	}
-}
+}

webapp/view/Home.view.xml

@@ -5,6 +5,7 @@
    <Page title="{i18n>homePageTitle}" class="sapUiResponsiveContentPadding">
       <content>
          <Button  id="displayNotFoundBtn" text="{i18n>DisplayNotFound}" press=".onDisplayNotFound" class="sapUiTinyMarginEnd"/>
+         <Button id="employeeListBtn" text="{i18n>ShowEmployeeList}" press=".onNavToEmployees" class="sapUiTinyMarginEnd"/>
 		</content>
    </Page>
 </mvc:View>

webapp/view/employee/EmployeeList.view.xml

@@ -0,0 +1,13 @@
+<mvc:View controllerName="com.mrb.UI5-Navigation-and-Routing.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>