Added everything for Step 12: Make a Search Bookmarkable

webapp/controller/employee/overview/EmployeeOverviewContent.controller.js

@@ -5,7 +5,7 @@ sap.ui.define([
 	"sap/ui/model/Sorter",
 	"sap/m/ViewSettingsDialog",
 	"sap/m/ViewSettingsItem"
-], function(
+], function (
 	BaseController,
 	Filter,
 	FilterOperator,
@@ -18,25 +18,45 @@ sap.ui.define([
 	return BaseController.extend("com.mrb.UI5-Navigation-and-Routing.controller.employee.overview.EmployeeOverviewContent", {
 
 		onInit: function () {
+
+			var oRouter = this.getRouter();
+
 			this._oTable = this.byId("employeesTable");
 			this._oVSD = null;
 			this._sSortField = null;
 			this._bSortDescending = false;
 			this._aValidSortFields = ["EmployeeID", "FirstName", "LastName"];
 			this._sSearchQuery = null;
+			this._oRouterArgs = null;
 
 			this._initViewSettingsDialog();
+
+			// make the search bookmarkable
+			oRouter.getRoute("employeeOverview").attachMatched(this._onRouteMatched, this);
+		},
+
+		_onRouteMatched: function (oEvent) {
+			// save the current query state
+			this._oRouterArgs = oEvent.getParameter("arguments");
+			//make sure we either have a value or empty hand empty object
+			this._oRouterArgs["?query"] = this._oRouterArgs["?query"] || {};
+			// search/filter via URL hash
+			this._applySearchFilter(this._oRouterArgs["?query"].search);
 		},
 
-		onSortButtonPressed : function () {
+		onSortButtonPressed: function () {
 			this._oVSD.open();
 		},
 
-		onSearchEmployeesTable : function (oEvent) {
-			this._applySearchFilter( oEvent.getSource().getValue() );
+		onSearchEmployeesTable: function (oEvent) {
+			//this._applySearchFilter(oEvent.getSource().getValue());
+			var oRouter = this.getRouter();
+			// update the hash with the current search term
+			this._oRouterArgs["?query"].search = oEvent.getSource().getValue();
+			oRouter.navTo("employeeOverview", this._oRouterArgs, true /*no history*/);
 		},
 
-		_initViewSettingsDialog : function () {
+		_initViewSettingsDialog: function () {
 			this._oVSD = new ViewSettingsDialog("vsd", {
 				confirm: function (oEvent) {
 					var oSortItem = oEvent.getParameter("sortItem");
@@ -48,7 +68,7 @@ sap.ui.define([
 			this._oVSD.addSortItem(new ViewSettingsItem({
 				key: "EmployeeID",
 				text: "Employee ID",
-				selected: true			// by default the MockData is sorted by EmployeeID
+				selected: true // by default the MockData is sorted by EmployeeID
 			}));
 
 			this._oVSD.addSortItem(new ViewSettingsItem({
@@ -64,7 +84,7 @@ sap.ui.define([
 			}));
 		},
 
-		_applySearchFilter : function (sSearchQuery) {
+		_applySearchFilter: function (sSearchQuery) {
 			var aFilters, oFilter, oBinding;
 
 			// first check if we already have this search value
@@ -79,7 +99,10 @@ sap.ui.define([
 			if (sSearchQuery && sSearchQuery.length > 0) {
 				aFilters.push(new Filter("FirstName", FilterOperator.Contains, sSearchQuery));
 				aFilters.push(new Filter("LastName", FilterOperator.Contains, sSearchQuery));
-				oFilter = new Filter({ filters: aFilters, and: false });  // OR filter
+				oFilter = new Filter({
+					filters: aFilters,
+					and: false
+				}); // OR filter
 			} else {
 				oFilter = null;
 			}
@@ -95,7 +118,7 @@ sap.ui.define([
 		 * @param {string} sortDescending	true or false as a string or boolean value to specify a descending sorting
 		 * @private
 		 */
-		_applySorter : function (sSortField, sortDescending){
+		_applySorter: function (sSortField, sortDescending) {
 			var bSortDescending, oBinding, oSorter;
 
 			// only continue if we have a valid sort field
@@ -105,7 +128,7 @@ sap.ui.define([
 				if (typeof sortDescending === "string") {
 					bSortDescending = sortDescending === "true";
 				} else if (typeof sortDescending === "boolean") {
-					bSortDescending =  sortDescending;
+					bSortDescending = sortDescending;
 				} else {
 					bSortDescending = false;
 				}
@@ -127,7 +150,7 @@ sap.ui.define([
 			}
 		},
 
-		_syncViewSettingsDialogSorter : function (sSortField, bSortDescending) {
+		_syncViewSettingsDialogSorter: function (sSortField, bSortDescending) {
 			// the possible keys are: "EmployeeID" | "FirstName" | "LastName"
 			// Note: no input validation is implemented here
 			this._oVSD.setSelectedSortItem(sSortField);
@@ -136,4 +159,4 @@ sap.ui.define([
 
 	});
 
-});
+});

webapp/manifest.json

@@ -103,7 +103,7 @@
 					"target": "employees"
 				},
 				{
-					"pattern": "employees/overview",
+					"pattern": "employees/overview:?query:",
 					"name": "employeeOverview",
 					"target": [
 						"employeeOverviewTop",