Best Practice

Expression Binding

Brandeis Consulting & Cadao

Binding

Property Binding

Eigenschaft eines Controls wird gegen einen Modellparameter gebunden..

text="{OverallStatusText}" 
text="{i18n>tableTitle}"

Element Binding

Bindet das gesamte Objekt in der Oberfläche gegen ein Objekt im Modell.

tbd

Aggregation Binding

Hier wird die Aggregation eines Controls gegen einen Modellparameter gebunden.

<Table
   rows="{/Travel}"
Brandeis Consulting & Cadao

Expression Binding

Ein Expression-Binding erlaubt uns, JavaScript-Ausdrücke in einem begrenzten Umfang in XML-Views zu verwenden.

Die Syntax für ein Expression-Binding ist {= JS-Ausdruck }

enabled="{= ${OverallStatus} === 'O' ? true : false }"
visible="{= ${status} === 'critical' }"
text="{= ${/amount} > 10000 ? ${i18n>/high} : ${i18n>/normal} }"
visible="{= ${/rating}.toUpperCase() === 'VIP' || ${/orderAmount} > 10000 }"
text="Hello {=${gender}==='male' ? 'Mr.' : 'Mrs.'} {lastName}"
type="{= ${Evaluation} === 'A' ? 'Success' : ${Evaluation} === 'R' || ${Evaluation} === 'F' ? 'Negative' : 'Emphasized' }"
type="{= ( ${ZzQuantCheckError} === true || ${to_order/OrderConfirmedYieldQty} * 1 === 0 )  &amp;&amp; ${Plant} === '0001' ? 'Negative' : 'Emphasized' }"

Ein paar Punkte sollten beachtet werden:

  • Vergleichsoperator < kann nicht verwendet werden -> &lt (oder den Vergleich umdrehen :-) )
  • Auch & muss durch &amp ersetzt werden
  • Komplexe Expressions durch eine custom formatter function ersetzen

Weitere Details: UI5 Demo Kit Expression Binding Dokumentation

Brandeis Consulting & Cadao

Expression Binding - custom formatter

  • Komplexe Expression Bindings können schwer zu verstehen sein
  • Der View wird dadurch komplizierer zu lesen
  • Mit einem custom formatter können wir die komplexität im View reduzieren

XML view

<Icon src="sap-icon://message-warning" visible="{path:'status', formatter:'.myFormatter'}">

Controller

myFormatter: function(sStatus) {
  return sStatus === "critical";
}
Brandeis Consulting & Cadao

Property Metadata Binding

Mit dem Property Metadata Binding können wir Inahlte aus den Metadaten wie z.B. den Inhalt von sap:label verwenden.

<m:Label text="{/#Travel/TravelID/@sap:label}" />
Brandeis Consulting & Cadao