docs: cleanup of JS code snippets

README.md

@@ -16,7 +16,7 @@ Please edit this file as it is the primary description file for your project. Yo
 
 [![REUSE status](https://api.reuse.software/badge/github.com/SAP-samples/ui5-typescript-walkthrough)](https://api.reuse.software/info/github.com/SAP-samples/ui5-typescript-walkthrough)
 
-# OpenUI5 TypeScript Walkthrough
+# OpenUI5 Walkthrough
 
 In this tutorial we'll introduce you to all major development paradigms of OpenUI5. <details class="ts-only" markdown="1"><summary>This section is relevant for TypeScript only</summary>We'll also demonstrate the use of TypeScript with OpenUI5 and highlight the specific characteristics of this approach.</details>
 
@@ -52,7 +52,7 @@ The tutorial consists of the following steps. To start, just open the first link
 - **[Step 11: Pages and Panels](steps/11/README.md "After all the work on the app structure it’s time to improve the look of our app. We will use two controls from the sap.m library to add a bit more &quot;bling&quot; to our UI. You will also learn about control aggregations in this step.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/11/index-cdn.html) \| <details class="ts-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-11.zip) </details><details class="js-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-11-js.zip) </details>) 
 - **[Step 12: Shell Control as Container](steps/12/README.md "Now we use a shell control as container for our app and use it as our new root element. The shell takes care of visual adaptation of the application to the device’s screen size by introducing a so-called letterbox on desktop screens.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/12/index-cdn.html) \| <details class="ts-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-12.zip) </details><details class="js-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-12-js.zip) </details>) 
 - **[Step 13: Margins and Paddings](steps/13/README.md "Our app content is still glued to the corners of the letterbox. To fine-tune our layout, we can add margins and paddings to the controls that we added in the previous step. ")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/13/index-cdn.html) \| <details class="ts-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-13.zip) </details><details class="js-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-13-js.zip) </details>) 
-- **[Step 14: Custom CSS and Theme Colors](steps/14/README.md "Sometimes we need to define some more fine-granular layouts and this is when we can use the flexibility of CSS by adding custom style classes to controls and style them as we like. ")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/14/index-cdn.html) | <details class="ts-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-14.zip) </details><details class="js-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-14-js.zip)</details>) 
+- **[Step 14: Custom CSS and Theme Colors](steps/14/README.md "Sometimes we need to define some more fine-granular layouts and this is when we can use the flexibility of CSS by adding custom style classes to controls and style them as we like. ")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/14/index-cdn.html) \| <details class="ts-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-14.zip) </details><details class="js-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-14-js.zip)</details>) 
 - **[Step 15: Nested Views](steps/15/README.md "Our panel content is getting more and more complex and now it is time to move the panel content to a separate view. With that approach, the application structure is much easier to understand, and the individual parts of the app can be reused.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/15/index-cdn.html) \| <details class="ts-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-15.zip) </details><details class="js-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-15-js.zip)</details>) 
 - **[Step 16: Dialogs and Fragments](steps/16/README.md "In this step, we will take a closer look at another element which can be used to assemble views: the fragment. ")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/16/index-cdn.html) \| <details class="ts-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-16.zip) </details><details class="js-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-16-js.zip)</details>) 
 - **[Step 17: Fragment Callbacks](steps/17/README.md "Now that we have integrated the dialog, it's time to add some user interaction. The user will definitely want to close the dialog again at some point, so we add a button to close the dialog and assign an event handler.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/17/index-cdn.html) \| <details class="ts-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-17.zip) </details><details class="js-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-17-js.zip)</details>)
@@ -69,7 +69,7 @@ The tutorial consists of the following steps. To start, just open the first link
 - **[Step 28: Integration Test with OPA](steps/28/README.md "If we want to test interaction patterns or more visual features of our app, we can also write an integration test. ")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/28/test/Test.cdn.qunit.html?testsuite=test-resources/ui5/walkthrough/testsuite.cdn.qunit&test=integration/opaTests) \| <details class="ts-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-28.zip) </details><details class="js-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-28-js.zip)</details>)
 - **[Step 29: Debugging Tools](steps/29/README.md "Even though we have added a basic test coverage in the previous steps, it seems like we accidentally broke our app, because it does not display prices to our invoices anymore. We need to debug the issue and fix it before someone finds out.")** (*code remains unchanged from the previous step*)
 - **[Step 30: Routing and Navigation](steps/30/README.md "So far, we have put all app content on one single page. As we add more and more features, we want to split the content and put it on separate pages.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/30/test/mockServer-cdn.html) \| <details class="ts-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-30.zip) </details><details class="js-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-30-js.zip)</details>)
-- **[Step 31: Routing with Parameters](steps/31/README.md "We can now navigate between the overview and the detail page, but the actual item that we selected in the overview is not displayed on the detail page yet. A typical use case for our app is to show additional information for the selected item on the detail page. ")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/31/test/mockServer-cdn.html) | <details class="ts-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-31.zip) </details><details class="js-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-31-js.zip)</details>)
+- **[Step 31: Routing with Parameters](steps/31/README.md "We can now navigate between the overview and the detail page, but the actual item that we selected in the overview is not displayed on the detail page yet. A typical use case for our app is to show additional information for the selected item on the detail page. ")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/31/test/mockServer-cdn.html) \| <details class="ts-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-31.zip) </details><details class="js-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-31-js.zip)</details>)
 - **[Step 32: Routing Back and History](steps/32/README.md "Now we can navigate to our detail page and display an invoice, but we cannot go back to the overview page yet. We'll add a back button to the detail page and implement a function that shows our overview page again.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/32/test/mockServer-cdn.html) \| <details class="ts-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-32.zip) </details><details class="js-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-32-js.zip)</details>)
 - **[Step 33: Custom Controls](steps/33/README.md "In this step, we are going to extend the functionality of OpenUI5 with a custom control. We want to rate the product shown on the detail page, so we create a composition of multiple standard controls using the OpenUI5 extension mechanism and add some glue code to make them work nicely together. This way, we can reuse the control across the app and keep all related functionality in one module.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/33/test/mockServer-cdn.html) \| <details class="ts-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-33.zip)</details> <details class="js-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-33-js.zip)</details>)
 - **[Step 34: Responsiveness](steps/34/README.md "In this step, we improve the responsiveness of our app. OpenUI5 applications can be run on phone, tablet, and desktop devices and we can configure the application to make best use of the screen estate for each scenario. Fortunately, OpenUI5 controls like the 	sap.m.Table already deliver a lot of features that we can use.")** ([🔗 Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/34/test/mockServer-cdn.html) \| <details class="ts-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-34.zip) </details><details class="js-only"> [📥 Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-34-js.zip)</details>)

steps/05/README.md

@@ -58,7 +58,7 @@ sap.ui.define(["sap/ui/core/mvc/Controller"], function (Controller) {
   "use strict";
 
   const AppController = Controller.extend("ui5.walkthrough.controller.App", {
-    onShowHello: function _onShowHello() {
+    onShowHello() {
       // show a native JavaScript alert
       alert("Hello World");
     }

steps/06/README.md

@@ -59,7 +59,7 @@ sap.ui.define(["sap/m/MessageToast", "sap/ui/core/mvc/Controller"], function (Me
    * @name ui5.walkthrough.controller.App
    */
   const AppController = Controller.extend("ui5.walkthrough.controller.App", {
-    onShowHello: function _onShowHello() {
+    onShowHello() {
       MessageToast.show("Hello World");
     }
   });

steps/07/README.md

@@ -74,7 +74,7 @@ sap.ui.define(["sap/m/MessageToast", "sap/ui/core/mvc/Controller", "sap/ui/model
   "use strict";
 
   const AppController = Controller.extend("ui5.walkthrough.controller.App", {
-    onInit: function _onInit() {
+    onInit() {
       // set data model on view
       const data = {
         recipient: {
@@ -84,7 +84,7 @@ sap.ui.define(["sap/m/MessageToast", "sap/ui/core/mvc/Controller", "sap/ui/model
       const dataModel = new JSONModel(data);
       this.getView()?.setModel(dataModel);
     },
-    onShowHello: function _onShowHello() {
+    onShowHello() {
       MessageToast.show("Hello World");
     }
   });

steps/08/README.md

@@ -101,7 +101,7 @@ sap.ui.define(["sap/m/MessageToast", "sap/ui/core/mvc/Controller", "sap/ui/model
   "use strict";
 
   const AppController = Controller.extend("ui5.walkthrough.controller.App", {
-    onInit: function _onInit() {
+    onInit() {
       // set data model on view
       const data = {
         recipient: {
@@ -117,7 +117,7 @@ sap.ui.define(["sap/m/MessageToast", "sap/ui/core/mvc/Controller", "sap/ui/model
       });
       this.getView()?.setModel(i18nModel, "i18n");
     },
-    onShowHello: function _onShowHello() {
+    onShowHello() {
       // read msg from i18n model
       const recipient = this.getView()?.getModel()?.getProperty("/recipient/name");
       const resourceBundle = this.getView()?.getModel("i18n")?.getResourceBundle();

steps/09/README.md

@@ -101,7 +101,7 @@ sap.ui.define(["sap/ui/core/UIComponent", "sap/ui/core/mvc/XMLView", "sap/ui/mod
     metadata: {
       "interfaces": ["sap.ui.core.IAsyncContentCreation"]
     },
-    init: function _init() {
+    init() {
       // call the init function of the parent
       UIComponent.prototype.init.call(this);
       // set data model
@@ -119,7 +119,7 @@ sap.ui.define(["sap/ui/core/UIComponent", "sap/ui/core/mvc/XMLView", "sap/ui/mod
       });
       this.setModel(i18nModel, "i18n");
     },
-    createContent: function _createContent() {
+    createContent() {
       return XMLView.create({
         "viewName": "ui5.walkthrough.view.App",
         "id": "app"
@@ -170,7 +170,7 @@ sap.ui.define(["sap/m/MessageToast", "sap/ui/core/mvc/Controller"], function (Me
    * @name ui5.walkthrough.controller.App
    */
   const AppController = Controller.extend("ui5.walkthrough.controller.App", {
-    onShowHello: function _onShowHello() {
+    onShowHello() {
       // read msg from i18n model
       // functions with generic return values require casting
       const resourceBundle = this.getView()?.getModel("i18n")?.getResourceBundle();

steps/10/README.md

@@ -205,7 +205,7 @@ sap.ui.define(["sap/ui/core/UIComponent", "sap/ui/model/json/JSONModel"], functi
       "interfaces": ["sap.ui.core.IAsyncContentCreation"],
       "manifest": "json"
     },
-    init: function _init() {
+    init() {
       // call the init function of the parent
       UIComponent.prototype.init.call(this);
 

steps/15/README.md

@@ -66,7 +66,7 @@ sap.ui.define(["sap/ui/core/mvc/Controller", "sap/m/MessageToast"], function (Co
   "use strict";
 
   const HelloPanel = Controller.extend("ui5.walkthrough.controller.HelloPanel", {
-    onShowHello: function _onShowHello() {
+    onShowHello() {
       // read msg from i18n model
       const recipient = this.getView()?.getModel()?.getProperty("/recipient/name");
       const resourceBundle = this.getView()?.getModel("i18n")?.getResourceBundle();

steps/16/README.md

@@ -93,10 +93,10 @@ sap.ui.define(["sap/ui/core/mvc/Controller", "sap/m/MessageToast"], function (Co
   "use strict";
 
   const HelloPanel = Controller.extend("ui5.walkthrough.controller.HelloPanel", {
-    onShowHello: function _onShowHello() {
+    onShowHello() {
       ...
     },
-    onOpenDialog: async function _onOpenDialog() {
+    async onOpenDialog() {
       this.dialog ??= await this.loadFragment({
         name: "ui5.walkthrough.view.HelloDialog"
       });

steps/17/README.md

@@ -73,21 +73,21 @@ sap.ui.define(["sap/ui/core/mvc/Controller", "sap/m/MessageToast"], function (Co
   "use strict";
 
   const HelloPanel = Controller.extend("ui5.walkthrough.controller.HelloPanel", {
-    onShowHello: function _onShowHello() {
+    onShowHello() {
       // read msg from i18n model
       const recipient = this.getView()?.getModel()?.getProperty("/recipient/name");
       const resourceBundle = this.getView()?.getModel("i18n")?.getResourceBundle();
       const msg = resourceBundle.getText("helloMsg", [recipient]);
       // show message
       MessageToast.show(msg);
     },
-    onOpenDialog: async function _onOpenDialog() {
+    async onOpenDialog() {
       this.dialog ??= await this.loadFragment({
         name: "ui5.walkthrough.view.HelloDialog"
       });
       this.dialog.open();
     },
-    onCloseDialog: function _onCloseDialog() {
+    onCloseDialog() {
       this.byId("helloDialog")?.close();
     }
   });

steps/20/README.md

@@ -60,7 +60,7 @@ sap.ui.define(["sap/ui/core/mvc/Controller", "sap/ui/model/json/JSONModel"], fun
   "use strict";
 
   const App = Controller.extend("ui5.walkthrough.controller.App", {
-    onInit: function _onInit() {
+    onInit() {
       const viewModel = new JSONModel({
         currency: "EUR"
       });

steps/22/README.md

@@ -80,7 +80,7 @@ export default  {
 sap.ui.define([], function () {
   "use strict";
 
-  var __exports = {
+  return {
     statusText: function (status) {
       const resourceBundle = this?.getOwnerComponent()?.getModel("i18n")?.getResourceBundle();
       switch (status) {
@@ -95,7 +95,6 @@ sap.ui.define([], function () {
       }
     }
   };
-  return __exports;
 });
 
 ```

steps/23/README.md

@@ -85,13 +85,13 @@ sap.ui.define(["sap/ui/core/mvc/Controller", "sap/ui/model/json/JSONModel", "sap
   "use strict";
 
   const App = Controller.extend("ui5.walkthrough.controller.App", {
-    onInit: function _onInit() {
+    onInit() {
       const viewModel = new JSONModel({
         currency: "EUR"
       });
       this.getView()?.setModel(viewModel, "view");
     },
-    onFilterInvoices: function _onFilterInvoices(event) {
+    onFilterInvoices(event) {
       // build filter array
       const filter = [];
       const query = event.getParameter("query");

steps/26/README.md

@@ -182,7 +182,7 @@ export default {
 sap.ui.define(["sap/ui/core/util/MockServer"], function (MockServer) {
   "use strict";
 
-  var __exports = {
+  return {
     init: function () {
       // create
       const mockServer = new MockServer({
@@ -204,7 +204,6 @@ sap.ui.define(["sap/ui/core/util/MockServer"], function (MockServer) {
       mockServer.start();
     }
   };
-  return __exports;
 });
 
 ```
@@ -227,34 +226,14 @@ import("sap/ui/core/ComponentSupport");
 ```
 
 ```js
-sap.ui.define(["../localService/mockserver"], function (__mockserver) {
+sap.ui.define(["../localService/mockserver"], function (mockserver) {
   "use strict";
 
-  function _interopRequireDefault(obj) {
-    return obj && obj.__esModule && typeof obj.default !== "undefined" ? obj.default : obj;
-  }
-  function __ui5_require_async(path) {
-    return new Promise(function (resolve, reject) {
-      sap.ui.require([path], function (module) {
-        if (!(module && module.__esModule)) {
-          module = module === null || !(typeof module === "object" && path.endsWith("/library")) ? {
-            default: module
-          } : module;
-          Object.defineProperty(module, "__esModule", {
-            value: true
-          });
-        }
-        resolve(module);
-      }, function (err) {
-        reject(err);
-      });
-    });
-  }
-  const mockserver = _interopRequireDefault(__mockserver); // initialize the mock server
+// initialize the mock server
   mockserver.init();
 
   // initialize the embedded component on the HTML page
-  __ui5_require_async("sap/ui/core/ComponentSupport");
+  sap.ui.require(["sap/ui/core/ComponentSupport"]);
 });
 
 ```