diff --git a/README.md b/README.md
index 8a777c0f..52351cc5 100644
--- a/README.md
+++ b/README.md
@@ -18,7 +18,7 @@ Please edit this file as it is the primary description file for your project. Yo
# OpenUI5 TypeScript Walkthrough
-In this tutorial we'll introduce you to all major development paradigms of OpenUI5. We'll demonstrate the use of TypeScript with OpenUI5 and highlight the specific characteristics of this approach.
+In this tutorial we'll introduce you to all major development paradigms of OpenUI5. This section is relevant for TypeScript only
We'll also demonstrate the use of TypeScript with OpenUI5 and highlight the specific characteristics of this approach. [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-01.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-01-js.zip) )
+- **[Step 2: Bootstrap](steps/02/README.md "Before we can do something with OpenUI5, we need to load and initialize it. This process of loading and initializing OpenUI5 is called bootstrapping. Once this bootstrapping is finished, we simply display an alert.")** ([π Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/02/index-cdn.html) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-02.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-02-js.zip) )
+- **[Step 3: Controls](steps/03/README.md "Now it is time to build our first little UI by replacing the "Hello World" text in the HTML body by the OpenUI5 control sap/m/Text. In the beginning, we will use the JavaScript control interface to set up the UI, the control instance is then placed into the HTML body. ")** ([π Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/03/index-cdn.html) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-03.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-03-js.zip) )
+- **[Step 4: XML Views](steps/04/README.md "Putting all our UI into the index.ts file will very soon result in a messy setup, and there is quite a bit of work ahead of us. So letβs do a first modularization by putting the sap/m/Text control into a dedicated view.")** ([π Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/04/index-cdn.html) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-04.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-04-js.zip) )
+- **[Step 5: Controllers](steps/05/README.md "In this step, we replace the text with a button and show the "Hello World" message when the button is pressed. The handling of the button's press event is implemented in the controller of the view.")** ([π Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/05/index-cdn.html) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-05.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-05-js.zip) )
+- **[Step 6: Modules](steps/06/README.md "In OpenUI5, resources are often referred to as modules. In this step, we replace the alert from the last exercise with a proper Message Toast from the sap.m library.")** ([π Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/06/index-cdn.html) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-06.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-06-js.zip) )
+- **[Step 7: JSON Model](steps/07/README.md "Now that we have set up the view and controller, itβs about time to think about the M in MVC.")** ([π Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/07/index-cdn.html) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-07.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-07-js.zip) )
+- **[Step 8: Translatable Texts](steps/08/README.md "In this step we move the texts of our UI to a separate resource file.")** ([π Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/08/index-cdn.html) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-08.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-08-js.zip) )
+- **[Step 9: Component Configuration](steps/09/README.md "After we have introduced all three parts of the Model-View-Controller /(MVC/) concept, we now come to another important structural aspect of OpenUI5. ")** ([π Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/09/index-cdn.html) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-09.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-09-js.zip) )
+- **[Step 10: Descriptor for Applications](steps/10/README.md "All application-specific configuration settings will now further be put in a separate descriptor file called manifest.json. This clearly separates the application coding from the configuration settings and makes our app even more flexible. For example, all SAP Fiori applications are realized as components and come with a descriptor file in order to be hosted in the SAP Fiori launchpad.")** ([π Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/10/index-cdn.html) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-10.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-10-js.zip) )
+- **[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 "bling" 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) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-11.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-11-js.zip) )
+- **[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) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-12.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-12-js.zip) )
+- **[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) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-13.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-13-js.zip) )
+- **[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) | [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-14.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-14-js.zip) )
+- **[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) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-15.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-15-js.zip) )
+- **[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) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-16.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-16-js.zip) )
+- **[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) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-17.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-17-js.zip) )
+- **[Step 18: Icons](steps/18/README.md "Our dialog is still pretty much empty. Since OpenUI5 is shipped with a large icon font that contains more than 500 icons, we will add an icon to greet our users when the dialog is opened.")** ([π Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/18/index-cdn.html) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-18.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-18-js.zip) )
+- **[Step 19: Aggregation Binding](steps/19/README.md "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.")** ([π Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/19/index-cdn.html) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-19.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-19-js.zip) )
+- **[Step 20: Data Types](steps/20/README.md "The list of invoices is already looking nice, but what is an invoice without a price assigned? Typically prices are stored in a technical format and with a /'./' delimiter in the data model. For example, our invoice for pineapples has the calculated price 87.2 without a currency. We are going to use the OpenUI5 data types to format the price properly, with a locale-dependent decimal separator and two digits after the separator.")** ([π Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/20/index-cdn.html) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-20.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-20-js.zip) )
+- **[Step 21: Expression Binding](steps/21/README.md "Sometimes the predefined types of OpenUI5 are not flexible enough and you want to do a simple calculation or formatting in the view - that is where expressions are really helpful. We use them to format our price according to the current number in the data model.")** ([π Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/21/index-cdn.html) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-21.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-21-js.zip) )
+- **[Step 22: Custom Formatters](steps/22/README.md "If we want to do a more complex logic for formatting properties of our data model, we can also write a custom formatting function. We will now add a localized status with a custom formatter, because the status in our data model is in a rather technical format.")** ([π Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/22/index-cdn.html) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-22.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-22-js.zip) )
+- **[Step 23: Filtering](steps/23/README.md "In this step, we add a search field for our product list and define a filter that represents the search term. When searching, the list is automatically updated to show only the items that match the search term.")** ([π Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/23/index-cdn.html) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-23.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-23-js.zip) )
+- **[Step 24: Sorting and Grouping](steps/24/README.md "To make our list of invoices even more user-friendly, we sort it alphabetically instead of just showing the order from the data model. Additionally, we introduce groups and add the company that ships the products so that the data is easier to consume.")** ([π Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/24/index-cdn.html) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-24.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-24-js.zip) )
+- **[Step 25: Remote OData Service](steps/25/README.md "So far we have worked with local JSON data, but now we will access a real OData service to visualize remote data.")** (π Live Preview *unfeasible* \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-25.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-25-js.zip) )
+- **[Step 26: Mock Server Configuration](steps/26/README.md "We just ran our app against a real service, but for developing and testing our app we do not want to rely on the availability of the βrealβ service or put additional load on the system where the data service is located.")** ([π Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/26/test/mockServer-cdn.html) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-26.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-26-js.zip) )
+- **[Step 27: Unit Test with QUnit](steps/27/README.md "Now that we have a test folder in the app, we can start to increase our test coverage. ")** ([π Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/27/test/Test.cdn.qunit.html?testsuite=test-resources/ui5/walkthrough/testsuite.cdn.qunit&test=unit/unitTests) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-27.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-27-js.zip) )
+- **[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) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-28.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-28-js.zip) )
- **[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) \| [π₯ Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-30.zip) \| [π₯ Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-30-js.zip))
-- **[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) \| [π₯ Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-31.zip) \| [π₯ Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-31-js.zip))
-- **[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) \| [π₯ Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-32.zip) \| [π₯ Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-32-js.zip))
-- **[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) \| [π₯ Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-33.zip) \| [π₯ Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-33-js.zip))
-- **[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) \| [π₯ Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-34.zip) \| [π₯ Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-34-js.zip))
-- **[Step 35: Device Adaptation](steps/35/README.md "We now configure the visibility and properties of controls based on the device that we run the application on. By making use of the sap.ui.Device API and defining a device model we will make the app look great on many devices.")** ([π Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/35/test/mockServer-cdn.html) \| [π₯ Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-35.zip) \| [π₯ Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-35-js.zip))
-- **[Step 36: Content Density](steps/36/README.md "In this step of our Walkthrough tutorial, we adjust the content density based on the userβs device. OpenUI5 contains different content densities allowing you to display larger controls for touch-enabled devices and a smaller, more compact design for devices that are operated by mouse. In our app, we will detect the device and adjust the density accordingly.")** ([π Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/36/test/mockServer-cdn.html) \| [π₯ Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-36.zip) \| [π₯ Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-36-js.zip))
-- **[Step 37: Accessibility](steps/37/README.md "In this step we're going to improve the accessibility of our app.")** ([π Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/37/test/mockServer-cdn.html) \| [π₯ Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-37.zip) \| [π₯ Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-37-js.zip))
-- **[Step 38: Build Your Application](steps/38/README.md "In this step we're going to build our application and consume the speed of a built OpenUI5 application.")** ([π₯ Download Solution in TS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-38.zip) \| [π₯ Download Solution in JS](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-38-js.zip))
+- **[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) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-30.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-30-js.zip) )
+- **[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) | [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-31.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-31-js.zip) )
+- **[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) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-32.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-32-js.zip) )
+- **[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) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-33.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-33-js.zip) )
+- **[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) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-34.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-34-js.zip) )
+- **[Step 35: Device Adaptation](steps/35/README.md "We now configure the visibility and properties of controls based on the device that we run the application on. By making use of the sap.ui.Device API and defining a device model we will make the app look great on many devices.")** ([π Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/35/test/mockServer-cdn.html) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-35.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-35-js.zip) )
+- **[Step 36: Content Density](steps/36/README.md "In this step of our Walkthrough tutorial, we adjust the content density based on the userβs device. OpenUI5 contains different content densities allowing you to display larger controls for touch-enabled devices and a smaller, more compact design for devices that are operated by mouse. In our app, we will detect the device and adjust the density accordingly.")** ([π Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/36/test/mockServer-cdn.html) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-36.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-36-js.zip) )
+- **[Step 37: Accessibility](steps/37/README.md "In this step we're going to improve the accessibility of our app.")** ([π Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/build/37/test/mockServer-cdn.html) \| [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-37.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-37-js.zip) )
+- **[Step 38: Build Your Application](steps/38/README.md "In this step we're going to build our application and consume the speed of a built OpenUI5 application.")** ( [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-38.zip) [π₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-38-js.zip) )
## Requirements
-The project uses npm workspaces and requires a [Node.js](https://nodejs.org/) version >= `20.11.0` to be installed.
+Running the content of this repository locally (as opposed to following the tutorial steps) requires a [Node.js](https://nodejs.org/) version >= `20.11.0` to be installed.
-### Getting Started
+## Download and Installation
+
+> This section describes how to run the content of the repository locally and is *not* required for following the tutorial. For following the tutorial, simply start with Step 1 in the list of steps above. From there, you can also download and run the result of each step locally.
-The project is setup as monorepo. All steps are located inside the `steps` folder and labelled with their step number. The monorepo uses `npm` workspaces to manage all steps together. But you can also run `npm` inside each individual step.
+The project is set up as monorepo. All steps are located inside the `steps` folder and labelled with their step number. The monorepo uses `npm` workspaces to manage all steps together. But you can also run `npm` inside each individual step.
-To setup the monorepo you first need to install all depenedencies:
+To set up the monorepo you first need to install all depenedencies:
```sh
npm install
@@ -103,15 +105,6 @@ cd steps/01
npm start
```
-## Download and Installation
-
-
-
## Known Issues
No known issues.
@@ -128,4 +121,4 @@ If you wish to contribute code, offer fixes or improvements, please send a pull
## License
-Copyright (c) 2024 SAP SE or an SAP affiliate company. All rights reserved. This project is licensed under the Apache Software License, version 2.0 except as noted otherwise in the [LICENSE](LICENSE) file.
+Copyright (c) 2025 SAP SE or an SAP affiliate company. All rights reserved. This project is licensed under the Apache Software License, version 2.0 except as noted otherwise in the [LICENSE](LICENSE) file.
diff --git a/README_AUTHORS.md b/README_AUTHORS.md
index 8583102d..358e6383 100644
--- a/README_AUTHORS.md
+++ b/README_AUTHORS.md
@@ -24,21 +24,15 @@ To immediately preview the markdown document you are writing *including* the two
npm i
```
-in the root folder of this project once for the setup, then to actually run the server, run
+in the root folder of this project once for the setup.
-```sh
-npm start
-```
-
-Then, open http://localhost:1337/README.md in your browser.
-
-Alternatively, and even easier, run
+Then, to actually start the server, run
```sh
-npm run watch
+npm start
```
-And the browser will automatically open (on port 3000) and automatically reload on every saved change.
+A browser window will automatically open (on port 3000 or the next free port) and automatically reload on every saved change.
## Writing *one* document which covers both JavaScript and TypeScript without duplication
diff --git a/assets/css/custom.css b/assets/css/custom.css
index 48d88762..3fe4c640 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -114,6 +114,10 @@ body.page-language-ts .language-switch-button.lang-ts {
border-color: var(--active-border);
}
+li > section.ts-only, li > section.js-only {
+ display: inline;
+}
+
.language-switch-button:hover {
opacity: 0.8;
background-color: rgba(20, 20, 20, 0.8);
@@ -134,3 +138,8 @@ body.page-language-ts .language-switch-button.lang-ts {
border-color: var(--active-border);
}
}
+
+#__bs_notify__ {
+ background-color: rgba(27, 32, 50, 0.3) !important;
+ top: 40px !important;
+}
\ No newline at end of file
diff --git a/assets/js/custom.js b/assets/js/custom.js
index 30c9e34c..d4a02830 100644
--- a/assets/js/custom.js
+++ b/assets/js/custom.js
@@ -164,7 +164,10 @@ function replaceDetailSections() {
if (child.tagName.toLocaleUpperCase() === "SUMMARY") {
return;
}
- sectionTag.appendChild(child);
+ // only add the child if it has content
+ if (child.innerHTML.trim()) {
+ sectionTag.appendChild(child);
+ }
});
// remove the detail tag
@@ -205,6 +208,27 @@ function replaceFileExtensions(lang) {
}
}
+function updatePrevNextLinks(lang) {
+ const links = document.querySelectorAll('a[href$="README.md"], a[href$="/"], a[href$="README.md?lang=js"], a[href$="/?lang=js"]');
+ links.forEach(link => {
+ // Only handle relative links (not starting with http://, https://, or //)
+ if (/^(https?:)?\/\//.test(link.getAttribute("href"))) {
+ return;
+ }
+
+ let url = new URL(link.href, window.location.origin);
+
+ // Remove any existing lang param
+ url.searchParams.delete("lang");
+
+ if (lang === "js") {
+ url.searchParams.set("lang", "js");
+ }
+
+ link.href = url.pathname + url.search + url.hash;
+ });
+}
+
// dynamic overall language switching
function addLanguageSwitchButtons() {
@@ -233,6 +257,7 @@ function switchLanguage(newLang) {
replaceFileExtensions(lang);
resetCodeCoupleButtons();
updateAllCodeCouples(lang);
+ updatePrevNextLinks(lang);
}
function updateAllCodeCouples(globalLang) {
@@ -252,5 +277,6 @@ document.addEventListener("DOMContentLoaded", (event) => {
replaceFileExtensions(lang);
addLanguageSwitchButtons();
updateAllCodeCouples(lang);
+ updatePrevNextLinks(lang);
});
});
diff --git a/steps/01/README.md b/steps/01/README.md
index ffc01fe7..bbb91be9 100644
--- a/steps/01/README.md
+++ b/steps/01/README.md
@@ -1,6 +1,6 @@
## Step 1: Hello World!
-As you know OpenUI5 is all about HTML5. Let's get started with building a first "Hello World" with only HTML. In addition we'll initialize the UI5 Tooling, so we can benefit from it from the beginning.
+As you know, OpenUI5 is all about HTML5. Let's get started with building a first "Hello World" with only HTML. In addition we'll initialize the UI5 Tooling, so we can benefit from it from the beginning.
@@ -15,12 +15,23 @@ As you know OpenUI5 is all about HTML5. Let's get started with building a first
You can access the live preview by clicking on this link: [π Live Preview of Step 1](https://sap-samples.github.io/ui5-typescript-walkthrough/build/01/index.html).
-Download solution for step 1 in [π₯ TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-01.zip) or [π₯ JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-01-js.zip).
-
***
### Coding
+
+
+You can download the solution for this step here: [π₯ Download step 1](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-01.zip).
+
+
+
+
+
+You can download the solution for this step here: [π₯ Download step 1](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-01-js.zip).
+
+
+***
+
### webapp \(New\)
We create a folder on our local machine which will contain all the sources of the app we're going to build. We'll refer to this folder as the βapp root directory".
@@ -154,7 +165,7 @@ This will open a new browser window hosting your newly created `index.html`.
### Conventions
-- The `index.html` file is located in the `webapp` folder if it is used productively.
+- The `index.html` file is located in the `webapp` folder.
diff --git a/steps/02/README.md b/steps/02/README.md
index 26e281a1..d49a73b3 100644
--- a/steps/02/README.md
+++ b/steps/02/README.md
@@ -15,11 +15,23 @@ Before we can do something with OpenUI5, we need to load and initialize it. This
You can access the live preview by clicking on this link: [π Live Preview of Step 2](https://sap-samples.github.io/ui5-typescript-walkthrough/build/02/index-cdn.html).
-Download solution for step 2 in [π₯ TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-02.zip) or [π₯ JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-02-js.zip).
+***
+### Coding
+
+
+
+You can download the solution for this step here: [π₯ Download step 2](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-02.zip).
+
+
+
+
+You can download the solution for this step here: [π₯ Download step 2](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-02-js.zip).
+
+
***
-### Tooling
+### UI5 Tooling
First, let's set up our UI5 Tooling to use the OpenUI5 framework for our project. We also need to add the necessary OpenUI5 libraries as dependencies to the project's UI5 Tooling configuration.
@@ -37,19 +49,20 @@ ui5 add sap.ui.core themelib_sap_horizon
The `ui5 add` command adds specific libraries as dependency to the projects UI5 Tooling configuration. In this case, we'e adding the `sap.ui.core` library, which provides core functionality of the OpenUI5 framework. This library is essential for bootstrapping OpenUI5. Additionally, we're adding the `themelib_sap_horizon` library which provides the visual styles for the Horizon theme. We'll use this theme with our application.
-***
-### package.json
+
+
+### TypeScript Setup
To work with TypeScript, we must install it in our project. To do this, we execute the following command in the terminal:
+
```sh
npm install typescript --save-dev
```
By running this command, npm will download the TypeScript package from the npm registry and install it in our project's "node_modules" directory. It will also add an entry for TypeScript in the "devDependencies" section of our package.json file, so that other developers working on the project can easily install the same version of TypeScript.
-***
### tsconfig.json \(New\)
@@ -57,6 +70,7 @@ As a next step, we need to create the file `tsconfig.json` in the app root direc
We specify the compiler options as follow:
+
```json
{
"compilerOptions": {
@@ -101,18 +115,16 @@ Let's go through the compiler options specified in the file:
***
-### Coding
+
-### webapp/index.ts \(New\)
+### webapp/index.?s \(New\)
-Now let's move on to the UI work. We create a new `index.ts` script in the webapp folder. In this script, we add a native `alert()` method with the message "UI5 is ready".
+Now let's move on to the UI work. We create a new `index.?s` script in the webapp folder. In this script, we add a native `alert()` method with the message "UI5 is ready".
-```ts
+```js
alert("UI5 is ready");
```
-***
-
### webapp/index.html
Next, we'll integrate the script we just created into the `index.html` page to signal when the OpenUI5 framework has finished loading. This process involves first incorporating the OpenUI5 framework into our HTML page by adding a script tag specifically for loading OpenUI5.
@@ -157,22 +169,30 @@ We initialize the core modules with the following configuration options: