diff --git a/404.html b/404.html index 580734011..14276fe37 100644 --- a/404.html +++ b/404.html @@ -3,10 +3,10 @@ diff --git a/README.md b/README.md index eea04b0c5..59e65da83 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -[![REUSE status](https://api.reuse.software/badge/github.com/SAP-samples/ui5-typescript-walkthrough)](https://api.reuse.software/info/github.com/SAP-samples/ui5-typescript-walkthrough) +[![REUSE status](https://api.reuse.software/badge/github.com/UI5/tutorials)](https://api.reuse.software/info/github.com/UI5/tutorials) # UI5 Tutorials @@ -16,7 +16,7 @@ This repository contains following tutorials: ## How to obtain support -[Create an issue](https://github.com/SAP-samples/ui5-typescript-walkthrough/issues) in this repository if you find a bug or have questions about the content. +[Create an issue](https://github.com/UI5/tutorials/issues) in this repository if you find a bug or have questions about the content. For additional support, [ask a question in OpenUI5 Community on Slack](https://ui5-slack-invite.cfapps.eu10.hana.ondemand.com/). diff --git a/REUSE.toml b/REUSE.toml index 422641208..e37fb1aaf 100644 --- a/REUSE.toml +++ b/REUSE.toml @@ -1,7 +1,7 @@ version = 1 SPDX-PackageName = "ui5-typescript-walkthrough" SPDX-PackageSupplier = "ospo@sap.com" -SPDX-PackageDownloadLocation = "" +SPDX-PackageDownloadLocation = "" SPDX-PackageComment = "The code in this project may include calls to APIs (\"API Calls\") of\n SAP or third-party products or services developed outside of this project\n (\"External Products\").\n \"APIs\" means application programming interfaces, as well as their respective\n specifications and implementing code that allows software to communicate with\n other software.\n API Calls to External Products are not licensed under the open source license\n that governs this project. The use of such API Calls and related External\n Products are subject to applicable additional agreements with the relevant\n provider of the External Products. In no event shall the open source license\n that governs this project grant any rights in or to any External Products,or\n alter, expand or supersede any terms of the applicable additional agreements.\n If you have a valid license agreement with SAP for the use of a particular SAP\n External Product, then you may make use of any API Calls included in this\n project's code for that SAP External Product, subject to the terms of such\n license agreement. If you do not have a valid license agreement for the use of\n a particular SAP External Product, then you may only make use of any API Calls\n in this project for that SAP External Product for your internal, non-productive\n and non-commercial test and evaluation of such API Calls. Nothing herein grants\n you any rights to use or access any SAP External Product, or provide any third\n parties the right to use of access any SAP External Product, through API Calls." [[annotations]] diff --git a/package.json b/package.json index 1cc1baf5f..33583db52 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "license": "Apache-2.0", "repository": { "type": "git", - "url": "git@github.com:SAP-samples/ui5-typescript-walkthrough.git" + "url": "git@github.com:UI5/tutorials.git" }, "scripts": { "build": "node tools/builder", diff --git a/packages/quickstart/README.md b/packages/quickstart/README.md index 9b75e21f0..3f47a988e 100644 --- a/packages/quickstart/README.md +++ b/packages/quickstart/README.md @@ -20,9 +20,9 @@ We first introduce you to the basic development paradigms like *Model-View-Contr The tutorial consists of the following steps. To start, just open the first link - you`ll be guided from there. -- **[Step 1: Ready...](steps/01/README.md "Let's get you ready for your journey! We bootstrap OpenUI5 in an HTML page and implement a simple "Hello World" example.")** ([πŸ”— Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/quickstart/build/01/index.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/quickstart/quickstart-step-01.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/quickstart/quickstart-step-01-js.zip)
) -- **[Step 2: Steady...](steps/02/README.md "Now we extend our minimalist HTML page to a basic app with a view and a controller.")** ([πŸ”— Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/quickstart/build/02/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/quickstart/quickstart-step-02.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/quickstart/quickstart-step-02-js.zip)
) -- **[Step 3: Go!](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/quickstart/build/03/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/quickstart/quickstart-step-03.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/quickstart/quickstart-step-03-js.zip)
) +- **[Step 1: Ready...](steps/01/README.md "Let's get you ready for your journey! We bootstrap OpenUI5 in an HTML page and implement a simple "Hello World" example.")** ([πŸ”— Live Preview](https://ui5.github.io/tutorials/quickstart/build/01/index.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/quickstart/quickstart-step-01.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/quickstart/quickstart-step-01-js.zip)
) +- **[Step 2: Steady...](steps/02/README.md "Now we extend our minimalist HTML page to a basic app with a view and a controller.")** ([πŸ”— Live Preview](https://ui5.github.io/tutorials/quickstart/build/02/index-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/quickstart/quickstart-step-02.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/quickstart/quickstart-step-02-js.zip)
) +- **[Step 3: Go!](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://ui5.github.io/tutorials/quickstart/build/03/index-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/quickstart/quickstart-step-03.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/quickstart/quickstart-step-03-js.zip)
) ## License diff --git a/packages/quickstart/steps/01/README.md b/packages/quickstart/steps/01/README.md index ea8ef5c08..055e37882 100644 --- a/packages/quickstart/steps/01/README.md +++ b/packages/quickstart/steps/01/README.md @@ -13,7 +13,7 @@ Let's get you ready for your journey! We bootstrap OpenUI5 in an HTML page and i *The browser shows a "Ready" button that triggers a "Hello World" message* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 1](https://sap-samples.github.io/ui5-typescript-walkthrough/quickstart/build/01/index.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 1](https://ui5.github.io/tutorials/quickstart/build/01/index.html). *** @@ -21,13 +21,13 @@ You can access the live preview by clicking on this link: [πŸ”— Live Preview of
-You can download the solution for this step here: [πŸ“₯ Download step 1](https://sap-samples.github.io/ui5-typescript-walkthrough/quickstart-step-01.zip). +You can download the solution for this step here: [πŸ“₯ Download step 1](https://ui5.github.io/tutorials/quickstart-step-01.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 1](https://sap-samples.github.io/ui5-typescript-walkthrough/quickstart-step-01-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 1](https://ui5.github.io/tutorials/quickstart-step-01-js.zip).
*** diff --git a/packages/quickstart/steps/02/README.md b/packages/quickstart/steps/02/README.md index 17ea9e9b7..afc45e1fc 100644 --- a/packages/quickstart/steps/02/README.md +++ b/packages/quickstart/steps/02/README.md @@ -13,7 +13,7 @@ Now we extend our minimalist HTML page to a basic app with a view and a controll *The browser shows a Steady button in an app* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 2](https://sap-samples.github.io/ui5-typescript-walkthrough/quickstart/build/02/index.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 2](https://ui5.github.io/tutorials/quickstart/build/02/index.html). *** @@ -21,13 +21,13 @@ You can access the live preview by clicking on this link: [πŸ”— Live Preview of
-You can download the solution for this step here: [πŸ“₯ Download step 2](https://sap-samples.github.io/ui5-typescript-walkthrough/quickstart-step-02.zip). +You can download the solution for this step here: [πŸ“₯ Download step 2](https://ui5.github.io/tutorials/quickstart-step-02.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 2](https://sap-samples.github.io/ui5-typescript-walkthrough/quickstart-step-02-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 2](https://ui5.github.io/tutorials/quickstart-step-02-js.zip).
*** diff --git a/packages/quickstart/steps/03/README.md b/packages/quickstart/steps/03/README.md index 22033159e..8748d21af 100644 --- a/packages/quickstart/steps/03/README.md +++ b/packages/quickstart/steps/03/README.md @@ -13,7 +13,7 @@ Finally, we add a second page to our app showcasing some of the key OpenUI5 conc *The second page shows plenty of UI controls and concepts to explore* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 3](https://sap-samples.github.io/ui5-typescript-walkthrough/quickstart/build/03/index.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 3](https://ui5.github.io/tutorials/quickstart/build/03/index.html). *** @@ -21,13 +21,13 @@ You can access the live preview by clicking on this link: [πŸ”— Live Preview of
-You can download the solution for this step here: [πŸ“₯ Download step 3](https://sap-samples.github.io/ui5-typescript-walkthrough/quickstart-step-03.zip). +You can download the solution for this step here: [πŸ“₯ Download step 3](https://ui5.github.io/tutorials/quickstart-step-03.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 3](https://sap-samples.github.io/ui5-typescript-walkthrough/quickstart-step-03-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 3](https://ui5.github.io/tutorials/quickstart-step-03-js.zip).
*** diff --git a/packages/walkthrough/README.md b/packages/walkthrough/README.md index b7fab2158..5e8644fb7 100644 --- a/packages/walkthrough/README.md +++ b/packages/walkthrough/README.md @@ -20,44 +20,44 @@ We first introduce you to the basic development paradigms like *Model-View-Contr The tutorial consists of the following steps. To start, just open the first link - you`ll be guided from there. -- **[Step 1: Hello World!](steps/01/README.md "As you know OpenUI5 is all about HTML5. Let’s get started with building a first "Hello World" with only HTML.")** ([πŸ”— Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/01/index.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-01.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/02/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-02.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/03/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-03.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/04/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-04.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/05/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-05.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/06/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-06.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/07/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-07.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/08/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-08.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/09/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-09.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/10/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-10.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/11/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-11.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/12/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-12.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/13/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-13.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/14/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-14.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/15/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-15.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/16/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-16.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/17/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-17.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/18/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-18.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/19/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-19.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/20/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-20.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/21/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-21.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/22/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-22.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/23/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-23.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/24/index-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-24.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/walkthrough-step-25.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/26/test/mockServer-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-26.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/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/walkthrough/walkthrough-step-27.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/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/walkthrough/walkthrough-step-28.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-28-js.zip)
) +- **[Step 1: Hello World!](steps/01/README.md "As you know OpenUI5 is all about HTML5. Let’s get started with building a first "Hello World" with only HTML.")** ([πŸ”— Live Preview](https://ui5.github.io/tutorials/walkthrough/build/01/index.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-01.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/02/index-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-02.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/03/index-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-03.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/04/index-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-04.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/05/index-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-05.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/06/index-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-06.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/07/index-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-07.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/08/index-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-08.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/09/index-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-09.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/10/index-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-10.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/11/index-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-11.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/12/index-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-12.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/13/index-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-13.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/14/index-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-14.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/15/index-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-15.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/16/index-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-16.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/17/index-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-17.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/18/index-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-18.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/19/index-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-19.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/20/index-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-20.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/21/index-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-21.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/22/index-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-22.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/23/index-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-23.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/24/index-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-24.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/walkthrough-step-25.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/26/test/mockServer-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-26.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/27/test/Test.cdn.qunit.html?testsuite=test-resources/ui5/walkthrough/testsuite.cdn.qunit&test=unit/unitTests) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-27.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/28/test/Test.cdn.qunit.html?testsuite=test-resources/ui5/walkthrough/testsuite.cdn.qunit&test=integration/opaTests) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-28.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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/walkthrough/build/30/test/mockServer-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-30.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/31/test/mockServer-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-31.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/32/test/mockServer-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-32.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/33/test/mockServer-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-33.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/34/test/mockServer-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-34.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/35/test/mockServer-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-35.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/36/test/mockServer-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-36.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/build/37/test/mockServer-cdn.html) \|
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-37.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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/walkthrough/walkthrough-step-38.zip)
[πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/30/test/mockServer-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-30.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/31/test/mockServer-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-31.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/32/test/mockServer-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-32.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/33/test/mockServer-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-33.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/34/test/mockServer-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-34.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/35/test/mockServer-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-35.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/36/test/mockServer-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-36.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/build/37/test/mockServer-cdn.html) \|
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-37.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/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://ui5.github.io/tutorials/walkthrough/walkthrough-step-38.zip)
[πŸ“₯ Download Solution](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-38-js.zip)
) ## License diff --git a/packages/walkthrough/steps/01/README.md b/packages/walkthrough/steps/01/README.md index c247df94e..7b472889e 100644 --- a/packages/walkthrough/steps/01/README.md +++ b/packages/walkthrough/steps/01/README.md @@ -13,7 +13,7 @@ As you know, OpenUI5 is all about HTML5. Let's get started with building a first *The browser shows the text "Hello World"* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 1](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/01/index.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 1](https://ui5.github.io/tutorials/walkthrough/build/01/index.html). *** @@ -21,13 +21,13 @@ You can access the live preview by clicking on this link: [πŸ”— Live Preview of
-You can download the solution for this step here: [πŸ“₯ Download step 1](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-01.zip). +You can download the solution for this step here: [πŸ“₯ Download step 1](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-01.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 1](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-01-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 1](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-01-js.zip).
*** diff --git a/packages/walkthrough/steps/02/README.md b/packages/walkthrough/steps/02/README.md index 80375fb76..a33951895 100644 --- a/packages/walkthrough/steps/02/README.md +++ b/packages/walkthrough/steps/02/README.md @@ -13,20 +13,20 @@ Before we can do something with OpenUI5, we need to load and initialize it. This *An alert "UI5 is ready" is displayed* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 2](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/02/index-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 2](https://ui5.github.io/tutorials/walkthrough/build/02/index-cdn.html). *** ### Coding
-You can download the solution for this step here: [πŸ“₯ Download step 2](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-02.zip). +You can download the solution for this step here: [πŸ“₯ Download step 2](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-02.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 2](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-02-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 2](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-02-js.zip).
*** diff --git a/packages/walkthrough/steps/03/README.md b/packages/walkthrough/steps/03/README.md index 53f4828b6..a4d1c52ac 100644 --- a/packages/walkthrough/steps/03/README.md +++ b/packages/walkthrough/steps/03/README.md @@ -13,19 +13,19 @@ Now it is time to build our first little UI by replacing the β€œHello World” t *The "Hello World" text is now displayed by an OpenUI5 control* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 3](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/03/index-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 3](https://ui5.github.io/tutorials/walkthrough/build/03/index-cdn.html). *** ### Coding
-You can download the solution for this step here: [πŸ“₯ Download step 3](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-03.zip). +You can download the solution for this step here: [πŸ“₯ Download step 3](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-03.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 3](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-03-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 3](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-03-js.zip).
*** diff --git a/packages/walkthrough/steps/04/README.md b/packages/walkthrough/steps/04/README.md index 6596ee055..78172f545 100644 --- a/packages/walkthrough/steps/04/README.md +++ b/packages/walkthrough/steps/04/README.md @@ -14,7 +14,7 @@ When working with OpenUI5, we recommend the use of XML views, as this produces t *The "Hello World" text is now displayed by an OpenUI5 control \(No visual changes to last step\)* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 4](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/04/index-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 4](https://ui5.github.io/tutorials/walkthrough/build/04/index-cdn.html). *** @@ -22,13 +22,13 @@ You can access the live preview by clicking on this link: [πŸ”— Live Preview of
-You can download the solution for this step here: [πŸ“₯ Download step 4](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-04.zip). +You can download the solution for this step here: [πŸ“₯ Download step 4](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-04.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 4](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-04-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 4](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-04-js.zip).
*** diff --git a/packages/walkthrough/steps/05/README.md b/packages/walkthrough/steps/05/README.md index d005c4419..3427bd5c4 100644 --- a/packages/walkthrough/steps/05/README.md +++ b/packages/walkthrough/steps/05/README.md @@ -13,7 +13,7 @@ In this step, we replace the text with a button and show the β€œHello World” m *A Say Hello button is added* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 5](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/05/index-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 5](https://ui5.github.io/tutorials/walkthrough/build/05/index-cdn.html). *** @@ -21,13 +21,13 @@ You can access the live preview by clicking on this link: [πŸ”— Live Preview of
-You can download the solution for this step here: [πŸ“₯ Download step 5](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-05.zip). +You can download the solution for this step here: [πŸ“₯ Download step 5](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-05.zip).
-You can download the solution for this step here: [πŸ“₯ download step 5](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-05-js.zip). +You can download the solution for this step here: [πŸ“₯ download step 5](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-05-js.zip).
*** diff --git a/packages/walkthrough/steps/06/README.md b/packages/walkthrough/steps/06/README.md index caa0e6c0d..a8b29203b 100644 --- a/packages/walkthrough/steps/06/README.md +++ b/packages/walkthrough/steps/06/README.md @@ -12,7 +12,7 @@ In OpenUI5, resources are often referred to as modules. In this step, we replace *A message toast displays the "Hello World" message* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 6](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/06/index-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 6](https://ui5.github.io/tutorials/walkthrough/build/06/index-cdn.html). *** @@ -20,13 +20,13 @@ You can access the live preview by clicking on this link: [πŸ”— Live Preview of
-You can download the solution for this step here: [πŸ“₯ Download step 6](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-06.zip). +You can download the solution for this step here: [πŸ“₯ Download step 6](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-06.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 6](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-06-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 6](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-06-js.zip).
*** diff --git a/packages/walkthrough/steps/07/README.md b/packages/walkthrough/steps/07/README.md index 3ca34d574..09f5902a7 100644 --- a/packages/walkthrough/steps/07/README.md +++ b/packages/walkthrough/steps/07/README.md @@ -14,7 +14,7 @@ We'll create a view model in our controller, add an input field to our app, bind *An input field and a description displaying the value of the input field* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 7](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/07/index-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 7](https://ui5.github.io/tutorials/walkthrough/build/07/index-cdn.html). *** @@ -22,13 +22,13 @@ You can access the live preview by clicking on this link: [πŸ”— Live Preview of
-You can download the solution for this step here: [πŸ“₯ Download step 7](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-07.zip). +You can download the solution for this step here: [πŸ“₯ Download step 7](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-07.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 7](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-07-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 7](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-07-js.zip).
*** diff --git a/packages/walkthrough/steps/08/README.md b/packages/walkthrough/steps/08/README.md index c6267b2a1..07c630c51 100644 --- a/packages/walkthrough/steps/08/README.md +++ b/packages/walkthrough/steps/08/README.md @@ -14,20 +14,20 @@ This way, they are all in a central place and can be easily translated into othe *An input field and a description displaying the value of the input field \(No visual changes to last step\)* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 8](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/08/index-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 8](https://ui5.github.io/tutorials/walkthrough/build/08/index-cdn.html). *** ### Coding
-You can download the solution for this step here: [πŸ“₯ Download step 8](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-08.zip). +You can download the solution for this step here: [πŸ“₯ Download step 8](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-08.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 8](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-08-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 8](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-08-js.zip).
*** diff --git a/packages/walkthrough/steps/09/README.md b/packages/walkthrough/steps/09/README.md index e428611bf..a2f7ffaf3 100644 --- a/packages/walkthrough/steps/09/README.md +++ b/packages/walkthrough/steps/09/README.md @@ -17,7 +17,7 @@ By encapsulating our application as a component, we can seamlessly integrate it *An input field and a description displaying the value of the input field \(No visual changes to last step\)* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 9](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/09/index-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 9](https://ui5.github.io/tutorials/walkthrough/build/09/index-cdn.html). After this step your project structure will look like the figure below. We will create the `Component.?s` file now and modify the related files in the app. @@ -30,13 +30,13 @@ After this step your project structure will look like the figure below. We will
-You can download the solution for this step here: [πŸ“₯ Download step 9](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-09.zip). +You can download the solution for this step here: [πŸ“₯ Download step 9](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-09.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 9](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-09-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 9](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-09-js.zip).
*** diff --git a/packages/walkthrough/steps/10/README.md b/packages/walkthrough/steps/10/README.md index 761d8b1ff..8574549df 100644 --- a/packages/walkthrough/steps/10/README.md +++ b/packages/walkthrough/steps/10/README.md @@ -13,7 +13,7 @@ Instead of relying on a local HTML file for the bootstrap, the manifest is parse *An input field and a description displaying the value of the input field \(No visual changes to last step\)* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 10](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/10/index-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 10](https://ui5.github.io/tutorials/walkthrough/build/10/index-cdn.html). *** @@ -21,13 +21,13 @@ You can access the live preview by clicking on this link: [πŸ”— Live Preview of
-You can download the solution for this step here: [πŸ“₯ Download step 10](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-10.zip). +You can download the solution for this step here: [πŸ“₯ Download step 10](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-10.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 10](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-10-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 10](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-10-js.zip).
*** diff --git a/packages/walkthrough/steps/11/README.md b/packages/walkthrough/steps/11/README.md index 859d5ffd6..8ca8ae04b 100644 --- a/packages/walkthrough/steps/11/README.md +++ b/packages/walkthrough/steps/11/README.md @@ -12,7 +12,7 @@ After all the work on the app structure it’s time to improve the look of our a *A panel is now displaying the controls from the previous steps* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 11](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/11/index-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 11](https://ui5.github.io/tutorials/walkthrough/build/11/index-cdn.html). *** @@ -21,13 +21,13 @@ You can access the live preview by clicking on this link: [πŸ”— Live Preview of
-You can download the solution for this step here: [πŸ“₯ Download step 11](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-11.zip). +You can download the solution for this step here: [πŸ“₯ Download step 11](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-11.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 11](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-11-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 11](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-11-js.zip).
*** diff --git a/packages/walkthrough/steps/12/README.md b/packages/walkthrough/steps/12/README.md index 2078ff79f..83916ec6a 100644 --- a/packages/walkthrough/steps/12/README.md +++ b/packages/walkthrough/steps/12/README.md @@ -12,7 +12,7 @@ Now we use a shell control as container for our app and use it as our new root e *The app is now run in a shell that limits the app width* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 12](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/12/index-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 12](https://ui5.github.io/tutorials/walkthrough/build/12/index-cdn.html). *** @@ -20,13 +20,13 @@ You can access the live preview by clicking on this link: [πŸ”— Live Preview of
-You can download the solution for this step here: [πŸ“₯ Download step 12](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-12.zip). +You can download the solution for this step here: [πŸ“₯ Download step 12](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-12.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 12](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-12-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 12](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-12-js.zip).
*** diff --git a/packages/walkthrough/steps/13/README.md b/packages/walkthrough/steps/13/README.md index 62094693f..388f4b1e7 100644 --- a/packages/walkthrough/steps/13/README.md +++ b/packages/walkthrough/steps/13/README.md @@ -14,7 +14,7 @@ Instead of manually adding CSS to the controls, we will use the standard classes *The layout of the panel and its content now has margins and padding* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 13](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/13/index-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 13](https://ui5.github.io/tutorials/walkthrough/build/13/index-cdn.html). *** @@ -22,13 +22,13 @@ You can access the live preview by clicking on this link: [πŸ”— Live Preview of
-You can download the solution for this step here: [πŸ“₯ Download step 13](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-13.zip). +You can download the solution for this step here: [πŸ“₯ Download step 13](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-13.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 13](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-13-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 13](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-13-js.zip).
*** diff --git a/packages/walkthrough/steps/14/README.md b/packages/walkthrough/steps/14/README.md index e7b4298d7..768312872 100644 --- a/packages/walkthrough/steps/14/README.md +++ b/packages/walkthrough/steps/14/README.md @@ -15,7 +15,7 @@ Sometimes we need to define some more fine-granular layouts and this is when we *The space between the button and the input field is now smaller and the output text is bold* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 14](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/14/index-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 14](https://ui5.github.io/tutorials/walkthrough/build/14/index-cdn.html). *** @@ -24,13 +24,13 @@ You can access the live preview by clicking on this link: [πŸ”— Live Preview of ### Coding
-You can download the solution for this step here: [πŸ“₯ Download step 14](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-14.zip). +You can download the solution for this step here: [πŸ“₯ Download step 14](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-14.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 14](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-14-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 14](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-14-js.zip).
*** diff --git a/packages/walkthrough/steps/15/README.md b/packages/walkthrough/steps/15/README.md index 6ba83a46b..9b9561365 100644 --- a/packages/walkthrough/steps/15/README.md +++ b/packages/walkthrough/steps/15/README.md @@ -12,7 +12,7 @@ Our panel content is getting more and more complex and now it is time to move th *The panel content is now refactored to a separate view \(No visual changes to last step\)* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 15](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/15/index-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 15](https://ui5.github.io/tutorials/walkthrough/build/15/index-cdn.html). *** @@ -21,13 +21,13 @@ You can access the live preview by clicking on this link: [πŸ”— Live Preview of
-You can download the solution for this step here: [πŸ“₯ Download step 15](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-15.zip). +You can download the solution for this step here: [πŸ“₯ Download step 15](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-15.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 15](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-15-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 15](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-15-js.zip).
*** diff --git a/packages/walkthrough/steps/16/README.md b/packages/walkthrough/steps/16/README.md index 0afcfc7ed..364ff093a 100644 --- a/packages/walkthrough/steps/16/README.md +++ b/packages/walkthrough/steps/16/README.md @@ -18,7 +18,7 @@ We will now add a dialog to our app. Dialogs are special, because they open on t *A dialog opens when the new β€œSay Hello With Dialog” button is clicked* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 16](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/16/index-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 16](https://ui5.github.io/tutorials/walkthrough/build/16/index-cdn.html). *** @@ -27,13 +27,13 @@ You can access the live preview by clicking on this link: [πŸ”— Live Preview of
-You can download the solution for this step here: [πŸ“₯ Download step 16](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-16.zip). +You can download the solution for this step here: [πŸ“₯ Download step 16](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-16.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 16](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-16-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 16](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-16-js.zip).
*** diff --git a/packages/walkthrough/steps/17/README.md b/packages/walkthrough/steps/17/README.md index bd46634f1..341de74b5 100644 --- a/packages/walkthrough/steps/17/README.md +++ b/packages/walkthrough/steps/17/README.md @@ -12,20 +12,20 @@ Now that we have integrated the dialog, it's time to add some user interaction. *The dialog now has an "OK" button to close the dialog* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 17](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/17/index-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 17](https://ui5.github.io/tutorials/walkthrough/build/17/index-cdn.html). *** ### Coding
-You can download the solution for this step here: [πŸ“₯ Download step 17](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-17.zip). +You can download the solution for this step here: [πŸ“₯ Download step 17](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-17.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 17](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-17-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 17](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-17-js.zip).
*** diff --git a/packages/walkthrough/steps/18/README.md b/packages/walkthrough/steps/18/README.md index d9ace078c..335e6b68f 100644 --- a/packages/walkthrough/steps/18/README.md +++ b/packages/walkthrough/steps/18/README.md @@ -12,20 +12,20 @@ Our dialog is still pretty much empty. Since OpenUI5 is shipped with a large ico *An icon is now displayed in the dialog box* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 18](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/18/index-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 18](https://ui5.github.io/tutorials/walkthrough/build/18/index-cdn.html). *** ### Coding
-You can download the solution for this step here: [πŸ“₯ Download step 18](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-18.zip). +You can download the solution for this step here: [πŸ“₯ Download step 18](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-18.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 18](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-18-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 18](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-18-js.zip).
*** diff --git a/packages/walkthrough/steps/19/README.md b/packages/walkthrough/steps/19/README.md index dfd1a070b..4af1d5325 100644 --- a/packages/walkthrough/steps/19/README.md +++ b/packages/walkthrough/steps/19/README.md @@ -11,7 +11,7 @@ Now that we have established a good structure for our app, it's time to add some *A list of invoices is displayed below the panel* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 19](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/19/index-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 19](https://ui5.github.io/tutorials/walkthrough/build/19/index-cdn.html). *** @@ -19,13 +19,13 @@ You can access the live preview by clicking on this link: [πŸ”— Live Preview of
-You can download the solution for this step here: [πŸ“₯ Download step 19](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-19.zip). +You can download the solution for this step here: [πŸ“₯ Download step 19](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-19.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 19](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-19-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 19](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-19-js.zip).
*** diff --git a/packages/walkthrough/steps/20/README.md b/packages/walkthrough/steps/20/README.md index 0c77b6b2b..907d166ce 100644 --- a/packages/walkthrough/steps/20/README.md +++ b/packages/walkthrough/steps/20/README.md @@ -12,20 +12,20 @@ The list of invoices is already looking nice, but what is an invoice without a p *The list of invoices with prices and number units* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 20](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/20/index-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 20](https://ui5.github.io/tutorials/walkthrough/build/20/index-cdn.html). *** ### Coding
-You can download the solution for this step here: [πŸ“₯ Download step 20](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-20.zip). +You can download the solution for this step here: [πŸ“₯ Download step 20](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-20.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 20](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-20-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 20](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-20-js.zip).
*** diff --git a/packages/walkthrough/steps/21/README.md b/packages/walkthrough/steps/21/README.md index ee5ed1c55..a0ae069c3 100644 --- a/packages/walkthrough/steps/21/README.md +++ b/packages/walkthrough/steps/21/README.md @@ -12,7 +12,7 @@ Sometimes the predefined types of OpenUI5 are not flexible enough and you want t *The price is now formatted according to its number* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 21](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/21/index-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 21](https://ui5.github.io/tutorials/walkthrough/build/21/index-cdn.html). *** @@ -20,13 +20,13 @@ You can access the live preview by clicking on this link: [πŸ”— Live Preview of
-You can download the solution for this step here: [πŸ“₯ Download step 21](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-21.zip). +You can download the solution for this step here: [πŸ“₯ Download step 21](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-21.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 21](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-21-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 21](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-21-js.zip).
*** diff --git a/packages/walkthrough/steps/22/README.md b/packages/walkthrough/steps/22/README.md index 99ed8d601..dc4cd381e 100644 --- a/packages/walkthrough/steps/22/README.md +++ b/packages/walkthrough/steps/22/README.md @@ -12,7 +12,7 @@ If we want to do a more complex logic for formatting properties of our data mode *A status is now displayed with a custom formatter* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 22](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/22/index-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 22](https://ui5.github.io/tutorials/walkthrough/build/22/index-cdn.html). *** @@ -20,13 +20,13 @@ You can access the live preview by clicking on this link: [πŸ”— Live Preview of
-You can download the solution for this step here: [πŸ“₯ Download step 22](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-22.zip). +You can download the solution for this step here: [πŸ“₯ Download step 22](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-22.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 22](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-22-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 22](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-22-js.zip).
*** diff --git a/packages/walkthrough/steps/23/README.md b/packages/walkthrough/steps/23/README.md index f0bb18d91..48bedbe6b 100644 --- a/packages/walkthrough/steps/23/README.md +++ b/packages/walkthrough/steps/23/README.md @@ -12,7 +12,7 @@ In this step, we add a search field for our product list and define a filter tha *A search field is displayed above the list* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 23](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/23/index-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 23](https://ui5.github.io/tutorials/walkthrough/build/23/index-cdn.html). *** @@ -20,13 +20,13 @@ You can access the live preview by clicking on this link: [πŸ”— Live Preview of
-You can download the solution for this step here: [πŸ“₯ Download step 23](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-23.zip). +You can download the solution for this step here: [πŸ“₯ Download step 23](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-23.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 23](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-23-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 23](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-23-js.zip).
*** diff --git a/packages/walkthrough/steps/24/README.md b/packages/walkthrough/steps/24/README.md index 82eafc9e2..d9f785d0f 100644 --- a/packages/walkthrough/steps/24/README.md +++ b/packages/walkthrough/steps/24/README.md @@ -13,7 +13,7 @@ To make our list of invoices even more user-friendly, we sort it alphabetically *The list is now sorted and grouped by the shipping company* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 24](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/24/index-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 24](https://ui5.github.io/tutorials/walkthrough/build/24/index-cdn.html). *** @@ -21,13 +21,13 @@ You can access the live preview by clicking on this link: [πŸ”— Live Preview of
-You can download the solution for this step here: [πŸ“₯ Download step 24](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-24.zip). +You can download the solution for this step here: [πŸ“₯ Download step 24](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-24.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 24](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-24-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 24](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-24-js.zip).
*** diff --git a/packages/walkthrough/steps/25/README.md b/packages/walkthrough/steps/25/README.md index 288c9fe8f..0e9e91e81 100644 --- a/packages/walkthrough/steps/25/README.md +++ b/packages/walkthrough/steps/25/README.md @@ -24,13 +24,13 @@ In the real world, data often resides on remote servers and is accessed via an O
-You can download the solution for this step here: [πŸ“₯ Download step 25](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-25.zip). +You can download the solution for this step here: [πŸ“₯ Download step 25](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-25.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 25](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-25-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 25](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-25-js.zip).
*** diff --git a/packages/walkthrough/steps/26/README.md b/packages/walkthrough/steps/26/README.md index 6adc68941..6b4677cbd 100644 --- a/packages/walkthrough/steps/26/README.md +++ b/packages/walkthrough/steps/26/README.md @@ -23,20 +23,20 @@ The new `localService` folder contains a `metadata.xml` service description file *Folder Structure for this Step* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 26](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/26/test/mockServer-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 26](https://ui5.github.io/tutorials/walkthrough/build/26/test/mockServer-cdn.html). *** ### Coding
-You can download the solution for this step here: [πŸ“₯ Download step 26](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-26.zip). +You can download the solution for this step here: [πŸ“₯ Download step 26](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-26.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 26](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-26-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 26](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-26-js.zip).
*** diff --git a/packages/walkthrough/steps/27/README.md b/packages/walkthrough/steps/27/README.md index 5573911ea..d96753a45 100644 --- a/packages/walkthrough/steps/27/README.md +++ b/packages/walkthrough/steps/27/README.md @@ -22,7 +22,7 @@ We add a new folder `unit` under the `test` folder and a `model` subfolder where ![](assets/loio1b5613ac3ab94757af2c7823039222a9_LowRes.png "Folder Structure for this Step") *Folder Structure for this Step* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 27](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/27/test/Test.cdn.qunit.html?testsuite=test-resources/ui5/walkthrough/testsuite.cdn.qunit&test=unit/unitTests). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 27](https://ui5.github.io/tutorials/walkthrough/build/27/test/Test.cdn.qunit.html?testsuite=test-resources/ui5/walkthrough/testsuite.cdn.qunit&test=unit/unitTests). *** @@ -30,13 +30,13 @@ You can access the live preview by clicking on this link: [πŸ”— Live Preview of
-You can download the solution for this step here: [πŸ“₯ Download step 27](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-27.zip). +You can download the solution for this step here: [πŸ“₯ Download step 27](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-27.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 27](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-27-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 27](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-27-js.zip).
*** diff --git a/packages/walkthrough/steps/28/README.md b/packages/walkthrough/steps/28/README.md index f6609b9b2..41f758bb4 100644 --- a/packages/walkthrough/steps/28/README.md +++ b/packages/walkthrough/steps/28/README.md @@ -22,7 +22,7 @@ We add a new folder `integration` below the `test` folder, where we put our new ![](assets/loio27e84d5bd72a485498564b92894869b5_LowRes.png "Folder Structure for this Step") *Folder Structure for this Step* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 28](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/28/test/Test.cdn.qunit.html?testsuite=test-resources/ui5/walkthrough/testsuite.cdn.qunit&test=integration/opaTests). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 28](https://ui5.github.io/tutorials/walkthrough/build/28/test/Test.cdn.qunit.html?testsuite=test-resources/ui5/walkthrough/testsuite.cdn.qunit&test=integration/opaTests). *** @@ -31,13 +31,13 @@ You can access the live preview by clicking on this link: [πŸ”— Live Preview of
-You can download the solution for this step here: [πŸ“₯ Download step 28](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-28.zip). +You can download the solution for this step here: [πŸ“₯ Download step 28](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-28.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 28](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-28-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 28](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-28-js.zip).
*** diff --git a/packages/walkthrough/steps/29/README.md b/packages/walkthrough/steps/29/README.md index dbeae3b27..57724c48b 100644 --- a/packages/walkthrough/steps/29/README.md +++ b/packages/walkthrough/steps/29/README.md @@ -23,13 +23,13 @@ Luckily, OpenUI5 provides a couple of debugging tools that we can use within the
-You can download the solution for this step here: [πŸ“₯ Download step 29](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-29.zip). +You can download the solution for this step here: [πŸ“₯ Download step 29](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-29.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 29](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-29-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 29](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-29-js.zip).
diff --git a/packages/walkthrough/steps/30/README.md b/packages/walkthrough/steps/30/README.md index d0759927f..6c8a70071 100644 --- a/packages/walkthrough/steps/30/README.md +++ b/packages/walkthrough/steps/30/README.md @@ -15,7 +15,7 @@ In this step, we will use the OpenUI5 navigation features to load and show a sep *A second page is added to display the invoice* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 30](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/30/test/mockServer-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 30](https://ui5.github.io/tutorials/walkthrough/build/30/test/mockServer-cdn.html). *** @@ -24,13 +24,13 @@ You can access the live preview by clicking on this link: [πŸ”— Live Preview of
-You can download the solution for this step here: [πŸ“₯ Download step 30](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-30.zip). +You can download the solution for this step here: [πŸ“₯ Download step 30](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-30.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 30](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-30-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 30](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-30-js.zip).
*** diff --git a/packages/walkthrough/steps/31/README.md b/packages/walkthrough/steps/31/README.md index de0510804..6f03823b1 100644 --- a/packages/walkthrough/steps/31/README.md +++ b/packages/walkthrough/steps/31/README.md @@ -15,7 +15,7 @@ To make this work, we have to pass over the information which item has been sele *The selected invoice details are now shown in the details page* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 31](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/31/test/mockServer-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 31](https://ui5.github.io/tutorials/walkthrough/build/31/test/mockServer-cdn.html). *** @@ -23,13 +23,13 @@ You can access the live preview by clicking on this link: [πŸ”— Live Preview of
-You can download the solution for this step here: [πŸ“₯ Download step 31](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-31.zip). +You can download the solution for this step here: [πŸ“₯ Download step 31](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-31.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 31](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-31-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 31](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-31-js.zip).
diff --git a/packages/walkthrough/steps/32/README.md b/packages/walkthrough/steps/32/README.md index a442e0e07..ee1f6a863 100644 --- a/packages/walkthrough/steps/32/README.md +++ b/packages/walkthrough/steps/32/README.md @@ -13,7 +13,7 @@ Now we can navigate to our detail page and display an invoice, but we cannot go *A back button is now displayed on the detail page* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 32](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/32/test/mockServer-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 32](https://ui5.github.io/tutorials/walkthrough/build/32/test/mockServer-cdn.html). *** @@ -21,13 +21,13 @@ You can access the live preview by clicking on this link: [πŸ”— Live Preview of
-You can download the solution for this step here: [πŸ“₯ Download step 32](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-32.zip). +You can download the solution for this step here: [πŸ“₯ Download step 32](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-32.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 32](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-32-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 32](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-32-js.zip).
diff --git a/packages/walkthrough/steps/33/README.md b/packages/walkthrough/steps/33/README.md index 77b3281e1..72d814bd3 100644 --- a/packages/walkthrough/steps/33/README.md +++ b/packages/walkthrough/steps/33/README.md @@ -12,20 +12,20 @@ In this step, we are going to extend the functionality of OpenUI5 with a custom *A custom product rating control is added to the detail page* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 33](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/33/test/mockServer-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 33](https://ui5.github.io/tutorials/walkthrough/build/33/test/mockServer-cdn.html). *** ### Coding
-You can download the solution for this step here: [πŸ“₯ Download step 33](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-33.zip). +You can download the solution for this step here: [πŸ“₯ Download step 33](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-33.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 33](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-33-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 33](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-33-js.zip).
*** diff --git a/packages/walkthrough/steps/34/README.md b/packages/walkthrough/steps/34/README.md index 9eb1b040e..56b0abecb 100644 --- a/packages/walkthrough/steps/34/README.md +++ b/packages/walkthrough/steps/34/README.md @@ -13,7 +13,7 @@ In this step, we improve the responsiveness of our app. OpenUI5 applications can *A responsive table is hiding some of the columns on small devices* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 34](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/34/test/mockServer-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 34](https://ui5.github.io/tutorials/walkthrough/build/34/test/mockServer-cdn.html). *** @@ -21,13 +21,13 @@ You can access the live preview by clicking on this link: [πŸ”— Live Preview of ### Coding
-You can download the solution for this step here: [πŸ“₯ Download step 34](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-34.zip). +You can download the solution for this step here: [πŸ“₯ Download step 34](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-34.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 34](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-34-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 34](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-34-js.zip).
*** diff --git a/packages/walkthrough/steps/35/README.md b/packages/walkthrough/steps/35/README.md index 399b74067..5ec556b54 100644 --- a/packages/walkthrough/steps/35/README.md +++ b/packages/walkthrough/steps/35/README.md @@ -12,20 +12,20 @@ We now configure the visibility and properties of controls based on the device t *On phone devices, the panel is collapsed to save screen space and a button is hidden* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 35](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/35/test/mockServer-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 35](https://ui5.github.io/tutorials/walkthrough/build/35/test/mockServer-cdn.html). *** ### Coding
-You can download the solution for this step here: [πŸ“₯ Download step 35](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-35.zip). +You can download the solution for this step here: [πŸ“₯ Download step 35](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-35.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 35](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-35-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 35](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-35-js.zip).
*** diff --git a/packages/walkthrough/steps/36/README.md b/packages/walkthrough/steps/36/README.md index 8545fec27..4edd83509 100644 --- a/packages/walkthrough/steps/36/README.md +++ b/packages/walkthrough/steps/36/README.md @@ -12,20 +12,20 @@ In this step of our Walkthrough tutorial, we adjust the content density based on *The content density is compact on devices without a touch screen and cozy on touch-enabled devices* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 36](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/36/test/mockServer-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 36](https://ui5.github.io/tutorials/walkthrough/build/36/test/mockServer-cdn.html). *** ### Coding
-You can download the solution for this step here: [πŸ“₯ Download step 36](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-36.zip). +You can download the solution for this step here: [πŸ“₯ Download step 36](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-36.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 36](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-36-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 36](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-36-js.zip).
*** diff --git a/packages/walkthrough/steps/37/README.md b/packages/walkthrough/steps/37/README.md index d98c6e468..1809f5661 100644 --- a/packages/walkthrough/steps/37/README.md +++ b/packages/walkthrough/steps/37/README.md @@ -19,7 +19,7 @@ One part of the ARIA attribute set are the so-called landmarks. You can compare *Landmarks in our app* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 37](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/build/37/test/mockServer-cdn.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 37](https://ui5.github.io/tutorials/walkthrough/build/37/test/mockServer-cdn.html). *** @@ -27,13 +27,13 @@ You can access the live preview by clicking on this link: [πŸ”— Live Preview of
-You can download the solution for this step here: [πŸ“₯ Download step 37](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-37.zip). +You can download the solution for this step here: [πŸ“₯ Download step 37](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-37.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 37](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-37-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 37](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-37-js.zip).
*** diff --git a/packages/walkthrough/steps/38/README.md b/packages/walkthrough/steps/38/README.md index cb8232aec..f12ac43b2 100644 --- a/packages/walkthrough/steps/38/README.md +++ b/packages/walkthrough/steps/38/README.md @@ -18,13 +18,13 @@ In this step we're going to build our application and consume the speed of a bui ### Coding
-You can download the solution for this step here: [πŸ“₯ Download step 38](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-38.zip). +You can download the solution for this step here: [πŸ“₯ Download step 38](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-38.zip).
-You can download the solution for this step here: [πŸ“₯ Download step 38](https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough/walkthrough-step-38-js.zip). +You can download the solution for this step here: [πŸ“₯ Download step 38](https://ui5.github.io/tutorials/walkthrough/walkthrough-step-38-js.zip).
***