Übersicht

In diesem Blog werden wir uns mit Data Binding in SAP UI5, Open UI5 und Databinding in SAP Fiori Apps beschäftigen. Wir zeigen Ihnen wie einfach es klappt wenn Sie wissen was Sie tun.

Die Inhalte werden bis ins kleinste Detail in unseren SAP Trainings behandelt. Diese Trainings laufen unter den Titeln HOUI5 und HOFIO und werden bei SAP offiziell im Schulungskatalog für Deutschland, Österreich und die Schweiz gelisteten.

Inhalt

In diesem Blog zeigen wir Ihnen folgende Themen: 

  • Grundlegendes zum Data Binding
  • Databinding Modi
    • One-Time-Binding
    • One-Way-Binding
    • Two-Way-Binding
  • Arten von Databindings
    • Property Binding
    • Aggregation Binding
    • Element Binding
  • Databinding Syntax
    • Binding Pfad
    • Composite Binding
    • Expression Binding
    • Metadata Binding

Grundlegendes zum Data Binding in SAPUI5

In SAPUI5 und OpenUI5 können Sie das Data Binding einsetzen, um Daten aus dem Model unter Verwendung von UI-Controls darzustellen. Das ermöglicht Ihnen auch das Aktualisieren und Editieren der Daten direkt im User Interface und dadurch verknüpfen Sie das User Interface mit dem Model.

Hierfür benötigen Sie folgende zwei Dinge:

  • Ein Data Model (JSON, OData)
  • Eine Bindinginstanz

Als Data Model verwenden Sie üblicherweise ein JSON- oder ein OData-Model. Das Modell hält die Daten vor und bietet Ihnen Methoden, um mit dem Server zu kommunizieren. Zusätzlich bietet es Ihnen Methoden, um Data Bindings programmatisch zu erstellen. Der Aufruf der Methode sorgt dafür, dass eine Binding Instanz für Sie erstellt wird. Die Instanz beinhaltet Informationen zum Binding sowie bestimmte Events. Ein spezieller Event wird getriggert, wenn sich die gebundenen Daten ändern.

Data Binding Modi

Durch die Enumeration „sap.ui.model.BindingMode“ werden Ihnen drei verschiedene Data Binding Modi bereitgestellt. Diese können unter Verwendung der Methode „.setDefaultBindingMode(bindingMode)“ allgemein auf ein Model angewendet werden. Optional können Sie es über das Property „oBindingInfo.mode“ auch auf einzelne Binding Instanzen angewenden.

One-Time-Binding – sap.ui.model.BindingMode.OneTime

Wird der BindingMode auf „OneTime“ gesetzt, werden die Daten einmalig vom Model gelesen und Sie können nicht manipuliert werden.

One-Way-Binding – sap.ui.model.BindingMode.OneWay

“OneWay”-Binding bedeutet, dass die Daten vom Model gelesen und an die View gebunden werden. Die Daten können in der View zwar manipuliert werden, jedoch werden die Änderungen nicht zurück ins Model übertragen. Dieser Binding Modus war für das JSON-Model lange Zeit das Standardverhalten.

Two-Way-Binding – sap.ui.model.BindingMode.TwoWay

Möchte Sie in der View Daten manipulieren und die Änderungen automatisch in das Model übernehmen, dann ist der Binding Mode „TwoWay“ genau das Richtige für Sie. Im Gegensatz zum One-Way-Binding werden Daten vom Model zur View und umgekehrt übertragen.

Arten von Data Bindings in SAPUI5 und OpenUI5

In SAPUI5 und OpenUI5 gibt es drei unterschiedliche Arten von Data Bindings. Diese werden im Folgenden näher ausführt. Im Data Binding müssen Sie immer einen Bindingpfad angeben. Dieser wird durch ‚{}‘ gekennzeichnet.

Je nachdem, ob Sie das Default-Model oder ein Named-Model verwendet, unterscheidet sich dieser Pfad geringfügig. Bei der Verwendung eines Named-Models muss dem Namen der Property noch ein ‚modelName>‘ vorangestellt werden.

Möchte man die Eigenschaft „FirstName“ auf die value-Eigenschaft eines Inputs binden (Property Binding), sieht das, bei der Verwendung eines Default-Models, wie folgt aus:

Verwenden Sie hingegen ein Named-Model, muss der Eigenschaft der Modelname vorangestellt werden:

Property Binding

Verwenden Sie ein Property Binding, um beispielsweise Daten in einem Formular zu binden. Hierfür müssen Sie in der entsprechenden Eigenschaft (z.B.: text, value, …) einen Binding-Pfad angegeben.

Am Propertynamen vorangestellten ‚/‘ erkenne Sie, dass es sich um einen absoluten Pfad handelt. Das bedeutet, das sich die Eigenschaft „FirstName“ auf der Root-Ebene des Default-Models befindet.

Aggregation Binding

Möchten Sie Listen auf ein UI-Control binden, kommt das Aggregation Binding zum Einsatz. Es wird meist in Listen und Tabellen verwendet. Dabei müssen Sie auch ein Template angegeben, welches für jedes Element in der Liste geklont wird. Innerhalb des Templates müssen Sierelative Pfade verwenden, da der Pfad des Aggregation Bindings bereits auf die entsprechende Liste verweist. Anstelle eines Templates haben Sie auch die Option eine Factory-Function anzugeben. Diese definiert, wie die einzelnen Einträge im User Interface dargestellt werden sollen.

Default-Model

Named-Model

Element Binding

Das Element Binding ermöglicht Ihnen das Binden einzelner Elemente einer Liste auf UI-Controls. Hierbei wird ein sogenannter Binding-Context erzeugt. Die Binding-Pfade müssen Sie immer relativ angeben.

Dieses SAPUI5 Data Binding kommt überwiegend in Master-Detail Fiori Apps zum Einsatz.

Das Element-Binding können Sie auf folgende Arten umgesetzen:

  • Aufruf der Methode bindElement im Controller
  • Verwenden einer Binding-Property des Controls

Data Binding Syntax

Mit einem Binding-Pfad können Sie ein UI-Control auf die Daten des Models binden. Durch das definieren eines Pfades, erstellen Sie einen Binding-Context.

Composite Binding

Wenn Sie einen Formatter verwendet, ist es häufig der Fall, dass mehrere Werte an den Formatter übergeben werden müssen. Diese Anforderung können Sie mit einem Composite-Binding umgesetzen. In der jeweiligen Eigenschaft (value, text, …) des UI-Control kann das parts-Array, eine Liste paths definieren.

Expression Binding

Mithilfe des Expression-Binding können Sie simple Prüfungen – z.B.: Vergleich von Werten – direkt in der View zur Laufzeit durchführen. Dadurch ersparen Sie sich das Implementieren von zusätzlichen Formatter-Funktionen im Controller.

Sie können das Expression-Binding auf 2 Arten umgesetzen:

  • ‚{=expression}‘: Es wird ein One-Way-Binding verwendet. Sollten sich Werte im Model ändern, wird auch das Binding aktualisiert.
  • ‚{:=expression}‘: Es wird ein One-Time-Binding verwendet. Der Wert wird einmalig ermittelt und anschließend nicht mehr aktualisiert.

Als expression können Sie beliebige Prüfungen implementieren. Dabei ist die Syntax ähnliche jener in Javascript, jedoch werden nicht alle JavaScript Expressions unterstützt. Innerhalb der Expression greifen Sie auf Modeldaten folgendermaßen zu: ‚${binding}‘ oder ‚%{binding}‘

Eine Prüfung und entsprechende Anzeige verschiedener Werte sieht wie folgt aus:

${binding} VS %{binding}

Verwenden Sie ‚${binding}‘ wird der Wert automatisch in den Typ der Eigenschaft des Controls konvertiert. Im Falle des Visible-Properties eines sap.m.Input Controls wäre dies der Typ ‚boolean‘. Nicht immer ist diese Konvertierung erwünscht, daher können Sie diese mit ‚%{binding}‘ umgehen. ‚%{binding}‘ ist eine Kurzform für ‚${path: ´binding´, targetType: ´any´}‘. Den targetType können Sie durch alle Typen, die sap.ui.model.odata.type bietet ersetzt werden.

Metadata Binding

Möchten Sie die Metadata-Eigenschaften wie sap:label, sap:createable, sap:updatable, … in der View abfragen, können Sie dies mit einem Metadata-Binding erreichen.

Auch hier können Sie zwei Ansätze verwenden.

Absolute Bindings

Absolute Bindings sehen folgendermaßen aus:

/#EntityName/PropertyName/@Attribut

Relative Bindings

Relative Bindings sehen so aus:

            /EntitySetName/PropertyName/#@Attribut

Best-Practice Beispiel zum Data Binding in SAPUI5 mit OData-Model und Two-Way-Binding

Abschließend noch ein kurzes Best-Practice Beispiel, in dem mithilfe eines OData-Models und Two-Way-Binding ein Update auf die Details eines Employees geschickt wird.

Hier werden folgende Methoden verwendet:

  • hasPendingChanges: Zum Abfragen, ob es Änderungen gibt
  • submitChanges: Mit ‚Save‘ werden die Änderungen ans Backend geschickt
  • resetChanges: Mit ‚Discard‘ werden die Änderungen verworfen

View:

Controller: