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
12 changes: 9 additions & 3 deletions steps/20/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,14 +46,15 @@ export default class App extends Controller {

We add the invoice list controller to the view to get access to the view model we defined in the controller.

We add a price and the currency to our invoices list in the view by adding the `number` attribute to the `ObjectListItem` control, then we apply the currency data type on the number by setting the `type` attribute of the binding syntax to `sap.ui.model.type.Currency`. The `Currency` type will handle the formatting of the price for us, based on the currency code. In our case, the price is displayed with 2 decimals.
We add a price and the currency to our invoices list in the view by adding the `number` attribute to the `ObjectListItem` control. To apply the currency data type, we use the `require` attribute with the namespace URI `sap.ui.core`, for which the prefix `core` is already defined in our XML view. This allows us to write the attribute as `core:require`. We then add the currency data type module to the list of required modules and assign it the alias `Currency`, making it available for use within the view. Then we set the `type` attribute of the binding syntax to the alias `Currency`. The `Currency` type will handle the formatting of the price for us, based on the currency code. In our case, the price is displayed with 2 decimals.

Additionally, we set the formatting option `showMeasure` to `false`. This hides the currency code in the property `number`. Instead we pass the currency on to the `ObjectListItem` control as a separate property `numberUnit`.

```xml
<mvc:View
controllerName="ui5.walkthrough.controller.InvoiceList"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<List
headerText="{i18n>invoiceListTitle}"
Expand All @@ -62,13 +63,16 @@ Additionally, we set the formatting option `showMeasure` to `false`. This hides
items="{invoice>/Invoices}" >
<items>
<ObjectListItem
core:require="{
Currency: 'sap/ui/model/type/Currency'
}"
title="{invoice>Quantity} x {invoice>ProductName}"
number="{
parts: [
'invoice>ExtendedPrice',
'view>/currency'
],
type: 'sap.ui.model.type.Currency',
type: 'Currency',
formatOptions: {
showMeasure: false
}
Expand Down Expand Up @@ -102,6 +106,8 @@ As you can see above, we are using a special binding syntax for the `number` pro

[Formatting, Parsing, and Validating Data](https://sdk.openui5.org/topic/07e4b920f5734fd78fdaa236f26236d8.html "Data that is presented on the UI often has to be converted so that is human readable and fits to the locale of the user. On the other hand, data entered by the user has to be parsed and validated to be understood by the data source. For this purpose, you use formatters and data types.")

[Require Modules in XML View and Fragment](https://sdk.openui5.org/topic/b11d853a8e784db6b2d210ef57b0f7d7.html "Modules can be required in XML views and fragments and assigned to aliases which can be used as variables in properties, event handlers, and bindings.")

[API Reference: sap.ui.base.ManagedObject](https://sdk.openui5.org/api/sap.ui.base.ManagedObject)

[API Reference: sap.ui.base.ManagedObject.PropertyBindingInfo](https://sdk.openui5.org/api/sap.ui.base.ManagedObject.PropertyBindingInfo)
Expand All @@ -110,4 +116,4 @@ As you can see above, we are using a special binding syntax for the `number` pro

[API Reference: sap.ui.model.type.Currency](https://sdk.openui5.org/api/sap.ui.model.type.Currency)

[Samples: sap.ui.model.type.Currency](https://sdk.openui5.org/entity/sap.ui.model.type.Currency)
[Samples: sap.ui.model.type.Currency](https://sdk.openui5.org/entity/sap.ui.model.type.Currency)
10 changes: 7 additions & 3 deletions steps/20/webapp/view/InvoiceList.view.xml
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<mvc:View
controllerName="ui5.walkthrough.controller.InvoiceList"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<List
headerText="{i18n>invoiceListTitle}"
Expand All @@ -9,18 +10,21 @@
items="{invoice>/Invoices}" >
<items>
<ObjectListItem
core:require="{
Currency: 'sap/ui/model/type/Currency'
}"
title="{invoice>Quantity} x {invoice>ProductName}"
number="{
parts: [
'invoice>ExtendedPrice',
'invoice>ExtendedPrice',
'view>/currency'
],
type: 'sap.ui.model.type.Currency',
type: 'Currency',
formatOptions: {
showMeasure: false
}
}"
numberUnit="{view>/currency}"/>
</items>
</List>
</mvc:View>
</mvc:View>
8 changes: 6 additions & 2 deletions steps/21/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ We add the `numberState` attribute to the `ObjectListItem` control in our invoic
<mvc:View
controllerName="ui5.walkthrough.controller.InvoiceList"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<List
headerText="{i18n>invoiceListTitle}"
Expand All @@ -36,13 +37,16 @@ We add the `numberState` attribute to the `ObjectListItem` control in our invoic
items="{invoice>/Invoices}" >
<items>
<ObjectListItem
core:require="{
Currency: 'sap/ui/model/type/Currency'
}"
title="{invoice>Quantity} x {invoice>ProductName}"
number="{
parts: [
'invoice>ExtendedPrice',
'view>/currency'
],
type: 'sap.ui.model.type.Currency',
type: 'Currency',
formatOptions: {
showMeasure: false
}
Expand Down Expand Up @@ -78,4 +82,4 @@ Expressions are limited to a particular set of operations that help formatting t

**Related Information**

[Expression Binding](https://sdk.openui5.org/topic/daf6852a04b44d118963968a1239d2c0.html "Expression binding is an enhancement of the OpenUI5 binding syntax, which allows for providing expressions instead of custom formatter functions.")
[Expression Binding](https://sdk.openui5.org/topic/daf6852a04b44d118963968a1239d2c0.html "Expression binding is an enhancement of the OpenUI5 binding syntax, which allows for providing expressions instead of custom formatter functions.")
10 changes: 7 additions & 3 deletions steps/21/webapp/view/InvoiceList.view.xml
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<mvc:View
controllerName="ui5.walkthrough.controller.InvoiceList"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<List
headerText="{i18n>invoiceListTitle}"
Expand All @@ -9,13 +10,16 @@
items="{invoice>/Invoices}" >
<items>
<ObjectListItem
core:require="{
Currency: 'sap/ui/model/type/Currency'
}"
title="{invoice>Quantity} x {invoice>ProductName}"
number="{
parts: [
'invoice>ExtendedPrice',
'invoice>ExtendedPrice',
'view>/currency'
],
type: 'sap.ui.model.type.Currency',
type: 'Currency',
formatOptions: {
showMeasure: false
}
Expand All @@ -24,4 +28,4 @@
numberState="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }"/>
</items>
</List>
</mvc:View>
</mvc:View>
5 changes: 4 additions & 1 deletion steps/22/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -97,13 +97,16 @@ We add a status using the `firstStatus` aggregation to our `ObjectListItem` that
items="{invoice>/Invoices}" >
<items>
<ObjectListItem
core:require="{
Currency: 'sap/ui/model/type/Currency'
}"
title="{invoice>Quantity} x {invoice>ProductName}"
number="{
parts: [
'invoice>ExtendedPrice',
'view>/currency'
],
type: 'sap.ui.model.type.Currency',
type: 'Currency',
formatOptions: {
showMeasure: false
}
Expand Down
5 changes: 4 additions & 1 deletion steps/22/webapp/view/InvoiceList.view.xml
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,16 @@
items="{invoice>/Invoices}" >
<items>
<ObjectListItem
core:require="{
Currency: 'sap/ui/model/type/Currency'
}"
title="{invoice>Quantity} x {invoice>ProductName}"
number="{
parts: [
'invoice>ExtendedPrice',
'view>/currency'
],
type: 'sap.ui.model.type.Currency',
type: 'Currency',
formatOptions: {
showMeasure: false
}
Expand Down
5 changes: 4 additions & 1 deletion steps/23/webapp/view/InvoiceList.view.xml
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,16 @@
</headerToolbar>
<items>
<ObjectListItem
core:require="{
Currency: 'sap/ui/model/type/Currency'
}"
title="{invoice>Quantity} x {invoice>ProductName}"
number="{
parts: [
'invoice>ExtendedPrice',
'view>/currency'
],
type: 'sap.ui.model.type.Currency',
type: 'Currency',
formatOptions: {
showMeasure: false
}
Expand Down
5 changes: 4 additions & 1 deletion steps/24/webapp/view/InvoiceList.view.xml
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,16 @@
</headerToolbar>
<items>
<ObjectListItem
core:require="{
Currency: 'sap/ui/model/type/Currency'
}"
title="{invoice>Quantity} x {invoice>ProductName}"
number="{
parts: [
'invoice>ExtendedPrice',
'view>/currency'
],
type: 'sap.ui.model.type.Currency',
type: 'Currency',
formatOptions: {
showMeasure: false
}
Expand Down
5 changes: 4 additions & 1 deletion steps/25/webapp/view/InvoiceList.view.xml
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,16 @@
</headerToolbar>
<items>
<ObjectListItem
core:require="{
Currency: 'sap/ui/model/type/Currency'
}"
title="{invoice>Quantity} x {invoice>ProductName}"
number="{
parts: [
'invoice>ExtendedPrice',
'view>/currency'
],
type: 'sap.ui.model.type.Currency',
type: 'Currency',
formatOptions: {
showMeasure: false
}
Expand Down
5 changes: 4 additions & 1 deletion steps/26/webapp/view/InvoiceList.view.xml
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,16 @@
</headerToolbar>
<items>
<ObjectListItem
core:require="{
Currency: 'sap/ui/model/type/Currency'
}"
title="{invoice>Quantity} x {invoice>ProductName}"
number="{
parts: [
'invoice>ExtendedPrice',
'view>/currency'
],
type: 'sap.ui.model.type.Currency',
type: 'Currency',
formatOptions: {
showMeasure: false
}
Expand Down
5 changes: 4 additions & 1 deletion steps/27/webapp/view/InvoiceList.view.xml
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,16 @@
</headerToolbar>
<items>
<ObjectListItem
core:require="{
Currency: 'sap/ui/model/type/Currency'
}"
title="{invoice>Quantity} x {invoice>ProductName}"
number="{
parts: [
'invoice>ExtendedPrice',
'view>/currency'
],
type: 'sap.ui.model.type.Currency',
type: 'Currency',
formatOptions: {
showMeasure: false
}
Expand Down
5 changes: 4 additions & 1 deletion steps/28/webapp/view/InvoiceList.view.xml
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,16 @@
</headerToolbar>
<items>
<ObjectListItem
core:require="{
Currency: 'sap/ui/model/type/Currency'
}"
title="{invoice>Quantity} x {invoice>ProductName}"
number="{
parts: [
'invoice>ExtendedPrice',
'view>/currency'
],
type: 'sap.ui.model.type.Currency',
type: 'Currency',
formatOptions: {
showMeasure: false
}
Expand Down
8 changes: 6 additions & 2 deletions steps/29/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ We introduced a typo in the binding of the number attribute to simulate a freque
<mvc:View
controllerName="ui5.walkthrough.controller.InvoiceList"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<List
id="invoiceList"
Expand All @@ -51,13 +52,16 @@ We introduced a typo in the binding of the number attribute to simulate a freque
</headerToolbar>
<items>
<ObjectListItem
core:require="{
Currency: 'sap/ui/model/type/Currency'
}"
title="{invoice>Quantity} x {invoice>ProductName}"
number="{
parts: [
'invoice>ExTendedPrice',
'view>/currency'
],
type: 'sap.ui.model.type.Currency',
type: 'Currency',
formatOptions: {
showMeasure: false
}
Expand Down Expand Up @@ -127,4 +131,4 @@ If you're stuck and need help for some development task, you can also post a que

[Technical Information Dialog](https://sdk.openui5.org/topic/616a3ef07f554e20a3adf749c11f64e9.html#loio616a3ef07f554e20a3adf749c11f64e9 "The Technical Information dialog shows details of the OpenUI5 version currently being used in an app built with OpenUI5. You can use the Technical Information dialog to enable debug resources and open additional support tools to debug your app.")

[UI5 Inspector](https://sdk.openui5.org/topic/b24e72443eb34d0fb7bf6940f2d697eb.html)
[UI5 Inspector](https://sdk.openui5.org/topic/b24e72443eb34d0fb7bf6940f2d697eb.html)
5 changes: 4 additions & 1 deletion steps/29/webapp/view/InvoiceList.view.xml
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,16 @@
</headerToolbar>
<items>
<ObjectListItem
core:require="{
Currency: 'sap/ui/model/type/Currency'
}"
title="{invoice>Quantity} x {invoice>ProductName}"
number="{
parts: [
'invoice>ExtendedPrice',
'view>/currency'
],
type: 'sap.ui.model.type.Currency',
type: 'Currency',
formatOptions: {
showMeasure: false
}
Expand Down
6 changes: 5 additions & 1 deletion steps/30/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -258,17 +258,21 @@ In the invoice list view we finally add the press event to the list item we just
<mvc:View
controllerName="ui5.walkthrough.controller.InvoiceList"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
...
<items>
<ObjectListItem
core:require="{
Currency: 'sap/ui/model/type/Currency'
}"
title="{invoice>Quantity} x {invoice>ProductName}"
number="{
parts: [
'invoice>ExtendedPrice',
'view>/currency'
],
type: 'sap.ui.model.type.Currency',
type: 'Currency',
formatOptions: {
showMeasure: false
}
Expand Down
5 changes: 4 additions & 1 deletion steps/30/webapp/view/InvoiceList.view.xml
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,16 @@
</headerToolbar>
<items>
<ObjectListItem
core:require="{
Currency: 'sap/ui/model/type/Currency'
}"
title="{invoice>Quantity} x {invoice>ProductName}"
number="{
parts: [
'invoice>ExtendedPrice',
'view>/currency'
],
type: 'sap.ui.model.type.Currency',
type: 'Currency',
formatOptions: {
showMeasure: false
}
Expand Down
Loading