Merge pull request #11 from SAP-samples/updates-for-ui5con-2024

Updates for ui5con 2024

Author: martinhaeuser

ex0/.gitignore

@@ -0,0 +1 @@
+/node_modules/

ex0/readme.md

@@ -54,10 +54,10 @@ Finally, we will serve the project using ui5.
 - In the terminal or command prompt at our project's root directory, run the following command:
 
 ```bash
-ui5 serve
+npm start
 ```
 
-This command will start a development server for our project. You can access the development server at https://localhost:8080 and check out the running application! 🚀
+This command will start a development server for our project. You can access the development server at http://localhost:8080/index.html and check out the running application! 🚀
 
 ![Exercise 0 Result](ex0.png)
 

ex1/.gitignore

@@ -0,0 +1 @@
+/node_modules/

ex1/readme.md

@@ -90,6 +90,7 @@ This XML view defines the user interface for a screen in our UI5 application. Th
 Below is the code we can add to the content aggregation of the DynamicPage in the XML view. It includes a table with columns for name, height, range, first ascent, countries, and parent mountain, along with the data bindings. The corresponding model is automatically generated based on our sample data via the `manifest.json`.
 ###### view/Mountains.view.xml
 ```xml
+		<f:content>
 			<mdc:Table
 				id="table"
 				header="Mountains"
@@ -99,42 +100,43 @@ Below is the code we can add to the content aggregation of the DynamicPage in th
 				filter="filterbar"
 				showRowCount="false"
 				delegate="{
-					name: 'mdc/tutorial/delegate/JSONTableDelegate',
-					payload: {
-						bindingPath: 'mountains>/mountains'
-					}
-				}">
+				name: 'mdc/tutorial/delegate/JSONTableDelegate',
+				payload: {
+					bindingPath: 'mountains>/mountains'
+				}
+			}">
 				<mdct:Column
 					propertyKey="name"
 					header="Name">
-					<Text text="{mountains>name}"/>
+					<Text text="{mountains>name}" />
 				</mdct:Column>
 				<mdct:Column
 					propertyKey="height"
 					header="Height">
-					<Text text="{path: 'mountains>height'}"/>
+					<Text text="{path: 'mountains>height'}" />
 				</mdct:Column>
 				<mdct:Column
 					propertyKey="range"
 					header="Range">
-					<Text text="{mountains>range}"/>
+					<Text text="{mountains>range}" />
 				</mdct:Column>
 				<mdct:Column
 					propertyKey="first_ascent"
 					header="First Ascent">
-					<Text text="{mountains>first_ascent}"/>
+					<Text text="{mountains>first_ascent}" />
 				</mdct:Column>
 				<mdct:Column
 					propertyKey="countries"
 					header="Countries">
-					<Text text="{mountains>countries}"/>
+					<Text text="{mountains>countries}" />
 				</mdct:Column>
 				<mdct:Column
 					propertyKey="parent_mountain"
 					header="Parent Mountain">
-					<Text text="{mountains>parent_mountain}"/>
+					<Text text="{mountains>parent_mountain}" />
 				</mdct:Column>
 			</mdc:Table>
+		</f:content>
 ```
 > ℹ️ Pay attention to how the controls are specified. All the MDCs included in the XML view will initially appear on the screen without any additional personalization. While this may seem superfluous when also providing the control creation method in the delegate, it allows us to establish a default without any hassle. Alternatively, we could opt to not provide any controls here and add them later through personalization.
 

ex2/.gitignore

@@ -0,0 +1 @@
+/node_modules/

ex2/readme.md

@@ -44,6 +44,7 @@ export default JSONFilterBarDelegate
 To add a FilterBar to the XML view, we can use the [`sap.ui.mdc.FilterBar`](https://sdk.openui5.org/api/sap.ui.mdc.FilterBar) control. Setting the previously created delegate makes sure, that the FilterBar can deal with the specific JSON data we are facing. Place the FilterBar inside of the DynamicPageHeader.
 ###### view/Mountains.view.xml
 ```xml
+			<f:DynamicPageHeader pinnable="true">
 				<mdc:FilterBar id="filterbar" delegate="{name: 'mdc/tutorial/delegate/JSONFilterBarDelegate'}"
 						p13nMode = "Item,Value">
 					<mdc:basicSearchField>
@@ -65,6 +66,7 @@ To add a FilterBar to the XML view, we can use the [`sap.ui.mdc.FilterBar`](http
 
 					</mdc:dependents>
 				</mdc:FilterBar>
+			</f:DynamicPageHeader>
 ```
 
 >⚠️ Like columns in the MDC table, the filter items are used for UI adaptation functionalities. Hence, do not change them, manually or dynamically, or use bindings to prevent undesired effects.

ex3/.gitignore

@@ -0,0 +1 @@
+/node_modules/

ex4/.gitignore

@@ -0,0 +1 @@
+/node_modules/

ex5/.gitignore

@@ -0,0 +1 @@
+/node_modules/