Show TOC

Expression BindingLocate this document in the navigation structure

Expression binding is an enhancement of the SAPUI5 binding syntax, which allows for providing expressions instead of custom formatter functions.

This saves the overhead of defining a function and is recommended in cases where the formatter function has a trivial implementation like comparison of values. Expression binding is especially useful in the context of SAPUI5 XML templating where XML views with templating are preprocessed so that the SAPUI5 controller is a natural place to put custom formatter functions that are not available.

To use expression binding, you need to enable extended binding syntax via the configuration setting xx-bindingSyntax set to complex.

An expression binding is specified via {=expression} in an XML view.

expression complies to a subset of JavaScript expression syntax except for bindings embedded in the expression which are specified like this {=${embedded}}.

Besides embedded bindings, you can use the following:

Syntax Element

Symbol

Literal

number, for example 42, 6.022e+23 or -273.15

object, for example {foo: 'bar'}

string, for example 'foo'

null

true

false

Grouping

(...), for example 3 * (4 + 10)

Unary operator

!

+

-

typeof

Multiplicative operator

*

/

%

Additive operator

+

-

Relational operator

<

>

<=

>=

Strict equality operator

===

!==

Binary logical operator

&&

||

Conditional operator

?

Member access operator with the . operator

Note

With these, you can use members and member methods on standard types such as String: {=${/firstName}.length}, for example ${/firstName}.indexOf('S').

Function call

f(...)

Global symbol

Math, RegExp and encodeURIComponent

Simple Example
Note

With expression binding you only need the XML view but no controller logic.

The following example shows how you use the custom formatter function to map an XML view to an expression binding in the XML view without controller logic.

The icon is only displayed if the status property in the view's default model has the value critical. You can use expression binding to replace the formatter function myFormatter in the controller with an expression binding in the XML view. You no longer need to implement any formatter function.

The application version without expression binding constists of the XML view (sample.App.view.xml) and the controller:

<mvc:View controllerName="sample.App" xmlns="sap.ui.core" xmlns:mvc="sap.ui.core.mvc">
...
  <Icon src="sap-icon://message-warning" visible="{path:'status', formatter:'.myFormatter'}">
...
 
</mvc:View>

Controller (sample.App.controller.js)

...
myFormatter: function(sStatus) {
  return sStatus === "critical";
}
...

When using expression binding, however, you only need the XML view without controller logic (sample.App.view.xml)

<mvc:View controllerName="sample.app" xmlns="sap.ui.core" xmlns:mvc="sap.ui.core.mvc">
...
  <Icon src="sap-icon://message-warning" visible="{= ${status} === 'critical' }">
...
</mvc:View>
More Complex Expressions

With the expression syntax sketched above it is possible to create more complex expressions as shown in the examples below.

Note

We recommended to use formatter functions instead of very complex and hard-to-read expressions. Some characters that are used by operators, however, need to be escaped in XML, for example the left angle bracket (<) and the ampersand (&), To use these characters, do one of the following:

  • Rephrase the expression to make it more readable, for example, use a > b instead of b &lt; a.

  • Use a custom formatter function.

For more information about escaping in XML, see the W3C XML specification at http://www.w3.org/TR/xml/#syntaxInformation published on non-SAP site.

Examples for more complex expressions:

<!--Set to visible if the status is critical and the amount is above the threshold (note escaping of &&)-->
visible="{= ${status} === 'critical' &amp;&amp; ${amount} > 10000 }"
<!--Text for amount level using language-dependent texts from the resource model.-->
text="{= ${/amount} > 10000 ? ${i18n>/high} : ${i18n>/normal} }"
<!--Set to visible if the rating is VIP, ignoring case or if the order amount is greater than 10,000.-->
visible="{= ${/rating}.toUpperCase() === 'VIP' || ${/orderAmount} > 10000 }"
<!--Set to visible if the rating contains VIP, ignoring the case. -->
visible={= RegExp('vip', 'i').test(${/rating}) }
<!--Text is maximum of three values.-->
text="{= Math.max(${/value1}, ${/value2}, ${/value3}) }"
<!--Control is enabled only if the order status is set.--> 
enabled="{= ${/orderStatus} !== null }"