UI5ers Buzz #27: Experience Expression Binding in UI5

[annette_frei]

Meaningful apps offer meaningful information, but that’s easier said than done. A good tip on how to get there is expression binding as it allows you to tweak the information in your app by means of

• Additional calculations to compare values,


• Showing the relation to a threshold to indicate excess or need and


• Adjusting the format of numbers and dates for better readability.

Expression binding is data binding on steroids: not only a value is referenced, but you can also leverage the meaning it carries. It allows simple formatting, string concatenation and number calculations even across data model boundaries to be inserted directly into the data binding string. Here an example for a number calculation from two data models:

{= ${mymodel>PriceInEuro} * ${currencyRates>DollarPerEuro} }

Expression binding is faster and more effective than formatters. However, you can use expression binding and formatters also in combination. For example, if you switch between formatters by means of expression binding. Depending on a certain value content, a certain formatter is applied.

In our documentation, you can find an overview of syntax elements to tailor the exact statement you need. Quite complex statements are possible; for example, length and trim are JavaScript functions that can be used in a expression binding statement. But for more complex tasks (e.g. loops) a formatter is needed.

To be able to use expression binding, you need to set the data-sap-ui-bindingSyntax property to “complex” in the index.html file:

data-sap-ui-bindingSyntax='complex'

Here an easy example for expression binding to hide the footer if a phone is used. This will keep the small phone display clear and only vital functionality on display.

<Page 

   id="page"

   title="{i18n>homeTitle}" 

   showNavButton="{device>/system/phone}" 

   navButtonPress="onNavButtonPress" 

   showFooter="{=!${device>/system/phone}}" >

In the last line of code you can see that the exclamation mark negates the statement that follows: if the device is a phone, do not display the footer.

The effect we observe in the example above is that of a switch. We can make this statement more complex:

<ObjectListItem 

   title="{invoice>Quantity} x {invoice>ProductName}" 

   number="{

      parts: [

         {path: 'invoice>ExtendedPrice'},

         {path: 'view>/currency'}

      ], 

      type: 'sap.ui.model.type.Currency', 

      formatOptions: { showMeasure: false }

   }" 

   numberUnit="{view>/currency}" 

   numberState="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }"/>

In the last line of code you can see the expression binding comparing an amount to a threshold. The positive path is indicated by the Success statement, making the resulting amount appear in green font. The negative path with the Error statement results in red font. So two birds are killed with one stone in this example: in one expression binding statement, a comparison is made AND the font colors are applied according to the positive or negative result.

Now an even more complex example combining comparison with two numbers and the enablement of a button control:

<Input value="{/value}"/>

<Button text="Press me"

    enabled="{= (${/value} &gt; 1 &amp;&amp; ${/value} &lt; 100)? true : false}" />

In the last line of code, you can see that an input field takes an initial number from a json model. The user overwrites this number and, depending on the number being between 1 and 100, the button is enabled or disabled. This is how expression binding can influence the behavior of your app.

Ready to try it out yourself? Don’t hold back…

Previous Post: UI5ers Buzz #26

Annette

Annette is a UI5 developer at SAP who loves to be creative and produce sophisticated Web front ends. Always in pursuit of the optimal user experience, she’s supporting UI5 communities, happy to share success and grateful for learning something new every day.