fix(navigation): review and fix navigation tutorial

packages/navigation/README.md

@@ -28,11 +28,9 @@ We will create a simple app displaying the data of a company’s employees to sh
 Throughout this tutorial we will add features for navigating to pages and bookmarking them. We will add backward and forward navigation with common transition animations \(slide, show, flip, etc.\). We will add more pages to the app and navigate between them to show typical use cases. We will even learn how to implement features for bookmarking a specific search, table sorting via filters, and dialogs.
 
 > :tip:
-> You don't have to do all tutorial steps sequentially, you can also jump directly to any step you want. Just download the code from the previous step, and start there.
+> You don't have to do all tutorial steps sequentially, you can also jump directly to any step you want. Just download the code from the previous step and make sure that the application runs as intended.
 >
-> You can view and download the files for all steps in the Demo Kit at [Navigation and Routing](https://sdk.openui5.org/#/entity/sap.ui.core.tutorial.navigation). Copy the code to your workspace and make sure that the application runs by calling the `webapp/index.html` file. Depending on your development environment you might have to adjust resource paths and configuration entries.
->
-> For more information check the [Downloading Code for a Tutorial Step](https://sdk.openui5.org/topic/8b49fc198bf04b2d9800fc37fecbb218.html#loio8b49fc198bf04b2d9800fc37fecbb218/tutorials_download) section of the tutorials overview page [Get Started: Setup, Tutorials, and Demo Apps](https://sdk.openui5.org/topic/8b49fc198bf04b2d9800fc37fecbb218).
+> You can view the samples for all steps here in this repository.
 
 ***
 

packages/navigation/steps/02/README.md

@@ -124,6 +124,7 @@ import UIComponent from "sap/ui/core/UIComponent";
 export default class Component extends UIComponent {
 
 	public static metadata = {
+		interfaces: ["sap.ui.core.IAsyncContentCreation"],
 		manifest: "json"
 	};
 

packages/navigation/steps/08/webapp/initMockServer.ts

@@ -1,7 +1,6 @@
 import mockserver from "ui5/tutorial/navigation/localService/mockserver";
 import MessageBox from "sap/m/MessageBox";
 
-// initialize the mock server
 mockserver.init().catch((error: Error) => {
   MessageBox.error(error.message);
 }).finally(() => {

packages/navigation/steps/11/README.md

@@ -386,47 +386,36 @@ export default class EmployeeOverviewContent extends BaseController {
 		if (searchQuery?.length > 0) {
 			const filters: Filter[] = [];
 
-			aFilters.push(new Filter("FirstName", FilterOperator.Contains, searchQuery));
-			aFilters.push(new Filter("LastName", FilterOperator.Contains, searchQuery));
-			oFilter = new Filter({ filters: aFilters, and: false }); // OR filter
+			filters.push(new Filter("FirstName", FilterOperator.Contains, searchQuery));
+			filters.push(new Filter("LastName", FilterOperator.Contains, searchQuery));
+			filter = new Filter({ filters: filters, and: false }); // OR filter
 		}
 
 		// update list binding
 		const binding = (<ListBinding> this.table.getBinding("items"));
-		binding.filter(oFilter, "Application");
+		binding.filter(filter, "Application");
 	}
 
 	/**
 	 * Applies sorting on our table control.
 	 * @param {string} fieldName the name of the field used for sorting
-	 * @param {string} sortDescending true or false as a string or boolean value to specify a descending sorting
+	 * @param {boolean} sortDescending whether to sort descending
 	 * @private
 	 */
-	private _applySorter(fieldName: string, sortDescending: string | boolean): void {
+	private _applySorter(fieldName: string, sortDescending: boolean): void {
 		// only continue if we have a valid sort field
 		if (fieldName && this.validSortFields.includes(fieldName)) {
-			let descending: boolean;
-
-			// convert the sort order to a boolean value
-			if (typeof sortDescending === "string") {
-				descending = sortDescending === "true";
-			} else if (typeof sortDescending === "boolean") {
-				descending = sortDescending;
-			} else {
-				descending = false;
-			}
-
 			// sort only if the sorter has changed
-			if (this.sortField && this.sortField === fieldName && this.sortDescending === descending) {
+			if (this.sortField && this.sortField === fieldName && this.sortDescending === sortDescending) {
 				return;
 			}
 
 			this.sortField = fieldName;
-			this.sortDescending = descending;
-			const sorter = new Sorter(fieldName, descending);
+			this.sortDescending = sortDescending;
+			const sorter = new Sorter(fieldName, sortDescending);
 
 			// sync with View Settings Dialog
-			this._syncViewSettingsDialogSorter(fieldName, descending);
+			this._syncViewSettingsDialogSorter(fieldName, sortDescending);
 
 			const binding = (<ListBinding> this.table.getBinding("items"));
 			binding.sort(sorter);
@@ -517,33 +506,22 @@ sap.ui.define(["sap/m/ViewSettingsDialog", "sap/m/ViewSettingsItem", "ui5/tutori
 	/**
 	 * Applies sorting on our table control.
 	 * @param {string} fieldName the name of the field used for sorting
-	 * @param {string | boolean} sortDescending true or false as a string or boolean value to specify a descending sorting
+	 * @param {boolean} sortDescending whether to sort descending
 	 * @private
 	 */
 	_applySorter(fieldName, sortDescending) {
 	  // only continue if we have a valid sort field
 	  if (fieldName && this.validSortFields.includes(fieldName)) {
-		let descending;
-
-		// convert the sort order to a boolean value
-		if (typeof sortDescending === "string") {
-		  descending = sortDescending === "true";
-		} else if (typeof sortDescending === "boolean") {
-		  descending = sortDescending;
-		} else {
-		  descending = false;
-		}
-
 		// sort only if the sorter has changed
-		if (this.sortField && this.sortField === fieldName && this.sortDescending === descending) {
+		if (this.sortField && this.sortField === fieldName && this.sortDescending === sortDescending) {
 		  return;
 		}
 		this.sortField = fieldName;
-		this.sortDescending = descending;
-		const sorter = new Sorter(fieldName, descending);
+		this.sortDescending = sortDescending;
+		const sorter = new Sorter(fieldName, sortDescending);
 
 		// sync with View Settings Dialog
-		this._syncViewSettingsDialogSorter(fieldName, descending);
+		this._syncViewSettingsDialogSorter(fieldName, sortDescending);
 		const binding = this.table.getBinding("items");
 		binding.sort(sorter);
 	  }

packages/navigation/steps/11/webapp/controller/employee/overview/EmployeeOverviewContent.controller.ts

@@ -1,131 +1,120 @@
-import SearchField, { SearchField$SearchEvent } from "sap/m/SearchField";
-import Table from "sap/m/Table";
-import ViewSettingsDialog, { ViewSettingsDialog$ConfirmEvent } from "sap/m/ViewSettingsDialog";
-import ViewSettingsItem from "sap/m/ViewSettingsItem";
-import BaseController from "ui5/tutorial/navigation/controller/BaseController";
-import Filter from "sap/ui/model/Filter";
-import FilterOperator from "sap/ui/model/FilterOperator";
-import ListBinding from "sap/ui/model/ListBinding";
-import Sorter from "sap/ui/model/Sorter";
-
-/**
- * @namespace ui5.tutorial.navigation.controller.employee.overview
- */
-export default class EmployeeOverviewContent extends BaseController {
-
-  private table: Table;
-  private viewSettingsDialog: ViewSettingsDialog;
-  private sortField: string | null = null;
-  private sortDescending: boolean = false;
-  private validSortFields: string[] = ["EmployeeID", "FirstName", "LastName"];
-  private searchQuery: string | null = null;
-
-  public onInit(): void {
-    this.table = (<Table> this.byId("employeesTable"));
-    this._initViewSettingsDialog();
-  }
-
-  public onSortButtonPressed(): void {
-    this.viewSettingsDialog.open();
-  }
-
-  public onSearchEmployeesTable(event: SearchField$SearchEvent): void {
-    this._applySearchFilter(event.getSource().getValue());
-  }
-
-  private _initViewSettingsDialog(): void {
-    this.viewSettingsDialog = new ViewSettingsDialog("vsd", {
-      confirm: (event: ViewSettingsDialog$ConfirmEvent) => {
-        const sortItem = event.getParameter("sortItem");
-        this._applySorter(sortItem.getKey(), event.getParameter("sortDescending"));
-      }
-    });
-
-    // init sorting (with simple sorters as custom data for all fields)
-    this.viewSettingsDialog.addSortItem(new ViewSettingsItem({
-      key: "EmployeeID",
-      text: "Employee ID",
-      selected: true // by default the MockData is sorted by EmployeeID
-    }));
-
-    this.viewSettingsDialog.addSortItem(new ViewSettingsItem({
-      key: "FirstName",
-      text: "First Name",
-      selected: false
-    }));
-
-    this.viewSettingsDialog.addSortItem(new ViewSettingsItem({
-      key: "LastName",
-      text: "Last Name",
-      selected: false
-    }));
-  }
-
-  private _applySearchFilter(searchQuery: string): void {
-    // first check if we already have this search value
-    if (this.searchQuery === searchQuery) {
-      return;
-    }
-    this.searchQuery = searchQuery;
-    (<SearchField> this.byId("searchField")).setValue(searchQuery);
-
-    let filter: Filter | null = null;
-
-    // add filters for search
-    if (searchQuery?.length > 0) {
-      const filters: Filter[] = [];
-
-      filters.push(new Filter("FirstName", FilterOperator.Contains, searchQuery));
-      filters.push(new Filter("LastName", FilterOperator.Contains, searchQuery));
-      filter = new Filter({ filters: filters, and: false }); // OR filter
-    }
-
-    // update list binding
-    const binding = (<ListBinding> this.table.getBinding("items"));
-    binding.filter(filter, "Application");
-  }
-
-  /**
-   * Applies sorting on our table control.
-   * @param {string} fieldName the name of the field used for sorting
-   * @param {string | boolean} sortDescending true or false as a string or boolean value to specify a descending sorting
-   * @private
-   */
-  private _applySorter(fieldName: string, sortDescending: string | boolean): void {
-    // only continue if we have a valid sort field
-    if (fieldName && this.validSortFields.includes(fieldName)) {
-      let descending: boolean;
-
-      // convert the sort order to a boolean value
-      if (typeof sortDescending === "string") {
-        descending = sortDescending === "true";
-      } else if (typeof sortDescending === "boolean") {
-        descending = sortDescending;
-      } else {
-        descending = false;
-      }
-
-      // sort only if the sorter has changed
-      if (this.sortField && this.sortField === fieldName && this.sortDescending === descending) {
-        return;
-      }
-
-      this.sortField = fieldName;
-      this.sortDescending = descending;
-      const sorter = new Sorter(fieldName, descending);
-
-      // sync with View Settings Dialog
-      this._syncViewSettingsDialogSorter(fieldName, descending);
-
-      const binding = (<ListBinding> this.table.getBinding("items"));
-      binding.sort(sorter);
-    }
-  }
-
-  private _syncViewSettingsDialogSorter(sortField: string, sortDescending: boolean): void {
-    // the possible keys are: "EmployeeID" | "FirstName" | "LastName"
-    // Note: no input validation is implemented here
-    this.viewSettingsDialog.setSelectedSortItem(sortField);
-    this.viewSettingsDialog.setSortDescending(sortDescending);
-  }
-}
+import SearchField, { SearchField$SearchEvent } from "sap/m/SearchField";
+import Table from "sap/m/Table";
+import ViewSettingsDialog, { ViewSettingsDialog$ConfirmEvent } from "sap/m/ViewSettingsDialog";
+import ViewSettingsItem from "sap/m/ViewSettingsItem";
+import BaseController from "ui5/tutorial/navigation/controller/BaseController";
+import Filter from "sap/ui/model/Filter";
+import FilterOperator from "sap/ui/model/FilterOperator";
+import ListBinding from "sap/ui/model/ListBinding";
+import Sorter from "sap/ui/model/Sorter";
+
+/**
+ * @namespace ui5.tutorial.navigation.controller.employee.overview
+ */
+export default class EmployeeOverviewContent extends BaseController {
+
+  private table: Table;
+  private viewSettingsDialog: ViewSettingsDialog;
+  private sortField: string | null = null;
+  private sortDescending: boolean = false;
+  private validSortFields: string[] = ["EmployeeID", "FirstName", "LastName"];
+  private searchQuery: string | null = null;
+
+  public onInit(): void {
+    this.table = (<Table> this.byId("employeesTable"));
+    this._initViewSettingsDialog();
+  }
+
+  public onSortButtonPressed(): void {
+    this.viewSettingsDialog.open();
+  }
+
+  public onSearchEmployeesTable(event: SearchField$SearchEvent): void {
+    this._applySearchFilter(event.getSource().getValue());
+  }
+
+  private _initViewSettingsDialog(): void {
+    this.viewSettingsDialog = new ViewSettingsDialog("vsd", {
+      confirm: (event: ViewSettingsDialog$ConfirmEvent) => {
+        const sortItem = event.getParameter("sortItem");
+        this._applySorter(sortItem.getKey(), event.getParameter("sortDescending"));
+      }
+    });
+
+    // init sorting (with simple sorters as custom data for all fields)
+    this.viewSettingsDialog.addSortItem(new ViewSettingsItem({
+      key: "EmployeeID",
+      text: "Employee ID",
+      selected: true // by default the MockData is sorted by EmployeeID
+    }));
+
+    this.viewSettingsDialog.addSortItem(new ViewSettingsItem({
+      key: "FirstName",
+      text: "First Name",
+      selected: false
+    }));
+
+    this.viewSettingsDialog.addSortItem(new ViewSettingsItem({
+      key: "LastName",
+      text: "Last Name",
+      selected: false
+    }));
+  }
+
+  private _applySearchFilter(searchQuery: string): void {
+    // first check if we already have this search value
+    if (this.searchQuery === searchQuery) {
+      return;
+    }
+    this.searchQuery = searchQuery;
+    (<SearchField> this.byId("searchField")).setValue(searchQuery);
+
+    let filter: Filter | null = null;
+
+    // add filters for search
+    if (searchQuery?.length > 0) {
+      const filters: Filter[] = [];
+
+      filters.push(new Filter("FirstName", FilterOperator.Contains, searchQuery));
+      filters.push(new Filter("LastName", FilterOperator.Contains, searchQuery));
+      filter = new Filter({ filters: filters, and: false }); // OR filter
+    }
+
+    // update list binding
+    const binding = (<ListBinding> this.table.getBinding("items"));
+    binding.filter(filter, "Application");
+  }
+
+  /**
+   * Applies sorting on our table control.
+   * @param {string} fieldName the name of the field used for sorting
+   * @param {boolean} sortDescending whether to sort descending
+   * @private
+   */
+  private _applySorter(fieldName: string, sortDescending: boolean): void {
+    // only continue if we have a valid sort field
+    if (fieldName && this.validSortFields.includes(fieldName)) {
+      // sort only if the sorter has changed
+      if (this.sortField && this.sortField === fieldName && this.sortDescending === sortDescending) {
+        return;
+      }
+
+      this.sortField = fieldName;
+      this.sortDescending = sortDescending;
+      const sorter = new Sorter(fieldName, sortDescending);
+
+      // sync with View Settings Dialog
+      this._syncViewSettingsDialogSorter(fieldName, sortDescending);
+
+      const binding = (<ListBinding> this.table.getBinding("items"));
+      binding.sort(sorter);
+    }
+  }
+
+  private _syncViewSettingsDialogSorter(sortField: string, sortDescending: boolean): void {
+    // the possible keys are: "EmployeeID" | "FirstName" | "LastName"
+    // Note: no input validation is implemented here
+    this.viewSettingsDialog.setSelectedSortItem(sortField);
+    this.viewSettingsDialog.setSortDescending(sortDescending);
+  }
+}

packages/navigation/steps/11/webapp/manifest.json

@@ -48,7 +48,8 @@
       "minUI5Version": "1.148",
       "libs": {
         "sap.m": {},
-        "sap.ui.core": {}
+        "sap.ui.core": {},
+        "sap.ui.layout": {}
       }
     },
     "models": {