Added anything needed for Step 9 of the Navigation Tutorial; Bookmark…

…able Tabs with Optional Query Parameters
wridgeu · Mar 30, 2020 · 66a8048 · 66a8048
1 parent 4c0f5c2
commit 66a8048
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 5 deletions.
diff --git a/webapp/controller/employee/Resume.controller.js b/webapp/controller/employee/Resume.controller.js
@@ -1,16 +1,21 @@
 sap.ui.define([
-	"com/mrb/UI5-Navigation-and-Routing/controller/BaseController"
+	"com/mrb/UI5-Navigation-and-Routing/controller/BaseController",
+	"sap/ui/model/json/JSONModel"
 ], function (
-	BaseController
+	BaseController,
+	JSONModel
 ) {
 	"use strict";
+	var _aValidTabKeys = ["Info", "Projects", "Hobbies", "Notes"];
 	return BaseController.extend("com.mrb.UI5-Navigation-and-Routing.controller.employee.Resume", {
 		onInit: function () {
 			var oRouter = this.getRouter();
+			this.getView().setModel(new JSONModel(), "view");
 			oRouter.getRoute("employeeResume").attachMatched(this._onRouteMatched, this);
 		},
 		_onRouteMatched: function (oEvent) {
-			var oArgs, oView;
+			var oArgs, oView, oQuery;
+			//Read the passed in arguments
 			oArgs = oEvent.getParameter("arguments");
 			oView = this.getView();
 			oView.bindElement({
@@ -25,12 +30,35 @@ sap.ui.define([
 					}
 				}
 			});
+			oQuery = oArgs["?query"];
+			if (oQuery && _aValidTabKeys.indexOf(oQuery.tab) > -1) {
+				oView.getModel("view").setProperty("/selectedTabKey", oQuery.tab);
+			} else {
+				// the default query param should be visible at all time
+				this.getRouter().navTo("employeeResume", {
+					employeeId: oArgs.employeeId,
+					"?query": {
+						tab: _aValidTabKeys[0]
+					}
+				}, true /*no history*/ );
+			}
 		},
 		_onBindingChange: function (oEvent) {
 			// No data for the binding
 			if (!this.getView().getBindingContext()) {
 				this.getRouter().getTargets().display("notFound");
 			}
+		},
+		onTabSelect: function (oEvent) {
+			var oCtx = this.getView().getBindingContext();
+			//https://sapui5.hana.ondemand.com/#/api/sap.ui.core.routing.Router%23methods/navTo
+			//:?queryParameter: -> :: -> optional | {someParameter} -> {} ->  mandatory 
+			this.getRouter().navTo("employeeResume", {
+				employeeId: oCtx.getProperty("EmployeeID"),
+				"?query": {
+					tab: oEvent.getParameter("selectedKey")
+				}
+			}, true /*without history*/ );
 		}
 	});
 });
diff --git a/webapp/manifest.json b/webapp/manifest.json
@@ -108,7 +108,7 @@
 					"target": "employee"
 				},
 				{
-					"pattern": "employees/{employeeId}/resume",
+					"pattern": "employees/{employeeId}/resume:?query:",
 					"name": "employeeResume",
 					"target": "employeeResume"
 				}

diff --git a/webapp/view/employee/Resume.view.xml b/webapp/view/employee/Resume.view.xml
@@ -3,7 +3,7 @@
     xmlns:mvc="sap.ui.core.mvc">
     <Page title="{i18n>ResumeOf} {FirstName} {LastName}" id="employeeResumePage" showNavButton="true" navButtonPress=".onNavBack">
         <content>
-            <IconTabBar id="iconTabBar" headerBackgroundDesign="Transparent" class="sapUiResponsiveContentPadding" binding="{Resume}">
+            <IconTabBar id="iconTabBar" headerBackgroundDesign="Transparent" class="sapUiResponsiveContentPadding" binding="{Resume}" select=".onTabSelect" selectedKey="{view>/selectedTabKey}">
                 <items>
                     <IconTabFilter id="infoTab" text="{i18n>tabInfo}" key="Info">
                         <Text text="{Information}"/>