Fix: wildcard issue

steps/01/README.md

@@ -3,6 +3,7 @@
 As you know OpenUI5 is all about HTML5. Let's get started with building a first "Hello World" with only HTML. In addition we'll initialize the UI5 Tooling, so we can benefit from it from the beginning.
 
  
+
 ***
 
 ### Preview
@@ -150,8 +151,8 @@ This will open a new browser window hosting your newly created `index.html`.
 
 -   The `index.html` file is located in the `webapp` folder if it is used productively.
 
-<br>
-<br>
+&nbsp;
+
 ***
 
 **Next:** [Step 2: Bootstrap](../02/README.md "Before we can do something with UI5, we need to laod and initialize it. This process of loading and initializing UI5 is called bootstrapping. Once this bootstrapping is finished, we simply display an alert.")

steps/02/README.md

@@ -3,6 +3,7 @@
 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.
 
  
+
 ***
 
 ### Preview
@@ -217,6 +218,7 @@ Now you can benefit from live reload on changes, built framework resources at de
 > During its initial run, the `ui5-middleware-serveframework` middleware will build the framework, which can take a while. In all following steps, the build will not happen again and the framework is served from the built resources.
 
  
+
 ***
 
 **Next:** [Step 3: Controls](../03/README.md "Now it's 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 TypeScript control API to set up the UI, the control instance is then placed into the HTML body‚")

steps/03/README.md

@@ -2,8 +2,8 @@
 
 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 TypeScript control API to set up the UI, the control instance is then placed into the HTML body.
 
-
  
+
 ***
 
 ### Preview
@@ -97,6 +97,7 @@ ui5 add sap.m`
 ```
 
  
+
 ***
 
 **Next:** [Step 4: XML Views](../04/README.md "Putting all our UI into the index.html 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.")

steps/04/README.md

@@ -5,6 +5,7 @@ Putting all our UI into the `index.ts` file will very soon result in a messy set
 When working with OpenUI5, we recommend the use of XML views, as this produces the most readable code and will force us to separate the view declaration from the controller logic. Yet the look of our UI will not change.
 
  
+
 ***
 ### Preview
 
@@ -61,6 +62,7 @@ We have now embed our app view to the body of the HTML document.
 >Although setting an ID is not mandatory, it greatly improves the maintainability and flexibility of your code. With a stable ID, you can easily locate and update specific parts of your application.
 
  
+
 ***
 
 ### Conventions
@@ -77,8 +79,8 @@ We have now embed our app view to the body of the HTML document.
 
 -   Other XML namespaces use the last part of the SAP namespace as alias \(for example, `mvc` for `sap.ui.core.mvc`\)
 
-
  
+
 ***
 
 **Next:** [Step 5: Controllers](../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.")

steps/05/README.md

@@ -3,6 +3,7 @@
 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.
 
  
+
 ***
 
 ### Preview
@@ -62,8 +63,8 @@ In addition, we replace the `<text>` tag with a `<button>` tag. We set the `text
 
 A view does not necessarily need an explicitly assigned controller. You do not have to create a controller if the view is just displaying information and no additional functionality is required. If a controller is specified, it is instantiated after the view is loaded.
 
-
 &nbsp;
+
 ***
 
 ### Conventions
@@ -79,6 +80,7 @@ A view does not necessarily need an explicitly assigned controller. You do not h
 -   Controller names always end with `*.controller.js` \(in JavaScript\) or `*.controller.ts` \(in TypeScript\) 
 
 &nbsp;
+
 ***
 
 **Next:** [Step 6: Modules](../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.")

steps/06/README.md

@@ -3,6 +3,7 @@
 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.
 
  
+
 ***
 
 ### Preview
@@ -39,6 +40,7 @@ export default class AppController extends Controller {
 For now, the message toast just displays a static "Hello World" message. We will show how to load a translated text here in [Step 8: Translatable Texts](../08/README.md).
 
  
+
 ***
 
 **Next:** [Step 7: JSON Model](../07/README.md "Now that we have set up the view and controller, it’s about time to think about the M in MVC.")

steps/07/README.md

@@ -5,6 +5,7 @@ Now that we have set up the view and controller, it’s about time to think abou
 We'll create a view model in our controller, add an input field to our app, bind its value to the model, and bind the same value to the description of the input field. The description will be directly updated as the user types.
 
  
+
 ***
 
 ### Preview
@@ -89,6 +90,7 @@ In addition to this, we create a greeting message. We combine the static text "H
 ```
 
  
+
 ***
 
 **Next:** [Step 8: Translatable Texts](../08/README.md "In this step we move the texts of our UI to a separate resource file.")

steps/08/README.md

@@ -5,6 +5,7 @@ In this step we move the texts of our UI to a separate resource file.
 This way, they are all in a central place and can be easily translated into other languages. This process of internationalization – in short `i18n` – is achieved in OpenUI5 by using a special resource model and the standard data binding syntax, but without a preceding "`/`" character.
 
  
+
 ***
 
 ### Preview
@@ -115,6 +116,7 @@ A resource bundle is a flat structure, therefore the preceding slash \(/\) can b
 > Furthermore, `i18n` files only impact client-side application texts. Texts that are loaded from back-end systems can appear in all languages that are supported by the back-end system.
 
  
+
 ***
 
 ### Conventions
@@ -132,6 +134,7 @@ A resource bundle is a flat structure, therefore the preceding slash \(/\) can b
 -   Use Unicode escape sequences for special characters.
 
  
+
 ***
 
 **Next:** [Step 9: Component Configuration](../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.")

steps/09/README.md

@@ -8,6 +8,7 @@ In this step, we will enhance our application by encapsulating all UI assets wit
 By encapsulating our application as a component, we can seamlessly integrate it into surrounding containers like the SAP Fiori launchpad. This means our application can be easily embedded within a larger ecosystem, providing a more cohesive and integrated user experience.
 
  
+
 ***
 
 ### Preview
@@ -144,6 +145,7 @@ new ComponentContainer({
 ```
 
  
+
 ***
 
 ### Conventions
@@ -153,6 +155,7 @@ new ComponentContainer({
 -   Together with all UI assets of the app, the component is located in the `webapp` folder.
 
  
+
 ***
 
 **Next:** [Step 10: Descriptor for Applications](../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.")

steps/10/README.md

@@ -4,6 +4,9 @@ All application-specific configuration settings will now further be put in a sep
 
 Instead of relying on a local HTML file for the bootstrap, the descriptor file is parsed and the component is loaded directly into the current HTML page. This allows multiple apps to be displayed in the same context. Each app can define its own local settings, such as language properties and supported devices. Additionally, the descriptor file can be used to load additional resources and instantiate models, such as the `i18n` resource bundle.
 
+ 
+
+***
 
 ### Preview
 ![](https://sdk.openui5.org/docs/topics/loio7b2aef85c016485da4a31c087bf4c0f0_LowRes.png "An input field and a description displaying the value of the input field \(No visual changes to last step\)")  
@@ -211,8 +214,7 @@ It's worth noting that the `ComponentSupport` module enforces asynchronous loadi
 
 We can now delete our `index.ts` file, because our component is now initiated directly in the HTML markup.
 
-***
-
+ 
 
 ***
 
@@ -225,6 +227,7 @@ We can now delete our `index.ts` file, because our component is now initiated di
 -   Use translatable texts for the title and the description of the app.
 
  
+
 ***
 
 **Next:** [Step 11: Pages and Panels](../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.")

steps/11/README.md

@@ -2,6 +2,8 @@
 
 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.
 
+ 
+
 ***
 
 ### Preview
@@ -70,10 +72,10 @@ In order to make the fullscreen height of the view work properly, we add the `di
 
 The `App` control does the following important things for us:
 -   It writes a bunch of properties into the header of the `index.html` that are necessary for proper display on mobile devices.
-
 -   It offers functionality to navigate between pages with animations. We will use this soon.
 
  
+
 ***
 
 **Next:** [Step 12: Shell Control as Container](../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.")

steps/12/README.md

@@ -2,6 +2,8 @@
 
 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.
 
+ 
+
 ***
 
 ### Preview
@@ -56,6 +58,7 @@ The `Shell` control is now the outermost control of our app and automatically di
 There are further options to customize the shell, like setting a custom background image or color and setting a custom logo. Check the related API reference for more details.
 
  
+
 ***
 
 **Next:** [Step 13: Margins and Paddings](../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.")

steps/13/README.md

@@ -4,6 +4,8 @@ Our app content is still glued to the corners of the letterbox. To fine-tune our
 
 Instead of manually adding CSS to the controls, we will use the standard classes provided by OpenUI5. These classes take care of consistent sizing steps, left-to-right support, and responsiveness.
 
+ 
+
 ***
 
 ### Preview
@@ -63,13 +65,16 @@ To format the output text individually, we remove the description from the input
 </mvc:View>
 ```
 
+&nbsp;
+
 ***
 
 ### Conventions
 
 -   Use the standard OpenUI5 CSS classes for the layout if possible.
 
 &nbsp;
+
 ***
 
 **Next:** [Step 14: Custom CSS and Theme Colors](../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.")

steps/14/README.md

@@ -2,6 +2,8 @@
 
 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.
 
+ 
+
 ***
 
 ### Preview
@@ -11,7 +13,7 @@ Sometimes we need to define some more fine-granular layouts and this is when we
 <sup>*The space between the button and the input field is now smaller and the output text is bold*</sup>
 
 
-> ### Caution:  
+> ### 🚨 Caution:  
 > As stated in the [Compatibility Rules](https://sdk.openui5.org/topic/91f087396f4d1014b6dd926db0e91070.html), the HTML and CSS generated by OpenUI5 is not part of the public API and may change in patch and minor releases. If you decide to override styles, you need to test and update your modifications each time OpenUI5 is updated. A prerequisite for this is that you have control over the version of OpenUI5 being used, for example in a standalone scenario. This is not possible when running your app in the SAP Fiori launchpad where OpenUI5 is centrally loaded for all apps. As such, SAP Fiori launchpad apps should not override styles.
 
 ***
@@ -117,13 +119,16 @@ To highlight the output text, we replace the text control by a `FormattedText` c
 
 The actual color now depends on the selected theme which ensures that the color always fits to the theme and is semantically clear. For a complete list of the available CSS class names, see [CSS Classes for Theme Parameters](https://sdk.openui5.org/topic/ea08f53503da42c19afd342f4b0c9ec7.html).
 
+&nbsp;
+
 ***
 
 ### Conventions
 
 -   Do not specify colors in custom CSS but use the standard theme-dependent classes instead.
 
 &nbsp;
+
 ***
 
 **Related Information**  

steps/15/README.md

@@ -2,6 +2,8 @@
 
 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.
 
+ 
+
 ***
 
 ### Preview
@@ -116,8 +118,8 @@ export default class App extends Controller {
 
 We have now moved everything out of the app view and controller. The app controller remains an empty stub for now, we will use it later to add more functionality.
 
-
  
+
 ***
 
 **Next:** [Step 16: Dialogs and Fragments](../16/README.md "In this step, we will take a closer look at another element which can be used to assemble views: the fragment.")

steps/16/README.md

@@ -8,6 +8,8 @@ A fragment can consist of 1 to n controls. At runtime, fragments placed in a vie
 
 We will now add a dialog to our app. Dialogs are special, because they open on top of the regular app content and thus do not belong to a specific view. That means the dialog must be instantiated somewhere in the controller code, but since we want to stick with the declarative approach and create reusable artifacts to be as flexible as possible, we will create an XML fragment containing the dialog. A dialog, after all, can be used in more than one view of your app.
 
+ 
+
 ***
 
 ### Preview
@@ -79,8 +81,7 @@ export default class HelloPanel extends Controller {
 };
 ```
 
-> :bookmark: **Tip**:
->
+> 💡 **Tip:** <br>
 > To reuse the dialog opening and closing functionality in other controllers, you might create a new file `ui5.walkthrough.controller.controller.BaseController`, which extends `sap.ui.core.mvc.Controller`, and put all your dialog-related coding into this controller. Now, all the other controllers can extend from `ui5.walkthrough.controller.BaseController` instead of `sap.ui.core.mvc.Controller`.
 
 
@@ -138,6 +139,7 @@ You will need the id of the button control `id="helloDialogButton"` in [Step 28:
 It is a good practice to set a unique ID like `helloWorldButton` to key controls of your app so that can be identified easily. If the attribute \`id\` is not specified, the OpenUI5 runtime generates unique but changing ID like \`\_\_button23\` for the control. Inspect the DOM elements of your app in the browser to see the difference.
 
 &nbsp;
+
 ***
 
 **Next:** [Step 17: Fragment Callbacks](../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.")

steps/17/README.md

@@ -2,6 +2,8 @@
 
 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.
 
+ 
+
 ***
 
 ### Preview
@@ -87,6 +89,7 @@ In the fragment definition, we add a button to the `beginButton` aggregation of
 By using the `loadFragment` function to create the fragment content in the controller of the panel’s content view, the method will be invoked there when the button is pressed. The dialog has an aggregation named `beginButton` as well as `endButton`. Placing buttons in both of these aggregations makes sure that the `beginButton` is placed before the `endButton` on the UI. What `before` means, however, depends on the text direction of the current language. We therefore use the terms `begin` and `end` as a synonym to “left” and “right". In languages with left-to-right direction, the `beginButton` will be rendered left, the `endButton` on the right side of the dialog footer; in right-to-left mode for specific languages the order is switched.
 
  
+
 ***
 
 **Next:** [Step 18: Icons](../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.")