SAPUI5 Grundlagen

Datentypen & Expression Binding

Beträge mit Währungen formattieren

(C) Brandeis Consulting.

Motivation

  • Bislang waren alle Texte eine Zeichenkette
  • Währungen gehören fest zu Beträgen und sollen gemeinsam dargestellt werden
(C) Brandeis Consulting.

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}"/>
(C) Brandeis Consulting.

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' }"/>
(C) Brandeis Consulting.

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.

(C) Brandeis Consulting.

Übung

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

(C) Brandeis Consulting.