Skip to Content

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.

To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

  1. Jakob Marius Kjær

    I use expression binding a lot on my projects. Another option is to use the !! To check if a value is present or not. That can be used for example on the visible state.

    Example <Text text=”{extendedPrice}” visible=”{=!! ${extendedPrice}” />

    (2) 
  2. Mike Doyle

    I agree.  I use expression binding a lot too.  It makes the view code much more readable because you can see exactly what is happening without having to branch off to separate formatters.  The simplest use case, as you explain, is binding property X to NOT property Y.  Simple but very useful!

     

    (2) 
  3. Jorg Thuijls

    Whenever I try, the & symbol crashes the app and I’m forced to translate to &amp;$amp; instead of &&. Is that statement working for you?

    (2) 
    1. Annette Frei Post author

      Hello Thuijls,

      Thank you for this valid observation! This situation many of us have experienced as well. It is  actually also mentioned in our Demo Kit, quote: “The ampersand (&) character also has a high priority meaning to the XML parser. This character will always be interpreted to mean “The start of an escaped character”. So if you wish to use the Boolean AND operator (&&) in a condition, you must escape both ampersand characters (&amp;&amp;).”

      Check out the last sentence on this page: https://openui5.hana.ondemand.com/#/topic/5cff8d1c3fb84c5db7a00f2daca125af

       

      (0) 

Leave a Reply