Skip to Content
Author's profile photo Annette Frei

UI5ers Buzz #27: Experience Expression Binding in UI5

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.

Assigned Tags

      9 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Jakob Marius Kjær
      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}" />

      Author's profile photo Annette Frei
      Annette Frei
      Blog Post Author

      Hello Jakob, thank you for sharing this valid point!

      Author's profile photo Mike Doyle
      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!

       

      Author's profile photo Annette Frei
      Annette Frei
      Blog Post Author

      Hello Mike, thanks for this very useful hint!

      Author's profile photo Jorg Thuijls
      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?

      Author's profile photo Jakob Marius Kjær
      Jakob Marius Kjær

      Nope I see the same behaviour

      Author's profile photo Annette Frei
      Annette Frei
      Blog 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

       

      Author's profile photo Marcus Tastler
      Marcus Tastler

      Hey Annette,

      i try to format the calculated expression

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

      but i have no idea how i can format the result to 0.00.

      For a normal binding i can use the formatter

      in View
      { path: 'value', formatter: '.formatNumber' }
      
      in Controller
          formatNumber: function (value) {
            return Number(value).toFixed(2);
          },

      Did you have a tip for me?

      Best greetings, Marcus;

       

      Edit: I found it.

      in View
      { parts: [ 'unitPrice', 'quantity' ], formatter: '.calculateAndFormatTotal' }
      
      in Controller
          calculateAndFormatTotal: function (price, quantity) {
            return this.formatNumber(price * quantity);
          },
          formatNumber: function (value) {
            return Number(value).toFixed(2);
          },
      Author's profile photo Annette Frei
      Annette Frei
      Blog Post Author

      Hi Marcus,

      The parsing of the number format might help here, check out this page "Number Format" and scroll down to "Parsing".

      // "NumberFormat" required from module "sap/ui/core/format/NumberFormat"

      var oFloatFormat = NumberFormat.getFloatInstance();

       

      oFloatFormat.parse("1,234.567"); // returns 1234.567

      oFloatFormat.parse("12.34%"); // returns 0.1234

      Have a wonderful day, best regards, Annette