docs: add missing js parts to readme

Author: margopolo

steps/03/README.md

@@ -134,7 +134,7 @@ As we now use the `sap.m` library with our app, we need to add the dependency to
 
 We open a terminal in the root folder of our app and exectue the following command:
 
-```sh 
+```sh
 ui5 add sap.m 
 ```
 

steps/14/README.md

@@ -59,7 +59,6 @@ html[dir="ltr"] .myAppDemoWT .myCustomButton.sapMBtn {
     font-weight: bold;
  }
 ```
-***
 
 ### webapp/manifest.json
 
@@ -84,8 +83,6 @@ We configure the CSS file to our app descriptor: In the `resources` section of t
 }        
 ```
 
-***
-
 ### webapp/view/App.view.xml
 
 The app control is configured with our custom namespace class `myAppDemoWT`. This class has no styling rules set and is used in the definition of the CSS rules to define CSS selectors that are only valid for this app.
@@ -130,7 +127,7 @@ To highlight the output text, we replace the text control by a `FormattedText` c
 	</Shell>
 </mvc:View>
 ```
-
+&nbsp;
 The actual color now depends on the selected theme which ensures that the color always fits to the theme and is semantically clear. For a complete list of the available CSS class names, see [CSS Classes for Theme Parameters](https://sdk.openui5.org/topic/ea08f53503da42c19afd342f4b0c9ec7.html).
 
 ***

steps/15/README.md

@@ -32,9 +32,9 @@ You can download the solution for this step here: [📥 Download step 15](https:
 </details>
 ***
 
-### webapp/controller/HelloPanel.controller.ts \(New\)
+### webapp/controller/HelloPanel.controller.?s \(New\)
 
-In folder `webapp/controller` we create a new `HelloPanel.controller.ts` file and move the method `onShowHello` of the app controller to it, so we get a reusable asset.
+In folder `webapp/controller` we create a new `HelloPanel.controller.?s` file and move the method `onShowHello` of the app controller to it, so we get a reusable asset.
 
 ```ts
 import Controller from "sap/ui/core/mvc/Controller";
@@ -58,6 +58,27 @@ export default class HelloPanel extends Controller {
         MessageToast.show(msg);
     }
 };
+
+```
+
+```js
+sap.ui.define(["sap/ui/core/mvc/Controller", "sap/m/MessageToast"], function (Controller, MessageToast) {
+  "use strict";
+
+  const HelloPanel = Controller.extend("ui5.walkthrough.controller.HelloPanel", {
+    onShowHello: function _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);
+    }
+  });
+  ;
+  return HelloPanel;
+});
+
 ```
 
 ### webapp/view/HelloPanel.view.xml \(New\)
@@ -89,7 +110,6 @@ We create a new `HelloPanel.view.xml` file in folder `webapp/view` and move the
    </Panel>
 </mvc:View>
 ```
-***
 
 ### webapp/view/App.view.xml
 
@@ -115,9 +135,7 @@ In the App view, we remove the panel control and its content and put the `XMLVie
 </mvc:View>
 ```
 
-***
-
-### webapp/controller/App.controller.ts
+### webapp/controller/App.controller.?s
 
 We remove the `onShowHello` method from the App controller, as this is not needed anymore.
 
@@ -129,8 +147,21 @@ import Controller from "sap/ui/core/mvc/Controller";
 export default class App extends Controller {
 
 };
+
 ```
 
+```js
+sap.ui.define(["sap/ui/core/mvc/Controller"], function (Controller) {
+  "use strict";
+
+  const App = Controller.extend("ui5.walkthrough.controller.App", {});
+  ;
+  return App;
+});
+
+```
+&nbsp;
+
 We have now moved everything out of the app view and controller. The app controller remains an empty stub for now, we will use it later to add more functionality.
 
 &nbsp;

steps/16/README.md

@@ -51,14 +51,12 @@ We add a new XML file to declaratively define our dialog in a fragment. The frag
       title="Hello {/recipient/name}"/>
 </core:FragmentDefinition>
 ```
-
+&nbsp;
 The syntax is similar to a view, but since fragments do not have a controller this attribute is missing. Also, the fragment does not have any footprint in the DOM tree of the app, and there is no control instance of the fragment itself (only the contained controls). It is simply a container for a set of reuse controls.
 
-***
+### webapp/controller/HelloPanel.controller.?s
 
-### webapp/controller/HelloPanel.controller.ts
-
-In the HelloPanel controller, we define a new event handler function `onOpenDialog` which calls the dialog in the HelloDialog fragment when triggered. To do so we need to import the `sap.m.Dialog` module.
+In the HelloPanel controller, we define a new event handler function `onOpenDialog` which calls the dialog in the HelloDialog fragment when triggered. To do so we need the `sap.m.Dialog` module.
 
 Using async/await, we handle the opening of the dialog asynchronously whenever the event is triggered.
 
@@ -88,8 +86,34 @@ export default class HelloPanel extends Controller {
         this.dialog.open();
     }
 };
+
 ```
+```js
+sap.ui.define(["sap/ui/core/mvc/Controller", "sap/m/MessageToast"], function (Controller, MessageToast) {
+  "use strict";
+
+  const HelloPanel = Controller.extend("ui5.walkthrough.controller.HelloPanel", {
+    onShowHello: function _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() {
+      this.dialog ??= await this.loadFragment({
+        name: "ui5.walkthrough.view.HelloDialog"
+      });
+      this.dialog.open();
+    }
+  });
+  ;
+  return HelloPanel;
+});
 
+```
+&nbsp;
 > 💡 **Tip:** <br>
 > To reuse the dialog opening and closing functionality in other controllers, you might create a new file `ui5.walkthrough.controller.controller.BaseController`, which extends `sap.ui.core.mvc.Controller`, and put all your dialog-related coding into this controller. Now, all the other controllers can extend from `ui5.walkthrough.controller.BaseController` instead of `sap.ui.core.mvc.Controller`.
 
@@ -142,7 +166,7 @@ We add a new button to the view to open the dialog and assign an unique `id`to i
    </Panel>
 </mvc:View>
 ```
-
+&nbsp;
 You will need the id of the button control `id="helloDialogButton"` in [Step 28: Integration Test with OPA](../28/README.md). 
 
 It is a good practice to set a unique ID like `helloWorldButton` to key controls of your app so that they can be identified easily. If the attribute `id` is not specified, the OpenUI5 runtime generates unique but changing ID like `\_\_button23` for the control. Inspect the DOM elements of your app in the browser to see the difference.

steps/17/README.md

@@ -30,7 +30,7 @@ You can download the solution for this step here: [📥 Download step 17](https:
 </details>
 ***
 
-### webapp/controller/HelloPanel.controller.ts
+### webapp/controller/HelloPanel.controller.?s
 
 We add an event handler function into the HelloPanel controller file that closes the dialog when triggered. To get the dialog instance we use the `byId` function and then call the `close` function of the dialog.
 
@@ -46,23 +46,56 @@ import Dialog from "sap/m/Dialog";
  * @namespace ui5.walkthrough.controller
  */
 export default class HelloPanel extends Controller {
-    
-
+    private dialog: Dialog;
     onShowHello(): void {
-        ...
+        // read msg from i18n model
+        const recipient = (this.getView()?.getModel() as JSONModel)?.getProperty("/recipient/name");
+        const resourceBundle = (this.getView()?.getModel("i18n") as ResourceModel)?.getResourceBundle() as ResourceBundle;
+        const msg = resourceBundle.getText("helloMsg", [recipient]);
+        // show message
+        MessageToast.show(msg);
     }
     async onOpenDialog(): Promise<void> {
-        ...
+        this.dialog ??= await this.loadFragment({
+             name: "ui5.walkthrough.view.HelloDialog"
+        }) as Dialog;
+        this.dialog.open();
     }
     onCloseDialog(): void {
-        // note: We don't need to chain to the pDialog promise, since this event-handler
-        // is only called from within the loaded dialog itself.
         (this.byId("helloDialog") as Dialog)?.close();
-    }         
+    }
 };
+
 ```
 
-***
+```js
+sap.ui.define(["sap/ui/core/mvc/Controller", "sap/m/MessageToast"], function (Controller, MessageToast) {
+  "use strict";
+
+  const HelloPanel = Controller.extend("ui5.walkthrough.controller.HelloPanel", {
+    onShowHello: function _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() {
+      this.dialog ??= await this.loadFragment({
+        name: "ui5.walkthrough.view.HelloDialog"
+      });
+      this.dialog.open();
+    },
+    onCloseDialog: function _onCloseDialog() {
+      this.byId("helloDialog")?.close();
+    }
+  });
+  ;
+  return HelloPanel;
+});
+
+```
 
 ### webapp/i18n/i18n.properties
 
@@ -80,8 +113,6 @@ openDialogButtonText=Say Hello With Dialog
 dialogCloseButtonText=Ok
 ```
 
-***
-
 ### webapp/view/HelloDialog.fragment.xml
 
 In the fragment definition, we add a button to the `beginButton` aggregation of the dialog and refer the press handler to the event handler we just defined in the controller of the panel’s content view.
@@ -101,7 +132,7 @@ In the fragment definition, we add a button to the `beginButton` aggregation of
    </Dialog>
 </core:FragmentDefinition>
 ```
-
+&nbsp;
 By using the `loadFragment` function to create the fragment content in the controller of the panel’s content view, the method will be invoked there when the button is pressed. The dialog has an aggregation named `beginButton` as well as `endButton`. Placing buttons in both of these aggregations makes sure that the `beginButton` is placed before the `endButton` on the UI. What `before` means, however, depends on the text direction of the current language. We therefore use the terms `begin` and `end` as a synonym to “left” and “right". In languages with left-to-right direction, the `beginButton` will be rendered left, the `endButton` on the right side of the dialog footer; in right-to-left mode for specific languages the order is switched.
 
 &nbsp;

steps/17/webapp/controller/HelloPanel.controller.ts

@@ -25,8 +25,6 @@ export default class HelloPanel extends Controller {
         this.dialog.open();
     }
     onCloseDialog(): void {
-        // note: We don't need to chain to the pDialog promise, since this event-handler
-        // is only called from within the loaded dialog itself.
         (this.byId("helloDialog") as Dialog)?.close();
     }
 };

steps/18/README.md

@@ -65,12 +65,11 @@ We add an icon to the button that opens the dialog. The `sap-icon://` protocol i
    </Panel>
 </mvc:View>
 ```
-
+&nbsp;
 >💡 **Tip:** <br>
 > You can look up other icons using the [Icon Explorer tool](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
 > To call any icon, use its name as listed in the *Icon Explorer* in <code>sap-icon://<i>&lt;iconname&gt;</i></code>.
 
-***
 
 ### webapp/view/HelloDialog.fragment.xml
 

steps/19/README.md

@@ -1,7 +1,6 @@
 ## Step 19: Aggregation Binding
 
 Now that we have established a good structure for our app, it's time to add some more functionality. We start exploring more features of data binding by adding some invoice data in JSON format that we display in a list below the panel.
-
  
 
 ***
@@ -81,16 +80,13 @@ We create a new folder `model` in our app project and place the new `localInvoic
   ]
 }
 ```
-
+ 
 The `localinvoices` file simply contains five invoices in a JSON format that we can use to bind controls against them in the app. JSON is a very lightweight format for storing data and can be directly used as a data source for OpenUI5 applications.
 
-***
-
 ### webapp/manifest.json
 
 We add a new named model `invoice` to the `sap.ui5` section of the descriptor. This time we want a JSONModel, so we set the type to `sap.ui.model.json.JSONModel`. The `uri` key is the path to our data relative to the component.
 
-
 ```json
 {
   ...
@@ -122,11 +118,9 @@ We add a new named model `invoice` to the `sap.ui5` section of the descriptor. T
   }
 }  
 ```
-
+ 
 With this little configuration our component will automatically instantiate a new `JSONModel` which loads the invoice data from the `localInvoices.json` file. Finally, the instantiated `JSONModel` is put onto the component as a named model invoice. The named model is then visible throughout our app.
 
-***
-
 ### webapp/i18n/i18n.properties
 
 In the text bundle we create a new text for a Invoice List title we will need in the view we are about to create.
@@ -167,11 +161,9 @@ In the `items` aggregation, we define the template for the list that will be aut
    </List>
 </mvc:View>
 ```
-
+&nbsp;
 The binding in the list item works, because we have bound the `items` aggregation via `items={invoice>/Invoices}` to the invoices.
 
-***
-
 ### webapp/view/App.view.xml
 
 In the app view we add a second view and assign it to our newly created InvoiceList view to display our invoices below the panel.
@@ -227,6 +219,4 @@ In the app view we add a second view and assign it to our newly created InvoiceL
 
 [API Reference: sap.m.List](https://sdk.openui5.org/#/api/sap.m.List)
 
-[Samples: sap.m.List](https://sdk.openui5.org/#/entity/sap.m.List)
-
-
+[Samples: sap.m.List](https://sdk.openui5.org/#/entity/sap.m.List)

steps/20/README.md

@@ -30,9 +30,11 @@ You can download the solution for this step here: [📥 Download step 20](https:
 </details>
 ***
 
-### webapp/controller/InvoiceList.controller.js \(New\)
+### webapp/controller/InvoiceList.controller.?s \(New\)
 
-We want to display in our list view the price in Euro, and typically the currency is part of our data model on the back end. In our case this is not the case, so we need to define it directly in the app. We therefore create a controller for the invoice list and define a view model for the currency code for Euro. It is a simple JSON model with just one key `currency` and the value `EUR`.
+We want to display in our list view the price in Euro. Since currency information isn't available in our backend data model, we'll handle the currency formatting within the application.
+
+We'll create a controller for the InvoiceList view and use a JSON model (`sap/ui/model/json/JSONModel`) to store the currency code. This model will contain a single property, `currency: "EUR"`, which will be used for formatting the prices in the view.
 
 ```ts
 import Controller from "sap/ui/core/mvc/Controller";
@@ -50,9 +52,26 @@ export default class App extends Controller {
         this.getView()?.setModel(viewModel, "view");        
     } 
 };
+
 ```
 
-***
+```js
+sap.ui.define(["sap/ui/core/mvc/Controller", "sap/ui/model/json/JSONModel"], function (Controller, JSONModel) {
+  "use strict";
+
+  const App = Controller.extend("ui5.walkthrough.controller.App", {
+    onInit: function _onInit() {
+      const viewModel = new JSONModel({
+        currency: "EUR"
+      });
+      this.getView()?.setModel(viewModel, "view");
+    }
+  });
+  ;
+  return App;
+});
+
+```
 
 ### webapp/view/InvoiceList.view.xml