SAPUI5 Grundlagen

Datentypen & Expression Binding

Beträge mit Währungen formattieren

Motivation

  • Bislang waren alle Texte eine Zeichenkette
  • Währungen gehören fest zu Beträgen und sollen gemeinsam dargestellt werden

Formatierung von Beträgen

Komponenten der Formatierung

  • number : Dieses Attribut soll gesetzt werden. Entweder steht hier:
    • Ein fester Wert als Literal
    • Ein Binding oder
    • ein JSON wie im Beispiel rechts. Komponenten des JSONs:
    • numberUnit - Das Binding der Währung

Quellcode

<ObjectListItem
    title="{invoice>Quantity} x {invoice>ProductName}"
    number="{
        parts: [
            'invoice>ExtendedPrice',
            'invoice>/Currency'
        ],
        type: 'sap.ui.model.type.Currency',
        formatOptions: {
            showMeasure: false
        }
    }"
    numberUnit="{invoice>Currency}"/>

Farbliche Hervorhebung

<ObjectListItem
    title="{invoice>Quantity} x {invoice>ProductName}"
    number="{
        parts: [
            'invoice>ExtendedPrice',
            'invoice>/Currency'
        ],
        type: 'sap.ui.model.type.Currency',
        formatOptions: {
            showMeasure: false
        }
    }"
    numberUnit="{invoice>Currency}"
    numberState="{= ${invoice>ExtendedPrice} > 50 ? 'Warning' : 'Success' }"/>

Expression Binding

In der vorigen Folie war dem numberState eine spezielle Zeichenkette zugewiesen, die mit geschweiften Klammern umgeben war.

    <ObjectListItem
       ...
       numberState="{= ${invoice>ExtendedPrice} > 50 ? 'Warning' : 'Success' }"
    />

Anstatt eines konstanten Wertes wurde hiermit an einen JavaScript Ausdruck gebunden. Dieser wird dynamisch in Abhängigkeit vom Datenmodell berechnet und aktualisiert sich, falls sich das Datenmodell ändert.

Übung

Welche semantischen Farben sind noch möglich?
https://sapui5.hana.ondemand.com/#/api/sap.ui.core.ValueState