SAPUI5: Logische Abfragen auf XML-Ebene mit Expression Binding

Ein Handbuch für inline logische Abfragen, String-Verkettungen und UI-Manipulationen innerhalb der XML-Ansicht, anstatt externe Formatiererfunktionen für einfache UI-Logik zu schreiben.

In der SAPUI5-Architektur ist es eine häufige Anforderung, die visuellen Eigenschaften (Sichtbarkeit, Farbe, Zustand, Sperrmechanismen) von UI-Komponenten basierend auf dem Zustand der Backend-Daten zu ändern. Während die Definition externer JavaScript-Formatierermethoden der beste Ansatz für fortgeschrittene Geschäftsregeln und komplexe Datenumwandlungen ist, können einfache Zustandsprüfungen und bedingte visuelle Änderungen direkt in der XML-Schicht mit der Expression Binding-Syntax optimiert werden. Dies vermeidet überflüssige Dateien und verbessert die Rendering-Leistung.

💡 Verwendungsregeln für Expression Binding

Syntax-Grundlage: Damit ein Ausdruck als Expression Binding erkannt wird, muss das Muster {= expression } verwendet werden. Wenn Modelldaten in den Ausdruck eingefügt werden sollen, sollten sie als ${model>/field} aufgerufen werden.
Escape-Zeichen: Bei der Durchführung von logischen Größer-als- (>) oder Kleiner-als- (<) Prüfungen in der XML-Schicht sollten die Escape-Zeichen > oder < verwendet werden, um XML-Parser-Fehler zu vermeiden.
Defensives Design: Bei mathematischen Operationen sollte das Risiko einer Division durch Null durch Inline-Prüfungen sichergestellt werden, dass der Nenner größer als Null ist, und bei String-Operationen sollte sichergestellt werden, dass die Daten nicht null/undefined sind.

💻 XML View Expression Binding Referenz

0. Logische und Zustandsprüfungen

Echtzeit-if-else/ternary-Operator-Steuerung von Sichtbarkeits-, Aktivierungs- oder Zustandseigenschaften basierend auf dynamischen Daten.

<!-- 1. Ternary Operator (If-Else) ile Dinamik Durum (State) Belirleme -->
<ObjectStatus
    text="{= ${prod>/Stock} &gt; 0 ? 'In Stock' : 'Out of Stock' }"
    state="{= ${prod>/Stock} &gt; 0 ? 'Success' : 'Error' }" />

<!-- 2. Kompleks Mantıksal (AND/OR) Kontrol ile Buton Aktiflik Yönetimi -->
<Button
    text="Approve Process"
    type="Accept"
    enabled="{= ${prod>/Status} === 'A' && ${user>/Role} === 'ADMIN' }" />

<!-- 3. Negatif (NOT) Kontrolü ile Görünürlük (Visibility) Tetikleme -->
<MessageStrip
    text="This item is locked for modifications."
    type="Warning"
    visible="{= !${prod>/IsEditable} }" />

1. Typumwandlungen, String- und mathematische Operationen

String-Verkettung, mathematische Berechnungen, die eine Division durch Null verhindern, und sichere Null-Prüfungen/Längenbeschränkungen.

<!-- 4. String Literal ve Model Verisini Inline Birleştirme (Concatenation) -->
<Text text="{= 'Order Reference ID: ' + ${order>/DocNumber} }" />

<!-- 5. Matematiksel Hesaplama - Sıfıra Bölünme (Infinity) Korumalı -->
<ProgressIndicator
    percentValue="{= ${prod>/TotalCapacity} &gt; 0 ? ( ${prod>/OrderedQty} / ${prod>/TotalCapacity} ) * 100 : 0 }"
    state="{= ( ${prod>/OrderedQty} / ${prod>/TotalCapacity} ) &gt; 0.8 ? 'Warning' : 'Information' }" />

<!-- 6. Null/Undefined Korumalı String Uzunluk (Length) Kontrolü -->
<Input
    value="{local>/CommentText}"
    valueState="{= ${local>/CommentText} && ${local>/CommentText}.length &gt; 255 ? 'Error' : 'None' }"
    valueStateText="Comment cannot exceed 255 characters." />

2. Vergleichs- und String-Funktionen

Verwendung von integrierten JavaScript-String- und Vergleichsmethoden (indexOf, Null-Prüfung usw.) innerhalb der Grenzen des Expression Bindings.

<!-- 7. Null, Undefined veya Boş String Kontrolü ile Güvenli Buton Yönetimi -->
<Button
    text="Save"
    enabled="{= ${local>/EntryTitle} !== null && ${local>/EntryTitle} !== '' }" />

<!-- 8. String İçinde Arama (indexOf) ile Dinamik İkon Belirleme -->
<Button
    icon="{= ${file>/MimeType} && ${file>/MimeType}.indexOf('pdf') &gt;= 0 ? 'sap-icon://pdf-attachment' : 'sap-icon://document' }" />

Verpassen Sie nicht den neuen Code in der Bibliothek!

Abonnieren Sie den Newsletter, um sofort über wöchentlich aktualisierte unternehmensweite SAPUI5/Fiori-Komponenten, Leistungstipps und Architekturentwürfe informiert zu werden.