Add preview link and download link for each step

SAP-samples · Jan 31, 2024 · 066d9a8 · 066d9a8
1 parent 3f716f5
commit 066d9a8
Show file tree

Hide file tree

Showing 39 changed files with 204 additions and 64 deletions.
diff --git a/README.md b/README.md
diff --git a/steps/01/README.md b/steps/01/README.md
@@ -13,10 +13,15 @@ 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).
+
+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).
+
 ***
 
 ### Coding
 
+### 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".
 

diff --git a/steps/02/README.md b/steps/02/README.md
@@ -12,6 +12,11 @@ Before we can do something with OpenUI5, we need to load and initialize it. This
 ![](https://sdk.openui5.org/docs/topics/loio0f6b6b9dc46a474da9287c382c8d3456_LowRes.png "An alert \"UI5 is ready\" is displayed")
 
 <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).
+
+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).
+
 ***
 
 ### Tooling

diff --git a/steps/03/README.md b/steps/03/README.md
@@ -13,6 +13,10 @@ 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).
+
+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).
+
 ***
 
 ### Tooling

diff --git a/steps/04/README.md b/steps/04/README.md
@@ -13,6 +13,11 @@ When working with OpenUI5, we recommend the use of XML views, as this produces t
 ![](https://sdk.openui5.org/docs/topics/loio05f6775a39d3409ea673f4acc3812142_LowRes.png "The  \"Hello World\" text is now displayed by a OpenUI5 control  \(No visual changes to last step\)")
 
 <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).
+
+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).
+
 ***
 
 ### Coding

diff --git a/steps/05/README.md b/steps/05/README.md
@@ -12,6 +12,11 @@ In this step, we replace the text with a button and show the “Hello World” m
 ![](https://sdk.openui5.org/docs/topics/loiocedfdf89b30643ddbfcab1fe50bfa892_LowRes.png "A Say Hello button is added")
 
 <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).
+
+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).
+
 ***
 
 ### Coding

diff --git a/steps/06/README.md b/steps/06/README.md
@@ -8,12 +8,14 @@ In OpenUI5, resources are often referred to as modules. In this step, we replace
 
 ### Preview
 
-
-
 ![](https://sdk.openui5.org/docs/topics/loio2f629a95211f49afa367b60d233fb390_LowRes.png "A message toast displays the \"Hello World\" message")
 
 <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).
+
+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).
+
 ***
 
 ### Coding

diff --git a/steps/07/README.md b/steps/07/README.md
@@ -13,6 +13,11 @@ We'll create a view model in our controller, add an input field to our app, bind
 ![](https://sdk.openui5.org/docs/topics/loioafc105517a644407bd90662e3d94ea01_LowRes.png "An input field and a description displaying the value of the input field")
 
 <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).
+
+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).
+
 ***
 
 ### Coding

diff --git a/steps/08/README.md b/steps/08/README.md
@@ -13,6 +13,11 @@ This way, they are all in a central place and can be easily translated into othe
 ![](https://sdk.openui5.org/docs/topics/loio0eb579e2f2a64c5a9894086322c7faa0_LowRes.png "An input field and a description displaying the value of the input field \(No visual changes to last step\(")
 
 <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).
+
+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).
+
 ***
 
 ### Coding

diff --git a/steps/09/README.md b/steps/09/README.md
@@ -17,14 +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).
 
 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).
 ***
 
 

diff --git a/steps/10/README.md b/steps/10/README.md
@@ -13,6 +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).
+
+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).
 
 ***
 

diff --git a/steps/11/README.md b/steps/11/README.md
@@ -12,6 +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).
+
+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).
 ***
 
 ### Coding

diff --git a/steps/12/README.md b/steps/12/README.md
@@ -9,8 +9,13 @@ Now we use a shell control as container for our app and use it as our new root e
 ### Preview
 
 ![](https://sdk.openui5.org/docs/topics/loio0becf3ee81f5486a864e3b39ba036402_LowRes.png "The app is now run in a shall that limits the app width")
+
 <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).
+
+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).
+
 ***
 
 ### Coding

diff --git a/steps/13/README.md b/steps/13/README.md
@@ -11,8 +11,12 @@ Instead of manually adding CSS to the controls, we will use the standard classes
 ### Preview
 
 ![](https://sdk.openui5.org/docs/topics/loio0becf3ee81f5486a864e3b39ba036402_LowRes.png "The layout of the panel and its content now has margins and padding")
+
 <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).
+
+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).
 
 ***
 

diff --git a/steps/14/README.md b/steps/14/README.md
@@ -8,10 +8,14 @@ Sometimes we need to define some more fine-granular layouts and this is when we
 
 ### Preview
 
-![](https://sdk.openui5.org/docs/topics/loiod9a40e539b7c49c485be821efbd3821f_LowRes.png "The space between the button and the input field is now smaller and the
-					output text is bold")
+![](https://sdk.openui5.org/docs/topics/loiod9a40e539b7c49c485be821efbd3821f_LowRes.png "The space between the button and the input field is now smaller and the output text is bold")
+
 <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).
+
+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).
+
 
 > ### 🚨 Caution:  
 > As stated in the [Compatibility Rules](https://sdk.openui5.org/topic/91f087396f4d1014b6dd926db0e91070.html), the HTML and CSS generated by OpenUI5 is not part of the public API and may change in patch and minor releases. If you decide to override styles, you need to test and update your modifications each time OpenUI5 is updated. A prerequisite for this is that you have control over the version of OpenUI5 being used, for example in a standalone scenario. This is not possible when running your app in the SAP Fiori launchpad where OpenUI5 is centrally loaded for all apps. As such, SAP Fiori launchpad apps should not override styles.

diff --git a/steps/15/README.md b/steps/15/README.md
@@ -9,8 +9,12 @@ Our panel content is getting more and more complex and now it is time to move th
 ### Preview
 
 ![](https://sdk.openui5.org/docs/topics/loiof3724d2f97e94a78b27d8ab01ff9c37d_LowRes.png "The panel content is now refactored to a separate view \(No visual changes to last step\)")
+
 <sup>*The panel content is now refactored to a separate view \(No visual changes to last step\)*</sup>
 
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 15](https://sap-samples.github.io/ui5-typescript-walkthrough/step-15/index-cdn.html).
+
+To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 15](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-15.zip).
 
 ***
 

diff --git a/steps/16/README.md b/steps/16/README.md
@@ -18,6 +18,9 @@ We will now add a dialog to our app. Dialogs are special, because they open on t
 
 <sup>*A dialog opens when the new “Say Hello With Dialog” button is clicked*</sup>
 
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 16](https://sap-samples.github.io/ui5-typescript-walkthrough/step-16/index-cdn.html).
+
+To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 16](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-16.zip).
 
 ***
 

diff --git a/steps/17/README.md b/steps/17/README.md
@@ -12,6 +12,10 @@ Now that we have integrated the dialog, it's time to add some user interaction.
 
 <sup>*The dialog now has an \"OK\" button to close the dialog*</sup>
 
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 17](https://sap-samples.github.io/ui5-typescript-walkthrough/step-17/index-cdn.html).
+
+To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 17](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-17.zip).
+
 ### Coding
 
 ### webapp/controller/HelloPanel.controller.ts

diff --git a/steps/18/README.md b/steps/18/README.md
@@ -9,8 +9,13 @@ Our dialog is still pretty much empty. Since SAPUI5 is shipped with a large icon
 ### Preview
 
 ![](https://sdk.openui5.org/docs/topics/loiofbc48e23cc7d45e393cc95bbbfc6e0a3_LowRes.png "An icon is now displayed in the dialog box")
+
 <sup>*An icon is now displayed in the dialog box*</sup>
 
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 18](https://sap-samples.github.io/ui5-typescript-walkthrough/step-18/index-cdn.html).
+
+To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 15](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-18.zip).
+
 ***
 
 ### Coding

diff --git a/steps/19/README.md b/steps/19/README.md
@@ -12,6 +12,10 @@ Now that we have established a good structure for our app, it's time to add some
 
 <sup>*A list of invoices is displayed below the panel*</sup>
 
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 19](https://sap-samples.github.io/ui5-typescript-walkthrough/step-19/index-cdn.html).
+
+To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 19](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-19.zip).
+
 ***
 
 ### Coding

diff --git a/steps/20/README.md b/steps/20/README.md
@@ -12,6 +12,10 @@ The list of invoices is already looking nice, but what is an invoice without a p
 
 <sup>*The list of invoices with prices and number units*</sup>
 
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 20](https://sap-samples.github.io/ui5-typescript-walkthrough/step-20/index-cdn.html).
+
+To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 20](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-20.zip).
+
 ### Coding
 
 ### webapp/controller/InvoiceList.controller.js \(New\)

diff --git a/steps/21/README.md b/steps/21/README.md
@@ -12,6 +12,10 @@ Sometimes the predefined types of OpenUI5 are not flexible enough and you want t
 
 <sup>*The price is now formatted according to its number*</sup>
 
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 21](https://sap-samples.github.io/ui5-typescript-walkthrough/step-21/index-cdn.html).
+
+To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 21](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-21.zip).
+
 ***
 
 ### Coding

diff --git a/steps/22/README.md b/steps/22/README.md
@@ -12,6 +12,10 @@ If we want to do a more complex logic for formatting properties of our data mode
 
 <sup>*A status is now displayed with a custom formatter*</sup>
 
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 22](https://sap-samples.github.io/ui5-typescript-walkthrough/step-22/index-cdn.html).
+
+To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 22](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-22.zip).
+
 ***
 
 ### Coding

diff --git a/steps/23/README.md b/steps/23/README.md
@@ -12,6 +12,10 @@ In this step, we add a search field for our product list and define a filter tha
 
 <sup>*A search field is displayed above the list*</sup>
 
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 23](https://sap-samples.github.io/ui5-typescript-walkthrough/step-23/index-cdn.html).
+
+To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 23](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-23.zip).
+
 ***
 
 ### Coding

diff --git a/steps/24/README.md b/steps/24/README.md
@@ -13,6 +13,10 @@ To make our list of invoices even more user-friendly, we sort it alphabetically
 
 <sup>*The list is now sorted and grouped by the shipping company*</sup>
 
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 24](https://sap-samples.github.io/ui5-typescript-walkthrough/step-24/index-cdn.html).
+
+To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 24](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-24.zip).
+
 ***
 
 ### Coding

diff --git a/steps/25/README.md b/steps/25/README.md
@@ -8,16 +8,18 @@ So far we have worked with local JSON data, but now we will access a real OData
 
 In the real world, data often resides on remote servers and is accessed via an OData service. We will add a data source configuration to the manifest and replace the JSONModel type for our `invoice` model with the publicly available Northwind OData service to visualize remote data. You will be surprised how little needs to be changed in order to make this work!
 
-> 📝 **Note:** <br>
-> If you cannot get it to run, don't worry too much, the remaining steps will also work with the local JSON data you have used so far. In [Step 26: Mock Server Configuration](../26/README.md), you will learn how to simulate a back-end system to achieve a similar working scenario. However, you should at least read this chapter about remote OData services to learn about non-local data sources.
-
 ***
 
 ### Preview 
 
 ![](https://sdk.openui5.org/docs/topics/loio5b76bb4b15eb44e1862d0b6c1c802571_LowRes.png "Products from the OData invoices test service are now shown within our app")
+
 <sup>>*Products from the OData invoices test service are now shown within our app*</sup>
 
+*A real-time preview utilizing data from the OData remote service is currently unavailable in this setup. However, we assure you that it will work on your local machine as long as you avoid making any mistakes. So, give it a try and see the results for yourself!*
+
+To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 25](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-25.zip).
+
 ***
 
 ### UI5 Tooling

diff --git a/steps/26/README.md b/steps/26/README.md
@@ -15,6 +15,12 @@ This system is the so-called back-end system that we will now simulate with anOp
 
 <sup>*The list of invoices is now served by the Mock Server*</sup>
 
+You can access the live preview by clicking on this link: [🔗 Live Preview of Step 26](https://sap-samples.github.io/ui5-typescript-walkthrough/step-26/test/mockServer-cdn.html).
+
+To download the solution for this step as a zip file, just choose the link here: [📥 Download Solution for Step 26](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-26.zip).
+
+***
+
 ### Coding
 
 The folder structure of our app project is clearly separating test and productive files after this step. The new `test` folder now contains a new HTML page `mockServer.html` which will launch our application in test mode without calling the real service.
-Original file line number
+Diff line change
@@ Expand Up @@
     <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).
+    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).
     ***
@@ Expand Down @@