OpenUI5 Documentation Update 16.11.2023

docs/0index.md

@@ -155,10 +155,10 @@ OpenUI5 Version for the OpenUI5 Demo Kit
             -   [Step 4: XML Views \(TypeScript\)](Step_4_XML_Views_TypeScript_6c66ed8.md)
             -   [Step 5: Controllers \(TypeScript\)](Step_5_Controllers_TypeScript_e5c58fe.md)
             -   [Step 6: Modules \(TypeScript\)](Step_6_Modules_TypeScript_3510034.md)
-            -   [Step 7: JSON Model](Step_7_JSON_Model_cfbbeab.md)
-            -   [Step 8: Translatable Texts](Step_8_Translatable_Texts_4dcf52e.md)
-            -   [Step 9: Component Configuration](Step_9_Component_Configuration_f9d0e2f.md)
-            -   [Step 10: Descriptor for Applications](Step_10_Descriptor_for_Applications_2a46b75.md)
+            -   [Step 7: JSON Model \(TypeScript\)](Step_7_JSON_Model_TypeScript_cfbbeab.md)
+            -   [Step 8: Translatable Texts \(TypeScript\)](Step_8_Translatable_Texts_TypeScript_4dcf52e.md)
+            -   [Step 9: Component Configuration \(TypeScript\)](Step_9_Component_Configuration_TypeScript_f9d0e2f.md)
+            -   [Step 10: Descriptor for Applications \(TypeScript\)](Step_10_Descriptor_for_Applications_TypeScript_2a46b75.md)
             -   [Step 11: Pages and Panels](Step_11_Pages_and_Panels_feed613.md)
             -   [Step 12: Shell Control as Container](Step_12_Shell_Control_as_Container_4af44cb.md)
             -   [Step 13: Margins and Paddings](Step_13_Margins_and_Paddings_5826c0c.md)

docs/Step_11_Pages_and_Panels_feed613.md

@@ -93,6 +93,12 @@ helloPanelTitle=Hello World
 
 We add new key/value pairs to our text bundle for the start page title and the panel title.
 
+**Parent topic:**[Walkthrough Tutorial \(TypeScript\)](Walkthrough_Tutorial_TypeScript_dad1905.md "In this tutorial we'll introduce you to all major development paradigms of OpenUI5. We'll demonstrate the use of TypeScript with OpenUI5 and highlight the specific characteristics of this approach.")
+
+**Next:**[Step 10: Descriptor for Applications \(TypeScript\)](Step_10_Descriptor_for_Applications_TypeScript_2a46b75.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.")
+
+**Previous:**[Step 12: Shell Control as Container](Step_12_Shell_Control_as_Container_4af44cb.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.")
+
 **Related Information**  
 
 

docs/Step_12_Shell_Control_as_Container_4af44cb.md

@@ -75,6 +75,12 @@ The shell control is now the outermost control of our app and automatically disp
 
 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.
 
+**Parent topic:**[Walkthrough Tutorial \(TypeScript\)](Walkthrough_Tutorial_TypeScript_dad1905.md "In this tutorial we'll introduce you to all major development paradigms of OpenUI5. We'll demonstrate the use of TypeScript with OpenUI5 and highlight the specific characteristics of this approach.")
+
+**Next:**[Step 11: Pages and Panels](Step_11_Pages_and_Panels_feed613.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.")
+
+**Previous:**[Step 13: Margins and Paddings](Step_13_Margins_and_Paddings_5826c0c.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.")
+
 **Related Information**  
 
 

docs/Step_13_Margins_and_Paddings_5826c0c.md

@@ -90,6 +90,12 @@ To format the output text individually, we remove the description from the input
 -   Use the standard OpenUI5 CSS classes for the layout if possible.
 
 
+**Parent topic:**[Walkthrough Tutorial \(TypeScript\)](Walkthrough_Tutorial_TypeScript_dad1905.md "In this tutorial we'll introduce you to all major development paradigms of OpenUI5. We'll demonstrate the use of TypeScript with OpenUI5 and highlight the specific characteristics of this approach.")
+
+**Next:**[Step 12: Shell Control as Container](Step_12_Shell_Control_as_Container_4af44cb.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.")
+
+**Previous:**[Step 14: Custom CSS and Theme Colors](Step_14_Custom_CSS_and_Theme_Colors_4cc841e.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.")
+
 **Related Information**  
 
 

docs/Step_14_Custom_CSS_and_Theme_Colors_4cc841e.md

@@ -143,6 +143,12 @@ The actual color now depends on the selected theme which ensures that the color
 -   Do not specify colors in custom CSS but use the standard theme-dependent classes instead.
 
 
+**Parent topic:**[Walkthrough Tutorial \(TypeScript\)](Walkthrough_Tutorial_TypeScript_dad1905.md "In this tutorial we'll introduce you to all major development paradigms of OpenUI5. We'll demonstrate the use of TypeScript with OpenUI5 and highlight the specific characteristics of this approach.")
+
+**Next:**[Step 13: Margins and Paddings](Step_13_Margins_and_Paddings_5826c0c.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.")
+
+**Previous:**[Step 15: Nested Views](Step_15_Nested_Views_9bbbfaa.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.")
+
 **Related Information**  
 
 

docs/Step_15_Nested_Views_9bbbfaa.md

@@ -135,3 +135,9 @@ sap.ui.define([
 
 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.
 
+**Parent topic:**[Walkthrough Tutorial \(TypeScript\)](Walkthrough_Tutorial_TypeScript_dad1905.md "In this tutorial we'll introduce you to all major development paradigms of OpenUI5. We'll demonstrate the use of TypeScript with OpenUI5 and highlight the specific characteristics of this approach.")
+
+**Next:**[Step 14: Custom CSS and Theme Colors](Step_14_Custom_CSS_and_Theme_Colors_4cc841e.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.")
+
+**Previous:**[Step 16: Dialogs and Fragments](Step_16_Dialogs_and_Fragments_4b2e306.md "In this step, we will take a closer look at another element which can be used to assemble views: the fragment.")
+

docs/Step_16_Dialogs_and_Fragments_4b2e306.md

@@ -157,6 +157,12 @@ openDialogButtonText=Say Hello With Dialog
 
 We add a new text for the open button to the text bundle.
 
+**Parent topic:**[Walkthrough Tutorial \(TypeScript\)](Walkthrough_Tutorial_TypeScript_dad1905.md "In this tutorial we'll introduce you to all major development paradigms of OpenUI5. We'll demonstrate the use of TypeScript with OpenUI5 and highlight the specific characteristics of this approach.")
+
+**Next:**[Step 15: Nested Views](Step_15_Nested_Views_9bbbfaa.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.")
+
+**Previous:**[Step 17: Fragment Callbacks](Step_17_Fragment_Callbacks_f030afc.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.")
+
 **Related Information**  
 
 

docs/Step_17_Fragment_Callbacks_f030afc.md

@@ -119,6 +119,12 @@ dialogCloseButtonText=Ok
 
 The text bundle is extended by the new text for the dialog’s close button.
 
+**Parent topic:**[Walkthrough Tutorial \(TypeScript\)](Walkthrough_Tutorial_TypeScript_dad1905.md "In this tutorial we'll introduce you to all major development paradigms of OpenUI5. We'll demonstrate the use of TypeScript with OpenUI5 and highlight the specific characteristics of this approach.")
+
+**Next:**[Step 16: Dialogs and Fragments](Step_16_Dialogs_and_Fragments_4b2e306.md "In this step, we will take a closer look at another element which can be used to assemble views: the fragment.")
+
+**Previous:**[Step 18: Icons](Step_18_Icons_49b1ac6.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.")
+
 **Related Information**  
 
 

docs/Step_18_Icons_49b1ac6.md

@@ -110,6 +110,12 @@ In the dialog fragment, we add an icon control to the content aggregation of the
 -   Always use icon fonts rather than images wherever possible, as they are scalable without quality loss \(vector graphics\) and do not need to be loaded separately.
 
 
+**Parent topic:**[Walkthrough Tutorial \(TypeScript\)](Walkthrough_Tutorial_TypeScript_dad1905.md "In this tutorial we'll introduce you to all major development paradigms of OpenUI5. We'll demonstrate the use of TypeScript with OpenUI5 and highlight the specific characteristics of this approach.")
+
+**Next:**[Step 17: Fragment Callbacks](Step_17_Fragment_Callbacks_f030afc.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.")
+
+**Previous:**[Step 19: Aggregation Binding](Step_19_Aggregation_Binding_24580fb.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.")
+
 **Related Information**  
 
 

docs/Step_19_Aggregation_Binding_24580fb.md

@@ -200,6 +200,12 @@ invoiceListTitle=Invoices
 
 In the text bundle the title of the list is added.
 
+**Parent topic:**[Walkthrough Tutorial \(TypeScript\)](Walkthrough_Tutorial_TypeScript_dad1905.md "In this tutorial we'll introduce you to all major development paradigms of OpenUI5. We'll demonstrate the use of TypeScript with OpenUI5 and highlight the specific characteristics of this approach.")
+
+**Next:**[Step 18: Icons](Step_18_Icons_49b1ac6.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.")
+
+**Previous:**[Step 20: Data Types](Step_20_Data_Types_0dad01a.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.")
+
 **Related Information**  
 
 

docs/Step_1_Hello_World_TypeScript_c20489e.md

@@ -68,7 +68,7 @@ Create a new HTML file named `index.html` in your webapp folder and enter the fo
 
 ### webapp/manifest.json \(New\)
 
-The manifest file is called the **descriptor for applications, components, and libraries** and is also referred to as the “descriptor” or “app descriptor”. It's stored in the `webapp` folder and read by OpenUI5 to instantiate a component. Event though we don't have a component yet \(this is part of [Step 9: Component Configuration](Step_9_Component_Configuration_f9d0e2f.md)\), we need this file already now as we'd like to use UI5 Tooling for development, which requires an app descriptor.
+The manifest file is called the **descriptor for applications, components, and libraries** and is also referred to as the “descriptor” or “app descriptor”. It's stored in the `webapp` folder and read by OpenUI5 to instantiate a component. Event though we don't have a component yet \(this is part of [Step 9: Component Configuration \(TypeScript\)](Step_9_Component_Configuration_TypeScript_f9d0e2f.md)\), we need this file already now as we'd like to use UI5 Tooling for development, which requires an app descriptor.
 
 That's why we now create a new file named `manifest.json` in the webapp folder and specify its essential attributes:
 
@@ -132,6 +132,10 @@ Finally, we initialize the UI5 Tooling configuration for our project by executin
 
 Execute `npm start` to start the web server and to open a new browser window hosting your newly created `index.html`.
 
+**Parent topic:**[Walkthrough Tutorial \(TypeScript\)](Walkthrough_Tutorial_TypeScript_dad1905.md "In this tutorial we'll introduce you to all major development paradigms of OpenUI5. We'll demonstrate the use of TypeScript with OpenUI5 and highlight the specific characteristics of this approach.")
+
+**Previous:**[Step 2: Bootstrap \(TypeScript\)](Step_2_Bootstrap_TypeScript_32b14d8.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.")
+
 **Related Information**  
 
 

docs/Step_20_Data_Types_0dad01a.md

@@ -104,6 +104,12 @@ To be able to access the currency code that is not part of our data model, we de
 -   Use data types instead of custom formatters whenever possible.
 
 
+**Parent topic:**[Walkthrough Tutorial \(TypeScript\)](Walkthrough_Tutorial_TypeScript_dad1905.md "In this tutorial we'll introduce you to all major development paradigms of OpenUI5. We'll demonstrate the use of TypeScript with OpenUI5 and highlight the specific characteristics of this approach.")
+
+**Next:**[Step 19: Aggregation Binding](Step_19_Aggregation_Binding_24580fb.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.")
+
+**Previous:**[Step 21: Expression Binding](Step_21_Expression_Binding_8d67ba2.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.")
+
 **Related Information**  
 
 

docs/Step_21_Expression_Binding_8d67ba2.md

@@ -79,6 +79,12 @@ Expressions are limited to a particular set of operations that help formatting t
 -   Only use expression binding for trivial calculations.
 
 
+**Parent topic:**[Walkthrough Tutorial \(TypeScript\)](Walkthrough_Tutorial_TypeScript_dad1905.md "In this tutorial we'll introduce you to all major development paradigms of OpenUI5. We'll demonstrate the use of TypeScript with OpenUI5 and highlight the specific characteristics of this approach.")
+
+**Next:**[Step 20: Data Types](Step_20_Data_Types_0dad01a.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.")
+
+**Previous:**[Step 22: Custom Formatters](Step_22_Custom_Formatters_61d4e2b.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.")
+
 **Related Information**  
 
 

docs/Step_22_Custom_Formatters_61d4e2b.md

@@ -166,6 +166,12 @@ invoiceStatusC=Done
 
 We add three new entries to the resource bundle that reflect our translated status texts. These texts are now displayed below the `number` attribute of the `ObjectListItem` dependent on the status of the invoice.
 
+**Parent topic:**[Walkthrough Tutorial \(TypeScript\)](Walkthrough_Tutorial_TypeScript_dad1905.md "In this tutorial we'll introduce you to all major development paradigms of OpenUI5. We'll demonstrate the use of TypeScript with OpenUI5 and highlight the specific characteristics of this approach.")
+
+**Next:**[Step 21: Expression Binding](Step_21_Expression_Binding_8d67ba2.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.")
+
+**Previous:**[Step 23: Filtering](Step_23_Filtering_7f02e9d.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.")
+
 **Related Information**  
 
 

docs/Step_23_Filtering_7f02e9d.md

@@ -112,6 +112,12 @@ If the query is not empty, we add a new filter object to the still empty array o
 
 The list is accessed with the ID that we have specified in the view, because the control is automatically prefixed by the view ID, we need to ask the view for the control with the helper function `byId`. On the list control we access the binding of the aggregation `items` to filter it with our newly constructed filter object. This will automatically filter the list by our search string so that only the matching items are shown when the search is triggered. The filter operator `FilterOperator.Contains` is **not** case-sensitive.
 
+**Parent topic:**[Walkthrough Tutorial \(TypeScript\)](Walkthrough_Tutorial_TypeScript_dad1905.md "In this tutorial we'll introduce you to all major development paradigms of OpenUI5. We'll demonstrate the use of TypeScript with OpenUI5 and highlight the specific characteristics of this approach.")
+
+**Next:**[Step 22: Custom Formatters](Step_22_Custom_Formatters_61d4e2b.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.")
+
+**Previous:**[Step 24: Sorting and Grouping](Step_24_Sorting_and_Grouping_86bbe13.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.")
+
 **Related Information**  
 
 

docs/Step_24_Sorting_and_Grouping_86bbe13.md

@@ -91,6 +91,12 @@ We modify the view and add a different sorter, or better; we change the sorter a
 
 As with the sorter, no further action is required. The list and the data binding features of OpenUI5 will do the trick to display group headers automatically and categorize the items in the groups. We could define a custom group header factory if we wanted by setting the `groupHeaderFactory` property, but the result looks already fine.
 
+**Parent topic:**[Walkthrough Tutorial \(TypeScript\)](Walkthrough_Tutorial_TypeScript_dad1905.md "In this tutorial we'll introduce you to all major development paradigms of OpenUI5. We'll demonstrate the use of TypeScript with OpenUI5 and highlight the specific characteristics of this approach.")
+
+**Next:**[Step 23: Filtering](Step_23_Filtering_7f02e9d.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.")
+
+**Previous:**[Step 25: Remote OData Service](Step_25_Remote_OData_Service_b68d321.md "So far we have worked with local JSON data, but now we will access a real OData service to visualize remote data.")
+
 **Related Information**