Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions ex0/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/node_modules/
4 changes: 2 additions & 2 deletions ex0/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
1 change: 1 addition & 0 deletions ex1/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/node_modules/
24 changes: 13 additions & 11 deletions ex1/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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.

Expand Down
1 change: 1 addition & 0 deletions ex2/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/node_modules/
2 changes: 2 additions & 0 deletions ex2/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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.
Expand Down
1 change: 1 addition & 0 deletions ex3/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/node_modules/
1 change: 1 addition & 0 deletions ex4/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/node_modules/
1 change: 1 addition & 0 deletions ex5/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/node_modules/