SAP-samples · petermuessig · Feb 24, 2025 · Feb 24, 2025
diff --git a/README.md b/README.md
diff --git a/steps/01/README.md b/steps/01/README.md
@@ -13,9 +13,9 @@ As you know OpenUI5 is all about HTML5. Let's get started with building a first
 
 <sup>*The browser shows the text \"Hello World\"*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 1](https://sap-samples.github.io/ui5-typescript-walkthrough/step-01/index.html).
+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).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 1](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-01.zip).
+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).
 
 ***
 

diff --git a/steps/02/README.md b/steps/02/README.md
@@ -13,9 +13,9 @@ Before we can do something with OpenUI5, we need to load and initialize it. This
 
 <sup>*An alert "UI5 is ready" is displayed*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 2](https://sap-samples.github.io/ui5-typescript-walkthrough/step-02/index-cdn.html).
+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).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 2](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-02.zip).
+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).
 
 ***
 

diff --git a/steps/03/README.md b/steps/03/README.md
@@ -13,9 +13,9 @@ Now it is time to build our first little UI by replacing the “Hello World” t
 <sup>*The "Hello World" text is now displayed by an OpenUI5 control*</sup>
 
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 3](https://sap-samples.github.io/ui5-typescript-walkthrough/step-03/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 3](https://sap-samples.github.io/ui5-typescript-walkthrough/build/03/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 3](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-03.zip).
+Download solution for step 3 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-03.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-03-js.zip).
 
 ***
 
@@ -124,4 +124,4 @@ ui5 add sap.m
 
 [API Reference: `sap.ui.core.Element`](https://sdk.openui5.orgapi/sap.ui.core.Element)
 
-[API Reference: `sap.ui.base.ManagedObject`](https://sdk.openui5.orgapi/sap.ui.base.ManagedObject)
+[API Reference: `sap.ui.base.ManagedObject`](https://sdk.openui5.orgapi/sap.ui.base.ManagedObject)
diff --git a/steps/04/README.md b/steps/04/README.md
@@ -14,9 +14,9 @@ When working with OpenUI5, we recommend the use of XML views, as this produces t
 
 <sup>*The "The \"Hello World\" text is now displayed by an OpenUI5 control \(No visual changes to last step\)*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 4](https://sap-samples.github.io/ui5-typescript-walkthrough/step-04/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 4](https://sap-samples.github.io/ui5-typescript-walkthrough/build/04/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 4](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-04.zip).
+Download solution for step 4 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-04.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-04-js.zip).
 
 ***
 
@@ -103,4 +103,4 @@ We have now embed our app view to the body of the HTML document.
 
 [XML View](https://sdk.openui5.org/topic/91f292806f4d1014b6dd926db0e91070.html "The XML view type is defined in an XML file. The file name either ends with .view.xml or as an XML string. The file name and the folder structure together specify the name of the view that equals the OpenUI5 module name.")
 
-[API Reference: sap.ui.core.mvc.XMLView](https://sdk.openui5.org/api/sap.ui.core.mvc.xmlView)
+[API Reference: sap.ui.core.mvc.XMLView](https://sdk.openui5.org/api/sap.ui.core.mvc.xmlView)
diff --git a/steps/05/README.md b/steps/05/README.md
@@ -13,9 +13,9 @@ In this step, we replace the text with a button and show the “Hello World” m
 
 <sup>*A Say Hello button is added*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 5](https://sap-samples.github.io/ui5-typescript-walkthrough/step-05/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 5](https://sap-samples.github.io/ui5-typescript-walkthrough/build/05/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 5](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-05.zip).
+Download solution for step 5 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-05.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-05-js.zip).
 
 ***
 
@@ -98,4 +98,4 @@ A view does not necessarily need an explicitly assigned controller. You do not h
 
 [Controller](https://sdk.openui5.org/topic/121b8e6337d147af9819129e428f1f75.html "A controller contains methods that define how models and views interact.")
 
-[API Reference: sap.ui.core.mvc.Controller](https://sdk.openui5.org/api/sap.ui.core.mvc.Controller)
+[API Reference: sap.ui.core.mvc.Controller](https://sdk.openui5.org/api/sap.ui.core.mvc.Controller)
diff --git a/steps/06/README.md b/steps/06/README.md
@@ -12,9 +12,9 @@ In OpenUI5, resources are often referred to as modules. In this step, we replace
 
 <sup>*A message toast displays the "Hello World" message*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 6](https://sap-samples.github.io/ui5-typescript-walkthrough/step-06/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 6](https://sap-samples.github.io/ui5-typescript-walkthrough/build/06/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 5](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-06.zip).
+Download solution for step 5 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-06.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-06-js.zip).
 
 ***
 
@@ -53,4 +53,4 @@ For now, the message toast just displays a static "Hello World" message. We will
 
 **Related Information**  
 
-[API Reference: `sap.m.MessageToast`](https://sdk.openui5.org/api/sap.m.MessageToast#methods)
+[API Reference: `sap.m.MessageToast`](https://sdk.openui5.org/api/sap.m.MessageToast#methods)
diff --git a/steps/07/README.md b/steps/07/README.md
@@ -14,9 +14,9 @@ We'll create a view model in our controller, add an input field to our app, bind
 
 <sup>*An input field and a description displaying the value of the input field*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 7](https://sap-samples.github.io/ui5-typescript-walkthrough/step-07/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 7](https://sap-samples.github.io/ui5-typescript-walkthrough/build/07/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 7](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-07.zip).
+Download solution for step 7 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-07.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-07-js.zip).
 
 ***
 
@@ -116,4 +116,4 @@ In addition to this, we create a greeting message. We combine the static text "H
 
 [Binding Path](https://ui5.sap.com/#/topic/2888af49635949eca14fa326d04833b9.html "Binding paths address the different properties and lists in a model and define how a node in the hierarchical data tree can be found.")
 
-[API Reference: `sap.ui.base.ManagedObject.PropertyBindingInfo`](https://sdk.openui5.org/api/sap.ui.base.ManagedObject.PropertyBindingInfo "Configuration for the binding of a managed property.")
+[API Reference: `sap.ui.base.ManagedObject.PropertyBindingInfo`](https://sdk.openui5.org/api/sap.ui.base.ManagedObject.PropertyBindingInfo "Configuration for the binding of a managed property.")
diff --git a/steps/08/README.md b/steps/08/README.md
@@ -14,9 +14,9 @@ This way, they are all in a central place and can be easily translated into othe
 
 <sup>*An input field and a description displaying the value of the input field \(No visual changes to last step\)*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 8](https://sap-samples.github.io/ui5-typescript-walkthrough/step-08/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 8](https://sap-samples.github.io/ui5-typescript-walkthrough/build/08/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 8](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-08.zip).
+Download solution for step 8 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-08.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-08-js.zip).
 
 ***
 

diff --git a/steps/09/README.md b/steps/09/README.md
@@ -17,15 +17,15 @@ By encapsulating our application as a component, we can seamlessly integrate it
 
 <sup>*An input field and a description displaying the value of the input field \(No visual changes to last step\)*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 9](https://sap-samples.github.io/ui5-typescript-walkthrough/step-09/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 9](https://sap-samples.github.io/ui5-typescript-walkthrough/build/09/index-cdn.html).
 
 After this step your project structure will look like the figure below. We will create the `Component.ts` file now and modify the related files in the app.
 
 ![](https://sdk.openui5.org/docs/topics/loio1e237a36972a44ac8522dd1a540ac062_LowRes.png "Folder Structure for this Step")
 
 <sup>*Folder Structure for this Step*</sup>
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 9](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-09.zip).
+Download solution for step 9 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-09.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-09-js.zip).
 ***
 
 

diff --git a/steps/10/README.md b/steps/10/README.md
@@ -13,9 +13,9 @@ Instead of relying on a local HTML file for the bootstrap, the descriptor file i
 
 <sup>*An input field and a description displaying the value of the input field \(No visual changes to last step\)*</sub>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 10](https://sap-samples.github.io/ui5-typescript-walkthrough/step-10/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 10](https://sap-samples.github.io/ui5-typescript-walkthrough/build/10/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 10](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-10.zip).
+Download solution for step 10 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-10.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-10-js.zip).
 
 ***
 

diff --git a/steps/11/README.md b/steps/11/README.md
@@ -12,9 +12,9 @@ After all the work on the app structure it’s time to improve the look of our a
 
 <sup>*A panel is now displaying the controls from the previous steps*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 11](https://sap-samples.github.io/ui5-typescript-walkthrough/step-11/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 11](https://sap-samples.github.io/ui5-typescript-walkthrough/build/11/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 11](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-11.zip).
+Download solution for step 11 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-11.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-11-js.zip).
 ***
 
 ### Coding
@@ -103,4 +103,4 @@ The `App` control does the following important things for us:
 
 [API Reference: `sap.m.Page`](https://sdk.openui5.org/api/sap.m.Page)
 
-[Samples: `sap.m.Page` ](https://sdk.openui5.org/entity/sap.m.Page)
+[Samples: `sap.m.Page` ](https://sdk.openui5.org/entity/sap.m.Page)
diff --git a/steps/12/README.md b/steps/12/README.md
@@ -12,9 +12,9 @@ Now we use a shell control as container for our app and use it as our new root e
 
 <sup>*The app is now run in a shell that limits the app width*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 12](https://sap-samples.github.io/ui5-typescript-walkthrough/step-12/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 12](https://sap-samples.github.io/ui5-typescript-walkthrough/build/12/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 12](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-12.zip).
+Download solution for step 12 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-12.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-12-js.zip).
 
 ***
 
@@ -74,4 +74,4 @@ There are further options to customize the shell, like setting a custom backgrou
 
 **Related Information**  
 
-[API Reference: `sap.m.Shell`](https://sdk.openui5.org/#/api/sap.m.Shell)
+[API Reference: `sap.m.Shell`](https://sdk.openui5.org/#/api/sap.m.Shell)
diff --git a/steps/13/README.md b/steps/13/README.md
@@ -14,9 +14,9 @@ Instead of manually adding CSS to the controls, we will use the standard classes
 
 <sup>*The layout of the panel and its content now has margins and padding*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 13](https://sap-samples.github.io/ui5-typescript-walkthrough/step-13/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 13](https://sap-samples.github.io/ui5-typescript-walkthrough/build/13/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 13](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-13.zip).
+Download solution for step 13 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-13.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-13-js.zip).
 
 ***
 
@@ -90,4 +90,4 @@ To format the output text individually, we remove the description from the input
 
 [Using Predefined CSS Margin Classes](https://sdk.openui5.org/topic/777168ffe8324873973151dae2356d1c.html "OpenUI5 gives you the option of adding spacing in between controls by adding a margin. A margin clears an area around its respective control, outside of its border.")
 
-[Using Container Content Padding CSS Classes](https://sdk.openui5.org/topic/c71f6df62dae47ca8284310a6f5fc80a.html "For many container controls in OpenUI5, such as a Dialog or a Page, you can define whether the container should have a padding within the content area. A padding clears the area between the container layout and the controls that are displayed in the content area.")
+[Using Container Content Padding CSS Classes](https://sdk.openui5.org/topic/c71f6df62dae47ca8284310a6f5fc80a.html "For many container controls in OpenUI5, such as a Dialog or a Page, you can define whether the container should have a padding within the content area. A padding clears the area between the container layout and the controls that are displayed in the content area.")
diff --git a/steps/14/README.md b/steps/14/README.md
@@ -12,9 +12,9 @@ Sometimes we need to define some more fine-granular layouts and this is when we
 
 <sup>*The space between the button and the input field is now smaller and the output text is bold*</sup>
 
-You can access the live preview by clicking on this link: [🔗 Live Preview of Step 14](https://sap-samples.github.io/ui5-typescript-walkthrough/step-14/index-cdn.html).
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 14](https://sap-samples.github.io/ui5-typescript-walkthrough/build/14/index-cdn.html).
 
-To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 14](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-14.zip).
+Download solution for step 14 in [📥 TypeScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-14.zip) or [📥 JavaScript](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-14-js.zip).
 
 
 > ### 🚨 Caution:  
@@ -152,4 +152,4 @@ The actual color now depends on the selected theme which ensures that the color
 
 [API Reference: `sap.ui.core.theming`](https://sdk.openui5.org/api/sap.ui.core.theming)
 
-[Samples: `sap.ui.core.theming` ](https://sdk.openui5.org/entity/sap.ui.core.theming)
+[Samples: `sap.ui.core.theming` ](https://sdk.openui5.org/entity/sap.ui.core.theming)