From 2ff8fde5301ee65dc7f90f358f27c9823e3fd344 Mon Sep 17 00:00:00 2001
From: Yigit Ertoer <yigit.ertoer@sap.com>
Date: Mon, 31 Aug 2026 15:10:13 +0300
Subject: [PATCH] fix(odatav4): review and fix navigation tutorial

---
 packages/odatav4/README.md                    |   2 +-
 .../odatav4/steps/01/webapp/index-cdn.html    |   1 -
 packages/odatav4/steps/01/webapp/index.html   |   1 -
 .../webapp/localService/mockdata/people.json  |  40 +-
 .../01/webapp/localService/mockserver.ts      |  83 +++-
 packages/odatav4/steps/02/README.md           |  92 ++--
 .../02/webapp/controller/App.controller.ts    |   4 +-
 .../odatav4/steps/02/webapp/index-cdn.html    |   1 -
 packages/odatav4/steps/02/webapp/index.html   |   1 -
 .../webapp/localService/mockdata/people.json  |  40 +-
 .../02/webapp/localService/mockserver.ts      |  83 +++-
 packages/odatav4/steps/03/README.md           |  11 +-
 .../03/webapp/controller/App.controller.ts    |   4 +-
 .../odatav4/steps/03/webapp/index-cdn.html    |   1 -
 packages/odatav4/steps/03/webapp/index.html   |   1 -
 .../webapp/localService/mockdata/people.json  |  40 +-
 .../03/webapp/localService/mockserver.ts      |  83 +++-
 packages/odatav4/steps/04/README.md           | 227 +++++----
 .../04/webapp/controller/App.controller.ts    |   3 +-
 .../odatav4/steps/04/webapp/index-cdn.html    |   1 -
 packages/odatav4/steps/04/webapp/index.html   |   1 -
 .../webapp/localService/mockdata/people.json  |  40 +-
 .../04/webapp/localService/mockserver.ts      |  83 +++-
 .../odatav4/steps/04/webapp/view/App.view.xml |   4 +-
 packages/odatav4/steps/05/README.md           |  10 +-
 .../05/webapp/controller/App.controller.ts    |   3 +-
 .../odatav4/steps/05/webapp/index-cdn.html    |   1 -
 packages/odatav4/steps/05/webapp/index.html   |   1 -
 .../webapp/localService/mockdata/people.json  |  40 +-
 .../05/webapp/localService/mockserver.ts      |  83 +++-
 .../odatav4/steps/05/webapp/view/App.view.xml |   4 +-
 packages/odatav4/steps/06/README.md           | 449 +++++++++---------
 .../06/webapp/controller/App.controller.ts    |   6 +-
 .../odatav4/steps/06/webapp/index-cdn.html    |   1 -
 packages/odatav4/steps/06/webapp/index.html   |   1 -
 .../webapp/localService/mockdata/people.json  |  40 +-
 .../06/webapp/localService/mockserver.ts      |  83 +++-
 .../odatav4/steps/06/webapp/view/App.view.xml |   6 +-
 packages/odatav4/steps/07/README.md           | 193 +++++---
 .../07/webapp/controller/App.controller.ts    |   6 +-
 .../odatav4/steps/07/webapp/index-cdn.html    |   1 -
 packages/odatav4/steps/07/webapp/index.html   |   1 -
 .../webapp/localService/mockdata/people.json  |  40 +-
 .../07/webapp/localService/mockserver.ts      |  83 +++-
 packages/odatav4/steps/08/README.md           |  84 ++--
 .../08/webapp/controller/App.controller.ts    |   6 +-
 .../odatav4/steps/08/webapp/index-cdn.html    |   1 -
 packages/odatav4/steps/08/webapp/index.html   |   1 -
 .../webapp/localService/mockdata/people.json  |  40 +-
 .../08/webapp/localService/mockserver.ts      |  83 +++-
 .../08/webapp/test/integration/AllJourneys.js |  13 -
 .../test/integration/TutorialJourney.js       | 122 -----
 .../test/integration/arrangements/Startup.js  |  24 -
 .../test/integration/opaTests.qunit.html      |  27 --
 .../webapp/test/integration/opaTests.qunit.js |  11 -
 .../webapp/test/integration/pages/Tutorial.js | 300 ------------
 .../odatav4/steps/08/webapp/view/App.view.xml |   2 +-
 packages/odatav4/steps/09/README.md           | 167 ++++---
 .../09/webapp/controller/App.controller.ts    |  20 +-
 .../odatav4/steps/09/webapp/index-cdn.html    |   1 -
 packages/odatav4/steps/09/webapp/index.html   |   1 -
 .../webapp/localService/mockdata/people.json  |  40 +-
 .../09/webapp/localService/mockserver.ts      |  83 +++-
 .../odatav4/steps/09/webapp/view/App.view.xml |   2 +-
 packages/odatav4/steps/10/README.md           | 122 +++--
 .../10/webapp/controller/App.controller.ts    |  22 +-
 .../odatav4/steps/10/webapp/index-cdn.html    |   1 -
 packages/odatav4/steps/10/webapp/index.html   |   1 -
 .../webapp/localService/mockdata/people.json  |  40 +-
 .../10/webapp/localService/mockserver.ts      |  83 +++-
 .../odatav4/steps/10/webapp/view/App.view.xml |   2 +-
 .../11/webapp/controller/App.controller.ts    |  22 +-
 .../odatav4/steps/11/webapp/index-cdn.html    |   1 -
 packages/odatav4/steps/11/webapp/index.html   |   1 -
 .../webapp/localService/mockdata/people.json  |  40 +-
 .../11/webapp/localService/mockserver.ts      |  83 +++-
 .../test/integration/TutorialJourney.js       |  94 +++-
 .../test/integration/opaTests.qunit.html      |   8 +-
 .../webapp/test/integration/pages/Tutorial.js |  26 +-
 .../odatav4/steps/11/webapp/view/App.view.xml |   2 +-
 80 files changed, 1747 insertions(+), 1728 deletions(-)
 delete mode 100644 packages/odatav4/steps/08/webapp/test/integration/AllJourneys.js
 delete mode 100644 packages/odatav4/steps/08/webapp/test/integration/TutorialJourney.js
 delete mode 100644 packages/odatav4/steps/08/webapp/test/integration/arrangements/Startup.js
 delete mode 100644 packages/odatav4/steps/08/webapp/test/integration/opaTests.qunit.html
 delete mode 100644 packages/odatav4/steps/08/webapp/test/integration/opaTests.qunit.js
 delete mode 100644 packages/odatav4/steps/08/webapp/test/integration/pages/Tutorial.js

diff --git a/packages/odatav4/README.md b/packages/odatav4/README.md
index 4ac636ccc..d02aad5f6 100644
--- a/packages/odatav4/README.md
+++ b/packages/odatav4/README.md
@@ -6,7 +6,7 @@ OData is a standard protocol for creating and consuming data using simple HTTP a
 
 We start with an initial app that simply retrieves data from an OData V4 service and displays it as a plain list, and progressively grow it across 11 steps.
 
-> 💡  
+> 💡
 > 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 can view and download the files for all steps in the Demo Kit at [OData V4](https://sdk.openui5.org/#/entity/sap.ui.core.tutorial.odatav4).
diff --git a/packages/odatav4/steps/01/webapp/index-cdn.html b/packages/odatav4/steps/01/webapp/index-cdn.html
index e4ce80170..d550b4a6f 100644
--- a/packages/odatav4/steps/01/webapp/index-cdn.html
+++ b/packages/odatav4/steps/01/webapp/index-cdn.html
@@ -7,7 +7,6 @@
 	<script
 		id="sap-ui-bootstrap"
 		src="https://sdk.openui5.org/1.148.6/resources/sap-ui-core.js"
-		data-sap-ui-theme="sap_horizon"
 		data-sap-ui-compat-version="edge"
 		data-sap-ui-async="true"
 		data-sap-ui-on-init="module:ui5/tutorial/odatav4/initMockServer"
diff --git a/packages/odatav4/steps/01/webapp/index.html b/packages/odatav4/steps/01/webapp/index.html
index b1e54667d..f1acabd2f 100644
--- a/packages/odatav4/steps/01/webapp/index.html
+++ b/packages/odatav4/steps/01/webapp/index.html
@@ -7,7 +7,6 @@
 	<script
 		id="sap-ui-bootstrap"
 		src="resources/sap-ui-core.js"
-		data-sap-ui-theme="sap_horizon"
 		data-sap-ui-compat-version="edge"
 		data-sap-ui-async="true"
 		data-sap-ui-on-init="module:ui5/tutorial/odatav4/initMockServer"
diff --git a/packages/odatav4/steps/01/webapp/localService/mockdata/people.json b/packages/odatav4/steps/01/webapp/localService/mockdata/people.json
index 758030eaa..ec2491722 100644
--- a/packages/odatav4/steps/01/webapp/localService/mockdata/people.json
+++ b/packages/odatav4/steps/01/webapp/localService/mockdata/people.json
@@ -2,7 +2,7 @@
   "@odata.context": "https://services.odata.org/TripPinRESTierService/(S(id))/$metadata#People(Age,FirstName,LastName,UserName,Friends,BestFriend,HomeAddress)",
   "value": [
     {
-      "Age": 23,
+      "Age": "23",
       "FirstName": "Angel",
       "LastName": "Huffman",
       "UserName": "angelhuffman",
@@ -22,7 +22,7 @@
       }
     },
     {
-      "Age": 44,
+      "Age": "44",
       "FirstName": "Clyde",
       "LastName": "Guess",
       "UserName": "clydeguess",
@@ -42,7 +42,7 @@
       }
     },
     {
-      "Age": 19,
+      "Age": "19",
       "FirstName": "Elaine",
       "LastName": "Stewart",
       "UserName": "elainestewart",
@@ -62,7 +62,7 @@
       }
     },
     {
-      "Age": 37,
+      "Age": "37",
       "FirstName": "Genevieve",
       "LastName": "Reeves",
       "UserName": "genevievereeves",
@@ -82,7 +82,7 @@
       }
     },
     {
-      "Age": 25,
+      "Age": "25",
       "FirstName": "Georgina",
       "LastName": "Barlow",
       "UserName": "georginabarlow",
@@ -101,7 +101,7 @@
       }
     },
     {
-      "Age": 19,
+      "Age": "19",
       "FirstName": "Javier",
       "LastName": "Alfred",
       "UserName": "javieralfred",
@@ -120,7 +120,7 @@
       }
     },
     {
-      "Age": 26,
+      "Age": "26",
       "FirstName": "Joni",
       "LastName": "Rosales",
       "UserName": "jonirosales",
@@ -140,7 +140,7 @@
       }
     },
     {
-      "Age": 41,
+      "Age": "41",
       "FirstName": "Keith",
       "LastName": "Pinckney",
       "UserName": "keithpinckney",
@@ -160,7 +160,7 @@
       }
     },
     {
-      "Age": 30,
+      "Age": "30",
       "FirstName": "Krista",
       "LastName": "Kemp",
       "UserName": "kristakemp",
@@ -180,7 +180,7 @@
       }
     },
     {
-      "Age": 29,
+      "Age": "29",
       "FirstName": "Laurel",
       "LastName": "Osborn",
       "UserName": "laurelosborn",
@@ -200,7 +200,7 @@
       }
     },
     {
-      "Age": 53,
+      "Age": "53",
       "FirstName": "Marshall",
       "LastName": "Garay",
       "UserName": "marshallgaray",
@@ -219,7 +219,7 @@
       }
     },
     {
-      "Age": 66,
+      "Age": "66",
       "FirstName": "Ronald",
       "LastName": "Mundy",
       "UserName": "ronaldmundy",
@@ -238,7 +238,7 @@
       }
     },
     {
-      "Age": 51,
+      "Age": "51",
       "FirstName": "Russell",
       "LastName": "Whyte",
       "UserName": "russellwhyte",
@@ -258,7 +258,7 @@
       }
     },
     {
-      "Age": 57,
+      "Age": "57",
       "FirstName": "Ryan",
       "LastName": "Theriault",
       "UserName": "ryantheriault",
@@ -278,7 +278,7 @@
       }
     },
     {
-      "Age": 34,
+      "Age": "34",
       "FirstName": "Sallie",
       "LastName": "Sampson",
       "UserName": "salliesampson",
@@ -298,7 +298,7 @@
       }
     },
     {
-      "Age": 18,
+      "Age": "18",
       "FirstName": "Sandy",
       "LastName": "Osborn",
       "UserName": "sandyosborn",
@@ -318,7 +318,7 @@
       }
     },
     {
-      "Age": 24,
+      "Age": "24",
       "FirstName": "Scott",
       "LastName": "Ketchum",
       "UserName": "scottketchum",
@@ -337,7 +337,7 @@
       }
     },
     {
-      "Age": 31,
+      "Age": "31",
       "FirstName": "Ursula",
       "LastName": "Bright",
       "UserName": "ursulabright",
@@ -356,7 +356,7 @@
       }
     },
     {
-      "Age": 40,
+      "Age": "40",
       "FirstName": "Vincent",
       "LastName": "Calabrese",
       "UserName": "vincentcalabrese",
@@ -376,7 +376,7 @@
       }
     },
     {
-      "Age": 45,
+      "Age": "45",
       "FirstName": "Willie",
       "LastName": "Ashmore",
       "UserName": "willieashmore",
diff --git a/packages/odatav4/steps/01/webapp/localService/mockserver.ts b/packages/odatav4/steps/01/webapp/localService/mockserver.ts
index 7ca0307f4..f09c33ed9 100644
--- a/packages/odatav4/steps/01/webapp/localService/mockserver.ts
+++ b/packages/odatav4/steps/01/webapp/localService/mockserver.ts
@@ -35,7 +35,7 @@ let metadata: string; // The string that holds the cached mock service metadata
 const namespace = "ui5/tutorial/odatav4";
 // Component for writing logs into the console
 const logComponent = "ui5.tutorial.odatav4.mockserver";
-const rBaseUrl = /services.odata.org\/TripPinRESTierService/;
+const baseUrl = /services.odata.org\/TripPinRESTierService/;
 
 /**
  * Returns the base URL from a given URL.
@@ -251,19 +251,50 @@ function applySort(xhr: MockXhr, resultSet: MockUser[]): MockUser[] {
  * Does NOT change the given result set but returns a new array.
  */
 function applyFilter(xhr: MockXhr, resultSet: MockUser[]): MockUser[] {
-	let filteredUsers = [...resultSet]; // work with a copy
-	const matches = xhr.url.match(/\$filter=.*\((.*),'(.*)'\)/);
-
-	// If the request contains a filter command, apply the filter
-	if (Array.isArray(matches) && matches.length >= 3) {
-		const fieldName = matches[1];
-		const query = matches[2];
-
-		if (fieldName !== "LastName") {
-			throw new Error("Filters on field " + fieldName + " are not supported.");
+	const filter = new URL(xhr.url).searchParams.get("$filter");
+	let filteredUsers = resultSet.slice(); // work with a copy
+	if (!filter) {
+		return filteredUsers;
+	}
+	// support filters like:
+	// - "contains(LastName,'e')"
+	// - "(contains(LastName,'e')) and not (UserName eq 'a' or UserName eq 'b')"
+	// - "not (UserName eq 'a' or UserName eq 'b')"
+	// - "UserName eq 'foo'"
+	let remainingFilter = filter.startsWith("(") ? filter.slice(1) : filter;
+	if (remainingFilter.startsWith("contains(LastName,'")) { // from search field
+		remainingFilter = remainingFilter.slice(19); // remove "contains(LastName,'"
+		const value = remainingFilter.split("')")[0];
+		filteredUsers = filteredUsers.filter(function (user) {
+			return user.LastName.includes(value);
+		});
+		// remove the rest of "contains" from the filter and the optional following ") and "
+		remainingFilter = remainingFilter.slice(value.length + 2);
+		if (remainingFilter.startsWith(") and ")) {
+			remainingFilter = remainingFilter.slice(6);
 		}
-
-		filteredUsers = users.filter((user) => (user.LastName || "").indexOf(query) !== -1);
+	}
+	if (remainingFilter.startsWith("not (UserName eq ")) { // exclusive filter
+		const end = remainingFilter.indexOf(")");
+		const excludedUsers = remainingFilter.slice(17, end) // remove "not (UserName eq "
+			.split(" or UserName eq ")
+			// after splitting each entry contains the username in single quotes, e.g. "'me'"
+			.map((filterPart) => filterPart.slice(1, -1));
+		filteredUsers = filteredUsers.filter(function (user) {
+			return !excludedUsers.includes(user.UserName);
+		});
+		remainingFilter = remainingFilter.slice(end + 1);
+	}
+	if (remainingFilter.startsWith("UserName eq '")) { // refresh of selected user
+		const end = remainingFilter.indexOf("'", 13);
+		const value = remainingFilter.slice(13, end); // remove "UserName eq '"
+		filteredUsers = filteredUsers.filter(function (user) {
+			return user.LastName.includes(value);
+		});
+		remainingFilter = remainingFilter.slice(end + 1);
+	}
+	if (remainingFilter) {
+		throw new Error(`"${remainingFilter}" of filter "${filter}" is not supported`);
 	}
 
 	return filteredUsers;
@@ -292,7 +323,7 @@ function handleGetCountRequests(): MockResponse {
 /**
  * Handles GET requests for user data and returns a fitting response.
  */
-function handleGetUserRequests(xhr: MockXhr, _bCount: boolean): MockResponse {
+function handleGetUserRequests(xhr: MockXhr, _count: boolean): MockResponse {
 	let count: number;
 	let expand: RegExpMatchArray | string[] | null;
 	let expand2: string;
@@ -381,7 +412,7 @@ function handleGetUserRequests(xhr: MockXhr, _bCount: boolean): MockResponse {
  * Returns a specific user in the aUsers array.
  */
 function getUserByIndex(index: number, properties: string[]): MockUser | null {
-	const helper: MockUser = { UserName: "" };
+	const helper = {} as MockUser;
 	const user = users[index];
 
 	if (user) {
@@ -509,10 +540,16 @@ function handleDeleteUserRequests(xhr: MockXhr): MockResponse {
  * Handles POST requests for users and returns a fitting response.
  */
 function handlePostUserRequests(xhr: MockXhr): MockResponse {
-	const user = getUserDataFromRequestBody(xhr.requestBody || "");
+	let user = getUserDataFromRequestBody(xhr.requestBody || "");
 
 	// Check if that user already exists
 	if (isUnique(user.UserName)) {
+		user = {
+			HomeAddress : null, // prevents drillDown errors
+			LastName : "",
+			FirstName : "",
+			...user
+		};
 		users.push(user);
 
 		let responseBody = '{"@odata.context": "' + getBaseUrl(xhr.url)
@@ -697,8 +734,7 @@ function handleAllRequests(xhr: MockXhr): void {
 		"Mockserver: Received " + xhr.method + " request to URL " + xhr.url,
 		(xhr.requestBody ? "Request body is:\n" + xhr.requestBody : "No request body.")
 		+ "\n",
-		logComponent
-	);
+		logComponent);
 
 	if (xhr.method === "POST" && /\$batch/.test(xhr.url)) {
 		response2 = handleBatchRequest(xhr);
@@ -716,8 +752,7 @@ function handleAllRequests(xhr: MockXhr): void {
 			"Mockserver: Sent response with return code " + response2[0],
 			("Response headers: " + JSON.stringify(response2[1]) + "\n\nResponse body:\n"
 				+ (response2[2] || "")) + "\n",
-			logComponent
-		);
+			logComponent);
 	}
 }
 
@@ -725,7 +760,7 @@ export default {
 
 	/**
 	 * Creates a Sinon fake service, intercepting all http requests to
-	 * the URL defined in variable rBaseUrl above.
+	 * the URL defined in variable baseUrl above.
 	 * @returns a promise that is resolved when the mock server is started
 	 */
 	init(): Promise<unknown> {
@@ -744,16 +779,16 @@ export default {
 					sandbox.server.autoRespond = true;
 
 					// Register the requests for which responses should be faked.
-					sandbox.server.respondWith(rBaseUrl, handleAllRequests);
+					sandbox.server.respondWith(baseUrl, handleAllRequests);
 
 					// Apply a filter to the fake XmlHttpRequest.
 					// Otherwise, ALL requests (e.g. for the component, views etc.) would be
 					// intercepted.
 					sinon.FakeXMLHttpRequest.useFilters = true;
-					sinon.FakeXMLHttpRequest.addFilter((_sMethod: string, url: string) => {
+					sinon.FakeXMLHttpRequest.addFilter((_method: string, url: string) => {
 						// If the filter returns true, the request will NOT be faked.
 						// We only want to fake requests that go to the intended service.
-						return !rBaseUrl.test(url);
+						return !baseUrl.test(url);
 					});
 
 					// Set the logging level for console entries from the mock server
diff --git a/packages/odatav4/steps/02/README.md b/packages/odatav4/steps/02/README.md
index 1eecb4602..3d24f6162 100644
--- a/packages/odatav4/steps/02/README.md
+++ b/packages/odatav4/steps/02/README.md
@@ -26,7 +26,7 @@ import ResourceModel from "sap/ui/model/resource/ResourceModel";
 import ResourceBundle from "sap/base/i18n/ResourceBundle";
 import Component from "sap/ui/core/Component";
 import List from "sap/m/List";
-import type ListBinding from "sap/ui/model/ListBinding";
+import type ODataListBinding from "sap/ui/model/odata/v4/ODataListBinding";
 
 /**
  * @namespace ui5.tutorial.odatav4.controller
@@ -53,7 +53,7 @@ export default class App extends Controller {
 	 * Refresh the data.
 	 */
 	onRefresh(): void {
-		const binding = (this.byId("peopleList") as List).getBinding("items") as unknown as { hasPendingChanges(): boolean; refresh(): void };
+		const binding = (this.byId("peopleList") as List).getBinding("items") as ODataListBinding;
 
 		if (binding.hasPendingChanges()) {
 			MessageBox.error(this._getText("refreshNotPossibleMessage"));
@@ -85,45 +85,48 @@ export default class App extends Controller {
 sap.ui.define(["sap/ui/core/mvc/Controller", "sap/m/MessageToast", "sap/m/MessageBox", "sap/ui/model/json/JSONModel"], function (Controller, MessageToast, MessageBox, JSONModel) {
   "use strict";
 
+  /**
+   * @namespace ui5.tutorial.odatav4.controller
+   */
   const App = Controller.extend("ui5.tutorial.odatav4.controller.App", {
-	/**
-	 *  Hook for initializing the controller
-	 */
-	onInit() {
-	  const jSONData = {
-		busy: false
-	  };
-	  const model = new JSONModel(jSONData);
-	  this.getView().setModel(model, "appView");
-	},
-	/* =========================================================== */
-	/*           begin: event handlers                             */
-	/* =========================================================== */
-	/**
-	 * Refresh the data.
-	 */
-	onRefresh() {
-	  const binding = this.byId("peopleList").getBinding("items");
-	  if (binding.hasPendingChanges()) {
-		MessageBox.error(this._getText("refreshNotPossibleMessage"));
-		return;
-	  }
-	  binding.refresh();
-	  MessageToast.show(this._getText("refreshSuccessMessage"));
-	},
-	/* =========================================================== */
-	/*           end: event handlers                               */
-	/* =========================================================== */
-	/**
-	 * Convenience method for retrieving a translatable text.
-	 * @param sTextId - the ID of the text to be retrieved.
-	 * @param aArgs - optional array of texts for placeholders.
-	 * @returns the text belonging to the given ID.
-	 */
-	_getText(textId, args) {
-	  const bundle = this.getOwnerComponent().getModel("i18n").getResourceBundle();
-	  return bundle.getText(textId, args);
-	}
+    /**
+     *  Hook for initializing the controller
+     */
+    onInit() {
+      const jsonData = {
+        busy: false
+      };
+      const model = new JSONModel(jsonData);
+      this.getView().setModel(model, "appView");
+    },
+    /* =========================================================== */
+    /*           begin: event handlers                             */
+    /* =========================================================== */
+    /**
+     * Refresh the data.
+     */
+    onRefresh() {
+      const binding = this.byId("peopleList").getBinding("items");
+      if (binding.hasPendingChanges()) {
+        MessageBox.error(this._getText("refreshNotPossibleMessage"));
+        return;
+      }
+      binding.refresh();
+      MessageToast.show(this._getText("refreshSuccessMessage"));
+    },
+    /* =========================================================== */
+    /*           end: event handlers                               */
+    /* =========================================================== */
+    /**
+     * Convenience method for retrieving a translatable text.
+     * @param sTextId - the ID of the text to be retrieved.
+     * @param aArgs - optional array of texts for placeholders.
+     * @returns the text belonging to the given ID.
+     */
+    _getText(textId, args) {
+      const bundle = this.getOwnerComponent().getModel("i18n").getResourceBundle();
+      return bundle.getText(textId, args);
+    }
   });
   return App;
 });
@@ -158,11 +161,10 @@ We also add the private method `_getText` to retrieve translatable texts from th
               icon="sap-icon://refresh"
               tooltip="{i18n>refreshButtonText}"
               press=".onRefresh"/>
-            </content>
-          </OverflowToolbar>
-        </headerToolbar>
-
-        <columns>
+          </content>
+        </OverflowToolbar>
+      </headerToolbar>
+      <columns>
 ...
 ```
 
diff --git a/packages/odatav4/steps/02/webapp/controller/App.controller.ts b/packages/odatav4/steps/02/webapp/controller/App.controller.ts
index c1d4760cc..6bab08fde 100644
--- a/packages/odatav4/steps/02/webapp/controller/App.controller.ts
+++ b/packages/odatav4/steps/02/webapp/controller/App.controller.ts
@@ -6,7 +6,7 @@ import ResourceModel from "sap/ui/model/resource/ResourceModel";
 import ResourceBundle from "sap/base/i18n/ResourceBundle";
 import Component from "sap/ui/core/Component";
 import List from "sap/m/List";
-import type ListBinding from "sap/ui/model/ListBinding";
+import type ODataListBinding from "sap/ui/model/odata/v4/ODataListBinding";
 
 /**
  * @namespace ui5.tutorial.odatav4.controller
@@ -33,7 +33,7 @@ export default class App extends Controller {
 	 * Refresh the data.
 	 */
 	onRefresh(): void {
-		const binding = (this.byId("peopleList") as List).getBinding("items") as unknown as { hasPendingChanges(): boolean; refresh(): void };
+		const binding = (this.byId("peopleList") as List).getBinding("items") as ODataListBinding;
 
 		if (binding.hasPendingChanges()) {
 			MessageBox.error(this._getText("refreshNotPossibleMessage"));
diff --git a/packages/odatav4/steps/02/webapp/index-cdn.html b/packages/odatav4/steps/02/webapp/index-cdn.html
index e4ce80170..d550b4a6f 100644
--- a/packages/odatav4/steps/02/webapp/index-cdn.html
+++ b/packages/odatav4/steps/02/webapp/index-cdn.html
@@ -7,7 +7,6 @@
 	<script
 		id="sap-ui-bootstrap"
 		src="https://sdk.openui5.org/1.148.6/resources/sap-ui-core.js"
-		data-sap-ui-theme="sap_horizon"
 		data-sap-ui-compat-version="edge"
 		data-sap-ui-async="true"
 		data-sap-ui-on-init="module:ui5/tutorial/odatav4/initMockServer"
diff --git a/packages/odatav4/steps/02/webapp/index.html b/packages/odatav4/steps/02/webapp/index.html
index b1e54667d..f1acabd2f 100644
--- a/packages/odatav4/steps/02/webapp/index.html
+++ b/packages/odatav4/steps/02/webapp/index.html
@@ -7,7 +7,6 @@
 	<script
 		id="sap-ui-bootstrap"
 		src="resources/sap-ui-core.js"
-		data-sap-ui-theme="sap_horizon"
 		data-sap-ui-compat-version="edge"
 		data-sap-ui-async="true"
 		data-sap-ui-on-init="module:ui5/tutorial/odatav4/initMockServer"
diff --git a/packages/odatav4/steps/02/webapp/localService/mockdata/people.json b/packages/odatav4/steps/02/webapp/localService/mockdata/people.json
index 758030eaa..ec2491722 100644
--- a/packages/odatav4/steps/02/webapp/localService/mockdata/people.json
+++ b/packages/odatav4/steps/02/webapp/localService/mockdata/people.json
@@ -2,7 +2,7 @@
   "@odata.context": "https://services.odata.org/TripPinRESTierService/(S(id))/$metadata#People(Age,FirstName,LastName,UserName,Friends,BestFriend,HomeAddress)",
   "value": [
     {
-      "Age": 23,
+      "Age": "23",
       "FirstName": "Angel",
       "LastName": "Huffman",
       "UserName": "angelhuffman",
@@ -22,7 +22,7 @@
       }
     },
     {
-      "Age": 44,
+      "Age": "44",
       "FirstName": "Clyde",
       "LastName": "Guess",
       "UserName": "clydeguess",
@@ -42,7 +42,7 @@
       }
     },
     {
-      "Age": 19,
+      "Age": "19",
       "FirstName": "Elaine",
       "LastName": "Stewart",
       "UserName": "elainestewart",
@@ -62,7 +62,7 @@
       }
     },
     {
-      "Age": 37,
+      "Age": "37",
       "FirstName": "Genevieve",
       "LastName": "Reeves",
       "UserName": "genevievereeves",
@@ -82,7 +82,7 @@
       }
     },
     {
-      "Age": 25,
+      "Age": "25",
       "FirstName": "Georgina",
       "LastName": "Barlow",
       "UserName": "georginabarlow",
@@ -101,7 +101,7 @@
       }
     },
     {
-      "Age": 19,
+      "Age": "19",
       "FirstName": "Javier",
       "LastName": "Alfred",
       "UserName": "javieralfred",
@@ -120,7 +120,7 @@
       }
     },
     {
-      "Age": 26,
+      "Age": "26",
       "FirstName": "Joni",
       "LastName": "Rosales",
       "UserName": "jonirosales",
@@ -140,7 +140,7 @@
       }
     },
     {
-      "Age": 41,
+      "Age": "41",
       "FirstName": "Keith",
       "LastName": "Pinckney",
       "UserName": "keithpinckney",
@@ -160,7 +160,7 @@
       }
     },
     {
-      "Age": 30,
+      "Age": "30",
       "FirstName": "Krista",
       "LastName": "Kemp",
       "UserName": "kristakemp",
@@ -180,7 +180,7 @@
       }
     },
     {
-      "Age": 29,
+      "Age": "29",
       "FirstName": "Laurel",
       "LastName": "Osborn",
       "UserName": "laurelosborn",
@@ -200,7 +200,7 @@
       }
     },
     {
-      "Age": 53,
+      "Age": "53",
       "FirstName": "Marshall",
       "LastName": "Garay",
       "UserName": "marshallgaray",
@@ -219,7 +219,7 @@
       }
     },
     {
-      "Age": 66,
+      "Age": "66",
       "FirstName": "Ronald",
       "LastName": "Mundy",
       "UserName": "ronaldmundy",
@@ -238,7 +238,7 @@
       }
     },
     {
-      "Age": 51,
+      "Age": "51",
       "FirstName": "Russell",
       "LastName": "Whyte",
       "UserName": "russellwhyte",
@@ -258,7 +258,7 @@
       }
     },
     {
-      "Age": 57,
+      "Age": "57",
       "FirstName": "Ryan",
       "LastName": "Theriault",
       "UserName": "ryantheriault",
@@ -278,7 +278,7 @@
       }
     },
     {
-      "Age": 34,
+      "Age": "34",
       "FirstName": "Sallie",
       "LastName": "Sampson",
       "UserName": "salliesampson",
@@ -298,7 +298,7 @@
       }
     },
     {
-      "Age": 18,
+      "Age": "18",
       "FirstName": "Sandy",
       "LastName": "Osborn",
       "UserName": "sandyosborn",
@@ -318,7 +318,7 @@
       }
     },
     {
-      "Age": 24,
+      "Age": "24",
       "FirstName": "Scott",
       "LastName": "Ketchum",
       "UserName": "scottketchum",
@@ -337,7 +337,7 @@
       }
     },
     {
-      "Age": 31,
+      "Age": "31",
       "FirstName": "Ursula",
       "LastName": "Bright",
       "UserName": "ursulabright",
@@ -356,7 +356,7 @@
       }
     },
     {
-      "Age": 40,
+      "Age": "40",
       "FirstName": "Vincent",
       "LastName": "Calabrese",
       "UserName": "vincentcalabrese",
@@ -376,7 +376,7 @@
       }
     },
     {
-      "Age": 45,
+      "Age": "45",
       "FirstName": "Willie",
       "LastName": "Ashmore",
       "UserName": "willieashmore",
diff --git a/packages/odatav4/steps/02/webapp/localService/mockserver.ts b/packages/odatav4/steps/02/webapp/localService/mockserver.ts
index 7ca0307f4..f09c33ed9 100644
--- a/packages/odatav4/steps/02/webapp/localService/mockserver.ts
+++ b/packages/odatav4/steps/02/webapp/localService/mockserver.ts
@@ -35,7 +35,7 @@ let metadata: string; // The string that holds the cached mock service metadata
 const namespace = "ui5/tutorial/odatav4";
 // Component for writing logs into the console
 const logComponent = "ui5.tutorial.odatav4.mockserver";
-const rBaseUrl = /services.odata.org\/TripPinRESTierService/;
+const baseUrl = /services.odata.org\/TripPinRESTierService/;
 
 /**
  * Returns the base URL from a given URL.
@@ -251,19 +251,50 @@ function applySort(xhr: MockXhr, resultSet: MockUser[]): MockUser[] {
  * Does NOT change the given result set but returns a new array.
  */
 function applyFilter(xhr: MockXhr, resultSet: MockUser[]): MockUser[] {
-	let filteredUsers = [...resultSet]; // work with a copy
-	const matches = xhr.url.match(/\$filter=.*\((.*),'(.*)'\)/);
-
-	// If the request contains a filter command, apply the filter
-	if (Array.isArray(matches) && matches.length >= 3) {
-		const fieldName = matches[1];
-		const query = matches[2];
-
-		if (fieldName !== "LastName") {
-			throw new Error("Filters on field " + fieldName + " are not supported.");
+	const filter = new URL(xhr.url).searchParams.get("$filter");
+	let filteredUsers = resultSet.slice(); // work with a copy
+	if (!filter) {
+		return filteredUsers;
+	}
+	// support filters like:
+	// - "contains(LastName,'e')"
+	// - "(contains(LastName,'e')) and not (UserName eq 'a' or UserName eq 'b')"
+	// - "not (UserName eq 'a' or UserName eq 'b')"
+	// - "UserName eq 'foo'"
+	let remainingFilter = filter.startsWith("(") ? filter.slice(1) : filter;
+	if (remainingFilter.startsWith("contains(LastName,'")) { // from search field
+		remainingFilter = remainingFilter.slice(19); // remove "contains(LastName,'"
+		const value = remainingFilter.split("')")[0];
+		filteredUsers = filteredUsers.filter(function (user) {
+			return user.LastName.includes(value);
+		});
+		// remove the rest of "contains" from the filter and the optional following ") and "
+		remainingFilter = remainingFilter.slice(value.length + 2);
+		if (remainingFilter.startsWith(") and ")) {
+			remainingFilter = remainingFilter.slice(6);
 		}
-
-		filteredUsers = users.filter((user) => (user.LastName || "").indexOf(query) !== -1);
+	}
+	if (remainingFilter.startsWith("not (UserName eq ")) { // exclusive filter
+		const end = remainingFilter.indexOf(")");
+		const excludedUsers = remainingFilter.slice(17, end) // remove "not (UserName eq "
+			.split(" or UserName eq ")
+			// after splitting each entry contains the username in single quotes, e.g. "'me'"
+			.map((filterPart) => filterPart.slice(1, -1));
+		filteredUsers = filteredUsers.filter(function (user) {
+			return !excludedUsers.includes(user.UserName);
+		});
+		remainingFilter = remainingFilter.slice(end + 1);
+	}
+	if (remainingFilter.startsWith("UserName eq '")) { // refresh of selected user
+		const end = remainingFilter.indexOf("'", 13);
+		const value = remainingFilter.slice(13, end); // remove "UserName eq '"
+		filteredUsers = filteredUsers.filter(function (user) {
+			return user.LastName.includes(value);
+		});
+		remainingFilter = remainingFilter.slice(end + 1);
+	}
+	if (remainingFilter) {
+		throw new Error(`"${remainingFilter}" of filter "${filter}" is not supported`);
 	}
 
 	return filteredUsers;
@@ -292,7 +323,7 @@ function handleGetCountRequests(): MockResponse {
 /**
  * Handles GET requests for user data and returns a fitting response.
  */
-function handleGetUserRequests(xhr: MockXhr, _bCount: boolean): MockResponse {
+function handleGetUserRequests(xhr: MockXhr, _count: boolean): MockResponse {
 	let count: number;
 	let expand: RegExpMatchArray | string[] | null;
 	let expand2: string;
@@ -381,7 +412,7 @@ function handleGetUserRequests(xhr: MockXhr, _bCount: boolean): MockResponse {
  * Returns a specific user in the aUsers array.
  */
 function getUserByIndex(index: number, properties: string[]): MockUser | null {
-	const helper: MockUser = { UserName: "" };
+	const helper = {} as MockUser;
 	const user = users[index];
 
 	if (user) {
@@ -509,10 +540,16 @@ function handleDeleteUserRequests(xhr: MockXhr): MockResponse {
  * Handles POST requests for users and returns a fitting response.
  */
 function handlePostUserRequests(xhr: MockXhr): MockResponse {
-	const user = getUserDataFromRequestBody(xhr.requestBody || "");
+	let user = getUserDataFromRequestBody(xhr.requestBody || "");
 
 	// Check if that user already exists
 	if (isUnique(user.UserName)) {
+		user = {
+			HomeAddress : null, // prevents drillDown errors
+			LastName : "",
+			FirstName : "",
+			...user
+		};
 		users.push(user);
 
 		let responseBody = '{"@odata.context": "' + getBaseUrl(xhr.url)
@@ -697,8 +734,7 @@ function handleAllRequests(xhr: MockXhr): void {
 		"Mockserver: Received " + xhr.method + " request to URL " + xhr.url,
 		(xhr.requestBody ? "Request body is:\n" + xhr.requestBody : "No request body.")
 		+ "\n",
-		logComponent
-	);
+		logComponent);
 
 	if (xhr.method === "POST" && /\$batch/.test(xhr.url)) {
 		response2 = handleBatchRequest(xhr);
@@ -716,8 +752,7 @@ function handleAllRequests(xhr: MockXhr): void {
 			"Mockserver: Sent response with return code " + response2[0],
 			("Response headers: " + JSON.stringify(response2[1]) + "\n\nResponse body:\n"
 				+ (response2[2] || "")) + "\n",
-			logComponent
-		);
+			logComponent);
 	}
 }
 
@@ -725,7 +760,7 @@ export default {
 
 	/**
 	 * Creates a Sinon fake service, intercepting all http requests to
-	 * the URL defined in variable rBaseUrl above.
+	 * the URL defined in variable baseUrl above.
 	 * @returns a promise that is resolved when the mock server is started
 	 */
 	init(): Promise<unknown> {
@@ -744,16 +779,16 @@ export default {
 					sandbox.server.autoRespond = true;
 
 					// Register the requests for which responses should be faked.
-					sandbox.server.respondWith(rBaseUrl, handleAllRequests);
+					sandbox.server.respondWith(baseUrl, handleAllRequests);
 
 					// Apply a filter to the fake XmlHttpRequest.
 					// Otherwise, ALL requests (e.g. for the component, views etc.) would be
 					// intercepted.
 					sinon.FakeXMLHttpRequest.useFilters = true;
-					sinon.FakeXMLHttpRequest.addFilter((_sMethod: string, url: string) => {
+					sinon.FakeXMLHttpRequest.addFilter((_method: string, url: string) => {
 						// If the filter returns true, the request will NOT be faked.
 						// We only want to fake requests that go to the intended service.
-						return !rBaseUrl.test(url);
+						return !baseUrl.test(url);
 					});
 
 					// Set the logging level for console entries from the mock server
diff --git a/packages/odatav4/steps/03/README.md b/packages/odatav4/steps/03/README.md
index f7b12c34e..409b64ee7 100644
--- a/packages/odatav4/steps/03/README.md
+++ b/packages/odatav4/steps/03/README.md
@@ -24,10 +24,7 @@ You can download the solution for this step here: <span class="ts-only">[📥 Do
   "sap.app": {...
   },
   "sap.ui": {
-    "technology": "UI5",
-    "deviceTypes": {
-
-    }
+    "technology": "UI5"
   },
   "sap.ui5": {
     "rootView": {
@@ -35,10 +32,6 @@ You can download the solution for this step here: <span class="ts-only">[📥 Do
     },
     "dependencies": {
       ...
-      }
-    },
-    "contentDensities": {
-      ...
     },
     "handleValidation": true,
 
@@ -56,7 +49,7 @@ In the `manifest.json` descriptor file, we add the `"handleValidation": true` se
 We now run the app using the `index.html` file and enter values that don't match the type and constraints given in the metadata file. For example, enter the string value `Young at Heart` in field *Age*, which requires an integer input \(OpenUI5 type `sap.ui.model.odata.type.Int64`, corresponding to OData type `Edm.Int64`\), or remove an entry from the *User Name* or *First Name* fields, which are mandatory. Fields with incorrect entries are highlighted and an error message is displayed.
 
 > 📝
-> If you explicitly define a type in the binding info of a control, the automatic type detection for that binding will be turned off. For example, if you change the `Input` for `Age` in the view to `<Input value="{path:'Age', type:'sap.ui.model.type.String'}/>`, the `String` type will be used, not the `Int64` type from the service metadata.
+> If you explicitly define a type in the binding info of a control, the automatic type detection for that binding will be turned off. For example, if you change the `Input` for `Age` in the view to `<Input value="{path:'Age', type:'sap.ui.model.type.String'}"/>`, the `String` type will be used, not the `Int64` type from the service metadata.
 
 ### localService/metadata.xml
 
diff --git a/packages/odatav4/steps/03/webapp/controller/App.controller.ts b/packages/odatav4/steps/03/webapp/controller/App.controller.ts
index c1d4760cc..6bab08fde 100644
--- a/packages/odatav4/steps/03/webapp/controller/App.controller.ts
+++ b/packages/odatav4/steps/03/webapp/controller/App.controller.ts
@@ -6,7 +6,7 @@ import ResourceModel from "sap/ui/model/resource/ResourceModel";
 import ResourceBundle from "sap/base/i18n/ResourceBundle";
 import Component from "sap/ui/core/Component";
 import List from "sap/m/List";
-import type ListBinding from "sap/ui/model/ListBinding";
+import type ODataListBinding from "sap/ui/model/odata/v4/ODataListBinding";
 
 /**
  * @namespace ui5.tutorial.odatav4.controller
@@ -33,7 +33,7 @@ export default class App extends Controller {
 	 * Refresh the data.
 	 */
 	onRefresh(): void {
-		const binding = (this.byId("peopleList") as List).getBinding("items") as unknown as { hasPendingChanges(): boolean; refresh(): void };
+		const binding = (this.byId("peopleList") as List).getBinding("items") as ODataListBinding;
 
 		if (binding.hasPendingChanges()) {
 			MessageBox.error(this._getText("refreshNotPossibleMessage"));
diff --git a/packages/odatav4/steps/03/webapp/index-cdn.html b/packages/odatav4/steps/03/webapp/index-cdn.html
index e4ce80170..d550b4a6f 100644
--- a/packages/odatav4/steps/03/webapp/index-cdn.html
+++ b/packages/odatav4/steps/03/webapp/index-cdn.html
@@ -7,7 +7,6 @@
 	<script
 		id="sap-ui-bootstrap"
 		src="https://sdk.openui5.org/1.148.6/resources/sap-ui-core.js"
-		data-sap-ui-theme="sap_horizon"
 		data-sap-ui-compat-version="edge"
 		data-sap-ui-async="true"
 		data-sap-ui-on-init="module:ui5/tutorial/odatav4/initMockServer"
diff --git a/packages/odatav4/steps/03/webapp/index.html b/packages/odatav4/steps/03/webapp/index.html
index b1e54667d..f1acabd2f 100644
--- a/packages/odatav4/steps/03/webapp/index.html
+++ b/packages/odatav4/steps/03/webapp/index.html
@@ -7,7 +7,6 @@
 	<script
 		id="sap-ui-bootstrap"
 		src="resources/sap-ui-core.js"
-		data-sap-ui-theme="sap_horizon"
 		data-sap-ui-compat-version="edge"
 		data-sap-ui-async="true"
 		data-sap-ui-on-init="module:ui5/tutorial/odatav4/initMockServer"
diff --git a/packages/odatav4/steps/03/webapp/localService/mockdata/people.json b/packages/odatav4/steps/03/webapp/localService/mockdata/people.json
index 758030eaa..ec2491722 100644
--- a/packages/odatav4/steps/03/webapp/localService/mockdata/people.json
+++ b/packages/odatav4/steps/03/webapp/localService/mockdata/people.json
@@ -2,7 +2,7 @@
   "@odata.context": "https://services.odata.org/TripPinRESTierService/(S(id))/$metadata#People(Age,FirstName,LastName,UserName,Friends,BestFriend,HomeAddress)",
   "value": [
     {
-      "Age": 23,
+      "Age": "23",
       "FirstName": "Angel",
       "LastName": "Huffman",
       "UserName": "angelhuffman",
@@ -22,7 +22,7 @@
       }
     },
     {
-      "Age": 44,
+      "Age": "44",
       "FirstName": "Clyde",
       "LastName": "Guess",
       "UserName": "clydeguess",
@@ -42,7 +42,7 @@
       }
     },
     {
-      "Age": 19,
+      "Age": "19",
       "FirstName": "Elaine",
       "LastName": "Stewart",
       "UserName": "elainestewart",
@@ -62,7 +62,7 @@
       }
     },
     {
-      "Age": 37,
+      "Age": "37",
       "FirstName": "Genevieve",
       "LastName": "Reeves",
       "UserName": "genevievereeves",
@@ -82,7 +82,7 @@
       }
     },
     {
-      "Age": 25,
+      "Age": "25",
       "FirstName": "Georgina",
       "LastName": "Barlow",
       "UserName": "georginabarlow",
@@ -101,7 +101,7 @@
       }
     },
     {
-      "Age": 19,
+      "Age": "19",
       "FirstName": "Javier",
       "LastName": "Alfred",
       "UserName": "javieralfred",
@@ -120,7 +120,7 @@
       }
     },
     {
-      "Age": 26,
+      "Age": "26",
       "FirstName": "Joni",
       "LastName": "Rosales",
       "UserName": "jonirosales",
@@ -140,7 +140,7 @@
       }
     },
     {
-      "Age": 41,
+      "Age": "41",
       "FirstName": "Keith",
       "LastName": "Pinckney",
       "UserName": "keithpinckney",
@@ -160,7 +160,7 @@
       }
     },
     {
-      "Age": 30,
+      "Age": "30",
       "FirstName": "Krista",
       "LastName": "Kemp",
       "UserName": "kristakemp",
@@ -180,7 +180,7 @@
       }
     },
     {
-      "Age": 29,
+      "Age": "29",
       "FirstName": "Laurel",
       "LastName": "Osborn",
       "UserName": "laurelosborn",
@@ -200,7 +200,7 @@
       }
     },
     {
-      "Age": 53,
+      "Age": "53",
       "FirstName": "Marshall",
       "LastName": "Garay",
       "UserName": "marshallgaray",
@@ -219,7 +219,7 @@
       }
     },
     {
-      "Age": 66,
+      "Age": "66",
       "FirstName": "Ronald",
       "LastName": "Mundy",
       "UserName": "ronaldmundy",
@@ -238,7 +238,7 @@
       }
     },
     {
-      "Age": 51,
+      "Age": "51",
       "FirstName": "Russell",
       "LastName": "Whyte",
       "UserName": "russellwhyte",
@@ -258,7 +258,7 @@
       }
     },
     {
-      "Age": 57,
+      "Age": "57",
       "FirstName": "Ryan",
       "LastName": "Theriault",
       "UserName": "ryantheriault",
@@ -278,7 +278,7 @@
       }
     },
     {
-      "Age": 34,
+      "Age": "34",
       "FirstName": "Sallie",
       "LastName": "Sampson",
       "UserName": "salliesampson",
@@ -298,7 +298,7 @@
       }
     },
     {
-      "Age": 18,
+      "Age": "18",
       "FirstName": "Sandy",
       "LastName": "Osborn",
       "UserName": "sandyosborn",
@@ -318,7 +318,7 @@
       }
     },
     {
-      "Age": 24,
+      "Age": "24",
       "FirstName": "Scott",
       "LastName": "Ketchum",
       "UserName": "scottketchum",
@@ -337,7 +337,7 @@
       }
     },
     {
-      "Age": 31,
+      "Age": "31",
       "FirstName": "Ursula",
       "LastName": "Bright",
       "UserName": "ursulabright",
@@ -356,7 +356,7 @@
       }
     },
     {
-      "Age": 40,
+      "Age": "40",
       "FirstName": "Vincent",
       "LastName": "Calabrese",
       "UserName": "vincentcalabrese",
@@ -376,7 +376,7 @@
       }
     },
     {
-      "Age": 45,
+      "Age": "45",
       "FirstName": "Willie",
       "LastName": "Ashmore",
       "UserName": "willieashmore",
diff --git a/packages/odatav4/steps/03/webapp/localService/mockserver.ts b/packages/odatav4/steps/03/webapp/localService/mockserver.ts
index 7ca0307f4..f09c33ed9 100644
--- a/packages/odatav4/steps/03/webapp/localService/mockserver.ts
+++ b/packages/odatav4/steps/03/webapp/localService/mockserver.ts
@@ -35,7 +35,7 @@ let metadata: string; // The string that holds the cached mock service metadata
 const namespace = "ui5/tutorial/odatav4";
 // Component for writing logs into the console
 const logComponent = "ui5.tutorial.odatav4.mockserver";
-const rBaseUrl = /services.odata.org\/TripPinRESTierService/;
+const baseUrl = /services.odata.org\/TripPinRESTierService/;
 
 /**
  * Returns the base URL from a given URL.
@@ -251,19 +251,50 @@ function applySort(xhr: MockXhr, resultSet: MockUser[]): MockUser[] {
  * Does NOT change the given result set but returns a new array.
  */
 function applyFilter(xhr: MockXhr, resultSet: MockUser[]): MockUser[] {
-	let filteredUsers = [...resultSet]; // work with a copy
-	const matches = xhr.url.match(/\$filter=.*\((.*),'(.*)'\)/);
-
-	// If the request contains a filter command, apply the filter
-	if (Array.isArray(matches) && matches.length >= 3) {
-		const fieldName = matches[1];
-		const query = matches[2];
-
-		if (fieldName !== "LastName") {
-			throw new Error("Filters on field " + fieldName + " are not supported.");
+	const filter = new URL(xhr.url).searchParams.get("$filter");
+	let filteredUsers = resultSet.slice(); // work with a copy
+	if (!filter) {
+		return filteredUsers;
+	}
+	// support filters like:
+	// - "contains(LastName,'e')"
+	// - "(contains(LastName,'e')) and not (UserName eq 'a' or UserName eq 'b')"
+	// - "not (UserName eq 'a' or UserName eq 'b')"
+	// - "UserName eq 'foo'"
+	let remainingFilter = filter.startsWith("(") ? filter.slice(1) : filter;
+	if (remainingFilter.startsWith("contains(LastName,'")) { // from search field
+		remainingFilter = remainingFilter.slice(19); // remove "contains(LastName,'"
+		const value = remainingFilter.split("')")[0];
+		filteredUsers = filteredUsers.filter(function (user) {
+			return user.LastName.includes(value);
+		});
+		// remove the rest of "contains" from the filter and the optional following ") and "
+		remainingFilter = remainingFilter.slice(value.length + 2);
+		if (remainingFilter.startsWith(") and ")) {
+			remainingFilter = remainingFilter.slice(6);
 		}
-
-		filteredUsers = users.filter((user) => (user.LastName || "").indexOf(query) !== -1);
+	}
+	if (remainingFilter.startsWith("not (UserName eq ")) { // exclusive filter
+		const end = remainingFilter.indexOf(")");
+		const excludedUsers = remainingFilter.slice(17, end) // remove "not (UserName eq "
+			.split(" or UserName eq ")
+			// after splitting each entry contains the username in single quotes, e.g. "'me'"
+			.map((filterPart) => filterPart.slice(1, -1));
+		filteredUsers = filteredUsers.filter(function (user) {
+			return !excludedUsers.includes(user.UserName);
+		});
+		remainingFilter = remainingFilter.slice(end + 1);
+	}
+	if (remainingFilter.startsWith("UserName eq '")) { // refresh of selected user
+		const end = remainingFilter.indexOf("'", 13);
+		const value = remainingFilter.slice(13, end); // remove "UserName eq '"
+		filteredUsers = filteredUsers.filter(function (user) {
+			return user.LastName.includes(value);
+		});
+		remainingFilter = remainingFilter.slice(end + 1);
+	}
+	if (remainingFilter) {
+		throw new Error(`"${remainingFilter}" of filter "${filter}" is not supported`);
 	}
 
 	return filteredUsers;
@@ -292,7 +323,7 @@ function handleGetCountRequests(): MockResponse {
 /**
  * Handles GET requests for user data and returns a fitting response.
  */
-function handleGetUserRequests(xhr: MockXhr, _bCount: boolean): MockResponse {
+function handleGetUserRequests(xhr: MockXhr, _count: boolean): MockResponse {
 	let count: number;
 	let expand: RegExpMatchArray | string[] | null;
 	let expand2: string;
@@ -381,7 +412,7 @@ function handleGetUserRequests(xhr: MockXhr, _bCount: boolean): MockResponse {
  * Returns a specific user in the aUsers array.
  */
 function getUserByIndex(index: number, properties: string[]): MockUser | null {
-	const helper: MockUser = { UserName: "" };
+	const helper = {} as MockUser;
 	const user = users[index];
 
 	if (user) {
@@ -509,10 +540,16 @@ function handleDeleteUserRequests(xhr: MockXhr): MockResponse {
  * Handles POST requests for users and returns a fitting response.
  */
 function handlePostUserRequests(xhr: MockXhr): MockResponse {
-	const user = getUserDataFromRequestBody(xhr.requestBody || "");
+	let user = getUserDataFromRequestBody(xhr.requestBody || "");
 
 	// Check if that user already exists
 	if (isUnique(user.UserName)) {
+		user = {
+			HomeAddress : null, // prevents drillDown errors
+			LastName : "",
+			FirstName : "",
+			...user
+		};
 		users.push(user);
 
 		let responseBody = '{"@odata.context": "' + getBaseUrl(xhr.url)
@@ -697,8 +734,7 @@ function handleAllRequests(xhr: MockXhr): void {
 		"Mockserver: Received " + xhr.method + " request to URL " + xhr.url,
 		(xhr.requestBody ? "Request body is:\n" + xhr.requestBody : "No request body.")
 		+ "\n",
-		logComponent
-	);
+		logComponent);
 
 	if (xhr.method === "POST" && /\$batch/.test(xhr.url)) {
 		response2 = handleBatchRequest(xhr);
@@ -716,8 +752,7 @@ function handleAllRequests(xhr: MockXhr): void {
 			"Mockserver: Sent response with return code " + response2[0],
 			("Response headers: " + JSON.stringify(response2[1]) + "\n\nResponse body:\n"
 				+ (response2[2] || "")) + "\n",
-			logComponent
-		);
+			logComponent);
 	}
 }
 
@@ -725,7 +760,7 @@ export default {
 
 	/**
 	 * Creates a Sinon fake service, intercepting all http requests to
-	 * the URL defined in variable rBaseUrl above.
+	 * the URL defined in variable baseUrl above.
 	 * @returns a promise that is resolved when the mock server is started
 	 */
 	init(): Promise<unknown> {
@@ -744,16 +779,16 @@ export default {
 					sandbox.server.autoRespond = true;
 
 					// Register the requests for which responses should be faked.
-					sandbox.server.respondWith(rBaseUrl, handleAllRequests);
+					sandbox.server.respondWith(baseUrl, handleAllRequests);
 
 					// Apply a filter to the fake XmlHttpRequest.
 					// Otherwise, ALL requests (e.g. for the component, views etc.) would be
 					// intercepted.
 					sinon.FakeXMLHttpRequest.useFilters = true;
-					sinon.FakeXMLHttpRequest.addFilter((_sMethod: string, url: string) => {
+					sinon.FakeXMLHttpRequest.addFilter((_method: string, url: string) => {
 						// If the filter returns true, the request will NOT be faked.
 						// We only want to fake requests that go to the intended service.
-						return !rBaseUrl.test(url);
+						return !baseUrl.test(url);
 					});
 
 					// Set the logging level for console entries from the mock server
diff --git a/packages/odatav4/steps/04/README.md b/packages/odatav4/steps/04/README.md
index 771c488c2..5ec0d2553 100644
--- a/packages/odatav4/steps/04/README.md
+++ b/packages/odatav4/steps/04/README.md
@@ -26,111 +26,134 @@ import Filter from "sap/ui/model/Filter";
 import FilterOperator from "sap/ui/model/FilterOperator";
 import FilterType from "sap/ui/model/FilterType";
 import JSONModel from "sap/ui/model/json/JSONModel";
-
-	return Controller.extend("ui5.tutorial.odatav4.controller.App", {
-
-		onInit() {
-			const oJSONData = {
-				busy : false,
-				order : 0
-			};
-			const oModel = new JSONModel(oJSONData);
-			this.getView().setModel(oModel, "appView");
-		},
-
-		onRefresh() {
-		...
-		},
-
-						onSearch() {
-			const oView = this.getView(),
-				sValue = oView.byId("searchField").getValue(),
-				oFilter = new Filter("LastName", FilterOperator.Contains, sValue);
-
-			oView.byId("peopleList").getBinding("items").filter(oFilter, FilterType.Application);
-		},
-
-		onSort() {
-			const oView = this.getView(),
-				aStates = [undefined, "asc", "desc"],
-				aStateTextIds = ["sortNone", "sortAscending", "sortDescending"],
-				sMessage,
-				iOrder = oView.getModel("appView").getProperty("/order");
-
-			iOrder = (iOrder + 1) % aStates.length;
-			const sOrder = aStates[iOrder];
-
-			oView.getModel("appView").setProperty("/order", iOrder);
-			oView.byId("peopleList").getBinding("items").sort(sOrder && new Sorter("LastName", sOrder === "desc"));
-
-			sMessage = this._getText("sortMessage", [this._getText(aStateTextIds[iOrder])]);
-			MessageToast.show(sMessage);
-			},
-
-		_getText(sTextId, aArgs) {
-		...
-		}
-});
+import ResourceModel from "sap/ui/model/resource/ResourceModel";
+import ResourceBundle from "sap/base/i18n/ResourceBundle";
+import Component from "sap/ui/core/Component";
+import List from "sap/m/List";
+import type SearchField from "sap/m/SearchField";
+import type ListBinding from "sap/ui/model/ListBinding";
+import type ODataListBinding from "sap/ui/model/odata/v4/ODataListBinding";
+
+/**
+ * @namespace ui5.tutorial.odatav4.controller
+ */
+export default class App extends Controller {
+
+	onInit(): void {
+		const jsonData = {
+			busy: false,
+			order: 0
+		};
+		const model = new JSONModel(jsonData);
+
+		this.getView().setModel(model, "appView");
+	}
+
+	onRefresh(): void {
+	...
+	}
+
+	onSearch(): void {
+		const view = this.getView();
+		const value = (view.byId("searchField") as SearchField).getValue();
+		const filter = new Filter("LastName", FilterOperator.Contains, value);
+
+		((view.byId("peopleList") as List).getBinding("items") as ListBinding).filter(filter, FilterType.Application);
+	}
+
+	onSort(): void {
+		const view = this.getView();
+		const states: (string | undefined)[] = [undefined, "asc", "desc"];
+		const stateTextIds = ["sortNone", "sortAscending", "sortDescending"];
+		let order = (view.getModel("appView") as JSONModel).getProperty("/order") as number;
+
+		order = (order + 1) % states.length;
+		const order2 = states[order];
+
+		(view.getModel("appView") as JSONModel).setProperty("/order", order);
+		((view.byId("peopleList") as List).getBinding("items") as ListBinding)
+			.sort(order2 ? new Sorter("LastName", order2 === "desc") : []);
+
+		const message = this._getText("sortMessage", [this._getText(stateTextIds[order])]);
+		MessageToast.show(message);
+	}
+
+	_getText(textId: string, args?: unknown[]): string {
+	...
+	}
+}
 ```
 
 ```js
 // webapp/controller/App.controller.js
-sap.ui.define([
-	"sap/ui/core/mvc/Controller",
-	"sap/m/MessageToast",
-	"sap/m/MessageBox",
-	"sap/ui/model/Sorter",
-	"sap/ui/model/Filter",
-	"sap/ui/model/FilterOperator",
-	"sap/ui/model/FilterType",
-	"sap/ui/model/json/JSONModel"
-], function (Controller, MessageToast, MessageBox, Sorter, Filter, FilterOperator, FilterType, JSONModel) {
-	"use strict";
-
-	return Controller.extend("ui5.tutorial.odatav4.controller.App", {
-
-		onInit : function () {
-			var oJSONData = {
-				busy : false,
-				order : 0
-			};
-			var oModel = new JSONModel(oJSONData);
-			this.getView().setModel(oModel, "appView");
-		},
-
-		onRefresh : function () {
-		...
-		},
-
-						onSearch : function () {
-			var oView = this.getView(),
-				sValue = oView.byId("searchField").getValue(),
-				oFilter = new Filter("LastName", FilterOperator.Contains, sValue);
-
-			oView.byId("peopleList").getBinding("items").filter(oFilter, FilterType.Application);
-		},
-
-		onSort : function () {
-			var oView = this.getView(),
-				aStates = [undefined, "asc", "desc"],
-				aStateTextIds = ["sortNone", "sortAscending", "sortDescending"],
-				sMessage,
-				iOrder = oView.getModel("appView").getProperty("/order");
-
-			iOrder = (iOrder + 1) % aStates.length;
-			var sOrder = aStates[iOrder];
-
-			oView.getModel("appView").setProperty("/order", iOrder);
-			oView.byId("peopleList").getBinding("items").sort(sOrder && new Sorter("LastName", sOrder === "desc"));
-
-			sMessage = this._getText("sortMessage", [this._getText(aStateTextIds[iOrder])]);
-			MessageToast.show(sMessage);
-			},
-
-		_getText : function (sTextId, aArgs) {
-		...
-		}
-	});
+sap.ui.define(["sap/ui/core/mvc/Controller", "sap/m/MessageToast", "sap/m/MessageBox", "sap/ui/model/Sorter", "sap/ui/model/Filter", "sap/ui/model/FilterOperator", "sap/ui/model/FilterType", "sap/ui/model/json/JSONModel"], function (Controller, MessageToast, MessageBox, Sorter, Filter, FilterOperator, FilterType, JSONModel) {
+  "use strict";
+
+  /**
+   * @namespace ui5.tutorial.odatav4.controller
+   */
+  const App = Controller.extend("ui5.tutorial.odatav4.controller.App", {
+    /**
+     *  Hook for initializing the controller
+     */
+    onInit() {
+      const jsonData = {
+        busy: false,
+        order: 0
+      };
+      const model = new JSONModel(jsonData);
+      this.getView().setModel(model, "appView");
+    },
+    /* =========================================================== */
+    /*           begin: event handlers                             */
+    /* =========================================================== */
+    /**
+     * Refresh the data.
+     */
+    onRefresh() {
+    ...
+    },
+    /**
+     * Search for the term in the search field.
+     */
+    onSearch() {
+      const view = this.getView();
+      const value = view.byId("searchField").getValue();
+      const filter = new Filter("LastName", FilterOperator.Contains, value);
+      view.byId("peopleList").getBinding("items").filter(filter, FilterType.Application);
+    },
+    /**
+     * Sort the table according to the last name.
+     * Cycles between the three sorting states "none", "ascending" and "descending"
+     */
+    onSort() {
+      const view = this.getView();
+      const states = [undefined, "asc", "desc"];
+      const stateTextIds = ["sortNone", "sortAscending", "sortDescending"];
+      let order = view.getModel("appView").getProperty("/order");
+
+      // Cycle between the states
+      order = (order + 1) % states.length;
+      const order2 = states[order];
+      view.getModel("appView").setProperty("/order", order);
+      view.byId("peopleList").getBinding("items").sort(order2 ? new Sorter("LastName", order2 === "desc") : []);
+      const message = this._getText("sortMessage", [this._getText(stateTextIds[order])]);
+      MessageToast.show(message);
+    },
+    /* =========================================================== */
+    /*           end: event handlers                               */
+    /* =========================================================== */
+    /**
+     * Convenience method for retrieving a translatable text.
+     * @param sTextId - the ID of the text to be retrieved.
+     * @param aArgs - optional array of texts for placeholders.
+     * @returns the text belonging to the given ID.
+     */
+    _getText(textId, args) {
+    ...
+    }
+  });
+  return App;
 });
 ```
 
@@ -191,7 +214,7 @@ We add the `order` property to variable `oJSONData` in `onInit` method. This pro
                       id="sortUsersButton"
                       icon="sap-icon://sort"
                       tooltip="{i18n>sortButtonText}"
-                      press="onSort"/>
+                      press=".onSort"/>
                   </content>
                 </OverflowToolbar>
               </headerToolbar>
diff --git a/packages/odatav4/steps/04/webapp/controller/App.controller.ts b/packages/odatav4/steps/04/webapp/controller/App.controller.ts
index 460210835..cc391fb3a 100644
--- a/packages/odatav4/steps/04/webapp/controller/App.controller.ts
+++ b/packages/odatav4/steps/04/webapp/controller/App.controller.ts
@@ -12,6 +12,7 @@ import Component from "sap/ui/core/Component";
 import List from "sap/m/List";
 import type SearchField from "sap/m/SearchField";
 import type ListBinding from "sap/ui/model/ListBinding";
+import type ODataListBinding from "sap/ui/model/odata/v4/ODataListBinding";
 
 /**
  * @namespace ui5.tutorial.odatav4.controller
@@ -39,7 +40,7 @@ export default class App extends Controller {
 	 * Refresh the data.
 	 */
 	onRefresh(): void {
-		const binding = (this.byId("peopleList") as List).getBinding("items") as unknown as { hasPendingChanges(): boolean; refresh(): void };
+		const binding = (this.byId("peopleList") as List).getBinding("items") as ODataListBinding;
 
 		if (binding.hasPendingChanges()) {
 			MessageBox.error(this._getText("refreshNotPossibleMessage"));
diff --git a/packages/odatav4/steps/04/webapp/index-cdn.html b/packages/odatav4/steps/04/webapp/index-cdn.html
index e4ce80170..d550b4a6f 100644
--- a/packages/odatav4/steps/04/webapp/index-cdn.html
+++ b/packages/odatav4/steps/04/webapp/index-cdn.html
@@ -7,7 +7,6 @@
 	<script
 		id="sap-ui-bootstrap"
 		src="https://sdk.openui5.org/1.148.6/resources/sap-ui-core.js"
-		data-sap-ui-theme="sap_horizon"
 		data-sap-ui-compat-version="edge"
 		data-sap-ui-async="true"
 		data-sap-ui-on-init="module:ui5/tutorial/odatav4/initMockServer"
diff --git a/packages/odatav4/steps/04/webapp/index.html b/packages/odatav4/steps/04/webapp/index.html
index b1e54667d..f1acabd2f 100644
--- a/packages/odatav4/steps/04/webapp/index.html
+++ b/packages/odatav4/steps/04/webapp/index.html
@@ -7,7 +7,6 @@
 	<script
 		id="sap-ui-bootstrap"
 		src="resources/sap-ui-core.js"
-		data-sap-ui-theme="sap_horizon"
 		data-sap-ui-compat-version="edge"
 		data-sap-ui-async="true"
 		data-sap-ui-on-init="module:ui5/tutorial/odatav4/initMockServer"
diff --git a/packages/odatav4/steps/04/webapp/localService/mockdata/people.json b/packages/odatav4/steps/04/webapp/localService/mockdata/people.json
index 758030eaa..ec2491722 100644
--- a/packages/odatav4/steps/04/webapp/localService/mockdata/people.json
+++ b/packages/odatav4/steps/04/webapp/localService/mockdata/people.json
@@ -2,7 +2,7 @@
   "@odata.context": "https://services.odata.org/TripPinRESTierService/(S(id))/$metadata#People(Age,FirstName,LastName,UserName,Friends,BestFriend,HomeAddress)",
   "value": [
     {
-      "Age": 23,
+      "Age": "23",
       "FirstName": "Angel",
       "LastName": "Huffman",
       "UserName": "angelhuffman",
@@ -22,7 +22,7 @@
       }
     },
     {
-      "Age": 44,
+      "Age": "44",
       "FirstName": "Clyde",
       "LastName": "Guess",
       "UserName": "clydeguess",
@@ -42,7 +42,7 @@
       }
     },
     {
-      "Age": 19,
+      "Age": "19",
       "FirstName": "Elaine",
       "LastName": "Stewart",
       "UserName": "elainestewart",
@@ -62,7 +62,7 @@
       }
     },
     {
-      "Age": 37,
+      "Age": "37",
       "FirstName": "Genevieve",
       "LastName": "Reeves",
       "UserName": "genevievereeves",
@@ -82,7 +82,7 @@
       }
     },
     {
-      "Age": 25,
+      "Age": "25",
       "FirstName": "Georgina",
       "LastName": "Barlow",
       "UserName": "georginabarlow",
@@ -101,7 +101,7 @@
       }
     },
     {
-      "Age": 19,
+      "Age": "19",
       "FirstName": "Javier",
       "LastName": "Alfred",
       "UserName": "javieralfred",
@@ -120,7 +120,7 @@
       }
     },
     {
-      "Age": 26,
+      "Age": "26",
       "FirstName": "Joni",
       "LastName": "Rosales",
       "UserName": "jonirosales",
@@ -140,7 +140,7 @@
       }
     },
     {
-      "Age": 41,
+      "Age": "41",
       "FirstName": "Keith",
       "LastName": "Pinckney",
       "UserName": "keithpinckney",
@@ -160,7 +160,7 @@
       }
     },
     {
-      "Age": 30,
+      "Age": "30",
       "FirstName": "Krista",
       "LastName": "Kemp",
       "UserName": "kristakemp",
@@ -180,7 +180,7 @@
       }
     },
     {
-      "Age": 29,
+      "Age": "29",
       "FirstName": "Laurel",
       "LastName": "Osborn",
       "UserName": "laurelosborn",
@@ -200,7 +200,7 @@
       }
     },
     {
-      "Age": 53,
+      "Age": "53",
       "FirstName": "Marshall",
       "LastName": "Garay",
       "UserName": "marshallgaray",
@@ -219,7 +219,7 @@
       }
     },
     {
-      "Age": 66,
+      "Age": "66",
       "FirstName": "Ronald",
       "LastName": "Mundy",
       "UserName": "ronaldmundy",
@@ -238,7 +238,7 @@
       }
     },
     {
-      "Age": 51,
+      "Age": "51",
       "FirstName": "Russell",
       "LastName": "Whyte",
       "UserName": "russellwhyte",
@@ -258,7 +258,7 @@
       }
     },
     {
-      "Age": 57,
+      "Age": "57",
       "FirstName": "Ryan",
       "LastName": "Theriault",
       "UserName": "ryantheriault",
@@ -278,7 +278,7 @@
       }
     },
     {
-      "Age": 34,
+      "Age": "34",
       "FirstName": "Sallie",
       "LastName": "Sampson",
       "UserName": "salliesampson",
@@ -298,7 +298,7 @@
       }
     },
     {
-      "Age": 18,
+      "Age": "18",
       "FirstName": "Sandy",
       "LastName": "Osborn",
       "UserName": "sandyosborn",
@@ -318,7 +318,7 @@
       }
     },
     {
-      "Age": 24,
+      "Age": "24",
       "FirstName": "Scott",
       "LastName": "Ketchum",
       "UserName": "scottketchum",
@@ -337,7 +337,7 @@
       }
     },
     {
-      "Age": 31,
+      "Age": "31",
       "FirstName": "Ursula",
       "LastName": "Bright",
       "UserName": "ursulabright",
@@ -356,7 +356,7 @@
       }
     },
     {
-      "Age": 40,
+      "Age": "40",
       "FirstName": "Vincent",
       "LastName": "Calabrese",
       "UserName": "vincentcalabrese",
@@ -376,7 +376,7 @@
       }
     },
     {
-      "Age": 45,
+      "Age": "45",
       "FirstName": "Willie",
       "LastName": "Ashmore",
       "UserName": "willieashmore",
diff --git a/packages/odatav4/steps/04/webapp/localService/mockserver.ts b/packages/odatav4/steps/04/webapp/localService/mockserver.ts
index 7ca0307f4..f09c33ed9 100644
--- a/packages/odatav4/steps/04/webapp/localService/mockserver.ts
+++ b/packages/odatav4/steps/04/webapp/localService/mockserver.ts
@@ -35,7 +35,7 @@ let metadata: string; // The string that holds the cached mock service metadata
 const namespace = "ui5/tutorial/odatav4";
 // Component for writing logs into the console
 const logComponent = "ui5.tutorial.odatav4.mockserver";
-const rBaseUrl = /services.odata.org\/TripPinRESTierService/;
+const baseUrl = /services.odata.org\/TripPinRESTierService/;
 
 /**
  * Returns the base URL from a given URL.
@@ -251,19 +251,50 @@ function applySort(xhr: MockXhr, resultSet: MockUser[]): MockUser[] {
  * Does NOT change the given result set but returns a new array.
  */
 function applyFilter(xhr: MockXhr, resultSet: MockUser[]): MockUser[] {
-	let filteredUsers = [...resultSet]; // work with a copy
-	const matches = xhr.url.match(/\$filter=.*\((.*),'(.*)'\)/);
-
-	// If the request contains a filter command, apply the filter
-	if (Array.isArray(matches) && matches.length >= 3) {
-		const fieldName = matches[1];
-		const query = matches[2];
-
-		if (fieldName !== "LastName") {
-			throw new Error("Filters on field " + fieldName + " are not supported.");
+	const filter = new URL(xhr.url).searchParams.get("$filter");
+	let filteredUsers = resultSet.slice(); // work with a copy
+	if (!filter) {
+		return filteredUsers;
+	}
+	// support filters like:
+	// - "contains(LastName,'e')"
+	// - "(contains(LastName,'e')) and not (UserName eq 'a' or UserName eq 'b')"
+	// - "not (UserName eq 'a' or UserName eq 'b')"
+	// - "UserName eq 'foo'"
+	let remainingFilter = filter.startsWith("(") ? filter.slice(1) : filter;
+	if (remainingFilter.startsWith("contains(LastName,'")) { // from search field
+		remainingFilter = remainingFilter.slice(19); // remove "contains(LastName,'"
+		const value = remainingFilter.split("')")[0];
+		filteredUsers = filteredUsers.filter(function (user) {
+			return user.LastName.includes(value);
+		});
+		// remove the rest of "contains" from the filter and the optional following ") and "
+		remainingFilter = remainingFilter.slice(value.length + 2);
+		if (remainingFilter.startsWith(") and ")) {
+			remainingFilter = remainingFilter.slice(6);
 		}
-
-		filteredUsers = users.filter((user) => (user.LastName || "").indexOf(query) !== -1);
+	}
+	if (remainingFilter.startsWith("not (UserName eq ")) { // exclusive filter
+		const end = remainingFilter.indexOf(")");
+		const excludedUsers = remainingFilter.slice(17, end) // remove "not (UserName eq "
+			.split(" or UserName eq ")
+			// after splitting each entry contains the username in single quotes, e.g. "'me'"
+			.map((filterPart) => filterPart.slice(1, -1));
+		filteredUsers = filteredUsers.filter(function (user) {
+			return !excludedUsers.includes(user.UserName);
+		});
+		remainingFilter = remainingFilter.slice(end + 1);
+	}
+	if (remainingFilter.startsWith("UserName eq '")) { // refresh of selected user
+		const end = remainingFilter.indexOf("'", 13);
+		const value = remainingFilter.slice(13, end); // remove "UserName eq '"
+		filteredUsers = filteredUsers.filter(function (user) {
+			return user.LastName.includes(value);
+		});
+		remainingFilter = remainingFilter.slice(end + 1);
+	}
+	if (remainingFilter) {
+		throw new Error(`"${remainingFilter}" of filter "${filter}" is not supported`);
 	}
 
 	return filteredUsers;
@@ -292,7 +323,7 @@ function handleGetCountRequests(): MockResponse {
 /**
  * Handles GET requests for user data and returns a fitting response.
  */
-function handleGetUserRequests(xhr: MockXhr, _bCount: boolean): MockResponse {
+function handleGetUserRequests(xhr: MockXhr, _count: boolean): MockResponse {
 	let count: number;
 	let expand: RegExpMatchArray | string[] | null;
 	let expand2: string;
@@ -381,7 +412,7 @@ function handleGetUserRequests(xhr: MockXhr, _bCount: boolean): MockResponse {
  * Returns a specific user in the aUsers array.
  */
 function getUserByIndex(index: number, properties: string[]): MockUser | null {
-	const helper: MockUser = { UserName: "" };
+	const helper = {} as MockUser;
 	const user = users[index];
 
 	if (user) {
@@ -509,10 +540,16 @@ function handleDeleteUserRequests(xhr: MockXhr): MockResponse {
  * Handles POST requests for users and returns a fitting response.
  */
 function handlePostUserRequests(xhr: MockXhr): MockResponse {
-	const user = getUserDataFromRequestBody(xhr.requestBody || "");
+	let user = getUserDataFromRequestBody(xhr.requestBody || "");
 
 	// Check if that user already exists
 	if (isUnique(user.UserName)) {
+		user = {
+			HomeAddress : null, // prevents drillDown errors
+			LastName : "",
+			FirstName : "",
+			...user
+		};
 		users.push(user);
 
 		let responseBody = '{"@odata.context": "' + getBaseUrl(xhr.url)
@@ -697,8 +734,7 @@ function handleAllRequests(xhr: MockXhr): void {
 		"Mockserver: Received " + xhr.method + " request to URL " + xhr.url,
 		(xhr.requestBody ? "Request body is:\n" + xhr.requestBody : "No request body.")
 		+ "\n",
-		logComponent
-	);
+		logComponent);
 
 	if (xhr.method === "POST" && /\$batch/.test(xhr.url)) {
 		response2 = handleBatchRequest(xhr);
@@ -716,8 +752,7 @@ function handleAllRequests(xhr: MockXhr): void {
 			"Mockserver: Sent response with return code " + response2[0],
 			("Response headers: " + JSON.stringify(response2[1]) + "\n\nResponse body:\n"
 				+ (response2[2] || "")) + "\n",
-			logComponent
-		);
+			logComponent);
 	}
 }
 
@@ -725,7 +760,7 @@ export default {
 
 	/**
 	 * Creates a Sinon fake service, intercepting all http requests to
-	 * the URL defined in variable rBaseUrl above.
+	 * the URL defined in variable baseUrl above.
 	 * @returns a promise that is resolved when the mock server is started
 	 */
 	init(): Promise<unknown> {
@@ -744,16 +779,16 @@ export default {
 					sandbox.server.autoRespond = true;
 
 					// Register the requests for which responses should be faked.
-					sandbox.server.respondWith(rBaseUrl, handleAllRequests);
+					sandbox.server.respondWith(baseUrl, handleAllRequests);
 
 					// Apply a filter to the fake XmlHttpRequest.
 					// Otherwise, ALL requests (e.g. for the component, views etc.) would be
 					// intercepted.
 					sinon.FakeXMLHttpRequest.useFilters = true;
-					sinon.FakeXMLHttpRequest.addFilter((_sMethod: string, url: string) => {
+					sinon.FakeXMLHttpRequest.addFilter((_method: string, url: string) => {
 						// If the filter returns true, the request will NOT be faked.
 						// We only want to fake requests that go to the intended service.
-						return !rBaseUrl.test(url);
+						return !baseUrl.test(url);
 					});
 
 					// Set the logging level for console entries from the mock server
diff --git a/packages/odatav4/steps/04/webapp/view/App.view.xml b/packages/odatav4/steps/04/webapp/view/App.view.xml
index 0b17eb4db..ad1d7ba93 100644
--- a/packages/odatav4/steps/04/webapp/view/App.view.xml
+++ b/packages/odatav4/steps/04/webapp/view/App.view.xml
@@ -34,9 +34,9 @@
                       press=".onRefresh"/>
                     <Button
                       id="sortUsersButton"
-                      press="onSort"
+                      icon="sap-icon://sort"
                       tooltip="{i18n>sortButtonText}"
-                      icon="sap-icon://sort"/>
+                      press=".onSort"/>
                   </content>
                 </OverflowToolbar>
               </headerToolbar>
diff --git a/packages/odatav4/steps/05/README.md b/packages/odatav4/steps/05/README.md
index 6c73a57c8..f7ec422f7 100644
--- a/packages/odatav4/steps/05/README.md
+++ b/packages/odatav4/steps/05/README.md
@@ -18,17 +18,19 @@ You can download the solution for this step here: <span class="ts-only">[📥 Do
 
 ```json
 ...
-        "": {
+      "": {
         "dataSource": "default",
+        "preload": true,
         "settings": {
           "autoExpandSelect": true,
-          "operationMode": "Server",
-          "groupId": "$auto"
+          "earlyRequests": true,
+          "operationMode": "Server"
         }
+      }
 ...
 ```
 
-In the previous steps, batch processing was turned off, so that we could monitor the network traffic between our app and the service more easily. Now we turn on batch processing by changing the `groupID` to `$auto`. You can also just remove the line from the code as this is the default.
+In the previous steps, batch processing was turned off, so that we could monitor the network traffic between our app and the service more easily. Now we turn on batch processing by changing the `groupId` to `$auto`. You can also just remove the line from the code as this is the default.
 
 We now run the app and open the browser developer tools. On the *Console* tab, we clear all messages and choose the *Refresh* button.
 
diff --git a/packages/odatav4/steps/05/webapp/controller/App.controller.ts b/packages/odatav4/steps/05/webapp/controller/App.controller.ts
index 460210835..cc391fb3a 100644
--- a/packages/odatav4/steps/05/webapp/controller/App.controller.ts
+++ b/packages/odatav4/steps/05/webapp/controller/App.controller.ts
@@ -12,6 +12,7 @@ import Component from "sap/ui/core/Component";
 import List from "sap/m/List";
 import type SearchField from "sap/m/SearchField";
 import type ListBinding from "sap/ui/model/ListBinding";
+import type ODataListBinding from "sap/ui/model/odata/v4/ODataListBinding";
 
 /**
  * @namespace ui5.tutorial.odatav4.controller
@@ -39,7 +40,7 @@ export default class App extends Controller {
 	 * Refresh the data.
 	 */
 	onRefresh(): void {
-		const binding = (this.byId("peopleList") as List).getBinding("items") as unknown as { hasPendingChanges(): boolean; refresh(): void };
+		const binding = (this.byId("peopleList") as List).getBinding("items") as ODataListBinding;
 
 		if (binding.hasPendingChanges()) {
 			MessageBox.error(this._getText("refreshNotPossibleMessage"));
diff --git a/packages/odatav4/steps/05/webapp/index-cdn.html b/packages/odatav4/steps/05/webapp/index-cdn.html
index e4ce80170..d550b4a6f 100644
--- a/packages/odatav4/steps/05/webapp/index-cdn.html
+++ b/packages/odatav4/steps/05/webapp/index-cdn.html
@@ -7,7 +7,6 @@
 	<script
 		id="sap-ui-bootstrap"
 		src="https://sdk.openui5.org/1.148.6/resources/sap-ui-core.js"
-		data-sap-ui-theme="sap_horizon"
 		data-sap-ui-compat-version="edge"
 		data-sap-ui-async="true"
 		data-sap-ui-on-init="module:ui5/tutorial/odatav4/initMockServer"
diff --git a/packages/odatav4/steps/05/webapp/index.html b/packages/odatav4/steps/05/webapp/index.html
index b1e54667d..f1acabd2f 100644
--- a/packages/odatav4/steps/05/webapp/index.html
+++ b/packages/odatav4/steps/05/webapp/index.html
@@ -7,7 +7,6 @@
 	<script
 		id="sap-ui-bootstrap"
 		src="resources/sap-ui-core.js"
-		data-sap-ui-theme="sap_horizon"
 		data-sap-ui-compat-version="edge"
 		data-sap-ui-async="true"
 		data-sap-ui-on-init="module:ui5/tutorial/odatav4/initMockServer"
diff --git a/packages/odatav4/steps/05/webapp/localService/mockdata/people.json b/packages/odatav4/steps/05/webapp/localService/mockdata/people.json
index 758030eaa..ec2491722 100644
--- a/packages/odatav4/steps/05/webapp/localService/mockdata/people.json
+++ b/packages/odatav4/steps/05/webapp/localService/mockdata/people.json
@@ -2,7 +2,7 @@
   "@odata.context": "https://services.odata.org/TripPinRESTierService/(S(id))/$metadata#People(Age,FirstName,LastName,UserName,Friends,BestFriend,HomeAddress)",
   "value": [
     {
-      "Age": 23,
+      "Age": "23",
       "FirstName": "Angel",
       "LastName": "Huffman",
       "UserName": "angelhuffman",
@@ -22,7 +22,7 @@
       }
     },
     {
-      "Age": 44,
+      "Age": "44",
       "FirstName": "Clyde",
       "LastName": "Guess",
       "UserName": "clydeguess",
@@ -42,7 +42,7 @@
       }
     },
     {
-      "Age": 19,
+      "Age": "19",
       "FirstName": "Elaine",
       "LastName": "Stewart",
       "UserName": "elainestewart",
@@ -62,7 +62,7 @@
       }
     },
     {
-      "Age": 37,
+      "Age": "37",
       "FirstName": "Genevieve",
       "LastName": "Reeves",
       "UserName": "genevievereeves",
@@ -82,7 +82,7 @@
       }
     },
     {
-      "Age": 25,
+      "Age": "25",
       "FirstName": "Georgina",
       "LastName": "Barlow",
       "UserName": "georginabarlow",
@@ -101,7 +101,7 @@
       }
     },
     {
-      "Age": 19,
+      "Age": "19",
       "FirstName": "Javier",
       "LastName": "Alfred",
       "UserName": "javieralfred",
@@ -120,7 +120,7 @@
       }
     },
     {
-      "Age": 26,
+      "Age": "26",
       "FirstName": "Joni",
       "LastName": "Rosales",
       "UserName": "jonirosales",
@@ -140,7 +140,7 @@
       }
     },
     {
-      "Age": 41,
+      "Age": "41",
       "FirstName": "Keith",
       "LastName": "Pinckney",
       "UserName": "keithpinckney",
@@ -160,7 +160,7 @@
       }
     },
     {
-      "Age": 30,
+      "Age": "30",
       "FirstName": "Krista",
       "LastName": "Kemp",
       "UserName": "kristakemp",
@@ -180,7 +180,7 @@
       }
     },
     {
-      "Age": 29,
+      "Age": "29",
       "FirstName": "Laurel",
       "LastName": "Osborn",
       "UserName": "laurelosborn",
@@ -200,7 +200,7 @@
       }
     },
     {
-      "Age": 53,
+      "Age": "53",
       "FirstName": "Marshall",
       "LastName": "Garay",
       "UserName": "marshallgaray",
@@ -219,7 +219,7 @@
       }
     },
     {
-      "Age": 66,
+      "Age": "66",
       "FirstName": "Ronald",
       "LastName": "Mundy",
       "UserName": "ronaldmundy",
@@ -238,7 +238,7 @@
       }
     },
     {
-      "Age": 51,
+      "Age": "51",
       "FirstName": "Russell",
       "LastName": "Whyte",
       "UserName": "russellwhyte",
@@ -258,7 +258,7 @@
       }
     },
     {
-      "Age": 57,
+      "Age": "57",
       "FirstName": "Ryan",
       "LastName": "Theriault",
       "UserName": "ryantheriault",
@@ -278,7 +278,7 @@
       }
     },
     {
-      "Age": 34,
+      "Age": "34",
       "FirstName": "Sallie",
       "LastName": "Sampson",
       "UserName": "salliesampson",
@@ -298,7 +298,7 @@
       }
     },
     {
-      "Age": 18,
+      "Age": "18",
       "FirstName": "Sandy",
       "LastName": "Osborn",
       "UserName": "sandyosborn",
@@ -318,7 +318,7 @@
       }
     },
     {
-      "Age": 24,
+      "Age": "24",
       "FirstName": "Scott",
       "LastName": "Ketchum",
       "UserName": "scottketchum",
@@ -337,7 +337,7 @@
       }
     },
     {
-      "Age": 31,
+      "Age": "31",
       "FirstName": "Ursula",
       "LastName": "Bright",
       "UserName": "ursulabright",
@@ -356,7 +356,7 @@
       }
     },
     {
-      "Age": 40,
+      "Age": "40",
       "FirstName": "Vincent",
       "LastName": "Calabrese",
       "UserName": "vincentcalabrese",
@@ -376,7 +376,7 @@
       }
     },
     {
-      "Age": 45,
+      "Age": "45",
       "FirstName": "Willie",
       "LastName": "Ashmore",
       "UserName": "willieashmore",
diff --git a/packages/odatav4/steps/05/webapp/localService/mockserver.ts b/packages/odatav4/steps/05/webapp/localService/mockserver.ts
index 7ca0307f4..f09c33ed9 100644
--- a/packages/odatav4/steps/05/webapp/localService/mockserver.ts
+++ b/packages/odatav4/steps/05/webapp/localService/mockserver.ts
@@ -35,7 +35,7 @@ let metadata: string; // The string that holds the cached mock service metadata
 const namespace = "ui5/tutorial/odatav4";
 // Component for writing logs into the console
 const logComponent = "ui5.tutorial.odatav4.mockserver";
-const rBaseUrl = /services.odata.org\/TripPinRESTierService/;
+const baseUrl = /services.odata.org\/TripPinRESTierService/;
 
 /**
  * Returns the base URL from a given URL.
@@ -251,19 +251,50 @@ function applySort(xhr: MockXhr, resultSet: MockUser[]): MockUser[] {
  * Does NOT change the given result set but returns a new array.
  */
 function applyFilter(xhr: MockXhr, resultSet: MockUser[]): MockUser[] {
-	let filteredUsers = [...resultSet]; // work with a copy
-	const matches = xhr.url.match(/\$filter=.*\((.*),'(.*)'\)/);
-
-	// If the request contains a filter command, apply the filter
-	if (Array.isArray(matches) && matches.length >= 3) {
-		const fieldName = matches[1];
-		const query = matches[2];
-
-		if (fieldName !== "LastName") {
-			throw new Error("Filters on field " + fieldName + " are not supported.");
+	const filter = new URL(xhr.url).searchParams.get("$filter");
+	let filteredUsers = resultSet.slice(); // work with a copy
+	if (!filter) {
+		return filteredUsers;
+	}
+	// support filters like:
+	// - "contains(LastName,'e')"
+	// - "(contains(LastName,'e')) and not (UserName eq 'a' or UserName eq 'b')"
+	// - "not (UserName eq 'a' or UserName eq 'b')"
+	// - "UserName eq 'foo'"
+	let remainingFilter = filter.startsWith("(") ? filter.slice(1) : filter;
+	if (remainingFilter.startsWith("contains(LastName,'")) { // from search field
+		remainingFilter = remainingFilter.slice(19); // remove "contains(LastName,'"
+		const value = remainingFilter.split("')")[0];
+		filteredUsers = filteredUsers.filter(function (user) {
+			return user.LastName.includes(value);
+		});
+		// remove the rest of "contains" from the filter and the optional following ") and "
+		remainingFilter = remainingFilter.slice(value.length + 2);
+		if (remainingFilter.startsWith(") and ")) {
+			remainingFilter = remainingFilter.slice(6);
 		}
-
-		filteredUsers = users.filter((user) => (user.LastName || "").indexOf(query) !== -1);
+	}
+	if (remainingFilter.startsWith("not (UserName eq ")) { // exclusive filter
+		const end = remainingFilter.indexOf(")");
+		const excludedUsers = remainingFilter.slice(17, end) // remove "not (UserName eq "
+			.split(" or UserName eq ")
+			// after splitting each entry contains the username in single quotes, e.g. "'me'"
+			.map((filterPart) => filterPart.slice(1, -1));
+		filteredUsers = filteredUsers.filter(function (user) {
+			return !excludedUsers.includes(user.UserName);
+		});
+		remainingFilter = remainingFilter.slice(end + 1);
+	}
+	if (remainingFilter.startsWith("UserName eq '")) { // refresh of selected user
+		const end = remainingFilter.indexOf("'", 13);
+		const value = remainingFilter.slice(13, end); // remove "UserName eq '"
+		filteredUsers = filteredUsers.filter(function (user) {
+			return user.LastName.includes(value);
+		});
+		remainingFilter = remainingFilter.slice(end + 1);
+	}
+	if (remainingFilter) {
+		throw new Error(`"${remainingFilter}" of filter "${filter}" is not supported`);
 	}
 
 	return filteredUsers;
@@ -292,7 +323,7 @@ function handleGetCountRequests(): MockResponse {
 /**
  * Handles GET requests for user data and returns a fitting response.
  */
-function handleGetUserRequests(xhr: MockXhr, _bCount: boolean): MockResponse {
+function handleGetUserRequests(xhr: MockXhr, _count: boolean): MockResponse {
 	let count: number;
 	let expand: RegExpMatchArray | string[] | null;
 	let expand2: string;
@@ -381,7 +412,7 @@ function handleGetUserRequests(xhr: MockXhr, _bCount: boolean): MockResponse {
  * Returns a specific user in the aUsers array.
  */
 function getUserByIndex(index: number, properties: string[]): MockUser | null {
-	const helper: MockUser = { UserName: "" };
+	const helper = {} as MockUser;
 	const user = users[index];
 
 	if (user) {
@@ -509,10 +540,16 @@ function handleDeleteUserRequests(xhr: MockXhr): MockResponse {
  * Handles POST requests for users and returns a fitting response.
  */
 function handlePostUserRequests(xhr: MockXhr): MockResponse {
-	const user = getUserDataFromRequestBody(xhr.requestBody || "");
+	let user = getUserDataFromRequestBody(xhr.requestBody || "");
 
 	// Check if that user already exists
 	if (isUnique(user.UserName)) {
+		user = {
+			HomeAddress : null, // prevents drillDown errors
+			LastName : "",
+			FirstName : "",
+			...user
+		};
 		users.push(user);
 
 		let responseBody = '{"@odata.context": "' + getBaseUrl(xhr.url)
@@ -697,8 +734,7 @@ function handleAllRequests(xhr: MockXhr): void {
 		"Mockserver: Received " + xhr.method + " request to URL " + xhr.url,
 		(xhr.requestBody ? "Request body is:\n" + xhr.requestBody : "No request body.")
 		+ "\n",
-		logComponent
-	);
+		logComponent);
 
 	if (xhr.method === "POST" && /\$batch/.test(xhr.url)) {
 		response2 = handleBatchRequest(xhr);
@@ -716,8 +752,7 @@ function handleAllRequests(xhr: MockXhr): void {
 			"Mockserver: Sent response with return code " + response2[0],
 			("Response headers: " + JSON.stringify(response2[1]) + "\n\nResponse body:\n"
 				+ (response2[2] || "")) + "\n",
-			logComponent
-		);
+			logComponent);
 	}
 }
 
@@ -725,7 +760,7 @@ export default {
 
 	/**
 	 * Creates a Sinon fake service, intercepting all http requests to
-	 * the URL defined in variable rBaseUrl above.
+	 * the URL defined in variable baseUrl above.
 	 * @returns a promise that is resolved when the mock server is started
 	 */
 	init(): Promise<unknown> {
@@ -744,16 +779,16 @@ export default {
 					sandbox.server.autoRespond = true;
 
 					// Register the requests for which responses should be faked.
-					sandbox.server.respondWith(rBaseUrl, handleAllRequests);
+					sandbox.server.respondWith(baseUrl, handleAllRequests);
 
 					// Apply a filter to the fake XmlHttpRequest.
 					// Otherwise, ALL requests (e.g. for the component, views etc.) would be
 					// intercepted.
 					sinon.FakeXMLHttpRequest.useFilters = true;
-					sinon.FakeXMLHttpRequest.addFilter((_sMethod: string, url: string) => {
+					sinon.FakeXMLHttpRequest.addFilter((_method: string, url: string) => {
 						// If the filter returns true, the request will NOT be faked.
 						// We only want to fake requests that go to the intended service.
-						return !rBaseUrl.test(url);
+						return !baseUrl.test(url);
 					});
 
 					// Set the logging level for console entries from the mock server
diff --git a/packages/odatav4/steps/05/webapp/view/App.view.xml b/packages/odatav4/steps/05/webapp/view/App.view.xml
index 0b17eb4db..ad1d7ba93 100644
--- a/packages/odatav4/steps/05/webapp/view/App.view.xml
+++ b/packages/odatav4/steps/05/webapp/view/App.view.xml
@@ -34,9 +34,9 @@
                       press=".onRefresh"/>
                     <Button
                       id="sortUsersButton"
-                      press="onSort"
+                      icon="sap-icon://sort"
                       tooltip="{i18n>sortButtonText}"
-                      icon="sap-icon://sort"/>
+                      press=".onSort"/>
                   </content>
                 </OverflowToolbar>
               </headerToolbar>
diff --git a/packages/odatav4/steps/06/README.md b/packages/odatav4/steps/06/README.md
index 1911733e1..1668b412b 100644
--- a/packages/odatav4/steps/06/README.md
+++ b/packages/odatav4/steps/06/README.md
@@ -19,20 +19,21 @@ You can download the solution for this step here: <span class="ts-only">[📥 Do
 ```ts
 // webapp/controller/App.controller.ts
 ...
-		onInit() {
-			const oMessageManager = sap.ui.getCore().getMessageManager(),
-				oMessageModel = oMessageManager.getMessageModel(),
-				oMessageModelBinding = oMessageModel.bindList("/", undefined, [],
-					new Filter("technical", FilterOperator.EQ, true)),
-				oViewModel = new JSONModel({
-					busy : false,
-					hasUIChanges : false,
-					usernameEmpty : true,
-					order : 0
-			this.getView().setModel(oViewModel, "appView");
-			this.getView().setModel(oMessageModel, "message");
-
-			oMessageModelBinding.attachChange(this.onMessageBindingChange, this);
+		onInit(): void {
+			const messageModel = Messaging.getMessageModel();
+			const messageModelBinding = messageModel.bindList("/", undefined, [],
+				new Filter("technical", FilterOperator.EQ, true));
+			const viewModel = new JSONModel({
+				busy: false,
+				hasUIChanges: false,
+				usernameEmpty: true,
+				order: 0
+			});
+
+			this.getView().setModel(viewModel, "appView");
+			this.getView().setModel(messageModel, "message");
+
+			messageModelBinding.attachChange(this.onMessageBindingChange, this);
 			this._bTechnicalErrors = false;
 },
 ...
@@ -41,23 +42,20 @@ You can download the solution for this step here: <span class="ts-only">[📥 Do
 ```js
 // webapp/controller/App.controller.js
 ...
-		onInit : function () {
-			var oMessageManager = sap.ui.getCore().getMessageManager(),
-				oMessageModel = oMessageManager.getMessageModel(),
-				oMessageModelBinding = oMessageModel.bindList("/", undefined, [],
-					new Filter("technical", FilterOperator.EQ, true)),
-				oViewModel = new JSONModel({
-					busy : false,
-					hasUIChanges : false,
-					usernameEmpty : true,
-					order : 0
-				});
-			this.getView().setModel(oViewModel, "appView");
-			this.getView().setModel(oMessageModel, "message");
-
-			oMessageModelBinding.attachChange(this.onMessageBindingChange, this);
-			this._bTechnicalErrors = false;
-},
+    onInit() {
+      const messageModel = Messaging.getMessageModel();
+      const messageModelBinding = messageModel.bindList("/", undefined, [], new Filter("technical", FilterOperator.EQ, true));
+      const viewModel = new JSONModel({
+        busy: false,
+        hasUIChanges: false,
+        usernameEmpty: true,
+        order: 0
+      });
+      this.getView().setModel(viewModel, "appView");
+      this.getView().setModel(messageModel, "message");
+      messageModelBinding.attachChange(this.onMessageBindingChange, this);
+      this._bTechnicalErrors = false;
+    },
 ...
 ```
 
@@ -73,15 +71,15 @@ We change the `onInit` method: The `appView` model receives two additional prope
 			...
 		},
 
-		_setUIChanges(bHasUIChanges) {
+		_setUIChanges(hasUIChanges?: boolean): void {
 			if (this._bTechnicalErrors) {
 				// If there is currently a technical error, then force 'true'.
-				bHasUIChanges = true;
-			} else if (bHasUIChanges === undefined) {
-				bHasUIChanges = this.getView().getModel().hasPendingChanges();
+				hasUIChanges = true;
+			} else if (hasUIChanges === undefined) {
+				hasUIChanges = (this.getView().getModel() as ODataModel).hasPendingChanges();
 			}
-			const oModel = this.getView().getModel("appView");
-			oModel.setProperty("/hasUIChanges", bHasUIChanges);
+			const model = this.getView().getModel("appView") as JSONModel;
+			model.setProperty("/hasUIChanges", hasUIChanges);
 		}
 });
 ```
@@ -89,24 +87,25 @@ We change the `onInit` method: The `appView` model receives two additional prope
 ```js
 // webapp/controller/App.controller.js
 ...
-		onSort : function () {
-			...
-		},
-		_getText : function (sTextId, aArgs) {
-			...
-		},
-
-		_setUIChanges : function (bHasUIChanges) {
-			if (this._bTechnicalErrors) {
-				// If there is currently a technical error, then force 'true'.
-				bHasUIChanges = true;
-			} else if (bHasUIChanges === undefined) {
-				bHasUIChanges = this.getView().getModel().hasPendingChanges();
-			}
-			var oModel = this.getView().getModel("appView");
-			oModel.setProperty("/hasUIChanges", bHasUIChanges);
-		}
-	});
+    onSort() {
+      ...
+    },
+    _getText(textId, args) {
+      ...
+    },
+
+    _setUIChanges(hasUIChanges) {
+      if (this._bTechnicalErrors) {
+        // If there is currently a technical error, then force 'true'.
+        hasUIChanges = true;
+      } else if (hasUIChanges === undefined) {
+        hasUIChanges = this.getView().getModel().hasPendingChanges();
+      }
+      const model = this.getView().getModel("appView");
+      model.setProperty("/hasUIChanges", hasUIChanges);
+    }
+  });
+  return App;
 });
 ```
 
@@ -118,23 +117,24 @@ We add the `_setUIChanges` private method that lets us set the property `hasUICh
 		onInit() {
 			...
 		},
-		onCreate() {
-			const oList = this.byId("peopleList"),
-				oBinding = oList.getBinding("items"),
-				oContext = oBinding.create({
-					"UserName" : "",
-					"FirstName" : "",
-					"LastName" : "",
-					"Age" : "18"
-			this._setUIChanges();
-			this.getView().getModel("appView").setProperty("/usernameEmpty", true);
-
-			oList.getItems().some(function (oItem) {
-				if (oItem.getBindingContext() === oContext) {
-					oItem.focus();
-					oItem.setSelected(true);
+		onCreate(): void {
+			const list = this.byId("peopleList") as List;
+			const binding = list.getBinding("items") as ODataListBinding;
+			// Create a new entry through the table's list binding
+			const context = binding.create({ Age: "18" });
+
+			this._setUIChanges(true);
+			(this.getView().getModel("appView") as JSONModel).setProperty("/usernameEmpty", true);
+
+			// Select and focus the table row that contains the newly created entry
+			list.getItems().some((item) => {
+				const columnItem = item as ColumnListItem;
+				if (columnItem.getBindingContext() === context) {
+					columnItem.focus();
+					columnItem.setSelected(true);
 					return true;
 				}
+				return false;
 			});
 		},
 		onRefresh
@@ -144,31 +144,31 @@ We add the `_setUIChanges` private method that lets us set the property `hasUICh
 ```js
 // webapp/controller/App.controller.js
 ...
-		onInit: function () {
-			...
-		},
-		onCreate : function () {
-			var oList = this.byId("peopleList"),
-				oBinding = oList.getBinding("items"),
-				oContext = oBinding.create({
-					"UserName" : "",
-					"FirstName" : "",
-					"LastName" : "",
-					"Age" : "18"
-				});
-
-			this._setUIChanges();
-			this.getView().getModel("appView").setProperty("/usernameEmpty", true);
-
-			oList.getItems().some(function (oItem) {
-				if (oItem.getBindingContext() === oContext) {
-					oItem.focus();
-					oItem.setSelected(true);
-					return true;
-				}
-			});
-		},
-		onRefresh
+    onInit() {
+      ...
+    },
+    onCreate() {
+      const list = this.byId("peopleList");
+      const binding = list.getBinding("items");
+      // Create a new entry through the table's list binding
+      const context = binding.create({
+        Age: "18"
+      });
+      this._setUIChanges(true);
+      this.getView().getModel("appView").setProperty("/usernameEmpty", true);
+
+      // Select and focus the table row that contains the newly created entry
+      list.getItems().some(item => {
+        const columnItem = item;
+        if (columnItem.getBindingContext() === context) {
+          columnItem.focus();
+          columnItem.setSelected(true);
+          return true;
+        }
+        return false;
+      });
+    },
+    onRefresh
 ...
 ```
 
@@ -182,22 +182,22 @@ We also use the binding context returned by the `create` method to focus and sel
 		onRefresh() {
 			...
 		},
-		onSave() {
-			const fnSuccess = function () {
+		onSave(): void {
+			const success = () => {
 				this._setBusy(false);
 				MessageToast.show(this._getText("changesSentMessage"));
 				this._setUIChanges(false);
-			}.bind(this);
-
-			const fnError = function (oError) {
+			};
+			const error = (error2: Error) => {
 				this._setBusy(false);
 				this._setUIChanges(false);
-				MessageBox.error(oError.message);
-			}.bind(this);
+				MessageBox.error(error2.message);
+			};
 
 			this._setBusy(true); // Lock UI until submitBatch is resolved.
-			this.getView().getModel().submitBatch("peopleGroup").then(fnSuccess, fnError);
-			this._bTechnicalErrors = false; // If there were technical errors, a new save resets them.
+			(this.getView().getModel() as ODataModel).submitBatch("peopleGroup").then(success, error);
+			// If there were technical errors, a new save resets them.
+			this._bTechnicalErrors = false;
 		},
 		onSearch() {
 			...
@@ -206,9 +206,9 @@ We also use the binding context returned by the `create` method to focus and sel
 		_setUIChanges(bHasUIChanges) {
 			...
 		},
-		_setBusy(bIsBusy) {
-			const oModel = this.getView().getModel("appView");
-			oModel.setProperty("/busy", bIsBusy);
+		_setBusy(isBusy: boolean): void {
+			const model = this.getView().getModel("appView") as JSONModel;
+			model.setProperty("/busy", isBusy);
 		}
 });
 ```
@@ -216,38 +216,38 @@ We also use the binding context returned by the `create` method to focus and sel
 ```js
 // webapp/controller/App.controller.js
 ...
-		onRefresh: function () {
-			...
-		},
-		onSave : function () {
-			var fnSuccess = function () {
-				this._setBusy(false);
-				MessageToast.show(this._getText("changesSentMessage"));
-				this._setUIChanges(false);
-			}.bind(this);
-
-			var fnError = function (oError) {
-				this._setBusy(false);
-				this._setUIChanges(false);
-				MessageBox.error(oError.message);
-			}.bind(this);
-
-			this._setBusy(true); // Lock UI until submitBatch is resolved.
-			this.getView().getModel().submitBatch("peopleGroup").then(fnSuccess, fnError);
-			this._bTechnicalErrors = false; // If there were technical errors, a new save resets them.
-		},
-		onSearch: function () {
-			...
-		},
-		...
-		_setUIChanges : function (bHasUIChanges) {
-			...
-		},
-		_setBusy : function (bIsBusy) {
-			var oModel = this.getView().getModel("appView");
-			oModel.setProperty("/busy", bIsBusy);
-		}
-	});
+    onRefresh() {
+      ...
+    },
+    onSave() {
+      const success = () => {
+        this._setBusy(false);
+        MessageToast.show(this._getText("changesSentMessage"));
+        this._setUIChanges(false);
+      };
+      const error = error2 => {
+        this._setBusy(false);
+        this._setUIChanges(false);
+        MessageBox.error(error2.message);
+      };
+      this._setBusy(true); // Lock UI until submitBatch is resolved.
+      this.getView().getModel().submitBatch("peopleGroup").then(success, error);
+      // If there were technical errors, a new save resets them.
+      this._bTechnicalErrors = false;
+    },
+    onSearch() {
+      ...
+    },
+    ...
+    _setUIChanges(hasUIChanges) {
+      ...
+    },
+    _setBusy(isBusy) {
+      const model = this.getView().getModel("appView");
+      model.setProperty("/busy", isBusy);
+    }
+  });
+  return App;
 });
 ```
 
@@ -264,30 +264,28 @@ We also define a `_setBusy` private function to lock the whole UI while the data
 			...
 		},
 
-		onMessageBindingChange(oEvent) {
-			const aContexts = oEvent.getSource().getContexts(),
-				aMessages,
-				bMessageOpen = false;
+		onMessageBindingChange(event: Event): void {
+			const contexts = (event.getSource() as ListBinding).getContexts();
+			let messageOpen = false;
 
-			if (bMessageOpen || !aContexts.length) {
+			if (messageOpen || !contexts.length) {
 				return;
 			}
 
 			// Extract and remove the technical messages
-			aMessages = aContexts.map(function (oContext) {
-				return oContext.getObject();
-			sap.ui.getCore().getMessageManager().removeMessages(aMessages);
+			const messages = contexts.map((context: Context) => context.getObject());
+			Messaging.removeMessages(messages);
 
 			this._setUIChanges(true);
 			this._bTechnicalErrors = true;
-			MessageBox.error(aMessages[0].message, {
-				id : "serviceErrorMessageBox",
-				onClose() {
-					bMessageOpen = false;
+			MessageBox.error((messages[0] as { message: string }).message, {
+				id: "serviceErrorMessageBox",
+				onClose: () => {
+					messageOpen = false;
 				}
 			});
 
-			bMessageOpen = true;
+			messageOpen = true;
 		},
 ...
 ```
@@ -295,36 +293,30 @@ We also define a `_setBusy` private function to lock the whole UI while the data
 ```js
 // webapp/controller/App.controller.js
 ...
-		onSort : function () {
-			...
-		},
-
-		onMessageBindingChange : function (oEvent) {
-			var aContexts = oEvent.getSource().getContexts(),
-				aMessages,
-				bMessageOpen = false;
-
-			if (bMessageOpen || !aContexts.length) {
-				return;
-			}
-
-			// Extract and remove the technical messages
-			aMessages = aContexts.map(function (oContext) {
-				return oContext.getObject();
-			});
-			sap.ui.getCore().getMessageManager().removeMessages(aMessages);
-
-			this._setUIChanges(true);
-			this._bTechnicalErrors = true;
-			MessageBox.error(aMessages[0].message, {
-				id : "serviceErrorMessageBox",
-				onClose : function () {
-					bMessageOpen = false;
-				}
-			});
-
-			bMessageOpen = true;
-		},
+    onSort() {
+      ...
+    },
+
+    onMessageBindingChange(event) {
+      const contexts = event.getSource().getContexts();
+      let messageOpen = false;
+      if (messageOpen || !contexts.length) {
+        return;
+      }
+
+      // Extract and remove the technical messages
+      const messages = contexts.map(context => context.getObject());
+      Messaging.removeMessages(messages);
+      this._setUIChanges(true);
+      this._bTechnicalErrors = true;
+      MessageBox.error(messages[0].message, {
+        id: "serviceErrorMessageBox",
+        onClose: () => {
+          messageOpen = false;
+        }
+      });
+      messageOpen = true;
+    },
 ...
 ```
 
@@ -336,10 +328,11 @@ We implement the event handler for the `change` event of the `ListBinding` to th
 		onRefresh() {
 			...
 		},
-		onResetChanges() {
-			this.byId("peopleList").getBinding("items").resetChanges();
+		onResetChanges(): void {
+			((this.byId("peopleList") as List).getBinding("items") as ODataListBinding).resetChanges();
+			// If there were technical errors, cancelling changes resets them.
 			this._bTechnicalErrors = false;
-			this._setUIChanges();
+			this._setUIChanges(false);
 		},
 		onSearch() {
 			...
@@ -350,17 +343,18 @@ We implement the event handler for the `change` event of the `ListBinding` to th
 ```js
 // webapp/controller/App.controller.js
 ...
-		onRefresh: function () {
-			...
-		},
-		onResetChanges : function () {
-			this.byId("peopleList").getBinding("items").resetChanges();
-			this._bTechnicalErrors = false;
-			this._setUIChanges();
-		},
-		onSearch: function () {
-			...
-		},
+    onRefresh() {
+      ...
+    },
+    onResetChanges() {
+      this.byId("peopleList").getBinding("items").resetChanges();
+      // If there were technical errors, cancelling changes resets them.
+      this._bTechnicalErrors = false;
+      this._setUIChanges(false);
+    },
+    onSearch() {
+      ...
+    },
 ...
 ```
 
@@ -372,13 +366,16 @@ The `onResetChanges` method handles discarding pending changes. It uses the `res
 		onCreate() {
 			...
 		},
-		onInputChange(oEvt) {
-			if (oEvt.getParameter("escPressed")) {
+		onInputChange(evt: Event<{ escPressed: boolean }>): void {
+			if (evt.getParameter("escPressed")) {
 				this._setUIChanges();
 			} else {
 				this._setUIChanges(true);
-				if (oEvt.getSource().getParent().getBindingContext().getProperty("UserName")) {
-					this.getView().getModel("appView").setProperty("/usernameEmpty", false);
+				// Check if the username in the changed table row is empty and set the appView
+				// property accordingly
+				const ctx = (evt.getSource() as Input).getParent()?.getBindingContext();
+				if (ctx && ctx.getProperty("UserName")) {
+					(this.getView().getModel("appView") as JSONModel).setProperty("/usernameEmpty", false);
 				}
 			}
 		},
@@ -391,22 +388,25 @@ The `onResetChanges` method handles discarding pending changes. It uses the `res
 ```js
 // webapp/controller/App.controller.js
 ...
-		onCreate: function () {
-			...
-		},
-		onInputChange : function (oEvt) {
-			if (oEvt.getParameter("escPressed")) {
-				this._setUIChanges();
-			} else {
-				this._setUIChanges(true);
-				if (oEvt.getSource().getParent().getBindingContext().getProperty("UserName")) {
-					this.getView().getModel("appView").setProperty("/usernameEmpty", false);
-				}
-			}
-		},
-		onRefresh : function () {
-			...
-		},
+    onCreate() {
+      ...
+    },
+    onInputChange(evt) {
+      if (evt.getParameter("escPressed")) {
+        this._setUIChanges();
+      } else {
+        this._setUIChanges(true);
+        // Check if the username in the changed table row is empty and set the appView
+        // property accordingly
+        const ctx = evt.getSource().getParent()?.getBindingContext();
+        if (ctx && ctx.getProperty("UserName")) {
+          this.getView().getModel("appView").setProperty("/usernameEmpty", false);
+        }
+      }
+    },
+    onRefresh() {
+      ...
+    },
 ...
 ```
 
@@ -432,7 +432,7 @@ The `onInputChange` event handler manages entries in any of the `Input` fields a
               items="{
                 path: '/People',
                 parameters: {
-                $count: true,
+                  $count: true,
                   $$updateGroupId : 'peopleGroup'
                 }
               }">
@@ -444,7 +444,7 @@ The `onInputChange` event handler manages entries in any of the `Input` fields a
                       id="searchField"
                       width="20%"
                       placeholder="{i18n>searchFieldPlaceholder}"
-                      enabled="{= !${appView>/hasUIChanges}}"
+                      enabled="{= !${appView>/hasUIChanges} }"
                       search=".onSearch"/>
                     <Button
                       id="addUserButton"
@@ -455,17 +455,16 @@ The `onInputChange` event handler manages entries in any of the `Input` fields a
                         <OverflowToolbarLayoutData priority="NeverOverflow"/>
                       </layoutData>
                     </Button>
-
                     <Button
                       id="refreshUsersButton"
                       icon="sap-icon://refresh"
-                      enabled="{= !${appView>/hasUIChanges}}"
+                      enabled="{= !${appView>/hasUIChanges} }"
                       tooltip="{i18n>refreshButtonText}"
                       press=".onRefresh"/>
                     <Button
                       id="sortUsersButton"
                       icon="sap-icon://sort"
-                      enabled="{= !${appView>/hasUIChanges}}"
+                      enabled="{= !${appView>/hasUIChanges} }"
                       tooltip="{i18n>sortButtonText}"
                       press=".onSort"/>
                   </content>
@@ -492,7 +491,6 @@ The `onInputChange` event handler manages entries in any of the `Input` fields a
                       value="{UserName}"
                       valueLiveUpdate="true"
                       liveChange=".onInputChange"/>
-
                   </cells>
                   <cells>
                     <Input
@@ -529,7 +527,6 @@ The `onInputChange` event handler manages entries in any of the `Input` fields a
                 press=".onResetChanges"/>
             </Toolbar>
           </footer>
-
         </Page>
       </pages>
     </App>
@@ -556,11 +553,11 @@ saveButtonText=Save
 #XBUT: Button text for cancel
 cancelButtonText=Cancel
 
-#XBUT: Button text for add user
-createButtonText=Add User
-
 #XTOL: Tooltip for sort
 sortButtonText=Sort by Last Name
+
+#XBUT: Button text for add user
+createButtonText=Add User
 ...
 # Messages
 #XMSG: Message for user changes sent to the service
diff --git a/packages/odatav4/steps/06/webapp/controller/App.controller.ts b/packages/odatav4/steps/06/webapp/controller/App.controller.ts
index b6fdd4662..28c678b6e 100644
--- a/packages/odatav4/steps/06/webapp/controller/App.controller.ts
+++ b/packages/odatav4/steps/06/webapp/controller/App.controller.ts
@@ -25,7 +25,7 @@ import type ODataListBinding from "sap/ui/model/odata/v4/ODataListBinding";
  */
 export default class App extends Controller {
 
-	private _bTechnicalErrors = false;
+	private _bTechnicalErrors: boolean;
 
 	/**
 	 *  Hook for initializing the controller
@@ -79,8 +79,8 @@ export default class App extends Controller {
 	/**
 	 * Lock UI when changing data in the input controls
 	 */
-	onInputChange(evt: Event): void {
-		if ((evt as unknown as { getParameter(n: string): unknown }).getParameter("escPressed")) {
+	onInputChange(evt: Event<{ escPressed: boolean }>): void {
+		if (evt.getParameter("escPressed")) {
 			this._setUIChanges();
 		} else {
 			this._setUIChanges(true);
diff --git a/packages/odatav4/steps/06/webapp/index-cdn.html b/packages/odatav4/steps/06/webapp/index-cdn.html
index e4ce80170..d550b4a6f 100644
--- a/packages/odatav4/steps/06/webapp/index-cdn.html
+++ b/packages/odatav4/steps/06/webapp/index-cdn.html
@@ -7,7 +7,6 @@
 	<script
 		id="sap-ui-bootstrap"
 		src="https://sdk.openui5.org/1.148.6/resources/sap-ui-core.js"
-		data-sap-ui-theme="sap_horizon"
 		data-sap-ui-compat-version="edge"
 		data-sap-ui-async="true"
 		data-sap-ui-on-init="module:ui5/tutorial/odatav4/initMockServer"
diff --git a/packages/odatav4/steps/06/webapp/index.html b/packages/odatav4/steps/06/webapp/index.html
index b1e54667d..f1acabd2f 100644
--- a/packages/odatav4/steps/06/webapp/index.html
+++ b/packages/odatav4/steps/06/webapp/index.html
@@ -7,7 +7,6 @@
 	<script
 		id="sap-ui-bootstrap"
 		src="resources/sap-ui-core.js"
-		data-sap-ui-theme="sap_horizon"
 		data-sap-ui-compat-version="edge"
 		data-sap-ui-async="true"
 		data-sap-ui-on-init="module:ui5/tutorial/odatav4/initMockServer"
diff --git a/packages/odatav4/steps/06/webapp/localService/mockdata/people.json b/packages/odatav4/steps/06/webapp/localService/mockdata/people.json
index 758030eaa..ec2491722 100644
--- a/packages/odatav4/steps/06/webapp/localService/mockdata/people.json
+++ b/packages/odatav4/steps/06/webapp/localService/mockdata/people.json
@@ -2,7 +2,7 @@
   "@odata.context": "https://services.odata.org/TripPinRESTierService/(S(id))/$metadata#People(Age,FirstName,LastName,UserName,Friends,BestFriend,HomeAddress)",
   "value": [
     {
-      "Age": 23,
+      "Age": "23",
       "FirstName": "Angel",
       "LastName": "Huffman",
       "UserName": "angelhuffman",
@@ -22,7 +22,7 @@
       }
     },
     {
-      "Age": 44,
+      "Age": "44",
       "FirstName": "Clyde",
       "LastName": "Guess",
       "UserName": "clydeguess",
@@ -42,7 +42,7 @@
       }
     },
     {
-      "Age": 19,
+      "Age": "19",
       "FirstName": "Elaine",
       "LastName": "Stewart",
       "UserName": "elainestewart",
@@ -62,7 +62,7 @@
       }
     },
     {
-      "Age": 37,
+      "Age": "37",
       "FirstName": "Genevieve",
       "LastName": "Reeves",
       "UserName": "genevievereeves",
@@ -82,7 +82,7 @@
       }
     },
     {
-      "Age": 25,
+      "Age": "25",
       "FirstName": "Georgina",
       "LastName": "Barlow",
       "UserName": "georginabarlow",
@@ -101,7 +101,7 @@
       }
     },
     {
-      "Age": 19,
+      "Age": "19",
       "FirstName": "Javier",
       "LastName": "Alfred",
       "UserName": "javieralfred",
@@ -120,7 +120,7 @@
       }
     },
     {
-      "Age": 26,
+      "Age": "26",
       "FirstName": "Joni",
       "LastName": "Rosales",
       "UserName": "jonirosales",
@@ -140,7 +140,7 @@
       }
     },
     {
-      "Age": 41,
+      "Age": "41",
       "FirstName": "Keith",
       "LastName": "Pinckney",
       "UserName": "keithpinckney",
@@ -160,7 +160,7 @@
       }
     },
     {
-      "Age": 30,
+      "Age": "30",
       "FirstName": "Krista",
       "LastName": "Kemp",
       "UserName": "kristakemp",
@@ -180,7 +180,7 @@
       }
     },
     {
-      "Age": 29,
+      "Age": "29",
       "FirstName": "Laurel",
       "LastName": "Osborn",
       "UserName": "laurelosborn",
@@ -200,7 +200,7 @@
       }
     },
     {
-      "Age": 53,
+      "Age": "53",
       "FirstName": "Marshall",
       "LastName": "Garay",
       "UserName": "marshallgaray",
@@ -219,7 +219,7 @@
       }
     },
     {
-      "Age": 66,
+      "Age": "66",
       "FirstName": "Ronald",
       "LastName": "Mundy",
       "UserName": "ronaldmundy",
@@ -238,7 +238,7 @@
       }
     },
     {
-      "Age": 51,
+      "Age": "51",
       "FirstName": "Russell",
       "LastName": "Whyte",
       "UserName": "russellwhyte",
@@ -258,7 +258,7 @@
       }
     },
     {
-      "Age": 57,
+      "Age": "57",
       "FirstName": "Ryan",
       "LastName": "Theriault",
       "UserName": "ryantheriault",
@@ -278,7 +278,7 @@
       }
     },
     {
-      "Age": 34,
+      "Age": "34",
       "FirstName": "Sallie",
       "LastName": "Sampson",
       "UserName": "salliesampson",
@@ -298,7 +298,7 @@
       }
     },
     {
-      "Age": 18,
+      "Age": "18",
       "FirstName": "Sandy",
       "LastName": "Osborn",
       "UserName": "sandyosborn",
@@ -318,7 +318,7 @@
       }
     },
     {
-      "Age": 24,
+      "Age": "24",
       "FirstName": "Scott",
       "LastName": "Ketchum",
       "UserName": "scottketchum",
@@ -337,7 +337,7 @@
       }
     },
     {
-      "Age": 31,
+      "Age": "31",
       "FirstName": "Ursula",
       "LastName": "Bright",
       "UserName": "ursulabright",
@@ -356,7 +356,7 @@
       }
     },
     {
-      "Age": 40,
+      "Age": "40",
       "FirstName": "Vincent",
       "LastName": "Calabrese",
       "UserName": "vincentcalabrese",
@@ -376,7 +376,7 @@
       }
     },
     {
-      "Age": 45,
+      "Age": "45",
       "FirstName": "Willie",
       "LastName": "Ashmore",
       "UserName": "willieashmore",
diff --git a/packages/odatav4/steps/06/webapp/localService/mockserver.ts b/packages/odatav4/steps/06/webapp/localService/mockserver.ts
index 7ca0307f4..f09c33ed9 100644
--- a/packages/odatav4/steps/06/webapp/localService/mockserver.ts
+++ b/packages/odatav4/steps/06/webapp/localService/mockserver.ts
@@ -35,7 +35,7 @@ let metadata: string; // The string that holds the cached mock service metadata
 const namespace = "ui5/tutorial/odatav4";
 // Component for writing logs into the console
 const logComponent = "ui5.tutorial.odatav4.mockserver";
-const rBaseUrl = /services.odata.org\/TripPinRESTierService/;
+const baseUrl = /services.odata.org\/TripPinRESTierService/;
 
 /**
  * Returns the base URL from a given URL.
@@ -251,19 +251,50 @@ function applySort(xhr: MockXhr, resultSet: MockUser[]): MockUser[] {
  * Does NOT change the given result set but returns a new array.
  */
 function applyFilter(xhr: MockXhr, resultSet: MockUser[]): MockUser[] {
-	let filteredUsers = [...resultSet]; // work with a copy
-	const matches = xhr.url.match(/\$filter=.*\((.*),'(.*)'\)/);
-
-	// If the request contains a filter command, apply the filter
-	if (Array.isArray(matches) && matches.length >= 3) {
-		const fieldName = matches[1];
-		const query = matches[2];
-
-		if (fieldName !== "LastName") {
-			throw new Error("Filters on field " + fieldName + " are not supported.");
+	const filter = new URL(xhr.url).searchParams.get("$filter");
+	let filteredUsers = resultSet.slice(); // work with a copy
+	if (!filter) {
+		return filteredUsers;
+	}
+	// support filters like:
+	// - "contains(LastName,'e')"
+	// - "(contains(LastName,'e')) and not (UserName eq 'a' or UserName eq 'b')"
+	// - "not (UserName eq 'a' or UserName eq 'b')"
+	// - "UserName eq 'foo'"
+	let remainingFilter = filter.startsWith("(") ? filter.slice(1) : filter;
+	if (remainingFilter.startsWith("contains(LastName,'")) { // from search field
+		remainingFilter = remainingFilter.slice(19); // remove "contains(LastName,'"
+		const value = remainingFilter.split("')")[0];
+		filteredUsers = filteredUsers.filter(function (user) {
+			return user.LastName.includes(value);
+		});
+		// remove the rest of "contains" from the filter and the optional following ") and "
+		remainingFilter = remainingFilter.slice(value.length + 2);
+		if (remainingFilter.startsWith(") and ")) {
+			remainingFilter = remainingFilter.slice(6);
 		}
-
-		filteredUsers = users.filter((user) => (user.LastName || "").indexOf(query) !== -1);
+	}
+	if (remainingFilter.startsWith("not (UserName eq ")) { // exclusive filter
+		const end = remainingFilter.indexOf(")");
+		const excludedUsers = remainingFilter.slice(17, end) // remove "not (UserName eq "
+			.split(" or UserName eq ")
+			// after splitting each entry contains the username in single quotes, e.g. "'me'"
+			.map((filterPart) => filterPart.slice(1, -1));
+		filteredUsers = filteredUsers.filter(function (user) {
+			return !excludedUsers.includes(user.UserName);
+		});
+		remainingFilter = remainingFilter.slice(end + 1);
+	}
+	if (remainingFilter.startsWith("UserName eq '")) { // refresh of selected user
+		const end = remainingFilter.indexOf("'", 13);
+		const value = remainingFilter.slice(13, end); // remove "UserName eq '"
+		filteredUsers = filteredUsers.filter(function (user) {
+			return user.LastName.includes(value);
+		});
+		remainingFilter = remainingFilter.slice(end + 1);
+	}
+	if (remainingFilter) {
+		throw new Error(`"${remainingFilter}" of filter "${filter}" is not supported`);
 	}
 
 	return filteredUsers;
@@ -292,7 +323,7 @@ function handleGetCountRequests(): MockResponse {
 /**
  * Handles GET requests for user data and returns a fitting response.
  */
-function handleGetUserRequests(xhr: MockXhr, _bCount: boolean): MockResponse {
+function handleGetUserRequests(xhr: MockXhr, _count: boolean): MockResponse {
 	let count: number;
 	let expand: RegExpMatchArray | string[] | null;
 	let expand2: string;
@@ -381,7 +412,7 @@ function handleGetUserRequests(xhr: MockXhr, _bCount: boolean): MockResponse {
  * Returns a specific user in the aUsers array.
  */
 function getUserByIndex(index: number, properties: string[]): MockUser | null {
-	const helper: MockUser = { UserName: "" };
+	const helper = {} as MockUser;
 	const user = users[index];
 
 	if (user) {
@@ -509,10 +540,16 @@ function handleDeleteUserRequests(xhr: MockXhr): MockResponse {
  * Handles POST requests for users and returns a fitting response.
  */
 function handlePostUserRequests(xhr: MockXhr): MockResponse {
-	const user = getUserDataFromRequestBody(xhr.requestBody || "");
+	let user = getUserDataFromRequestBody(xhr.requestBody || "");
 
 	// Check if that user already exists
 	if (isUnique(user.UserName)) {
+		user = {
+			HomeAddress : null, // prevents drillDown errors
+			LastName : "",
+			FirstName : "",
+			...user
+		};
 		users.push(user);
 
 		let responseBody = '{"@odata.context": "' + getBaseUrl(xhr.url)
@@ -697,8 +734,7 @@ function handleAllRequests(xhr: MockXhr): void {
 		"Mockserver: Received " + xhr.method + " request to URL " + xhr.url,
 		(xhr.requestBody ? "Request body is:\n" + xhr.requestBody : "No request body.")
 		+ "\n",
-		logComponent
-	);
+		logComponent);
 
 	if (xhr.method === "POST" && /\$batch/.test(xhr.url)) {
 		response2 = handleBatchRequest(xhr);
@@ -716,8 +752,7 @@ function handleAllRequests(xhr: MockXhr): void {
 			"Mockserver: Sent response with return code " + response2[0],
 			("Response headers: " + JSON.stringify(response2[1]) + "\n\nResponse body:\n"
 				+ (response2[2] || "")) + "\n",
-			logComponent
-		);
+			logComponent);
 	}
 }
 
@@ -725,7 +760,7 @@ export default {
 
 	/**
 	 * Creates a Sinon fake service, intercepting all http requests to
-	 * the URL defined in variable rBaseUrl above.
+	 * the URL defined in variable baseUrl above.
 	 * @returns a promise that is resolved when the mock server is started
 	 */
 	init(): Promise<unknown> {
@@ -744,16 +779,16 @@ export default {
 					sandbox.server.autoRespond = true;
 
 					// Register the requests for which responses should be faked.
-					sandbox.server.respondWith(rBaseUrl, handleAllRequests);
+					sandbox.server.respondWith(baseUrl, handleAllRequests);
 
 					// Apply a filter to the fake XmlHttpRequest.
 					// Otherwise, ALL requests (e.g. for the component, views etc.) would be
 					// intercepted.
 					sinon.FakeXMLHttpRequest.useFilters = true;
-					sinon.FakeXMLHttpRequest.addFilter((_sMethod: string, url: string) => {
+					sinon.FakeXMLHttpRequest.addFilter((_method: string, url: string) => {
 						// If the filter returns true, the request will NOT be faked.
 						// We only want to fake requests that go to the intended service.
-						return !rBaseUrl.test(url);
+						return !baseUrl.test(url);
 					});
 
 					// Set the logging level for console entries from the mock server
diff --git a/packages/odatav4/steps/06/webapp/view/App.view.xml b/packages/odatav4/steps/06/webapp/view/App.view.xml
index 68d2f5742..a5043c0e0 100644
--- a/packages/odatav4/steps/06/webapp/view/App.view.xml
+++ b/packages/odatav4/steps/06/webapp/view/App.view.xml
@@ -27,7 +27,7 @@
                       id="searchField"
                       width="20%"
                       placeholder="{i18n>searchFieldPlaceholder}"
-                      enabled="{= !${appView>/hasUIChanges}}"
+                      enabled="{= !${appView>/hasUIChanges} }"
                       search=".onSearch"/>
                     <Button
                       id="addUserButton"
@@ -41,13 +41,13 @@
                     <Button
                       id="refreshUsersButton"
                       icon="sap-icon://refresh"
-                      enabled="{= !${appView>/hasUIChanges}}"
+                      enabled="{= !${appView>/hasUIChanges} }"
                       tooltip="{i18n>refreshButtonText}"
                       press=".onRefresh"/>
                     <Button
                       id="sortUsersButton"
                       icon="sap-icon://sort"
-                      enabled="{= !${appView>/hasUIChanges}}"
+                      enabled="{= !${appView>/hasUIChanges} }"
                       tooltip="{i18n>sortButtonText}"
                       press=".onSort"/>
                   </content>
diff --git a/packages/odatav4/steps/07/README.md b/packages/odatav4/steps/07/README.md
index 4d682c00c..9bc84cc7d 100644
--- a/packages/odatav4/steps/07/README.md
+++ b/packages/odatav4/steps/07/README.md
@@ -14,81 +14,148 @@ You can view this step live: [🔗 Live Preview of Step 7](https://ui5.github.io
 
 You can download the solution for this step here: <span class="ts-only">[📥 Download step 7](https://ui5.github.io/tutorials/odatav4/odatav4-step-07.zip)<span class="lang-suffix"> (TS)</span></span><span class="js-only">[📥 Download step 7](https://ui5.github.io/tutorials/odatav4/odatav4-step-07-js.zip)<span class="lang-suffix"> (JS)</span></span>.
 
-### webapp/App.controller.ts/.js
+### webapp/controller/App.controller.ts/.js
 
-```
+```ts
+// webapp/controller/App.controller.ts
 ...
-		onInit: function () {
-			...
-				oViewModel = new JSONModel({
-					busy : false,
-					hasUIChanges : false,
-					usernameEmpty : false,
-					order : 0
-				});
-			...
-		},
-		onCreate : function () {
-			var oList = this.byId("peopleList"),
-				oBinding = oList.getBinding("items"),
-				oContext = oBinding.create({
-					"UserName" : "",
-					"FirstName" : "",
-					"LastName" : "",
-					"Age" : "18"
-				});
+	onInit(): void {
+		...
+			const viewModel = new JSONModel({
+				busy: false,
+				hasUIChanges: false,
+				usernameEmpty: false,
+				order: 0
+			});
+		...
+	}
 
-			this._setUIChanges();
-			this.getView().getModel("appView").setProperty("/usernameEmpty", true);
+	onCreate(): void {
+		const list = this.byId("peopleList") as List;
+		const binding = list.getBinding("items") as ODataListBinding;
+		const context = binding.create({ Age: "18" });
 
-			oList.getItems().some(function (oItem) {
-				if (oItem.getBindingContext() === oContext) {
-					oItem.focus();
-					oItem.setSelected(true);
-					return true;
-				}
-			});
-		},
-
-		onDelete : function () {
-		    var oContext,
-		        oSelected = this.byId("peopleList").getSelectedItem(),
-		        sUserName;
-
-		    if (oSelected) {
-		        oContext = oSelected.getBindingContext();
-		        sUserName = oContext.getProperty("UserName");
-		        oContext.delete().then(function () {
-		            MessageToast.show(this._getText("deletionSuccessMessage", sUserName));
-		        }.bind(this), function (oError) {
-		            this._setUIChanges();
-		            if (oError.canceled) {
-		                MessageToast.show(this._getText("deletionRestoredMessage", sUserName));
-		                return;
-		            }
-		            MessageBox.error(oError.message + ": " + sUserName);
-		        }.bind(this));
-		        this._setUIChanges(true);
-		    }
-		},
-
-		onInputChange : function (oEvt) {
-			if (oEvt.getParameter("escPressed")) {
+		this._setUIChanges(true);
+		(this.getView().getModel("appView") as JSONModel).setProperty("/usernameEmpty", true);
+
+		list.getItems().some((item) => {
+			const columnItem = item as ColumnListItem;
+			if (columnItem.getBindingContext() === context) {
+				columnItem.focus();
+				columnItem.setSelected(true);
+				return true;
+			}
+			return false;
+		});
+	}
+
+	onDelete(): void {
+		const selected = (this.byId("peopleList") as List).getSelectedItem() as ColumnListItem | null;
+
+		if (selected) {
+			const context = selected.getBindingContext() as Context;
+			const userName = context.getProperty("UserName") as string;
+			void context.delete().then(() => {
+				MessageToast.show(this._getText("deletionSuccessMessage", [userName]));
+			}, (error2: Error & { canceled?: boolean }) => {
 				this._setUIChanges();
-			} else {
-				this._setUIChanges(true);
-				if (oEvt.getSource().getParent().getBindingContext().getProperty("UserName")) {
-					this.getView().getModel("appView").setProperty("/usernameEmpty", false);
+				if (error2.canceled) {
+					MessageToast.show(this._getText("deletionRestoredMessage", [userName]));
+					return;
 				}
+				MessageBox.error(error2.message + ": " + userName);
+			});
+			this._setUIChanges();
+		}
+	}
+
+	onInputChange(evt: Event<{ escPressed: boolean }>): void {
+		if (evt.getParameter("escPressed")) {
+			this._setUIChanges();
+		} else {
+			this._setUIChanges(true);
+			const ctx = (evt.getSource() as Input).getParent()?.getBindingContext();
+			if (ctx && ctx.getProperty("UserName")) {
+				(this.getView().getModel("appView") as JSONModel).setProperty("/usernameEmpty", false);
 			}
-		},
+		}
+	}
+
+...
+```
+
+```js
+// webapp/controller/App.controller.js
+...
+    onInit() {
+      ...
+        const viewModel = new JSONModel({
+          busy: false,
+          hasUIChanges: false,
+          usernameEmpty: false,
+          order: 0
+        });
+      ...
+    },
+    onCreate() {
+      const list = this.byId("peopleList");
+      const binding = list.getBinding("items");
+      // Create a new entry through the table's list binding
+      const context = binding.create({
+        Age: "18"
+      });
+      this._setUIChanges(true);
+      this.getView().getModel("appView").setProperty("/usernameEmpty", true);
+
+      // Select and focus the table row that contains the newly created entry
+      list.getItems().some(item => {
+        const columnItem = item;
+        if (columnItem.getBindingContext() === context) {
+          columnItem.focus();
+          columnItem.setSelected(true);
+          return true;
+        }
+        return false;
+      });
+    },
+    onDelete() {
+      const selected = this.byId("peopleList").getSelectedItem();
+      if (selected) {
+        const context = selected.getBindingContext();
+        const userName = context.getProperty("UserName");
+        void context.delete().then(() => {
+          MessageToast.show(this._getText("deletionSuccessMessage", [userName]));
+        }, error2 => {
+          this._setUIChanges();
+          if (error2.canceled) {
+            MessageToast.show(this._getText("deletionRestoredMessage", [userName]));
+            return;
+          }
+          MessageBox.error(error2.message + ": " + userName);
+        });
+        this._setUIChanges();
+      }
+    },
+    onInputChange(evt) {
+      if (evt.getParameter("escPressed")) {
+        this._setUIChanges();
+      } else {
+        this._setUIChanges(true);
+        // Check if the username in the changed table row is empty and set the appView
+        // property accordingly
+        const ctx = evt.getSource().getParent()?.getBindingContext();
+        if (ctx && ctx.getProperty("UserName")) {
+          this.getView().getModel("appView").setProperty("/usernameEmpty", false);
+        }
+      }
+    },
 
 ...
 ```
 
 We add the `onDelete` event handler to the controller. In the event handler, we check whether an item is selected in the table and if so, we retrieve the binding context of the selection and call its `delete` method. By doing this, the context is removed from the table on the client side and the deletion is stored as a pending change in the update group of the table's list binding. A call to `_setUIChanges` ensures that the `appView` model reflects the deletion as a pending change and that the *Save* button becomes enabled. The deletion will be submitted with all other changes related to the same update group once the *Save* button is pressed. If the deletion fails on the server side, or the changes are reset via API, the related entity is restored in the table automatically. To distinguish these two situations, the rejected error has `canceled` set to `true` in case of a reset.
 
-### webapp/App.view.xml
+### webapp/view/App.view.xml
 
 ```
 <mvc:View
@@ -133,7 +200,7 @@ We add the `onDelete` event handler to the controller. In the event handler, we
 										<Button
 										.../>
 										<Button
-										...>
+										.../>
 									</content>
 								</OverflowToolbar>
 							</headerToolbar>
diff --git a/packages/odatav4/steps/07/webapp/controller/App.controller.ts b/packages/odatav4/steps/07/webapp/controller/App.controller.ts
index 2cf4fe17a..64fff4929 100644
--- a/packages/odatav4/steps/07/webapp/controller/App.controller.ts
+++ b/packages/odatav4/steps/07/webapp/controller/App.controller.ts
@@ -25,7 +25,7 @@ import type ODataListBinding from "sap/ui/model/odata/v4/ODataListBinding";
  */
 export default class App extends Controller {
 
-	private _bTechnicalErrors = false;
+	private _bTechnicalErrors: boolean;
 
 	/**
 	 *  Hook for initializing the controller
@@ -102,8 +102,8 @@ export default class App extends Controller {
 	/**
 	 * Lock UI when changing data in the input controls
 	 */
-	onInputChange(evt: Event): void {
-		if ((evt as unknown as { getParameter(n: string): unknown }).getParameter("escPressed")) {
+	onInputChange(evt: Event<{ escPressed: boolean }>): void {
+		if (evt.getParameter("escPressed")) {
 			this._setUIChanges();
 		} else {
 			this._setUIChanges(true);
diff --git a/packages/odatav4/steps/07/webapp/index-cdn.html b/packages/odatav4/steps/07/webapp/index-cdn.html
index e4ce80170..d550b4a6f 100644
--- a/packages/odatav4/steps/07/webapp/index-cdn.html
+++ b/packages/odatav4/steps/07/webapp/index-cdn.html
@@ -7,7 +7,6 @@
 	<script
 		id="sap-ui-bootstrap"
 		src="https://sdk.openui5.org/1.148.6/resources/sap-ui-core.js"
-		data-sap-ui-theme="sap_horizon"
 		data-sap-ui-compat-version="edge"
 		data-sap-ui-async="true"
 		data-sap-ui-on-init="module:ui5/tutorial/odatav4/initMockServer"
diff --git a/packages/odatav4/steps/07/webapp/index.html b/packages/odatav4/steps/07/webapp/index.html
index b1e54667d..f1acabd2f 100644
--- a/packages/odatav4/steps/07/webapp/index.html
+++ b/packages/odatav4/steps/07/webapp/index.html
@@ -7,7 +7,6 @@
 	<script
 		id="sap-ui-bootstrap"
 		src="resources/sap-ui-core.js"
-		data-sap-ui-theme="sap_horizon"
 		data-sap-ui-compat-version="edge"
 		data-sap-ui-async="true"
 		data-sap-ui-on-init="module:ui5/tutorial/odatav4/initMockServer"
diff --git a/packages/odatav4/steps/07/webapp/localService/mockdata/people.json b/packages/odatav4/steps/07/webapp/localService/mockdata/people.json
index 758030eaa..ec2491722 100644
--- a/packages/odatav4/steps/07/webapp/localService/mockdata/people.json
+++ b/packages/odatav4/steps/07/webapp/localService/mockdata/people.json
@@ -2,7 +2,7 @@
   "@odata.context": "https://services.odata.org/TripPinRESTierService/(S(id))/$metadata#People(Age,FirstName,LastName,UserName,Friends,BestFriend,HomeAddress)",
   "value": [
     {
-      "Age": 23,
+      "Age": "23",
       "FirstName": "Angel",
       "LastName": "Huffman",
       "UserName": "angelhuffman",
@@ -22,7 +22,7 @@
       }
     },
     {
-      "Age": 44,
+      "Age": "44",
       "FirstName": "Clyde",
       "LastName": "Guess",
       "UserName": "clydeguess",
@@ -42,7 +42,7 @@
       }
     },
     {
-      "Age": 19,
+      "Age": "19",
       "FirstName": "Elaine",
       "LastName": "Stewart",
       "UserName": "elainestewart",
@@ -62,7 +62,7 @@
       }
     },
     {
-      "Age": 37,
+      "Age": "37",
       "FirstName": "Genevieve",
       "LastName": "Reeves",
       "UserName": "genevievereeves",
@@ -82,7 +82,7 @@
       }
     },
     {
-      "Age": 25,
+      "Age": "25",
       "FirstName": "Georgina",
       "LastName": "Barlow",
       "UserName": "georginabarlow",
@@ -101,7 +101,7 @@
       }
     },
     {
-      "Age": 19,
+      "Age": "19",
       "FirstName": "Javier",
       "LastName": "Alfred",
       "UserName": "javieralfred",
@@ -120,7 +120,7 @@
       }
     },
     {
-      "Age": 26,
+      "Age": "26",
       "FirstName": "Joni",
       "LastName": "Rosales",
       "UserName": "jonirosales",
@@ -140,7 +140,7 @@
       }
     },
     {
-      "Age": 41,
+      "Age": "41",
       "FirstName": "Keith",
       "LastName": "Pinckney",
       "UserName": "keithpinckney",
@@ -160,7 +160,7 @@
       }
     },
     {
-      "Age": 30,
+      "Age": "30",
       "FirstName": "Krista",
       "LastName": "Kemp",
       "UserName": "kristakemp",
@@ -180,7 +180,7 @@
       }
     },
     {
-      "Age": 29,
+      "Age": "29",
       "FirstName": "Laurel",
       "LastName": "Osborn",
       "UserName": "laurelosborn",
@@ -200,7 +200,7 @@
       }
     },
     {
-      "Age": 53,
+      "Age": "53",
       "FirstName": "Marshall",
       "LastName": "Garay",
       "UserName": "marshallgaray",
@@ -219,7 +219,7 @@
       }
     },
     {
-      "Age": 66,
+      "Age": "66",
       "FirstName": "Ronald",
       "LastName": "Mundy",
       "UserName": "ronaldmundy",
@@ -238,7 +238,7 @@
       }
     },
     {
-      "Age": 51,
+      "Age": "51",
       "FirstName": "Russell",
       "LastName": "Whyte",
       "UserName": "russellwhyte",
@@ -258,7 +258,7 @@
       }
     },
     {
-      "Age": 57,
+      "Age": "57",
       "FirstName": "Ryan",
       "LastName": "Theriault",
       "UserName": "ryantheriault",
@@ -278,7 +278,7 @@
       }
     },
     {
-      "Age": 34,
+      "Age": "34",
       "FirstName": "Sallie",
       "LastName": "Sampson",
       "UserName": "salliesampson",
@@ -298,7 +298,7 @@
       }
     },
     {
-      "Age": 18,
+      "Age": "18",
       "FirstName": "Sandy",
       "LastName": "Osborn",
       "UserName": "sandyosborn",
@@ -318,7 +318,7 @@
       }
     },
     {
-      "Age": 24,
+      "Age": "24",
       "FirstName": "Scott",
       "LastName": "Ketchum",
       "UserName": "scottketchum",
@@ -337,7 +337,7 @@
       }
     },
     {
-      "Age": 31,
+      "Age": "31",
       "FirstName": "Ursula",
       "LastName": "Bright",
       "UserName": "ursulabright",
@@ -356,7 +356,7 @@
       }
     },
     {
-      "Age": 40,
+      "Age": "40",
       "FirstName": "Vincent",
       "LastName": "Calabrese",
       "UserName": "vincentcalabrese",
@@ -376,7 +376,7 @@
       }
     },
     {
-      "Age": 45,
+      "Age": "45",
       "FirstName": "Willie",
       "LastName": "Ashmore",
       "UserName": "willieashmore",
diff --git a/packages/odatav4/steps/07/webapp/localService/mockserver.ts b/packages/odatav4/steps/07/webapp/localService/mockserver.ts
index 7ca0307f4..f09c33ed9 100644
--- a/packages/odatav4/steps/07/webapp/localService/mockserver.ts
+++ b/packages/odatav4/steps/07/webapp/localService/mockserver.ts
@@ -35,7 +35,7 @@ let metadata: string; // The string that holds the cached mock service metadata
 const namespace = "ui5/tutorial/odatav4";
 // Component for writing logs into the console
 const logComponent = "ui5.tutorial.odatav4.mockserver";
-const rBaseUrl = /services.odata.org\/TripPinRESTierService/;
+const baseUrl = /services.odata.org\/TripPinRESTierService/;
 
 /**
  * Returns the base URL from a given URL.
@@ -251,19 +251,50 @@ function applySort(xhr: MockXhr, resultSet: MockUser[]): MockUser[] {
  * Does NOT change the given result set but returns a new array.
  */
 function applyFilter(xhr: MockXhr, resultSet: MockUser[]): MockUser[] {
-	let filteredUsers = [...resultSet]; // work with a copy
-	const matches = xhr.url.match(/\$filter=.*\((.*),'(.*)'\)/);
-
-	// If the request contains a filter command, apply the filter
-	if (Array.isArray(matches) && matches.length >= 3) {
-		const fieldName = matches[1];
-		const query = matches[2];
-
-		if (fieldName !== "LastName") {
-			throw new Error("Filters on field " + fieldName + " are not supported.");
+	const filter = new URL(xhr.url).searchParams.get("$filter");
+	let filteredUsers = resultSet.slice(); // work with a copy
+	if (!filter) {
+		return filteredUsers;
+	}
+	// support filters like:
+	// - "contains(LastName,'e')"
+	// - "(contains(LastName,'e')) and not (UserName eq 'a' or UserName eq 'b')"
+	// - "not (UserName eq 'a' or UserName eq 'b')"
+	// - "UserName eq 'foo'"
+	let remainingFilter = filter.startsWith("(") ? filter.slice(1) : filter;
+	if (remainingFilter.startsWith("contains(LastName,'")) { // from search field
+		remainingFilter = remainingFilter.slice(19); // remove "contains(LastName,'"
+		const value = remainingFilter.split("')")[0];
+		filteredUsers = filteredUsers.filter(function (user) {
+			return user.LastName.includes(value);
+		});
+		// remove the rest of "contains" from the filter and the optional following ") and "
+		remainingFilter = remainingFilter.slice(value.length + 2);
+		if (remainingFilter.startsWith(") and ")) {
+			remainingFilter = remainingFilter.slice(6);
 		}
-
-		filteredUsers = users.filter((user) => (user.LastName || "").indexOf(query) !== -1);
+	}
+	if (remainingFilter.startsWith("not (UserName eq ")) { // exclusive filter
+		const end = remainingFilter.indexOf(")");
+		const excludedUsers = remainingFilter.slice(17, end) // remove "not (UserName eq "
+			.split(" or UserName eq ")
+			// after splitting each entry contains the username in single quotes, e.g. "'me'"
+			.map((filterPart) => filterPart.slice(1, -1));
+		filteredUsers = filteredUsers.filter(function (user) {
+			return !excludedUsers.includes(user.UserName);
+		});
+		remainingFilter = remainingFilter.slice(end + 1);
+	}
+	if (remainingFilter.startsWith("UserName eq '")) { // refresh of selected user
+		const end = remainingFilter.indexOf("'", 13);
+		const value = remainingFilter.slice(13, end); // remove "UserName eq '"
+		filteredUsers = filteredUsers.filter(function (user) {
+			return user.LastName.includes(value);
+		});
+		remainingFilter = remainingFilter.slice(end + 1);
+	}
+	if (remainingFilter) {
+		throw new Error(`"${remainingFilter}" of filter "${filter}" is not supported`);
 	}
 
 	return filteredUsers;
@@ -292,7 +323,7 @@ function handleGetCountRequests(): MockResponse {
 /**
  * Handles GET requests for user data and returns a fitting response.
  */
-function handleGetUserRequests(xhr: MockXhr, _bCount: boolean): MockResponse {
+function handleGetUserRequests(xhr: MockXhr, _count: boolean): MockResponse {
 	let count: number;
 	let expand: RegExpMatchArray | string[] | null;
 	let expand2: string;
@@ -381,7 +412,7 @@ function handleGetUserRequests(xhr: MockXhr, _bCount: boolean): MockResponse {
  * Returns a specific user in the aUsers array.
  */
 function getUserByIndex(index: number, properties: string[]): MockUser | null {
-	const helper: MockUser = { UserName: "" };
+	const helper = {} as MockUser;
 	const user = users[index];
 
 	if (user) {
@@ -509,10 +540,16 @@ function handleDeleteUserRequests(xhr: MockXhr): MockResponse {
  * Handles POST requests for users and returns a fitting response.
  */
 function handlePostUserRequests(xhr: MockXhr): MockResponse {
-	const user = getUserDataFromRequestBody(xhr.requestBody || "");
+	let user = getUserDataFromRequestBody(xhr.requestBody || "");
 
 	// Check if that user already exists
 	if (isUnique(user.UserName)) {
+		user = {
+			HomeAddress : null, // prevents drillDown errors
+			LastName : "",
+			FirstName : "",
+			...user
+		};
 		users.push(user);
 
 		let responseBody = '{"@odata.context": "' + getBaseUrl(xhr.url)
@@ -697,8 +734,7 @@ function handleAllRequests(xhr: MockXhr): void {
 		"Mockserver: Received " + xhr.method + " request to URL " + xhr.url,
 		(xhr.requestBody ? "Request body is:\n" + xhr.requestBody : "No request body.")
 		+ "\n",
-		logComponent
-	);
+		logComponent);
 
 	if (xhr.method === "POST" && /\$batch/.test(xhr.url)) {
 		response2 = handleBatchRequest(xhr);
@@ -716,8 +752,7 @@ function handleAllRequests(xhr: MockXhr): void {
 			"Mockserver: Sent response with return code " + response2[0],
 			("Response headers: " + JSON.stringify(response2[1]) + "\n\nResponse body:\n"
 				+ (response2[2] || "")) + "\n",
-			logComponent
-		);
+			logComponent);
 	}
 }
 
@@ -725,7 +760,7 @@ export default {
 
 	/**
 	 * Creates a Sinon fake service, intercepting all http requests to
-	 * the URL defined in variable rBaseUrl above.
+	 * the URL defined in variable baseUrl above.
 	 * @returns a promise that is resolved when the mock server is started
 	 */
 	init(): Promise<unknown> {
@@ -744,16 +779,16 @@ export default {
 					sandbox.server.autoRespond = true;
 
 					// Register the requests for which responses should be faked.
-					sandbox.server.respondWith(rBaseUrl, handleAllRequests);
+					sandbox.server.respondWith(baseUrl, handleAllRequests);
 
 					// Apply a filter to the fake XmlHttpRequest.
 					// Otherwise, ALL requests (e.g. for the component, views etc.) would be
 					// intercepted.
 					sinon.FakeXMLHttpRequest.useFilters = true;
-					sinon.FakeXMLHttpRequest.addFilter((_sMethod: string, url: string) => {
+					sinon.FakeXMLHttpRequest.addFilter((_method: string, url: string) => {
 						// If the filter returns true, the request will NOT be faked.
 						// We only want to fake requests that go to the intended service.
-						return !rBaseUrl.test(url);
+						return !baseUrl.test(url);
 					});
 
 					// Set the logging level for console entries from the mock server
diff --git a/packages/odatav4/steps/08/README.md b/packages/odatav4/steps/08/README.md
index e7b6bd285..5df421e54 100644
--- a/packages/odatav4/steps/08/README.md
+++ b/packages/odatav4/steps/08/README.md
@@ -19,52 +19,56 @@ You can download the solution for this step here: <span class="ts-only">[📥 Do
 ```ts
 // webapp/controller/App.controller.ts
 ...
-		onResetChanges() {
-			this.byId("peopleList").getBinding("items").resetChanges();
-			this._setUIChanges();
-		},
-
-		onResetDataSource() {
-			const oModel = this.getView().getModel(),
-				oOperation = oModel.bindContext("/ResetDataSource(...)");
-
-			oOperation.invoke().then(function () {
-					oModel.refresh();
-					MessageToast.show(this._getText("sourceResetSuccessMessage"));
-				}.bind(this), function (oError) {
-					MessageBox.error(oError.message);
-				}
-			);
-		},
-
-		onSave() {
+		onResetChanges(): void {
+			((this.byId("peopleList") as List).getBinding("items") as ODataListBinding).resetChanges();
+			// If there were technical errors, cancelling changes resets them.
+			this._bTechnicalErrors = false;
+			this._setUIChanges(false);
+		}
+
+		onResetDataSource(): void {
+			const model = this.getView().getModel() as ODataModel;
+			const operation = model.bindContext("/ResetDataSource(...)");
+
+			void operation.invoke().then(() => {
+				model.refresh();
+				MessageToast.show(this._getText("sourceResetSuccessMessage"));
+			}, (error2: Error) => {
+				MessageBox.error(error2.message);
+			});
+		}
+
+		onSave(): void {
 ...
 ```
 
 ```js
 // webapp/controller/App.controller.js
 ...
-		onResetChanges : function () {
-			this.byId("peopleList").getBinding("items").resetChanges();
-			this._setUIChanges();
-		},
-
-		onResetDataSource : function () {
-			var oModel = this.getView().getModel(),
-				oOperation = oModel.bindContext("/ResetDataSource(...)");
-
-			oOperation.invoke().then(function () {
-					oModel.refresh();
-					MessageToast.show(this._getText("sourceResetSuccessMessage"));
-				}.bind(this), function (oError) {
-					MessageBox.error(oError.message);
-				}
-			);
-		},
-
-		onSave : function () {
+    onResetChanges() {
+      this.byId("peopleList").getBinding("items").resetChanges();
+      // If there were technical errors, cancelling changes resets them.
+      this._bTechnicalErrors = false;
+      this._setUIChanges(false);
+    },
+    /**
+     * Reset the data source.
+     */
+    onResetDataSource() {
+      const model = this.getView().getModel();
+      const operation = model.bindContext("/ResetDataSource(...)");
+      void operation.invoke().then(() => {
+        model.refresh();
+        MessageToast.show(this._getText("sourceResetSuccessMessage"));
+      }, error2 => {
+        MessageBox.error(error2.message);
+      });
+    },
+    /**
+     * Save changes to the source.
+     */
+    onSave() {
 ...
-
 ```
 
 The `onResetDataSource` event handler calls the `ResetDataSource` action, which is an action of the *TripPin* OData service that resets the data of the service to its original state.
@@ -93,7 +97,7 @@ The invocation is asynchronous; the `invoke` method therefore returns a `Promise
               id="resetChangesButton"
               text="{i18n>resetChangesButtonText}"
               enabled="{= !${appView>/hasUIChanges}}"
-              press="onResetDataSource"
+              press=".onResetDataSource"
               type="Emphasized">
             </Button>
           </headerContent>
diff --git a/packages/odatav4/steps/08/webapp/controller/App.controller.ts b/packages/odatav4/steps/08/webapp/controller/App.controller.ts
index 00c7e6b8d..fda5f5eee 100644
--- a/packages/odatav4/steps/08/webapp/controller/App.controller.ts
+++ b/packages/odatav4/steps/08/webapp/controller/App.controller.ts
@@ -25,7 +25,7 @@ import type ODataListBinding from "sap/ui/model/odata/v4/ODataListBinding";
  */
 export default class App extends Controller {
 
-	private _bTechnicalErrors = false;
+	private _bTechnicalErrors: boolean;
 
 	/**
 	 *  Hook for initializing the controller
@@ -102,8 +102,8 @@ export default class App extends Controller {
 	/**
 	 * Lock UI when changing data in the input controls
 	 */
-	onInputChange(evt: Event): void {
-		if ((evt as unknown as { getParameter(n: string): unknown }).getParameter("escPressed")) {
+	onInputChange(evt: Event<{ escPressed: boolean }>): void {
+		if (evt.getParameter("escPressed")) {
 			this._setUIChanges();
 		} else {
 			this._setUIChanges(true);
diff --git a/packages/odatav4/steps/08/webapp/index-cdn.html b/packages/odatav4/steps/08/webapp/index-cdn.html
index e4ce80170..d550b4a6f 100644
--- a/packages/odatav4/steps/08/webapp/index-cdn.html
+++ b/packages/odatav4/steps/08/webapp/index-cdn.html
@@ -7,7 +7,6 @@
 	<script
 		id="sap-ui-bootstrap"
 		src="https://sdk.openui5.org/1.148.6/resources/sap-ui-core.js"
-		data-sap-ui-theme="sap_horizon"
 		data-sap-ui-compat-version="edge"
 		data-sap-ui-async="true"
 		data-sap-ui-on-init="module:ui5/tutorial/odatav4/initMockServer"
diff --git a/packages/odatav4/steps/08/webapp/index.html b/packages/odatav4/steps/08/webapp/index.html
index b1e54667d..f1acabd2f 100644
--- a/packages/odatav4/steps/08/webapp/index.html
+++ b/packages/odatav4/steps/08/webapp/index.html
@@ -7,7 +7,6 @@
 	<script
 		id="sap-ui-bootstrap"
 		src="resources/sap-ui-core.js"
-		data-sap-ui-theme="sap_horizon"
 		data-sap-ui-compat-version="edge"
 		data-sap-ui-async="true"
 		data-sap-ui-on-init="module:ui5/tutorial/odatav4/initMockServer"
diff --git a/packages/odatav4/steps/08/webapp/localService/mockdata/people.json b/packages/odatav4/steps/08/webapp/localService/mockdata/people.json
index 758030eaa..ec2491722 100644
--- a/packages/odatav4/steps/08/webapp/localService/mockdata/people.json
+++ b/packages/odatav4/steps/08/webapp/localService/mockdata/people.json
@@ -2,7 +2,7 @@
   "@odata.context": "https://services.odata.org/TripPinRESTierService/(S(id))/$metadata#People(Age,FirstName,LastName,UserName,Friends,BestFriend,HomeAddress)",
   "value": [
     {
-      "Age": 23,
+      "Age": "23",
       "FirstName": "Angel",
       "LastName": "Huffman",
       "UserName": "angelhuffman",
@@ -22,7 +22,7 @@
       }
     },
     {
-      "Age": 44,
+      "Age": "44",
       "FirstName": "Clyde",
       "LastName": "Guess",
       "UserName": "clydeguess",
@@ -42,7 +42,7 @@
       }
     },
     {
-      "Age": 19,
+      "Age": "19",
       "FirstName": "Elaine",
       "LastName": "Stewart",
       "UserName": "elainestewart",
@@ -62,7 +62,7 @@
       }
     },
     {
-      "Age": 37,
+      "Age": "37",
       "FirstName": "Genevieve",
       "LastName": "Reeves",
       "UserName": "genevievereeves",
@@ -82,7 +82,7 @@
       }
     },
     {
-      "Age": 25,
+      "Age": "25",
       "FirstName": "Georgina",
       "LastName": "Barlow",
       "UserName": "georginabarlow",
@@ -101,7 +101,7 @@
       }
     },
     {
-      "Age": 19,
+      "Age": "19",
       "FirstName": "Javier",
       "LastName": "Alfred",
       "UserName": "javieralfred",
@@ -120,7 +120,7 @@
       }
     },
     {
-      "Age": 26,
+      "Age": "26",
       "FirstName": "Joni",
       "LastName": "Rosales",
       "UserName": "jonirosales",
@@ -140,7 +140,7 @@
       }
     },
     {
-      "Age": 41,
+      "Age": "41",
       "FirstName": "Keith",
       "LastName": "Pinckney",
       "UserName": "keithpinckney",
@@ -160,7 +160,7 @@
       }
     },
     {
-      "Age": 30,
+      "Age": "30",
       "FirstName": "Krista",
       "LastName": "Kemp",
       "UserName": "kristakemp",
@@ -180,7 +180,7 @@
       }
     },
     {
-      "Age": 29,
+      "Age": "29",
       "FirstName": "Laurel",
       "LastName": "Osborn",
       "UserName": "laurelosborn",
@@ -200,7 +200,7 @@
       }
     },
     {
-      "Age": 53,
+      "Age": "53",
       "FirstName": "Marshall",
       "LastName": "Garay",
       "UserName": "marshallgaray",
@@ -219,7 +219,7 @@
       }
     },
     {
-      "Age": 66,
+      "Age": "66",
       "FirstName": "Ronald",
       "LastName": "Mundy",
       "UserName": "ronaldmundy",
@@ -238,7 +238,7 @@
       }
     },
     {
-      "Age": 51,
+      "Age": "51",
       "FirstName": "Russell",
       "LastName": "Whyte",
       "UserName": "russellwhyte",
@@ -258,7 +258,7 @@
       }
     },
     {
-      "Age": 57,
+      "Age": "57",
       "FirstName": "Ryan",
       "LastName": "Theriault",
       "UserName": "ryantheriault",
@@ -278,7 +278,7 @@
       }
     },
     {
-      "Age": 34,
+      "Age": "34",
       "FirstName": "Sallie",
       "LastName": "Sampson",
       "UserName": "salliesampson",
@@ -298,7 +298,7 @@
       }
     },
     {
-      "Age": 18,
+      "Age": "18",
       "FirstName": "Sandy",
       "LastName": "Osborn",
       "UserName": "sandyosborn",
@@ -318,7 +318,7 @@
       }
     },
     {
-      "Age": 24,
+      "Age": "24",
       "FirstName": "Scott",
       "LastName": "Ketchum",
       "UserName": "scottketchum",
@@ -337,7 +337,7 @@
       }
     },
     {
-      "Age": 31,
+      "Age": "31",
       "FirstName": "Ursula",
       "LastName": "Bright",
       "UserName": "ursulabright",
@@ -356,7 +356,7 @@
       }
     },
     {
-      "Age": 40,
+      "Age": "40",
       "FirstName": "Vincent",
       "LastName": "Calabrese",
       "UserName": "vincentcalabrese",
@@ -376,7 +376,7 @@
       }
     },
     {
-      "Age": 45,
+      "Age": "45",
       "FirstName": "Willie",
       "LastName": "Ashmore",
       "UserName": "willieashmore",
diff --git a/packages/odatav4/steps/08/webapp/localService/mockserver.ts b/packages/odatav4/steps/08/webapp/localService/mockserver.ts
index 7ca0307f4..f09c33ed9 100644
--- a/packages/odatav4/steps/08/webapp/localService/mockserver.ts
+++ b/packages/odatav4/steps/08/webapp/localService/mockserver.ts
@@ -35,7 +35,7 @@ let metadata: string; // The string that holds the cached mock service metadata
 const namespace = "ui5/tutorial/odatav4";
 // Component for writing logs into the console
 const logComponent = "ui5.tutorial.odatav4.mockserver";
-const rBaseUrl = /services.odata.org\/TripPinRESTierService/;
+const baseUrl = /services.odata.org\/TripPinRESTierService/;
 
 /**
  * Returns the base URL from a given URL.
@@ -251,19 +251,50 @@ function applySort(xhr: MockXhr, resultSet: MockUser[]): MockUser[] {
  * Does NOT change the given result set but returns a new array.
  */
 function applyFilter(xhr: MockXhr, resultSet: MockUser[]): MockUser[] {
-	let filteredUsers = [...resultSet]; // work with a copy
-	const matches = xhr.url.match(/\$filter=.*\((.*),'(.*)'\)/);
-
-	// If the request contains a filter command, apply the filter
-	if (Array.isArray(matches) && matches.length >= 3) {
-		const fieldName = matches[1];
-		const query = matches[2];
-
-		if (fieldName !== "LastName") {
-			throw new Error("Filters on field " + fieldName + " are not supported.");
+	const filter = new URL(xhr.url).searchParams.get("$filter");
+	let filteredUsers = resultSet.slice(); // work with a copy
+	if (!filter) {
+		return filteredUsers;
+	}
+	// support filters like:
+	// - "contains(LastName,'e')"
+	// - "(contains(LastName,'e')) and not (UserName eq 'a' or UserName eq 'b')"
+	// - "not (UserName eq 'a' or UserName eq 'b')"
+	// - "UserName eq 'foo'"
+	let remainingFilter = filter.startsWith("(") ? filter.slice(1) : filter;
+	if (remainingFilter.startsWith("contains(LastName,'")) { // from search field
+		remainingFilter = remainingFilter.slice(19); // remove "contains(LastName,'"
+		const value = remainingFilter.split("')")[0];
+		filteredUsers = filteredUsers.filter(function (user) {
+			return user.LastName.includes(value);
+		});
+		// remove the rest of "contains" from the filter and the optional following ") and "
+		remainingFilter = remainingFilter.slice(value.length + 2);
+		if (remainingFilter.startsWith(") and ")) {
+			remainingFilter = remainingFilter.slice(6);
 		}
-
-		filteredUsers = users.filter((user) => (user.LastName || "").indexOf(query) !== -1);
+	}
+	if (remainingFilter.startsWith("not (UserName eq ")) { // exclusive filter
+		const end = remainingFilter.indexOf(")");
+		const excludedUsers = remainingFilter.slice(17, end) // remove "not (UserName eq "
+			.split(" or UserName eq ")
+			// after splitting each entry contains the username in single quotes, e.g. "'me'"
+			.map((filterPart) => filterPart.slice(1, -1));
+		filteredUsers = filteredUsers.filter(function (user) {
+			return !excludedUsers.includes(user.UserName);
+		});
+		remainingFilter = remainingFilter.slice(end + 1);
+	}
+	if (remainingFilter.startsWith("UserName eq '")) { // refresh of selected user
+		const end = remainingFilter.indexOf("'", 13);
+		const value = remainingFilter.slice(13, end); // remove "UserName eq '"
+		filteredUsers = filteredUsers.filter(function (user) {
+			return user.LastName.includes(value);
+		});
+		remainingFilter = remainingFilter.slice(end + 1);
+	}
+	if (remainingFilter) {
+		throw new Error(`"${remainingFilter}" of filter "${filter}" is not supported`);
 	}
 
 	return filteredUsers;
@@ -292,7 +323,7 @@ function handleGetCountRequests(): MockResponse {
 /**
  * Handles GET requests for user data and returns a fitting response.
  */
-function handleGetUserRequests(xhr: MockXhr, _bCount: boolean): MockResponse {
+function handleGetUserRequests(xhr: MockXhr, _count: boolean): MockResponse {
 	let count: number;
 	let expand: RegExpMatchArray | string[] | null;
 	let expand2: string;
@@ -381,7 +412,7 @@ function handleGetUserRequests(xhr: MockXhr, _bCount: boolean): MockResponse {
  * Returns a specific user in the aUsers array.
  */
 function getUserByIndex(index: number, properties: string[]): MockUser | null {
-	const helper: MockUser = { UserName: "" };
+	const helper = {} as MockUser;
 	const user = users[index];
 
 	if (user) {
@@ -509,10 +540,16 @@ function handleDeleteUserRequests(xhr: MockXhr): MockResponse {
  * Handles POST requests for users and returns a fitting response.
  */
 function handlePostUserRequests(xhr: MockXhr): MockResponse {
-	const user = getUserDataFromRequestBody(xhr.requestBody || "");
+	let user = getUserDataFromRequestBody(xhr.requestBody || "");
 
 	// Check if that user already exists
 	if (isUnique(user.UserName)) {
+		user = {
+			HomeAddress : null, // prevents drillDown errors
+			LastName : "",
+			FirstName : "",
+			...user
+		};
 		users.push(user);
 
 		let responseBody = '{"@odata.context": "' + getBaseUrl(xhr.url)
@@ -697,8 +734,7 @@ function handleAllRequests(xhr: MockXhr): void {
 		"Mockserver: Received " + xhr.method + " request to URL " + xhr.url,
 		(xhr.requestBody ? "Request body is:\n" + xhr.requestBody : "No request body.")
 		+ "\n",
-		logComponent
-	);
+		logComponent);
 
 	if (xhr.method === "POST" && /\$batch/.test(xhr.url)) {
 		response2 = handleBatchRequest(xhr);
@@ -716,8 +752,7 @@ function handleAllRequests(xhr: MockXhr): void {
 			"Mockserver: Sent response with return code " + response2[0],
 			("Response headers: " + JSON.stringify(response2[1]) + "\n\nResponse body:\n"
 				+ (response2[2] || "")) + "\n",
-			logComponent
-		);
+			logComponent);
 	}
 }
 
@@ -725,7 +760,7 @@ export default {
 
 	/**
 	 * Creates a Sinon fake service, intercepting all http requests to
-	 * the URL defined in variable rBaseUrl above.
+	 * the URL defined in variable baseUrl above.
 	 * @returns a promise that is resolved when the mock server is started
 	 */
 	init(): Promise<unknown> {
@@ -744,16 +779,16 @@ export default {
 					sandbox.server.autoRespond = true;
 
 					// Register the requests for which responses should be faked.
-					sandbox.server.respondWith(rBaseUrl, handleAllRequests);
+					sandbox.server.respondWith(baseUrl, handleAllRequests);
 
 					// Apply a filter to the fake XmlHttpRequest.
 					// Otherwise, ALL requests (e.g. for the component, views etc.) would be
 					// intercepted.
 					sinon.FakeXMLHttpRequest.useFilters = true;
-					sinon.FakeXMLHttpRequest.addFilter((_sMethod: string, url: string) => {
+					sinon.FakeXMLHttpRequest.addFilter((_method: string, url: string) => {
 						// If the filter returns true, the request will NOT be faked.
 						// We only want to fake requests that go to the intended service.
-						return !rBaseUrl.test(url);
+						return !baseUrl.test(url);
 					});
 
 					// Set the logging level for console entries from the mock server
diff --git a/packages/odatav4/steps/08/webapp/test/integration/AllJourneys.js b/packages/odatav4/steps/08/webapp/test/integration/AllJourneys.js
deleted file mode 100644
index 9706f08ad..000000000
--- a/packages/odatav4/steps/08/webapp/test/integration/AllJourneys.js
+++ /dev/null
@@ -1,13 +0,0 @@
-sap.ui.define([
-	"sap/ui/test/Opa5",
-	"ui5/tutorial/odatav4/test/integration/arrangements/Startup",
-	"ui5/tutorial/odatav4/test/integration/TutorialJourney"
-], function (Opa5, Startup) {
-	"use strict";
-
-	Opa5.extendConfig({
-		arrangements : new Startup(),
-		viewNamespace : "ui5.tutorial.odatav4.view.",
-		autoWait : true
-	});
-});
diff --git a/packages/odatav4/steps/08/webapp/test/integration/TutorialJourney.js b/packages/odatav4/steps/08/webapp/test/integration/TutorialJourney.js
deleted file mode 100644
index 095f8b4b9..000000000
--- a/packages/odatav4/steps/08/webapp/test/integration/TutorialJourney.js
+++ /dev/null
@@ -1,122 +0,0 @@
-sap.ui.define([
-	"sap/ui/test/opaQunit",
-	"ui5/tutorial/odatav4/test/integration/pages/Tutorial"
-], function (opaTest) {
-	"use strict";
-
-	var iGrowingBy = 10, // Must equal the 'growingThreshold' setting of the table
-		iTotalUsers = 20; // Must equal the total number of users
-
-	QUnit.module("Posts");
-
-	opaTest("Should see the paginated table with all users", function (Given, _When, Then) {
-		// Arrangements
-		Given.iStartMyApp();
-		// Assertions
-		Then.onTheTutorialPage.theTableShouldHavePagination()
-			.and.theTableShouldShowUsers(iGrowingBy)
-			.and.theTableShouldShowTotalUsers(iTotalUsers);
-	});
-
-	opaTest("Should be able to load more users", function (_Given, When, Then) {
-		//Actions
-		When.onTheTutorialPage.iPressOnMoreData();
-		// Assertions
-		Then.onTheTutorialPage.theTableShouldShowUsers(iGrowingBy * 2);
-	});
-
-	opaTest("Should be able to sort users", function (_Given, When, Then) {
-		//Actions
-		When.onTheTutorialPage.iPressOnSort();
-		// Assertions
-		Then.onTheTutorialPage.theTableShouldStartWith("Alfred");
-	});
-
-	opaTest("Should be able to start adding users", function (_Given, When, Then) {
-		//Actions
-		When.onTheTutorialPage.iPressOnAdd()
-			.and.iEnterSomeData("a");
-		When.onTheTutorialPage.iPressOnAdd()
-			.and.iEnterSomeData("b");
-		// Assertions
-		Then.onTheTutorialPage.thePageFooterShouldBeVisible(true)
-			.and.theTableToolbarItemsShouldBeEnabled(false)
-			.and.theTableShouldShowTotalUsers(iTotalUsers + 2);
-	});
-
-	opaTest("Should be able to save the new users", function (_Given, When, Then) {
-		//Actions
-		When.onTheTutorialPage.iPressOnSave();
-		// Assertions
-		Then.onTheTutorialPage.theTableShouldStartWith("b")
-			.and.theTableShouldShowTotalUsers(iTotalUsers + 2)
-			.and.theTableToolbarItemsShouldBeEnabled(true)
-			.and.thePageFooterShouldBeVisible(false);
-	});
-
-	opaTest("Should be able to delete/undelete the new users", function (_Given, When, Then) {
-		// delete and undelete
-		When.onTheTutorialPage.iSelectUser("b")
-			.and.iPressOnDelete();
-		Then.onTheTutorialPage.theTableShouldStartWith("a")
-			.and.theTableShouldShowTotalUsers(iTotalUsers + 1);
-		When.onTheTutorialPage.iSelectUser("a")
-			.and.iPressOnDelete();
-		Then.onTheTutorialPage.theTableShouldStartWith("Alfred")
-			.and.theTableShouldShowTotalUsers(iTotalUsers);
-		When.onTheTutorialPage.iPressOnCancel();
-		Then.onTheTutorialPage.theMessageToastShouldShow("deletionRestoredMessage", "b")
-			.and.theMessageToastShouldShow("deletionRestoredMessage", "a")
-			.and.theTableShouldStartWith("b")
-			.and.theTableShouldShowTotalUsers(iTotalUsers + 2);
-		// delete and save
-		When.onTheTutorialPage.iSelectUser("a")
-			.and.iPressOnDelete()
-			.and.iSelectUser("b")
-			.and.iPressOnDelete()
-			.and.iPressOnSave();
-		Then.onTheTutorialPage.theMessageToastShouldShow("deletionSuccessMessage", "a")
-			.and.theMessageToastShouldShow("deletionSuccessMessage", "b")
-			.and.theTableShouldStartWith("Alfred")
-			.and.theTableShouldShowTotalUsers(iTotalUsers);
-	});
-
-	opaTest("Should be able to search for users", function (_Given, When, Then) {
-		//Actions
-		When.onTheTutorialPage.iSearchFor("Mundy");
-		// Assertions
-		Then.onTheTutorialPage.theTableShouldShowUsers(1);
-	});
-
-	opaTest("Should be able to reset the search", function (_Given, When, Then) {
-		//Actions
-		When.onTheTutorialPage.iSearchFor("");
-		// Assertions
-		Then.onTheTutorialPage.theTableShouldShowUsers(10);
-	});
-
-	opaTest("Should see an error when trying to change a user name to an existing one",
-		function (_Given, When, Then) {
-			//Actions
-			When.onTheTutorialPage.iChangeAUserKey("javieralfred", "willieashmore")
-				.and.iPressOnSave();
-			// Assertions
-			Then.onTheTutorialPage.iShouldSeeAServiceError()
-				.and.theTableToolbarItemsShouldBeEnabled(false)
-				.and.thePageFooterShouldBeVisible(true);
-		}
-	);
-
-	opaTest("Should be able to close the error and cancel the change",
-		function (_Given, When, Then) {
-			//Actions
-			When.onTheTutorialPage.iCloseTheServiceError()
-				.and.iPressOnCancel();
-			// Assertions
-			Then.onTheTutorialPage.theTableToolbarItemsShouldBeEnabled(true)
-				.and.thePageFooterShouldBeVisible(false);
-			// Cleanup
-			Then.iTeardownMyApp();
-		}
-	);
-});
diff --git a/packages/odatav4/steps/08/webapp/test/integration/arrangements/Startup.js b/packages/odatav4/steps/08/webapp/test/integration/arrangements/Startup.js
deleted file mode 100644
index 296ab6ec9..000000000
--- a/packages/odatav4/steps/08/webapp/test/integration/arrangements/Startup.js
+++ /dev/null
@@ -1,24 +0,0 @@
-sap.ui.define([
-	"sap/ui/test/Opa5",
-	"ui5/tutorial/odatav4/localService/mockserver"
-], function (Opa5, mockserver) {
-	"use strict";
-
-	return Opa5.extend("ui5.tutorial.odatav4.test.integration.arrangements.Startup", {
-
-		iStartMyApp : function () {
-			// start the mock server
-			this.iWaitForPromise(mockserver.init());
-
-			// start the app UI component
-			this.iStartMyUIComponent({
-				componentConfig : {
-					name : "ui5.tutorial.odatav4",
-					async : true
-				},
-				autoWait : true,
-				timeout : 45 // BCP: 2270085466
-			});
-		}
-	});
-});
diff --git a/packages/odatav4/steps/08/webapp/test/integration/opaTests.qunit.html b/packages/odatav4/steps/08/webapp/test/integration/opaTests.qunit.html
deleted file mode 100644
index 30e944e01..000000000
--- a/packages/odatav4/steps/08/webapp/test/integration/opaTests.qunit.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<title>Integration tests for OData V4 Tutorial</title>
-	<meta charset="UTF-8">
-
-	<script id="sap-ui-bootstrap"
-			src="../../../../../../../../../../../resources/sap-ui-core.js"
-			data-sap-ui-resourceroots='{
-					"ui5.tutorial.odatav4": "../../"
-				}'
-			data-sap-ui-compatVersion="edge"
-			data-sap-ui-async="true">
-	</script>
-
-	<link rel="stylesheet" type="text/css" href="../../../../../../../../../../../resources/sap/ui/thirdparty/qunit-2.css">
-
-	<script src="../../../../../../../../../../../resources/sap/ui/thirdparty/qunit-2.js"></script>
-	<script src="../../../../../../../../../../../resources/sap/ui/qunit/qunit-junit.js"></script>
-
-	<script src="opaTests.qunit.js"></script>
-</head>
-<body>
-	<div id="qunit"></div>
-	<div id="qunit-fixture"></div>
-</body>
-</html>
diff --git a/packages/odatav4/steps/08/webapp/test/integration/opaTests.qunit.js b/packages/odatav4/steps/08/webapp/test/integration/opaTests.qunit.js
deleted file mode 100644
index 908edf09e..000000000
--- a/packages/odatav4/steps/08/webapp/test/integration/opaTests.qunit.js
+++ /dev/null
@@ -1,11 +0,0 @@
-QUnit.config.autostart = false;
-
-sap.ui.require([
-	"sap/ui/core/Core",
-	"ui5/tutorial/odatav4/test/integration/AllJourneys"
-], function (Core) {
-	"use strict";
-	Core.ready().then(function () {
-		QUnit.start();
-	});
-});
diff --git a/packages/odatav4/steps/08/webapp/test/integration/pages/Tutorial.js b/packages/odatav4/steps/08/webapp/test/integration/pages/Tutorial.js
deleted file mode 100644
index 29e33dacd..000000000
--- a/packages/odatav4/steps/08/webapp/test/integration/pages/Tutorial.js
+++ /dev/null
@@ -1,300 +0,0 @@
-sap.ui.define([
-	"sap/ui/test/Opa5",
-	"sap/ui/test/matchers/AggregationLengthEquals",
-	"sap/ui/test/matchers/PropertyStrictEquals",
-	"sap/ui/test/matchers/BindingPath",
-	"sap/ui/test/actions/Press",
-	"sap/ui/test/actions/EnterText"
-], function (Opa5, AggregationLengthEquals, PropertyStrictEquals, BindingPath, Press, EnterText) {
-	"use strict";
-
-	var sViewName = "App",
-		sTableId = "peopleList";
-
-	function getListBinding(oTable) {
-		return oTable.getBinding("items");
-	}
-
-	function getFirstTableEntry(oTable) {
-		return getListBinding(oTable).getCurrentContexts()[0];
-	}
-
-	Opa5.createPageObjects({
-		onTheTutorialPage : {
-			actions : {
-				iPressOnMoreData : function () {
-					// Press action hits the "more" trigger on a table
-					return this.waitFor({
-						id : sTableId,
-						viewName : sViewName,
-						actions : new Press(),
-						errorMessage : "Table not found or it does not have a 'See More' trigger"
-					});
-				},
-
-				iPressOnSort : function () {
-					return this.waitFor({
-						id : "sortUsersButton",
-						viewName : sViewName,
-						actions : new Press(),
-						errorMessage : "Could not find the 'Sort' button"
-					});
-				},
-
-				iPressOnAdd : function () {
-					return this.waitFor({
-						id : "addUserButton",
-						viewName : sViewName,
-						actions : new Press(),
-						errorMessage : "Could not find the 'Add' button"
-					});
-				},
-
-				iPressOnDelete : function () {
-					return this.waitFor({
-						id : "deleteUserButton",
-						viewName : sViewName,
-						actions : new Press(),
-						errorMessage : "Could not find the 'Delete' button"
-					});
-				},
-
-				iPressOnSave : function () {
-					return this.waitFor({
-						id : "saveButton",
-						viewName : sViewName,
-						actions : new Press(),
-						errorMessage : "Could not find the 'Save' button"
-					});
-				},
-
-				iPressOnCancel : function () {
-					return this.waitFor({
-						id : "doneButton",
-						viewName : sViewName,
-						actions : new Press(),
-						errorMessage : "Could not find the 'Cancel' button"
-					});
-				},
-
-				iEnterSomeData : function (sValue) {
-					return this.waitFor({
-						controlType : "sap.m.Input",
-						viewName : sViewName,
-						matchers : [
-							// Find the input fields for the new entry
-							function (oControl) {
-								return oControl.getBindingContext().getIndex() === 0;
-							},
-							// Keep only empty input fields
-							function (oItem) {
-								return !oItem.getValue();
-							}
-						],
-						actions : new EnterText({
-							text : sValue
-						}),
-						errorMessage : "Could not find Input controls to enter data"
-					});
-				},
-
-				iSearchFor : function (sSearchString) {
-					return this.waitFor({
-						id : "searchField",
-						viewName : sViewName,
-						actions : new EnterText({
-							text : sSearchString
-						}),
-						errorMessage : "SearchField was not found"
-					});
-				},
-
-				iSelectUser : function (sKey) {
-					return this.waitFor({
-						controlType : "sap.m.ColumnListItem",
-						viewName : sViewName,
-						matchers : new BindingPath({
-							path : "/People('" + sKey + "')"
-						}),
-						actions : function (oItem) {
-							oItem.setSelected(true);
-						},
-						errorMessage : "Could not find a user with the key '" + sKey + "'"
-					});
-				},
-
-				iChangeAUserKey : function (sOldKey, sNewKey) {
-					return this.waitFor({
-						controlType : "sap.m.Input",
-						viewName : sViewName,
-						matchers : new PropertyStrictEquals({
-							name : "value",
-							value : sOldKey
-						}),
-						actions : new EnterText({
-							text : sNewKey
-						}),
-						errorMessage : "Could not find a user with the key '" + sOldKey + "'"
-					});
-				},
-
-				iCloseTheServiceError : function () {
-					return this.waitFor({
-						id : "serviceErrorMessageBox",
-						success : function () {
-							this.waitFor({
-								controlType : "sap.m.Button",
-								searchOpenDialogs : true,
-								// The error MessageBox has only one button, which closes the box
-								actions : new Press(),
-								errorMessage : "Cannot find the 'Close' button"
-							});
-						},
-						errorMessage : "Could not see the service error dialog"
-					});
-				}
-			},
-			assertions : {
-				theTableShouldHavePagination : function () {
-					return this.waitFor({
-						id : sTableId,
-						viewName : sViewName,
-						matchers : new PropertyStrictEquals({
-							name : "growing",
-							value : true
-						}),
-						success : function () {
-							Opa5.assert.ok(true, "The table is paginated");
-						},
-						errorMessage : "Table not found or it is not paginated"
-					});
-				},
-
-				theTableShouldShowUsers : function (iNumber) {
-					return this.waitFor({
-						id : sTableId,
-						viewName : sViewName,
-						matchers : new AggregationLengthEquals({
-							name : "items",
-							length : iNumber
-						}),
-						success : function () {
-							Opa5.assert.ok(true, "The table has "
-								+ iNumber + " items");
-						},
-						errorMessage : "Table not found or it does not have "
-							+ iNumber + " entries"
-					});
-				},
-
-				theTableShouldShowTotalUsers : function (iNumber) {
-					return this.waitFor({
-						id : sTableId,
-						viewName : sViewName,
-						matchers : function (oTable) {
-							var oListBinding = getListBinding(oTable);
-
-							return oListBinding && oListBinding.getLength() === iNumber;
-						},
-						success : function () {
-							Opa5.assert.ok(true, "The table shows a total of " + iNumber
-								+ " users");
-						},
-						errorMessage : "Table not found or it does not show " + iNumber
-							+ " total users"
-					});
-				},
-
-				theTableShouldStartWith : function (sLastName) {
-					return this.waitFor({
-						id : sTableId,
-						viewName : sViewName,
-						matchers : function (oTable) {
-							var oFirstItem = getFirstTableEntry(oTable);
-
-							return oFirstItem && oFirstItem.getProperty("LastName") === sLastName;
-						},
-						success : function () {
-							Opa5.assert.ok(true, "The table is sorted correctly");
-						},
-						errorMessage : "Table not found or it is not sorted correctl."
-					});
-				},
-
-				thePageFooterShouldBeVisible : function (bVisible) {
-					var sDesiredState = bVisible ? "visible" : "invisible";
-
-					return this.waitFor({
-						controlType : "sap.m.Toolbar",
-						viewName : sViewName,
-						visible : false,
-						matchers : new PropertyStrictEquals({
-							name : "visible",
-							value : bVisible
-						}),
-						success : function () {
-							Opa5.assert.ok(true, "The toolbar is " + sDesiredState);
-						},
-						errorMessage : "Toolbar not found or is not " + sDesiredState
-					});
-				},
-
-				theTableToolbarItemsShouldBeEnabled : function (bEnabled) {
-					var sDesiredState = bEnabled ? "enabled" : "disabled";
-
-					return this.waitFor({
-						id : /searchField$|refreshUsersButton$|sortUsersButton$/,
-						viewName : sViewName,
-						autoWait : false, // Needed because we want to find disabled controls, too
-						matchers : new PropertyStrictEquals({
-							name : "enabled",
-							value : bEnabled
-						}),
-						check : function (aControls) {
-							// Validate that ALL controls have the right state
-							return aControls.length === 3;
-						},
-						success : function () {
-							Opa5.assert.ok(true, "All controls in the table toolbar are "
-								+ sDesiredState);
-						},
-						errorMessage : "Not all controls in the table toolbar could be found or "
-							+ "not all are " + sDesiredState
-					});
-				},
-
-				theMessageToastShouldShow : function (sTextId, sArg0) {
-					return this.waitFor({
-						autoWait : false,
-						id : sTableId,
-						viewName : sViewName,
-						check : function (oControl) {
-							// Locate the message toast using its CSS class name and content
-							var sText = oControl.getModel("i18n").getResourceBundle()
-									.getText(sTextId, [sArg0]),
-								sSelector = ".sapMMessageToast:contains('" + sText + "')";
-
-							return !!Opa5.getJQuery()(sSelector).length;
-						},
-						success : function () {
-							Opa5.assert.ok(true, "Could see the MessageToast showing text with ID "
-								+ sTextId);
-						},
-						errorMessage : "Could not see a MessageToast showing text with ID "
-							+ sTextId
-					});
-				},
-
-				iShouldSeeAServiceError : function () {
-					return this.waitFor({
-						id : "serviceErrorMessageBox",
-						success : function () {
-							Opa5.assert.ok(true, "Could see the service error dialog");
-						},
-						errorMessage : "Could not see the service error dialog"
-					});
-				}
-			}
-		}
-	});
-});
diff --git a/packages/odatav4/steps/08/webapp/view/App.view.xml b/packages/odatav4/steps/08/webapp/view/App.view.xml
index 5159a0bab..3ab385c15 100644
--- a/packages/odatav4/steps/08/webapp/view/App.view.xml
+++ b/packages/odatav4/steps/08/webapp/view/App.view.xml
@@ -12,7 +12,7 @@
               id="resetChangesButton"
               text="{i18n>resetChangesButtonText}"
               enabled="{= !${appView>/hasUIChanges}}"
-              press="onResetDataSource"
+              press=".onResetDataSource"
               type="Emphasized">
             </Button>
           </headerContent>
diff --git a/packages/odatav4/steps/09/README.md b/packages/odatav4/steps/09/README.md
index 664f096d3..381e30674 100644
--- a/packages/odatav4/steps/09/README.md
+++ b/packages/odatav4/steps/09/README.md
@@ -19,117 +19,112 @@ You can download the solution for this step here: <span class="ts-only">[📥 Do
 ```ts
 // webapp/controller/App.controller.ts
 ...
-		onDelete() {
-			const oContext,
-				oPeopleList = this.byId("peopleList"),
-				oSelected = oPeopleList.getSelectedItem(),
-				sUserName;
-
-			if (oSelected) {
-				oContext = oSelected.getBindingContext();
-				sUserName = oContext.getProperty("UserName");
-				oContext.delete().then(function () {
-					MessageToast.show(this._getText("deletionSuccessMessage", sUserName));
-				}.bind(this), function (oError) {
-					if (oContext === oPeopleList.getSelectedItem().getBindingContext()) {
-						this._setDetailArea(oContext);
+		onDelete(): void {
+			const peopleList = this.byId("peopleList") as List;
+			const selected = peopleList.getSelectedItem() as ColumnListItem | null;
+
+			if (selected) {
+				const context = selected.getBindingContext() as Context;
+				const userName = context.getProperty("UserName") as string;
+				void context.delete().then(() => {
+					MessageToast.show(this._getText("deletionSuccessMessage", [userName]));
+				}, (error2: Error & { canceled?: boolean }) => {
+					const currentSelected = peopleList.getSelectedItem() as ColumnListItem | null;
+					if (currentSelected && context === currentSelected.getBindingContext()) {
+						this._setDetailArea(context);
 					}
 					this._setUIChanges();
-					if (oError.canceled) {
-						MessageToast.show(this._getText("deletionRestoredMessage", sUserName));
+					if (error2.canceled) {
+						MessageToast.show(this._getText("deletionRestoredMessage", [userName]));
 						return;
 					}
-					MessageBox.error(oError.message + ": " + sUserName);
-				}.bind(this));
+					MessageBox.error(error2.message + ": " + userName);
+				});
 				this._setDetailArea();
-				this._setUIChanges(true);
+				this._setUIChanges();
 			}
 		},
 ...
-		onMessageBindingChange(oEvent) {
+		onMessageBindingChange(event: Event): void {
 			...
 		},
 
-		onSelectionChange(oEvent) {
-			this._setDetailArea(oEvent.getParameter("listItem").getBindingContext());
+		onSelectionChange(event: Event<{ listItem: ColumnListItem }>): void {
+			const listItem = event.getParameter("listItem");
+			this._setDetailArea(listItem.getBindingContext() as Context);
 		},
 
 ...
-		 /**
-		 * Toggles the visibility of the detail area
-		 *
-		 * @param {object} [oUserContext] - the current user context
-		 */
-		_setDetailArea(oUserContext) {
-			const oDetailArea = this.byId("detailArea"),
-				oLayout = this.byId("defaultLayout"),
-				oSearchField = this.byId("searchField");
-
-			oDetailArea.setBindingContext(oUserContext || null);
+		_setDetailArea(userContext?: Context): void {
+			const detailArea = this.byId("detailArea") as Control;
+			const layout = this.byId("defaultLayout") as SplitterLayoutData;
+			const searchField = this.byId("searchField") as SearchField;
+
+			if (!detailArea) {
+				return; // do nothing during view destruction
+			}
+
+			detailArea.setBindingContext(userContext || null);
 			// resize view
-			oDetailArea.setVisible(!!oUserContext);
-			oLayout.setSize(oUserContext ? "60%" : "100%");
-			oLayout.setResizable(!!oUserContext);
-			oSearchField.setWidth(oUserContext ? "40%" : "20%");
+			detailArea.setVisible(!!userContext);
+			layout.setSize(userContext ? "60%" : "100%");
+			layout.setResizable(!!userContext);
+			searchField.setWidth(userContext ? "40%" : "20%");
 		}
 ```
 
 ```js
 // webapp/controller/App.controller.js
 ...
-		onDelete : function () {
-			var oContext,
-				oPeopleList = this.byId("peopleList"),
-				oSelected = oPeopleList.getSelectedItem(),
-				sUserName;
-
-			if (oSelected) {
-				oContext = oSelected.getBindingContext();
-				sUserName = oContext.getProperty("UserName");
-				oContext.delete().then(function () {
-					MessageToast.show(this._getText("deletionSuccessMessage", sUserName));
-				}.bind(this), function (oError) {
-					if (oContext === oPeopleList.getSelectedItem().getBindingContext()) {
-						this._setDetailArea(oContext);
-					}
-					this._setUIChanges();
-					if (oError.canceled) {
-						MessageToast.show(this._getText("deletionRestoredMessage", sUserName));
-						return;
-					}
-					MessageBox.error(oError.message + ": " + sUserName);
-				}.bind(this));
-				this._setDetailArea();
-				this._setUIChanges(true);
-			}
-		},
+    onDelete() {
+      const peopleList = this.byId("peopleList");
+      const selected = peopleList.getSelectedItem();
+      if (selected) {
+        const context = selected.getBindingContext();
+        const userName = context.getProperty("UserName");
+        void context.delete().then(() => {
+          MessageToast.show(this._getText("deletionSuccessMessage", [userName]));
+        }, error2 => {
+          const currentSelected = peopleList.getSelectedItem();
+          if (currentSelected && context === currentSelected.getBindingContext()) {
+            this._setDetailArea(context);
+          }
+          this._setUIChanges();
+          if (error2.canceled) {
+            MessageToast.show(this._getText("deletionRestoredMessage", [userName]));
+            return;
+          }
+          MessageBox.error(error2.message + ": " + userName);
+        });
+        this._setDetailArea();
+        this._setUIChanges();
+      }
+    },
 ...
-		onMessageBindingChange : function (oEvent) {
-			...
-		},
+    onMessageBindingChange(event) {
+      ...
+    },
 
-		onSelectionChange : function (oEvent) {
-			this._setDetailArea(oEvent.getParameter("listItem").getBindingContext());
-		},
+    onSelectionChange(event) {
+      const listItem = event.getParameter("listItem");
+      this._setDetailArea(listItem.getBindingContext());
+    },
 
 ...
-		 /**
-		 * Toggles the visibility of the detail area
-		 *
-		 * @param {object} [oUserContext] - the current user context
-		 */
-		_setDetailArea : function (oUserContext) {
-			var oDetailArea = this.byId("detailArea"),
-				oLayout = this.byId("defaultLayout"),
-				oSearchField = this.byId("searchField");
-
-			oDetailArea.setBindingContext(oUserContext || null);
-			// resize view
-			oDetailArea.setVisible(!!oUserContext);
-			oLayout.setSize(oUserContext ? "60%" : "100%");
-			oLayout.setResizable(!!oUserContext);
-			oSearchField.setWidth(oUserContext ? "40%" : "20%");
-		}
+    _setDetailArea(userContext) {
+      const detailArea = this.byId("detailArea");
+      const layout = this.byId("defaultLayout");
+      const searchField = this.byId("searchField");
+      if (!detailArea) {
+        return; // do nothing during view destruction
+      }
+      detailArea.setBindingContext(userContext || null);
+      // resize view
+      detailArea.setVisible(!!userContext);
+      layout.setSize(userContext ? "60%" : "100%");
+      layout.setResizable(!!userContext);
+      searchField.setWidth(userContext ? "40%" : "20%");
+    }
 ```
 
 The `onSelectionChange` event handler retrieves the context of the selected list item and passes it to a new `_setDetailArea` function. Within `_setDetailArea`, the given context is passed as binding context for the semantic page detail area.
diff --git a/packages/odatav4/steps/09/webapp/controller/App.controller.ts b/packages/odatav4/steps/09/webapp/controller/App.controller.ts
index 664d4e8bf..7de283657 100644
--- a/packages/odatav4/steps/09/webapp/controller/App.controller.ts
+++ b/packages/odatav4/steps/09/webapp/controller/App.controller.ts
@@ -19,13 +19,15 @@ import type Input from "sap/m/Input";
 import type Context from "sap/ui/model/odata/v4/Context";
 import type ODataModel from "sap/ui/model/odata/v4/ODataModel";
 import type ODataListBinding from "sap/ui/model/odata/v4/ODataListBinding";
+import type SplitterLayoutData from "sap/ui/layout/SplitterLayoutData";
+import type Control from "sap/ui/core/Control";
 
 /**
  * @namespace ui5.tutorial.odatav4.controller
  */
 export default class App extends Controller {
 
-	private _bTechnicalErrors = false;
+	private _bTechnicalErrors: boolean;
 
 	/**
 	 *  Hook for initializing the controller
@@ -108,8 +110,8 @@ export default class App extends Controller {
 	/**
 	 * Lock UI when changing data in the input controls
 	 */
-	onInputChange(evt: Event): void {
-		if ((evt as unknown as { getParameter(n: string): unknown }).getParameter("escPressed")) {
+	onInputChange(evt: Event<{ escPressed: boolean }>): void {
+		if (evt.getParameter("escPressed")) {
 			this._setUIChanges();
 		} else {
 			this._setUIChanges(true);
@@ -239,8 +241,8 @@ export default class App extends Controller {
 		messageOpen = true;
 	}
 
-	onSelectionChange(event: Event): void {
-		const listItem = (event as unknown as { getParameter(n: string): unknown }).getParameter("listItem") as ColumnListItem;
+	onSelectionChange(event: Event<{ listItem: ColumnListItem }>): void {
+		const listItem = event.getParameter("listItem");
 		this._setDetailArea(listItem.getBindingContext() as Context);
 	}
 
@@ -285,17 +287,17 @@ export default class App extends Controller {
 	 * @param oUserContext - the current user context
 	 */
 	_setDetailArea(userContext?: Context): void {
-		const detailArea = this.byId("detailArea");
-		const layout = this.byId("defaultLayout") as unknown as { setSize(s: string): void; setResizable(b: boolean): void };
+		const detailArea = this.byId("detailArea") as Control;
+		const layout = this.byId("defaultLayout") as SplitterLayoutData;
 		const searchField = this.byId("searchField") as SearchField;
 
 		if (!detailArea) {
 			return; // do nothing during view destruction
 		}
 
-		(detailArea as unknown as { setBindingContext(c: Context | null): void }).setBindingContext(userContext || null);
+		detailArea.setBindingContext(userContext || null);
 		// resize view
-		(detailArea as unknown as { setVisible(b: boolean): void }).setVisible(!!userContext);
+		detailArea.setVisible(!!userContext);
 		layout.setSize(userContext ? "60%" : "100%");
 		layout.setResizable(!!userContext);
 		searchField.setWidth(userContext ? "40%" : "20%");
diff --git a/packages/odatav4/steps/09/webapp/index-cdn.html b/packages/odatav4/steps/09/webapp/index-cdn.html
index e4ce80170..d550b4a6f 100644
--- a/packages/odatav4/steps/09/webapp/index-cdn.html
+++ b/packages/odatav4/steps/09/webapp/index-cdn.html
@@ -7,7 +7,6 @@
 	<script
 		id="sap-ui-bootstrap"
 		src="https://sdk.openui5.org/1.148.6/resources/sap-ui-core.js"
-		data-sap-ui-theme="sap_horizon"
 		data-sap-ui-compat-version="edge"
 		data-sap-ui-async="true"
 		data-sap-ui-on-init="module:ui5/tutorial/odatav4/initMockServer"
diff --git a/packages/odatav4/steps/09/webapp/index.html b/packages/odatav4/steps/09/webapp/index.html
index b1e54667d..f1acabd2f 100644
--- a/packages/odatav4/steps/09/webapp/index.html
+++ b/packages/odatav4/steps/09/webapp/index.html
@@ -7,7 +7,6 @@
 	<script
 		id="sap-ui-bootstrap"
 		src="resources/sap-ui-core.js"
-		data-sap-ui-theme="sap_horizon"
 		data-sap-ui-compat-version="edge"
 		data-sap-ui-async="true"
 		data-sap-ui-on-init="module:ui5/tutorial/odatav4/initMockServer"
diff --git a/packages/odatav4/steps/09/webapp/localService/mockdata/people.json b/packages/odatav4/steps/09/webapp/localService/mockdata/people.json
index 758030eaa..ec2491722 100644
--- a/packages/odatav4/steps/09/webapp/localService/mockdata/people.json
+++ b/packages/odatav4/steps/09/webapp/localService/mockdata/people.json
@@ -2,7 +2,7 @@
   "@odata.context": "https://services.odata.org/TripPinRESTierService/(S(id))/$metadata#People(Age,FirstName,LastName,UserName,Friends,BestFriend,HomeAddress)",
   "value": [
     {
-      "Age": 23,
+      "Age": "23",
       "FirstName": "Angel",
       "LastName": "Huffman",
       "UserName": "angelhuffman",
@@ -22,7 +22,7 @@
       }
     },
     {
-      "Age": 44,
+      "Age": "44",
       "FirstName": "Clyde",
       "LastName": "Guess",
       "UserName": "clydeguess",
@@ -42,7 +42,7 @@
       }
     },
     {
-      "Age": 19,
+      "Age": "19",
       "FirstName": "Elaine",
       "LastName": "Stewart",
       "UserName": "elainestewart",
@@ -62,7 +62,7 @@
       }
     },
     {
-      "Age": 37,
+      "Age": "37",
       "FirstName": "Genevieve",
       "LastName": "Reeves",
       "UserName": "genevievereeves",
@@ -82,7 +82,7 @@
       }
     },
     {
-      "Age": 25,
+      "Age": "25",
       "FirstName": "Georgina",
       "LastName": "Barlow",
       "UserName": "georginabarlow",
@@ -101,7 +101,7 @@
       }
     },
     {
-      "Age": 19,
+      "Age": "19",
       "FirstName": "Javier",
       "LastName": "Alfred",
       "UserName": "javieralfred",
@@ -120,7 +120,7 @@
       }
     },
     {
-      "Age": 26,
+      "Age": "26",
       "FirstName": "Joni",
       "LastName": "Rosales",
       "UserName": "jonirosales",
@@ -140,7 +140,7 @@
       }
     },
     {
-      "Age": 41,
+      "Age": "41",
       "FirstName": "Keith",
       "LastName": "Pinckney",
       "UserName": "keithpinckney",
@@ -160,7 +160,7 @@
       }
     },
     {
-      "Age": 30,
+      "Age": "30",
       "FirstName": "Krista",
       "LastName": "Kemp",
       "UserName": "kristakemp",
@@ -180,7 +180,7 @@
       }
     },
     {
-      "Age": 29,
+      "Age": "29",
       "FirstName": "Laurel",
       "LastName": "Osborn",
       "UserName": "laurelosborn",
@@ -200,7 +200,7 @@
       }
     },
     {
-      "Age": 53,
+      "Age": "53",
       "FirstName": "Marshall",
       "LastName": "Garay",
       "UserName": "marshallgaray",
@@ -219,7 +219,7 @@
       }
     },
     {
-      "Age": 66,
+      "Age": "66",
       "FirstName": "Ronald",
       "LastName": "Mundy",
       "UserName": "ronaldmundy",
@@ -238,7 +238,7 @@
       }
     },
     {
-      "Age": 51,
+      "Age": "51",
       "FirstName": "Russell",
       "LastName": "Whyte",
       "UserName": "russellwhyte",
@@ -258,7 +258,7 @@
       }
     },
     {
-      "Age": 57,
+      "Age": "57",
       "FirstName": "Ryan",
       "LastName": "Theriault",
       "UserName": "ryantheriault",
@@ -278,7 +278,7 @@
       }
     },
     {
-      "Age": 34,
+      "Age": "34",
       "FirstName": "Sallie",
       "LastName": "Sampson",
       "UserName": "salliesampson",
@@ -298,7 +298,7 @@
       }
     },
     {
-      "Age": 18,
+      "Age": "18",
       "FirstName": "Sandy",
       "LastName": "Osborn",
       "UserName": "sandyosborn",
@@ -318,7 +318,7 @@
       }
     },
     {
-      "Age": 24,
+      "Age": "24",
       "FirstName": "Scott",
       "LastName": "Ketchum",
       "UserName": "scottketchum",
@@ -337,7 +337,7 @@
       }
     },
     {
-      "Age": 31,
+      "Age": "31",
       "FirstName": "Ursula",
       "LastName": "Bright",
       "UserName": "ursulabright",
@@ -356,7 +356,7 @@
       }
     },
     {
-      "Age": 40,
+      "Age": "40",
       "FirstName": "Vincent",
       "LastName": "Calabrese",
       "UserName": "vincentcalabrese",
@@ -376,7 +376,7 @@
       }
     },
     {
-      "Age": 45,
+      "Age": "45",
       "FirstName": "Willie",
       "LastName": "Ashmore",
       "UserName": "willieashmore",
diff --git a/packages/odatav4/steps/09/webapp/localService/mockserver.ts b/packages/odatav4/steps/09/webapp/localService/mockserver.ts
index 7ca0307f4..f09c33ed9 100644
--- a/packages/odatav4/steps/09/webapp/localService/mockserver.ts
+++ b/packages/odatav4/steps/09/webapp/localService/mockserver.ts
@@ -35,7 +35,7 @@ let metadata: string; // The string that holds the cached mock service metadata
 const namespace = "ui5/tutorial/odatav4";
 // Component for writing logs into the console
 const logComponent = "ui5.tutorial.odatav4.mockserver";
-const rBaseUrl = /services.odata.org\/TripPinRESTierService/;
+const baseUrl = /services.odata.org\/TripPinRESTierService/;
 
 /**
  * Returns the base URL from a given URL.
@@ -251,19 +251,50 @@ function applySort(xhr: MockXhr, resultSet: MockUser[]): MockUser[] {
  * Does NOT change the given result set but returns a new array.
  */
 function applyFilter(xhr: MockXhr, resultSet: MockUser[]): MockUser[] {
-	let filteredUsers = [...resultSet]; // work with a copy
-	const matches = xhr.url.match(/\$filter=.*\((.*),'(.*)'\)/);
-
-	// If the request contains a filter command, apply the filter
-	if (Array.isArray(matches) && matches.length >= 3) {
-		const fieldName = matches[1];
-		const query = matches[2];
-
-		if (fieldName !== "LastName") {
-			throw new Error("Filters on field " + fieldName + " are not supported.");
+	const filter = new URL(xhr.url).searchParams.get("$filter");
+	let filteredUsers = resultSet.slice(); // work with a copy
+	if (!filter) {
+		return filteredUsers;
+	}
+	// support filters like:
+	// - "contains(LastName,'e')"
+	// - "(contains(LastName,'e')) and not (UserName eq 'a' or UserName eq 'b')"
+	// - "not (UserName eq 'a' or UserName eq 'b')"
+	// - "UserName eq 'foo'"
+	let remainingFilter = filter.startsWith("(") ? filter.slice(1) : filter;
+	if (remainingFilter.startsWith("contains(LastName,'")) { // from search field
+		remainingFilter = remainingFilter.slice(19); // remove "contains(LastName,'"
+		const value = remainingFilter.split("')")[0];
+		filteredUsers = filteredUsers.filter(function (user) {
+			return user.LastName.includes(value);
+		});
+		// remove the rest of "contains" from the filter and the optional following ") and "
+		remainingFilter = remainingFilter.slice(value.length + 2);
+		if (remainingFilter.startsWith(") and ")) {
+			remainingFilter = remainingFilter.slice(6);
 		}
-
-		filteredUsers = users.filter((user) => (user.LastName || "").indexOf(query) !== -1);
+	}
+	if (remainingFilter.startsWith("not (UserName eq ")) { // exclusive filter
+		const end = remainingFilter.indexOf(")");
+		const excludedUsers = remainingFilter.slice(17, end) // remove "not (UserName eq "
+			.split(" or UserName eq ")
+			// after splitting each entry contains the username in single quotes, e.g. "'me'"
+			.map((filterPart) => filterPart.slice(1, -1));
+		filteredUsers = filteredUsers.filter(function (user) {
+			return !excludedUsers.includes(user.UserName);
+		});
+		remainingFilter = remainingFilter.slice(end + 1);
+	}
+	if (remainingFilter.startsWith("UserName eq '")) { // refresh of selected user
+		const end = remainingFilter.indexOf("'", 13);
+		const value = remainingFilter.slice(13, end); // remove "UserName eq '"
+		filteredUsers = filteredUsers.filter(function (user) {
+			return user.LastName.includes(value);
+		});
+		remainingFilter = remainingFilter.slice(end + 1);
+	}
+	if (remainingFilter) {
+		throw new Error(`"${remainingFilter}" of filter "${filter}" is not supported`);
 	}
 
 	return filteredUsers;
@@ -292,7 +323,7 @@ function handleGetCountRequests(): MockResponse {
 /**
  * Handles GET requests for user data and returns a fitting response.
  */
-function handleGetUserRequests(xhr: MockXhr, _bCount: boolean): MockResponse {
+function handleGetUserRequests(xhr: MockXhr, _count: boolean): MockResponse {
 	let count: number;
 	let expand: RegExpMatchArray | string[] | null;
 	let expand2: string;
@@ -381,7 +412,7 @@ function handleGetUserRequests(xhr: MockXhr, _bCount: boolean): MockResponse {
  * Returns a specific user in the aUsers array.
  */
 function getUserByIndex(index: number, properties: string[]): MockUser | null {
-	const helper: MockUser = { UserName: "" };
+	const helper = {} as MockUser;
 	const user = users[index];
 
 	if (user) {
@@ -509,10 +540,16 @@ function handleDeleteUserRequests(xhr: MockXhr): MockResponse {
  * Handles POST requests for users and returns a fitting response.
  */
 function handlePostUserRequests(xhr: MockXhr): MockResponse {
-	const user = getUserDataFromRequestBody(xhr.requestBody || "");
+	let user = getUserDataFromRequestBody(xhr.requestBody || "");
 
 	// Check if that user already exists
 	if (isUnique(user.UserName)) {
+		user = {
+			HomeAddress : null, // prevents drillDown errors
+			LastName : "",
+			FirstName : "",
+			...user
+		};
 		users.push(user);
 
 		let responseBody = '{"@odata.context": "' + getBaseUrl(xhr.url)
@@ -697,8 +734,7 @@ function handleAllRequests(xhr: MockXhr): void {
 		"Mockserver: Received " + xhr.method + " request to URL " + xhr.url,
 		(xhr.requestBody ? "Request body is:\n" + xhr.requestBody : "No request body.")
 		+ "\n",
-		logComponent
-	);
+		logComponent);
 
 	if (xhr.method === "POST" && /\$batch/.test(xhr.url)) {
 		response2 = handleBatchRequest(xhr);
@@ -716,8 +752,7 @@ function handleAllRequests(xhr: MockXhr): void {
 			"Mockserver: Sent response with return code " + response2[0],
 			("Response headers: " + JSON.stringify(response2[1]) + "\n\nResponse body:\n"
 				+ (response2[2] || "")) + "\n",
-			logComponent
-		);
+			logComponent);
 	}
 }
 
@@ -725,7 +760,7 @@ export default {
 
 	/**
 	 * Creates a Sinon fake service, intercepting all http requests to
-	 * the URL defined in variable rBaseUrl above.
+	 * the URL defined in variable baseUrl above.
 	 * @returns a promise that is resolved when the mock server is started
 	 */
 	init(): Promise<unknown> {
@@ -744,16 +779,16 @@ export default {
 					sandbox.server.autoRespond = true;
 
 					// Register the requests for which responses should be faked.
-					sandbox.server.respondWith(rBaseUrl, handleAllRequests);
+					sandbox.server.respondWith(baseUrl, handleAllRequests);
 
 					// Apply a filter to the fake XmlHttpRequest.
 					// Otherwise, ALL requests (e.g. for the component, views etc.) would be
 					// intercepted.
 					sinon.FakeXMLHttpRequest.useFilters = true;
-					sinon.FakeXMLHttpRequest.addFilter((_sMethod: string, url: string) => {
+					sinon.FakeXMLHttpRequest.addFilter((_method: string, url: string) => {
 						// If the filter returns true, the request will NOT be faked.
 						// We only want to fake requests that go to the intended service.
-						return !rBaseUrl.test(url);
+						return !baseUrl.test(url);
 					});
 
 					// Set the logging level for console entries from the mock server
diff --git a/packages/odatav4/steps/09/webapp/view/App.view.xml b/packages/odatav4/steps/09/webapp/view/App.view.xml
index 8098b3099..e54bc8ae0 100644
--- a/packages/odatav4/steps/09/webapp/view/App.view.xml
+++ b/packages/odatav4/steps/09/webapp/view/App.view.xml
@@ -16,7 +16,7 @@
         id="resetChangesButton"
         text="{i18n>resetChangesButtonText}"
         enabled="{= !${appView>/hasUIChanges}}"
-        press="onResetDataSource"
+        press=".onResetDataSource"
         type="Emphasized">
       </Button>
       </headerContent>
diff --git a/packages/odatav4/steps/10/README.md b/packages/odatav4/steps/10/README.md
index c8db093d2..a74ca38ab 100644
--- a/packages/odatav4/steps/10/README.md
+++ b/packages/odatav4/steps/10/README.md
@@ -19,45 +19,43 @@ You can download the solution for this step here: <span class="ts-only">[📥 Do
 ```ts
 // webapp/controller/App.controller.ts
 ...
-		onMessageBindingChange(oEvent) {
+		onMessageBindingChange(event: Event): void {
 			...
 		},
 
-		onSelectionChange(oEvent) {
-			this._setDetailArea(oEvent.getParameter("listItem").getBindingContext());
+		onSelectionChange(event: Event<{ listItem: ColumnListItem }>): void {
+			const listItem = event.getParameter("listItem");
+			this._setDetailArea(listItem.getBindingContext() as Context);
 		},
 ...
 		/**
 		 * Toggles the visibility of the detail area
-		 *
-		 * @param {object} [oUserContext] - the current user context
+		 * @param oUserContext - the current user context
 		 */
-		_setDetailArea(oUserContext) {
-			const oDetailArea = this.byId("detailArea"),
-				oLayout = this.byId("defaultLayout"),
-				oOldContext,
-				oSearchField = this.byId("searchField");
-
-			if (!oDetailArea) {
-				return; // do nothing when running within view destruction
+		_setDetailArea(userContext?: Context): void {
+			const detailArea = this.byId("detailArea") as Control;
+			const layout = this.byId("defaultLayout") as SplitterLayoutData;
+			const searchField = this.byId("searchField") as SearchField;
+
+			if (!detailArea) {
+				return; // do nothing during view destruction
 			}
 
-			oOldContext = oDetailArea.getBindingContext();
-			if (oOldContext) {
-				oOldContext.setKeepAlive(false);
+			const oldContext = detailArea.getBindingContext() as Context | null;
+			if (oldContext && !oldContext.isTransient()) {
+				oldContext.setKeepAlive(false);
 			}
-			if (oUserContext) {
-				oUserContext.setKeepAlive(true,
-					// hide details if kept entity was refreshed but does not exists any more
+			if (userContext && !userContext.isTransient()) {
+				userContext.setKeepAlive(true,
+					// hide details if kept entity was refreshed but does not exist any more
 					this._setDetailArea.bind(this));
-
 			}
-			oDetailArea.setBindingContext(oUserContext || null);
+			detailArea.setBindingContext(userContext || null);
 			// resize view
-			oDetailArea.setVisible(!!oUserContext);
-			oLayout.setSize(oUserContext ? "60%" : "100%");
-			oLayout.setResizable(!!oUserContext);
-			oSearchField.setWidth(oUserContext ? "40%" : "20%");
+			detailArea.setVisible(!!userContext);
+			layout.setSize(userContext ? "60%" : "100%");
+			layout.setResizable(!!userContext);
+			searchField.setWidth(userContext ? "40%" : "20%");
 		}
  ...
 ```
@@ -65,46 +63,42 @@ You can download the solution for this step here: <span class="ts-only">[📥 Do
 ```js
 // webapp/controller/App.controller.js
 ...
-		onMessageBindingChange : function (oEvent) {
-			...
-		},
-
-		onSelectionChange : function (oEvent) {
-			this._setDetailArea(oEvent.getParameter("listItem").getBindingContext());
-		},
+    onMessageBindingChange(event) {
+      ...
+    },
+
+    onSelectionChange(event) {
+      const listItem = event.getParameter("listItem");
+      this._setDetailArea(listItem.getBindingContext());
+    },
 ...
-		/**
-		 * Toggles the visibility of the detail area
-		 *
-		 * @param {object} [oUserContext] - the current user context
-		 */
-		_setDetailArea : function (oUserContext) {
-			var oDetailArea = this.byId("detailArea"),
-				oLayout = this.byId("defaultLayout"),
-				oOldContext,
-				oSearchField = this.byId("searchField");
-
-			if (!oDetailArea) {
-				return; // do nothing when running within view destruction
-			}
-
-			oOldContext = oDetailArea.getBindingContext();
-			if (oOldContext) {
-				oOldContext.setKeepAlive(false);
-			}
-			if (oUserContext) {
-				oUserContext.setKeepAlive(true,
-					// hide details if kept entity was refreshed but does not exists any more
-					this._setDetailArea.bind(this));
-
-			}
-			oDetailArea.setBindingContext(oUserContext || null);
-			// resize view
-			oDetailArea.setVisible(!!oUserContext);
-			oLayout.setSize(oUserContext ? "60%" : "100%");
-			oLayout.setResizable(!!oUserContext);
-			oSearchField.setWidth(oUserContext ? "40%" : "20%");
-		}
+    /**
+     * Toggles the visibility of the detail area
+     * @param oUserContext - the current user context
+     */
+    _setDetailArea(userContext) {
+      const detailArea = this.byId("detailArea");
+      const layout = this.byId("defaultLayout");
+      const searchField = this.byId("searchField");
+      if (!detailArea) {
+        return; // do nothing during view destruction
+      }
+      const oldContext = detailArea.getBindingContext();
+      if (oldContext && !oldContext.isTransient()) {
+        oldContext.setKeepAlive(false);
+      }
+      if (userContext && !userContext.isTransient()) {
+        userContext.setKeepAlive(true,
+        // hide details if kept entity was refreshed but does not exist any more
+        this._setDetailArea.bind(this));
+      }
+      detailArea.setBindingContext(userContext || null);
+      // resize view
+      detailArea.setVisible(!!userContext);
+      layout.setSize(userContext ? "60%" : "100%");
+      layout.setResizable(!!userContext);
+      searchField.setWidth(userContext ? "40%" : "20%");
+    }
  ...
 ```
 
diff --git a/packages/odatav4/steps/10/webapp/controller/App.controller.ts b/packages/odatav4/steps/10/webapp/controller/App.controller.ts
index 7722959a3..6b0e60d2b 100644
--- a/packages/odatav4/steps/10/webapp/controller/App.controller.ts
+++ b/packages/odatav4/steps/10/webapp/controller/App.controller.ts
@@ -19,13 +19,15 @@ import type Input from "sap/m/Input";
 import type Context from "sap/ui/model/odata/v4/Context";
 import type ODataModel from "sap/ui/model/odata/v4/ODataModel";
 import type ODataListBinding from "sap/ui/model/odata/v4/ODataListBinding";
+import type SplitterLayoutData from "sap/ui/layout/SplitterLayoutData";
+import type Control from "sap/ui/core/Control";
 
 /**
  * @namespace ui5.tutorial.odatav4.controller
  */
 export default class App extends Controller {
 
-	private _bTechnicalErrors = false;
+	private _bTechnicalErrors: boolean;
 
 	/**
 	 *  Hook for initializing the controller
@@ -108,8 +110,8 @@ export default class App extends Controller {
 	/**
 	 * Lock UI when changing data in the input controls
 	 */
-	onInputChange(evt: Event): void {
-		if ((evt as unknown as { getParameter(n: string): unknown }).getParameter("escPressed")) {
+	onInputChange(evt: Event<{ escPressed: boolean }>): void {
+		if (evt.getParameter("escPressed")) {
 			this._setUIChanges();
 		} else {
 			this._setUIChanges(true);
@@ -239,8 +241,8 @@ export default class App extends Controller {
 		messageOpen = true;
 	}
 
-	onSelectionChange(event: Event): void {
-		const listItem = (event as unknown as { getParameter(n: string): unknown }).getParameter("listItem") as ColumnListItem;
+	onSelectionChange(event: Event<{ listItem: ColumnListItem }>): void {
+		const listItem = event.getParameter("listItem");
 		this._setDetailArea(listItem.getBindingContext() as Context);
 	}
 
@@ -285,15 +287,15 @@ export default class App extends Controller {
 	 * @param oUserContext - the current user context
 	 */
 	_setDetailArea(userContext?: Context): void {
-		const detailArea = this.byId("detailArea");
-		const layout = this.byId("defaultLayout") as unknown as { setSize(s: string): void; setResizable(b: boolean): void };
+		const detailArea = this.byId("detailArea") as Control;
+		const layout = this.byId("defaultLayout") as SplitterLayoutData;
 		const searchField = this.byId("searchField") as SearchField;
 
 		if (!detailArea) {
 			return; // do nothing during view destruction
 		}
 
-		const oldContext = (detailArea as unknown as { getBindingContext(): Context | null }).getBindingContext();
+		const oldContext = detailArea.getBindingContext() as Context | null;
 		if (oldContext && !oldContext.isTransient()) {
 			oldContext.setKeepAlive(false);
 		}
@@ -302,9 +304,9 @@ export default class App extends Controller {
 				// hide details if kept entity was refreshed but does not exist any more
 				this._setDetailArea.bind(this));
 		}
-		(detailArea as unknown as { setBindingContext(c: Context | null): void }).setBindingContext(userContext || null);
+		detailArea.setBindingContext(userContext || null);
 		// resize view
-		(detailArea as unknown as { setVisible(b: boolean): void }).setVisible(!!userContext);
+		detailArea.setVisible(!!userContext);
 		layout.setSize(userContext ? "60%" : "100%");
 		layout.setResizable(!!userContext);
 		searchField.setWidth(userContext ? "40%" : "20%");
diff --git a/packages/odatav4/steps/10/webapp/index-cdn.html b/packages/odatav4/steps/10/webapp/index-cdn.html
index e4ce80170..d550b4a6f 100644
--- a/packages/odatav4/steps/10/webapp/index-cdn.html
+++ b/packages/odatav4/steps/10/webapp/index-cdn.html
@@ -7,7 +7,6 @@
 	<script
 		id="sap-ui-bootstrap"
 		src="https://sdk.openui5.org/1.148.6/resources/sap-ui-core.js"
-		data-sap-ui-theme="sap_horizon"
 		data-sap-ui-compat-version="edge"
 		data-sap-ui-async="true"
 		data-sap-ui-on-init="module:ui5/tutorial/odatav4/initMockServer"
diff --git a/packages/odatav4/steps/10/webapp/index.html b/packages/odatav4/steps/10/webapp/index.html
index b1e54667d..f1acabd2f 100644
--- a/packages/odatav4/steps/10/webapp/index.html
+++ b/packages/odatav4/steps/10/webapp/index.html
@@ -7,7 +7,6 @@
 	<script
 		id="sap-ui-bootstrap"
 		src="resources/sap-ui-core.js"
-		data-sap-ui-theme="sap_horizon"
 		data-sap-ui-compat-version="edge"
 		data-sap-ui-async="true"
 		data-sap-ui-on-init="module:ui5/tutorial/odatav4/initMockServer"
diff --git a/packages/odatav4/steps/10/webapp/localService/mockdata/people.json b/packages/odatav4/steps/10/webapp/localService/mockdata/people.json
index 758030eaa..ec2491722 100644
--- a/packages/odatav4/steps/10/webapp/localService/mockdata/people.json
+++ b/packages/odatav4/steps/10/webapp/localService/mockdata/people.json
@@ -2,7 +2,7 @@
   "@odata.context": "https://services.odata.org/TripPinRESTierService/(S(id))/$metadata#People(Age,FirstName,LastName,UserName,Friends,BestFriend,HomeAddress)",
   "value": [
     {
-      "Age": 23,
+      "Age": "23",
       "FirstName": "Angel",
       "LastName": "Huffman",
       "UserName": "angelhuffman",
@@ -22,7 +22,7 @@
       }
     },
     {
-      "Age": 44,
+      "Age": "44",
       "FirstName": "Clyde",
       "LastName": "Guess",
       "UserName": "clydeguess",
@@ -42,7 +42,7 @@
       }
     },
     {
-      "Age": 19,
+      "Age": "19",
       "FirstName": "Elaine",
       "LastName": "Stewart",
       "UserName": "elainestewart",
@@ -62,7 +62,7 @@
       }
     },
     {
-      "Age": 37,
+      "Age": "37",
       "FirstName": "Genevieve",
       "LastName": "Reeves",
       "UserName": "genevievereeves",
@@ -82,7 +82,7 @@
       }
     },
     {
-      "Age": 25,
+      "Age": "25",
       "FirstName": "Georgina",
       "LastName": "Barlow",
       "UserName": "georginabarlow",
@@ -101,7 +101,7 @@
       }
     },
     {
-      "Age": 19,
+      "Age": "19",
       "FirstName": "Javier",
       "LastName": "Alfred",
       "UserName": "javieralfred",
@@ -120,7 +120,7 @@
       }
     },
     {
-      "Age": 26,
+      "Age": "26",
       "FirstName": "Joni",
       "LastName": "Rosales",
       "UserName": "jonirosales",
@@ -140,7 +140,7 @@
       }
     },
     {
-      "Age": 41,
+      "Age": "41",
       "FirstName": "Keith",
       "LastName": "Pinckney",
       "UserName": "keithpinckney",
@@ -160,7 +160,7 @@
       }
     },
     {
-      "Age": 30,
+      "Age": "30",
       "FirstName": "Krista",
       "LastName": "Kemp",
       "UserName": "kristakemp",
@@ -180,7 +180,7 @@
       }
     },
     {
-      "Age": 29,
+      "Age": "29",
       "FirstName": "Laurel",
       "LastName": "Osborn",
       "UserName": "laurelosborn",
@@ -200,7 +200,7 @@
       }
     },
     {
-      "Age": 53,
+      "Age": "53",
       "FirstName": "Marshall",
       "LastName": "Garay",
       "UserName": "marshallgaray",
@@ -219,7 +219,7 @@
       }
     },
     {
-      "Age": 66,
+      "Age": "66",
       "FirstName": "Ronald",
       "LastName": "Mundy",
       "UserName": "ronaldmundy",
@@ -238,7 +238,7 @@
       }
     },
     {
-      "Age": 51,
+      "Age": "51",
       "FirstName": "Russell",
       "LastName": "Whyte",
       "UserName": "russellwhyte",
@@ -258,7 +258,7 @@
       }
     },
     {
-      "Age": 57,
+      "Age": "57",
       "FirstName": "Ryan",
       "LastName": "Theriault",
       "UserName": "ryantheriault",
@@ -278,7 +278,7 @@
       }
     },
     {
-      "Age": 34,
+      "Age": "34",
       "FirstName": "Sallie",
       "LastName": "Sampson",
       "UserName": "salliesampson",
@@ -298,7 +298,7 @@
       }
     },
     {
-      "Age": 18,
+      "Age": "18",
       "FirstName": "Sandy",
       "LastName": "Osborn",
       "UserName": "sandyosborn",
@@ -318,7 +318,7 @@
       }
     },
     {
-      "Age": 24,
+      "Age": "24",
       "FirstName": "Scott",
       "LastName": "Ketchum",
       "UserName": "scottketchum",
@@ -337,7 +337,7 @@
       }
     },
     {
-      "Age": 31,
+      "Age": "31",
       "FirstName": "Ursula",
       "LastName": "Bright",
       "UserName": "ursulabright",
@@ -356,7 +356,7 @@
       }
     },
     {
-      "Age": 40,
+      "Age": "40",
       "FirstName": "Vincent",
       "LastName": "Calabrese",
       "UserName": "vincentcalabrese",
@@ -376,7 +376,7 @@
       }
     },
     {
-      "Age": 45,
+      "Age": "45",
       "FirstName": "Willie",
       "LastName": "Ashmore",
       "UserName": "willieashmore",
diff --git a/packages/odatav4/steps/10/webapp/localService/mockserver.ts b/packages/odatav4/steps/10/webapp/localService/mockserver.ts
index 7ca0307f4..f09c33ed9 100644
--- a/packages/odatav4/steps/10/webapp/localService/mockserver.ts
+++ b/packages/odatav4/steps/10/webapp/localService/mockserver.ts
@@ -35,7 +35,7 @@ let metadata: string; // The string that holds the cached mock service metadata
 const namespace = "ui5/tutorial/odatav4";
 // Component for writing logs into the console
 const logComponent = "ui5.tutorial.odatav4.mockserver";
-const rBaseUrl = /services.odata.org\/TripPinRESTierService/;
+const baseUrl = /services.odata.org\/TripPinRESTierService/;
 
 /**
  * Returns the base URL from a given URL.
@@ -251,19 +251,50 @@ function applySort(xhr: MockXhr, resultSet: MockUser[]): MockUser[] {
  * Does NOT change the given result set but returns a new array.
  */
 function applyFilter(xhr: MockXhr, resultSet: MockUser[]): MockUser[] {
-	let filteredUsers = [...resultSet]; // work with a copy
-	const matches = xhr.url.match(/\$filter=.*\((.*),'(.*)'\)/);
-
-	// If the request contains a filter command, apply the filter
-	if (Array.isArray(matches) && matches.length >= 3) {
-		const fieldName = matches[1];
-		const query = matches[2];
-
-		if (fieldName !== "LastName") {
-			throw new Error("Filters on field " + fieldName + " are not supported.");
+	const filter = new URL(xhr.url).searchParams.get("$filter");
+	let filteredUsers = resultSet.slice(); // work with a copy
+	if (!filter) {
+		return filteredUsers;
+	}
+	// support filters like:
+	// - "contains(LastName,'e')"
+	// - "(contains(LastName,'e')) and not (UserName eq 'a' or UserName eq 'b')"
+	// - "not (UserName eq 'a' or UserName eq 'b')"
+	// - "UserName eq 'foo'"
+	let remainingFilter = filter.startsWith("(") ? filter.slice(1) : filter;
+	if (remainingFilter.startsWith("contains(LastName,'")) { // from search field
+		remainingFilter = remainingFilter.slice(19); // remove "contains(LastName,'"
+		const value = remainingFilter.split("')")[0];
+		filteredUsers = filteredUsers.filter(function (user) {
+			return user.LastName.includes(value);
+		});
+		// remove the rest of "contains" from the filter and the optional following ") and "
+		remainingFilter = remainingFilter.slice(value.length + 2);
+		if (remainingFilter.startsWith(") and ")) {
+			remainingFilter = remainingFilter.slice(6);
 		}
-
-		filteredUsers = users.filter((user) => (user.LastName || "").indexOf(query) !== -1);
+	}
+	if (remainingFilter.startsWith("not (UserName eq ")) { // exclusive filter
+		const end = remainingFilter.indexOf(")");
+		const excludedUsers = remainingFilter.slice(17, end) // remove "not (UserName eq "
+			.split(" or UserName eq ")
+			// after splitting each entry contains the username in single quotes, e.g. "'me'"
+			.map((filterPart) => filterPart.slice(1, -1));
+		filteredUsers = filteredUsers.filter(function (user) {
+			return !excludedUsers.includes(user.UserName);
+		});
+		remainingFilter = remainingFilter.slice(end + 1);
+	}
+	if (remainingFilter.startsWith("UserName eq '")) { // refresh of selected user
+		const end = remainingFilter.indexOf("'", 13);
+		const value = remainingFilter.slice(13, end); // remove "UserName eq '"
+		filteredUsers = filteredUsers.filter(function (user) {
+			return user.LastName.includes(value);
+		});
+		remainingFilter = remainingFilter.slice(end + 1);
+	}
+	if (remainingFilter) {
+		throw new Error(`"${remainingFilter}" of filter "${filter}" is not supported`);
 	}
 
 	return filteredUsers;
@@ -292,7 +323,7 @@ function handleGetCountRequests(): MockResponse {
 /**
  * Handles GET requests for user data and returns a fitting response.
  */
-function handleGetUserRequests(xhr: MockXhr, _bCount: boolean): MockResponse {
+function handleGetUserRequests(xhr: MockXhr, _count: boolean): MockResponse {
 	let count: number;
 	let expand: RegExpMatchArray | string[] | null;
 	let expand2: string;
@@ -381,7 +412,7 @@ function handleGetUserRequests(xhr: MockXhr, _bCount: boolean): MockResponse {
  * Returns a specific user in the aUsers array.
  */
 function getUserByIndex(index: number, properties: string[]): MockUser | null {
-	const helper: MockUser = { UserName: "" };
+	const helper = {} as MockUser;
 	const user = users[index];
 
 	if (user) {
@@ -509,10 +540,16 @@ function handleDeleteUserRequests(xhr: MockXhr): MockResponse {
  * Handles POST requests for users and returns a fitting response.
  */
 function handlePostUserRequests(xhr: MockXhr): MockResponse {
-	const user = getUserDataFromRequestBody(xhr.requestBody || "");
+	let user = getUserDataFromRequestBody(xhr.requestBody || "");
 
 	// Check if that user already exists
 	if (isUnique(user.UserName)) {
+		user = {
+			HomeAddress : null, // prevents drillDown errors
+			LastName : "",
+			FirstName : "",
+			...user
+		};
 		users.push(user);
 
 		let responseBody = '{"@odata.context": "' + getBaseUrl(xhr.url)
@@ -697,8 +734,7 @@ function handleAllRequests(xhr: MockXhr): void {
 		"Mockserver: Received " + xhr.method + " request to URL " + xhr.url,
 		(xhr.requestBody ? "Request body is:\n" + xhr.requestBody : "No request body.")
 		+ "\n",
-		logComponent
-	);
+		logComponent);
 
 	if (xhr.method === "POST" && /\$batch/.test(xhr.url)) {
 		response2 = handleBatchRequest(xhr);
@@ -716,8 +752,7 @@ function handleAllRequests(xhr: MockXhr): void {
 			"Mockserver: Sent response with return code " + response2[0],
 			("Response headers: " + JSON.stringify(response2[1]) + "\n\nResponse body:\n"
 				+ (response2[2] || "")) + "\n",
-			logComponent
-		);
+			logComponent);
 	}
 }
 
@@ -725,7 +760,7 @@ export default {
 
 	/**
 	 * Creates a Sinon fake service, intercepting all http requests to
-	 * the URL defined in variable rBaseUrl above.
+	 * the URL defined in variable baseUrl above.
 	 * @returns a promise that is resolved when the mock server is started
 	 */
 	init(): Promise<unknown> {
@@ -744,16 +779,16 @@ export default {
 					sandbox.server.autoRespond = true;
 
 					// Register the requests for which responses should be faked.
-					sandbox.server.respondWith(rBaseUrl, handleAllRequests);
+					sandbox.server.respondWith(baseUrl, handleAllRequests);
 
 					// Apply a filter to the fake XmlHttpRequest.
 					// Otherwise, ALL requests (e.g. for the component, views etc.) would be
 					// intercepted.
 					sinon.FakeXMLHttpRequest.useFilters = true;
-					sinon.FakeXMLHttpRequest.addFilter((_sMethod: string, url: string) => {
+					sinon.FakeXMLHttpRequest.addFilter((_method: string, url: string) => {
 						// If the filter returns true, the request will NOT be faked.
 						// We only want to fake requests that go to the intended service.
-						return !rBaseUrl.test(url);
+						return !baseUrl.test(url);
 					});
 
 					// Set the logging level for console entries from the mock server
diff --git a/packages/odatav4/steps/10/webapp/view/App.view.xml b/packages/odatav4/steps/10/webapp/view/App.view.xml
index 8098b3099..e54bc8ae0 100644
--- a/packages/odatav4/steps/10/webapp/view/App.view.xml
+++ b/packages/odatav4/steps/10/webapp/view/App.view.xml
@@ -16,7 +16,7 @@
         id="resetChangesButton"
         text="{i18n>resetChangesButtonText}"
         enabled="{= !${appView>/hasUIChanges}}"
-        press="onResetDataSource"
+        press=".onResetDataSource"
         type="Emphasized">
       </Button>
       </headerContent>
diff --git a/packages/odatav4/steps/11/webapp/controller/App.controller.ts b/packages/odatav4/steps/11/webapp/controller/App.controller.ts
index 7722959a3..6b0e60d2b 100644
--- a/packages/odatav4/steps/11/webapp/controller/App.controller.ts
+++ b/packages/odatav4/steps/11/webapp/controller/App.controller.ts
@@ -19,13 +19,15 @@ import type Input from "sap/m/Input";
 import type Context from "sap/ui/model/odata/v4/Context";
 import type ODataModel from "sap/ui/model/odata/v4/ODataModel";
 import type ODataListBinding from "sap/ui/model/odata/v4/ODataListBinding";
+import type SplitterLayoutData from "sap/ui/layout/SplitterLayoutData";
+import type Control from "sap/ui/core/Control";
 
 /**
  * @namespace ui5.tutorial.odatav4.controller
  */
 export default class App extends Controller {
 
-	private _bTechnicalErrors = false;
+	private _bTechnicalErrors: boolean;
 
 	/**
 	 *  Hook for initializing the controller
@@ -108,8 +110,8 @@ export default class App extends Controller {
 	/**
 	 * Lock UI when changing data in the input controls
 	 */
-	onInputChange(evt: Event): void {
-		if ((evt as unknown as { getParameter(n: string): unknown }).getParameter("escPressed")) {
+	onInputChange(evt: Event<{ escPressed: boolean }>): void {
+		if (evt.getParameter("escPressed")) {
 			this._setUIChanges();
 		} else {
 			this._setUIChanges(true);
@@ -239,8 +241,8 @@ export default class App extends Controller {
 		messageOpen = true;
 	}
 
-	onSelectionChange(event: Event): void {
-		const listItem = (event as unknown as { getParameter(n: string): unknown }).getParameter("listItem") as ColumnListItem;
+	onSelectionChange(event: Event<{ listItem: ColumnListItem }>): void {
+		const listItem = event.getParameter("listItem");
 		this._setDetailArea(listItem.getBindingContext() as Context);
 	}
 
@@ -285,15 +287,15 @@ export default class App extends Controller {
 	 * @param oUserContext - the current user context
 	 */
 	_setDetailArea(userContext?: Context): void {
-		const detailArea = this.byId("detailArea");
-		const layout = this.byId("defaultLayout") as unknown as { setSize(s: string): void; setResizable(b: boolean): void };
+		const detailArea = this.byId("detailArea") as Control;
+		const layout = this.byId("defaultLayout") as SplitterLayoutData;
 		const searchField = this.byId("searchField") as SearchField;
 
 		if (!detailArea) {
 			return; // do nothing during view destruction
 		}
 
-		const oldContext = (detailArea as unknown as { getBindingContext(): Context | null }).getBindingContext();
+		const oldContext = detailArea.getBindingContext() as Context | null;
 		if (oldContext && !oldContext.isTransient()) {
 			oldContext.setKeepAlive(false);
 		}
@@ -302,9 +304,9 @@ export default class App extends Controller {
 				// hide details if kept entity was refreshed but does not exist any more
 				this._setDetailArea.bind(this));
 		}
-		(detailArea as unknown as { setBindingContext(c: Context | null): void }).setBindingContext(userContext || null);
+		detailArea.setBindingContext(userContext || null);
 		// resize view
-		(detailArea as unknown as { setVisible(b: boolean): void }).setVisible(!!userContext);
+		detailArea.setVisible(!!userContext);
 		layout.setSize(userContext ? "60%" : "100%");
 		layout.setResizable(!!userContext);
 		searchField.setWidth(userContext ? "40%" : "20%");
diff --git a/packages/odatav4/steps/11/webapp/index-cdn.html b/packages/odatav4/steps/11/webapp/index-cdn.html
index e4ce80170..d550b4a6f 100644
--- a/packages/odatav4/steps/11/webapp/index-cdn.html
+++ b/packages/odatav4/steps/11/webapp/index-cdn.html
@@ -7,7 +7,6 @@
 	<script
 		id="sap-ui-bootstrap"
 		src="https://sdk.openui5.org/1.148.6/resources/sap-ui-core.js"
-		data-sap-ui-theme="sap_horizon"
 		data-sap-ui-compat-version="edge"
 		data-sap-ui-async="true"
 		data-sap-ui-on-init="module:ui5/tutorial/odatav4/initMockServer"
diff --git a/packages/odatav4/steps/11/webapp/index.html b/packages/odatav4/steps/11/webapp/index.html
index b1e54667d..f1acabd2f 100644
--- a/packages/odatav4/steps/11/webapp/index.html
+++ b/packages/odatav4/steps/11/webapp/index.html
@@ -7,7 +7,6 @@
 	<script
 		id="sap-ui-bootstrap"
 		src="resources/sap-ui-core.js"
-		data-sap-ui-theme="sap_horizon"
 		data-sap-ui-compat-version="edge"
 		data-sap-ui-async="true"
 		data-sap-ui-on-init="module:ui5/tutorial/odatav4/initMockServer"
diff --git a/packages/odatav4/steps/11/webapp/localService/mockdata/people.json b/packages/odatav4/steps/11/webapp/localService/mockdata/people.json
index 758030eaa..ec2491722 100644
--- a/packages/odatav4/steps/11/webapp/localService/mockdata/people.json
+++ b/packages/odatav4/steps/11/webapp/localService/mockdata/people.json
@@ -2,7 +2,7 @@
   "@odata.context": "https://services.odata.org/TripPinRESTierService/(S(id))/$metadata#People(Age,FirstName,LastName,UserName,Friends,BestFriend,HomeAddress)",
   "value": [
     {
-      "Age": 23,
+      "Age": "23",
       "FirstName": "Angel",
       "LastName": "Huffman",
       "UserName": "angelhuffman",
@@ -22,7 +22,7 @@
       }
     },
     {
-      "Age": 44,
+      "Age": "44",
       "FirstName": "Clyde",
       "LastName": "Guess",
       "UserName": "clydeguess",
@@ -42,7 +42,7 @@
       }
     },
     {
-      "Age": 19,
+      "Age": "19",
       "FirstName": "Elaine",
       "LastName": "Stewart",
       "UserName": "elainestewart",
@@ -62,7 +62,7 @@
       }
     },
     {
-      "Age": 37,
+      "Age": "37",
       "FirstName": "Genevieve",
       "LastName": "Reeves",
       "UserName": "genevievereeves",
@@ -82,7 +82,7 @@
       }
     },
     {
-      "Age": 25,
+      "Age": "25",
       "FirstName": "Georgina",
       "LastName": "Barlow",
       "UserName": "georginabarlow",
@@ -101,7 +101,7 @@
       }
     },
     {
-      "Age": 19,
+      "Age": "19",
       "FirstName": "Javier",
       "LastName": "Alfred",
       "UserName": "javieralfred",
@@ -120,7 +120,7 @@
       }
     },
     {
-      "Age": 26,
+      "Age": "26",
       "FirstName": "Joni",
       "LastName": "Rosales",
       "UserName": "jonirosales",
@@ -140,7 +140,7 @@
       }
     },
     {
-      "Age": 41,
+      "Age": "41",
       "FirstName": "Keith",
       "LastName": "Pinckney",
       "UserName": "keithpinckney",
@@ -160,7 +160,7 @@
       }
     },
     {
-      "Age": 30,
+      "Age": "30",
       "FirstName": "Krista",
       "LastName": "Kemp",
       "UserName": "kristakemp",
@@ -180,7 +180,7 @@
       }
     },
     {
-      "Age": 29,
+      "Age": "29",
       "FirstName": "Laurel",
       "LastName": "Osborn",
       "UserName": "laurelosborn",
@@ -200,7 +200,7 @@
       }
     },
     {
-      "Age": 53,
+      "Age": "53",
       "FirstName": "Marshall",
       "LastName": "Garay",
       "UserName": "marshallgaray",
@@ -219,7 +219,7 @@
       }
     },
     {
-      "Age": 66,
+      "Age": "66",
       "FirstName": "Ronald",
       "LastName": "Mundy",
       "UserName": "ronaldmundy",
@@ -238,7 +238,7 @@
       }
     },
     {
-      "Age": 51,
+      "Age": "51",
       "FirstName": "Russell",
       "LastName": "Whyte",
       "UserName": "russellwhyte",
@@ -258,7 +258,7 @@
       }
     },
     {
-      "Age": 57,
+      "Age": "57",
       "FirstName": "Ryan",
       "LastName": "Theriault",
       "UserName": "ryantheriault",
@@ -278,7 +278,7 @@
       }
     },
     {
-      "Age": 34,
+      "Age": "34",
       "FirstName": "Sallie",
       "LastName": "Sampson",
       "UserName": "salliesampson",
@@ -298,7 +298,7 @@
       }
     },
     {
-      "Age": 18,
+      "Age": "18",
       "FirstName": "Sandy",
       "LastName": "Osborn",
       "UserName": "sandyosborn",
@@ -318,7 +318,7 @@
       }
     },
     {
-      "Age": 24,
+      "Age": "24",
       "FirstName": "Scott",
       "LastName": "Ketchum",
       "UserName": "scottketchum",
@@ -337,7 +337,7 @@
       }
     },
     {
-      "Age": 31,
+      "Age": "31",
       "FirstName": "Ursula",
       "LastName": "Bright",
       "UserName": "ursulabright",
@@ -356,7 +356,7 @@
       }
     },
     {
-      "Age": 40,
+      "Age": "40",
       "FirstName": "Vincent",
       "LastName": "Calabrese",
       "UserName": "vincentcalabrese",
@@ -376,7 +376,7 @@
       }
     },
     {
-      "Age": 45,
+      "Age": "45",
       "FirstName": "Willie",
       "LastName": "Ashmore",
       "UserName": "willieashmore",
diff --git a/packages/odatav4/steps/11/webapp/localService/mockserver.ts b/packages/odatav4/steps/11/webapp/localService/mockserver.ts
index 7ca0307f4..f09c33ed9 100644
--- a/packages/odatav4/steps/11/webapp/localService/mockserver.ts
+++ b/packages/odatav4/steps/11/webapp/localService/mockserver.ts
@@ -35,7 +35,7 @@ let metadata: string; // The string that holds the cached mock service metadata
 const namespace = "ui5/tutorial/odatav4";
 // Component for writing logs into the console
 const logComponent = "ui5.tutorial.odatav4.mockserver";
-const rBaseUrl = /services.odata.org\/TripPinRESTierService/;
+const baseUrl = /services.odata.org\/TripPinRESTierService/;
 
 /**
  * Returns the base URL from a given URL.
@@ -251,19 +251,50 @@ function applySort(xhr: MockXhr, resultSet: MockUser[]): MockUser[] {
  * Does NOT change the given result set but returns a new array.
  */
 function applyFilter(xhr: MockXhr, resultSet: MockUser[]): MockUser[] {
-	let filteredUsers = [...resultSet]; // work with a copy
-	const matches = xhr.url.match(/\$filter=.*\((.*),'(.*)'\)/);
-
-	// If the request contains a filter command, apply the filter
-	if (Array.isArray(matches) && matches.length >= 3) {
-		const fieldName = matches[1];
-		const query = matches[2];
-
-		if (fieldName !== "LastName") {
-			throw new Error("Filters on field " + fieldName + " are not supported.");
+	const filter = new URL(xhr.url).searchParams.get("$filter");
+	let filteredUsers = resultSet.slice(); // work with a copy
+	if (!filter) {
+		return filteredUsers;
+	}
+	// support filters like:
+	// - "contains(LastName,'e')"
+	// - "(contains(LastName,'e')) and not (UserName eq 'a' or UserName eq 'b')"
+	// - "not (UserName eq 'a' or UserName eq 'b')"
+	// - "UserName eq 'foo'"
+	let remainingFilter = filter.startsWith("(") ? filter.slice(1) : filter;
+	if (remainingFilter.startsWith("contains(LastName,'")) { // from search field
+		remainingFilter = remainingFilter.slice(19); // remove "contains(LastName,'"
+		const value = remainingFilter.split("')")[0];
+		filteredUsers = filteredUsers.filter(function (user) {
+			return user.LastName.includes(value);
+		});
+		// remove the rest of "contains" from the filter and the optional following ") and "
+		remainingFilter = remainingFilter.slice(value.length + 2);
+		if (remainingFilter.startsWith(") and ")) {
+			remainingFilter = remainingFilter.slice(6);
 		}
-
-		filteredUsers = users.filter((user) => (user.LastName || "").indexOf(query) !== -1);
+	}
+	if (remainingFilter.startsWith("not (UserName eq ")) { // exclusive filter
+		const end = remainingFilter.indexOf(")");
+		const excludedUsers = remainingFilter.slice(17, end) // remove "not (UserName eq "
+			.split(" or UserName eq ")
+			// after splitting each entry contains the username in single quotes, e.g. "'me'"
+			.map((filterPart) => filterPart.slice(1, -1));
+		filteredUsers = filteredUsers.filter(function (user) {
+			return !excludedUsers.includes(user.UserName);
+		});
+		remainingFilter = remainingFilter.slice(end + 1);
+	}
+	if (remainingFilter.startsWith("UserName eq '")) { // refresh of selected user
+		const end = remainingFilter.indexOf("'", 13);
+		const value = remainingFilter.slice(13, end); // remove "UserName eq '"
+		filteredUsers = filteredUsers.filter(function (user) {
+			return user.LastName.includes(value);
+		});
+		remainingFilter = remainingFilter.slice(end + 1);
+	}
+	if (remainingFilter) {
+		throw new Error(`"${remainingFilter}" of filter "${filter}" is not supported`);
 	}
 
 	return filteredUsers;
@@ -292,7 +323,7 @@ function handleGetCountRequests(): MockResponse {
 /**
  * Handles GET requests for user data and returns a fitting response.
  */
-function handleGetUserRequests(xhr: MockXhr, _bCount: boolean): MockResponse {
+function handleGetUserRequests(xhr: MockXhr, _count: boolean): MockResponse {
 	let count: number;
 	let expand: RegExpMatchArray | string[] | null;
 	let expand2: string;
@@ -381,7 +412,7 @@ function handleGetUserRequests(xhr: MockXhr, _bCount: boolean): MockResponse {
  * Returns a specific user in the aUsers array.
  */
 function getUserByIndex(index: number, properties: string[]): MockUser | null {
-	const helper: MockUser = { UserName: "" };
+	const helper = {} as MockUser;
 	const user = users[index];
 
 	if (user) {
@@ -509,10 +540,16 @@ function handleDeleteUserRequests(xhr: MockXhr): MockResponse {
  * Handles POST requests for users and returns a fitting response.
  */
 function handlePostUserRequests(xhr: MockXhr): MockResponse {
-	const user = getUserDataFromRequestBody(xhr.requestBody || "");
+	let user = getUserDataFromRequestBody(xhr.requestBody || "");
 
 	// Check if that user already exists
 	if (isUnique(user.UserName)) {
+		user = {
+			HomeAddress : null, // prevents drillDown errors
+			LastName : "",
+			FirstName : "",
+			...user
+		};
 		users.push(user);
 
 		let responseBody = '{"@odata.context": "' + getBaseUrl(xhr.url)
@@ -697,8 +734,7 @@ function handleAllRequests(xhr: MockXhr): void {
 		"Mockserver: Received " + xhr.method + " request to URL " + xhr.url,
 		(xhr.requestBody ? "Request body is:\n" + xhr.requestBody : "No request body.")
 		+ "\n",
-		logComponent
-	);
+		logComponent);
 
 	if (xhr.method === "POST" && /\$batch/.test(xhr.url)) {
 		response2 = handleBatchRequest(xhr);
@@ -716,8 +752,7 @@ function handleAllRequests(xhr: MockXhr): void {
 			"Mockserver: Sent response with return code " + response2[0],
 			("Response headers: " + JSON.stringify(response2[1]) + "\n\nResponse body:\n"
 				+ (response2[2] || "")) + "\n",
-			logComponent
-		);
+			logComponent);
 	}
 }
 
@@ -725,7 +760,7 @@ export default {
 
 	/**
 	 * Creates a Sinon fake service, intercepting all http requests to
-	 * the URL defined in variable rBaseUrl above.
+	 * the URL defined in variable baseUrl above.
 	 * @returns a promise that is resolved when the mock server is started
 	 */
 	init(): Promise<unknown> {
@@ -744,16 +779,16 @@ export default {
 					sandbox.server.autoRespond = true;
 
 					// Register the requests for which responses should be faked.
-					sandbox.server.respondWith(rBaseUrl, handleAllRequests);
+					sandbox.server.respondWith(baseUrl, handleAllRequests);
 
 					// Apply a filter to the fake XmlHttpRequest.
 					// Otherwise, ALL requests (e.g. for the component, views etc.) would be
 					// intercepted.
 					sinon.FakeXMLHttpRequest.useFilters = true;
-					sinon.FakeXMLHttpRequest.addFilter((_sMethod: string, url: string) => {
+					sinon.FakeXMLHttpRequest.addFilter((_method: string, url: string) => {
 						// If the filter returns true, the request will NOT be faked.
 						// We only want to fake requests that go to the intended service.
-						return !rBaseUrl.test(url);
+						return !baseUrl.test(url);
 					});
 
 					// Set the logging level for console entries from the mock server
diff --git a/packages/odatav4/steps/11/webapp/test/integration/TutorialJourney.js b/packages/odatav4/steps/11/webapp/test/integration/TutorialJourney.js
index 2637d2c0b..70791c1d8 100644
--- a/packages/odatav4/steps/11/webapp/test/integration/TutorialJourney.js
+++ b/packages/odatav4/steps/11/webapp/test/integration/TutorialJourney.js
@@ -10,44 +10,42 @@ sap.ui.define([
 	QUnit.module("Posts");
 
 	opaTest("Should see the paginated table with all users", function (Given, _When, Then) {
-		// Arrangements
+
 		Given.iStartMyApp();
-		// Assertions
+
 		Then.onTheTutorialPage.theTableShouldHavePagination()
 			.and.theTableShouldShowUsers(growingBy)
 			.and.theTableShouldShowTotalUsers(iTotalUsers);
 	});
 
 	opaTest("Should be able to load more users", function (_Given, When, Then) {
-		//Actions
+
 		When.onTheTutorialPage.iPressOnMoreData();
-		// Assertions
+
 		Then.onTheTutorialPage.theTableShouldShowUsers(growingBy * 2);
 	});
 
 	opaTest("Should be able to sort users", function (_Given, When, Then) {
-		//Actions
+
 		When.onTheTutorialPage.iPressOnSort();
-		// Assertions
+
 		Then.onTheTutorialPage.theTableShouldStartWith("Alfred");
 	});
 
 	opaTest("Should be able to start adding users", function (_Given, When, Then) {
-		//Actions
 		When.onTheTutorialPage.iPressOnAdd()
 			.and.iEnterSomeData("a");
 		When.onTheTutorialPage.iPressOnAdd()
 			.and.iEnterSomeData("b");
-		// Assertions
 		Then.onTheTutorialPage.thePageFooterShouldBeVisible(true)
 			.and.theTableToolbarItemsShouldBeEnabled(false)
 			.and.theTableShouldShowTotalUsers(iTotalUsers + 2);
 	});
 
 	opaTest("Should be able to save the new users", function (_Given, When, Then) {
-		//Actions
+
 		When.onTheTutorialPage.iPressOnSave();
-		// Assertions
+
 		Then.onTheTutorialPage.theTableShouldStartWith("b")
 			.and.theTableShouldShowTotalUsers(iTotalUsers + 2)
 			.and.theTableToolbarItemsShouldBeEnabled(true)
@@ -82,25 +80,25 @@ sap.ui.define([
 	});
 
 	opaTest("Should be able to search for users", function (_Given, When, Then) {
-		//Actions
+
 		When.onTheTutorialPage.iSearchFor("Mundy");
-		// Assertions
+
 		Then.onTheTutorialPage.theTableShouldShowUsers(1);
 	});
 
 	opaTest("Should be able to reset the search", function (_Given, When, Then) {
-		//Actions
+
 		When.onTheTutorialPage.iSearchFor("");
-		// Assertions
+
 		Then.onTheTutorialPage.theTableShouldShowUsers(10);
 	});
 
 	opaTest("Should see an error when trying to change a user name to an existing one",
 		function (_Given, When, Then) {
-			//Actions
+
 			When.onTheTutorialPage.iChangeAUserKey("javieralfred", "willieashmore")
 				.and.iPressOnSave();
-			// Assertions
+
 			Then.onTheTutorialPage.iShouldSeeAServiceError()
 				.and.theTableToolbarItemsShouldBeEnabled(false)
 				.and.thePageFooterShouldBeVisible(true);
@@ -109,34 +107,34 @@ sap.ui.define([
 
 	opaTest("Should be able to close the error and cancel the change",
 		function (_Given, When, Then) {
-			//Actions
+
 			When.onTheTutorialPage.iCloseTheServiceError()
 				.and.iPressOnCancel();
-			// Assertions
+
 			Then.onTheTutorialPage.theTableToolbarItemsShouldBeEnabled(true)
 				.and.thePageFooterShouldBeVisible(false);
 		}
 	);
 
 	opaTest("Should be able to see the detail area", function (_Given, When, Then) {
-		//Actions
+
 		When.onTheTutorialPage.iSelectUser("javieralfred").and.iPressUser();
-		//Assertions
+
 		Then.onTheTutorialPage.theDetailAreaShouldBeVisible(true);
 	});
 
 	opaTest("Should be able to toggle detail area when user is deleted/undeleted",
 		function (_Given, When, Then) {
-			//Actions
+
 			When.onTheTutorialPage.iSelectUser("javieralfred")
 				.and.iPressUser()
 				.and.iPressOnDelete();
-			//Assertion
+
 			Then.onTheTutorialPage.theDetailAreaShouldBeVisible(false)
-				.and.theTableShouldShowUsers(growingBy - 1);
-			//Action
+				.and.theTableShouldShowUsers(growingBy);
+
 			When.onTheTutorialPage.iPressOnCancel();
-			//Assertion
+
 			Then.onTheTutorialPage.theDetailAreaShouldBeVisible(true)
 				.and.theMessageToastShouldShow("deletionRestoredMessage", "javieralfred")
 				.and.theTableShouldShowUsers(growingBy);
@@ -144,4 +142,50 @@ sap.ui.define([
 			Then.iTeardownMyApp();
 		}
 	);
+
+	opaTest("Select a user, refresh the list, and delete the user", function (Given, When, Then) {
+		Given.iStartMyApp();
+		Then.onTheTutorialPage.theTableShouldHavePagination()
+			.and.theTableShouldShowUsers(growingBy)
+			.and.theTableShouldShowTotalUsers(iTotalUsers)
+			.and.theTableShouldStartWith("Huffman")
+			.and.theTableShouldEndWith("Osborn");
+		When.onTheTutorialPage.iSelectUser("angelhuffman")
+			.and.iPressOnRefresh();
+		When.onTheTutorialPage.iPressOnDelete();
+		Then.onTheTutorialPage.theTableShouldShowUsers(growingBy)
+			.and.theTableShouldShowTotalUsers(iTotalUsers - 1)
+			.and.theTableShouldStartWith("Guess")
+			.and.theTableShouldEndWith("Garay");
+		Then.iTeardownMyApp();
+	});
+
+	opaTest("Search, create, save and press more", function (Given, When, Then) {
+		Given.iStartMyApp();
+		Then.onTheTutorialPage.theTableShouldHavePagination()
+			.and.theTableShouldShowUsers(growingBy)
+			.and.theTableShouldShowTotalUsers(iTotalUsers)
+			.and.theTableShouldStartWith("Huffman")
+			.and.theTableShouldEndWith("Osborn");
+		When.onTheTutorialPage.iSearchFor("e");
+		Then.onTheTutorialPage.theTableShouldShowUsers(10)
+			.and.theTableShouldShowTotalUsers(12)
+			.and.theTableShouldStartWith("Guess")
+			.and.theTableShouldEndWith("Ketchum");
+		When.onTheTutorialPage.iPressOnAdd()
+			.and.iEnterSomeData("a");
+		When.onTheTutorialPage.iPressOnAdd()
+			.and.iEnterSomeData("b");
+		When.onTheTutorialPage.iPressOnSave();
+		Then.onTheTutorialPage.theTableShouldShowUsers(growingBy)
+			.and.theTableShouldShowTotalUsers(14)
+			.and.theTableShouldStartWith("b")
+			.and.theTableShouldEndWith("Whyte");
+		When.onTheTutorialPage.iPressOnMoreData();
+		Then.onTheTutorialPage.theTableShouldShowUsers(14)
+			.and.theTableShouldShowTotalUsers(14)
+			.and.theTableShouldStartWith("b")
+			.and.theTableShouldEndWith("Ashmore");
+		Then.iTeardownMyApp();
+	});
 });
diff --git a/packages/odatav4/steps/11/webapp/test/integration/opaTests.qunit.html b/packages/odatav4/steps/11/webapp/test/integration/opaTests.qunit.html
index 30e944e01..48a4d5913 100644
--- a/packages/odatav4/steps/11/webapp/test/integration/opaTests.qunit.html
+++ b/packages/odatav4/steps/11/webapp/test/integration/opaTests.qunit.html
@@ -5,7 +5,7 @@
 	<meta charset="UTF-8">
 
 	<script id="sap-ui-bootstrap"
-			src="../../../../../../../../../../../resources/sap-ui-core.js"
+			src="../../resources/sap-ui-core.js"
 			data-sap-ui-resourceroots='{
 					"ui5.tutorial.odatav4": "../../"
 				}'
@@ -13,10 +13,10 @@
 			data-sap-ui-async="true">
 	</script>
 
-	<link rel="stylesheet" type="text/css" href="../../../../../../../../../../../resources/sap/ui/thirdparty/qunit-2.css">
+	<link rel="stylesheet" type="text/css" href="../../resources/sap/ui/thirdparty/qunit-2.css">
 
-	<script src="../../../../../../../../../../../resources/sap/ui/thirdparty/qunit-2.js"></script>
-	<script src="../../../../../../../../../../../resources/sap/ui/qunit/qunit-junit.js"></script>
+	<script src="../../resources/sap/ui/thirdparty/qunit-2.js"></script>
+	<script src="../../resources/sap/ui/qunit/qunit-junit.js"></script>
 
 	<script src="opaTests.qunit.js"></script>
 </head>
diff --git a/packages/odatav4/steps/11/webapp/test/integration/pages/Tutorial.js b/packages/odatav4/steps/11/webapp/test/integration/pages/Tutorial.js
index fedf45bed..d13d480af 100644
--- a/packages/odatav4/steps/11/webapp/test/integration/pages/Tutorial.js
+++ b/packages/odatav4/steps/11/webapp/test/integration/pages/Tutorial.js
@@ -32,6 +32,15 @@ sap.ui.define([
 					});
 				},
 
+				iPressOnRefresh : function () {
+					return this.waitFor({
+						id : "refreshUsersButton",
+						viewName : view,
+						actions : new Press(),
+						errorMessage : "Could not find the 'Refresh' button"
+					});
+				},
+
 				iPressOnSort : function () {
 					return this.waitFor({
 						id : "sortUsersButton",
@@ -229,7 +238,22 @@ sap.ui.define([
 						success : function () {
 							Opa5.assert.ok(true, "The table is sorted correctly");
 						},
-						errorMessage : "Table not found or it is not sorted correctl."
+						errorMessage : "Table not found or it is not sorted correctly."
+					});
+				},
+
+				theTableShouldEndWith : function (sLastName) {
+					return this.waitFor({
+						id : sTableId,
+						viewName : view,
+						matchers : function (oTable) {
+							return getListBinding(oTable).getCurrentContexts().pop()
+								?.getProperty("LastName") === sLastName;
+						},
+						success : function () {
+							Opa5.assert.ok(true, "The table ends with " + sLastName);
+						},
+						errorMessage : "Table not found or it is not sorted correctly."
 					});
 				},
 
diff --git a/packages/odatav4/steps/11/webapp/view/App.view.xml b/packages/odatav4/steps/11/webapp/view/App.view.xml
index 08e36fad0..1e2df56fe 100644
--- a/packages/odatav4/steps/11/webapp/view/App.view.xml
+++ b/packages/odatav4/steps/11/webapp/view/App.view.xml
@@ -16,7 +16,7 @@
         id="resetChangesButton"
         text="{i18n>resetChangesButtonText}"
         enabled="{= !${appView>/hasUIChanges}}"
-        press="onResetDataSource"
+        press=".onResetDataSource"
         type="Emphasized">
       </Button>
       </headerContent>