Standard service - a fixed amount of work that is performed at a fixed price.  Post Service

  

Tuesday, 14 May 2019 06:31

Expression Binding Overview in SAPUI5

Written by  https://sapyard.com/expression-binding-overview-in-sapui5/
Rate this item
(0 votes)

Expression Binding allows us to display a calculated values on to the screen. These can be used for simple calculations and formatting.

Expression binding is especially useful in

the context of SAPUI5 XML template where XML views with template are prepossessed 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 complex binding syntax by using configuration setting bindingSyntax to complex.

PS: Complex syntax is automatically activated when the compatVersion is set to edge or to version 1.28 or higher.

Syntax:

1
"{= ${Age} < 18 ? 'Success' : 'Error'}"

How to achieve?

Place the below code in the XML view. In my case it is ‘HomePage.view.xml‘.

1
2
3
4
5
6
7
<List class="sapUiResponsiveMargin"width="auto"items="{Results>/Data}">
<items>
<ObjectListItem title="{Results>User}"number="{Results>Age}"
numberUnit="Year Old"numberState="{= ${Results>Age} > 18 ? 'Success' : 'Error' }"/>
</items>
</List>

Same way the expression can be used to Change the Visibility of any component in the view.

1
<Button text="Save"type="Accept"visible="{= ${Results>Age} === 'Above' }">

Let’s do Hands-On:

Now, let us put the above theory into a simple practical SAPUI5 App which was part of a real SAPUI5 Project. I know you are already familiar with creating projects in WebIDE. But still I’ll be showing how to create it as it might help new bees.

Please bear with me. ?

Also ReadAn ABAPer’s First SAPUI5 App in SAP WebIDE

Step 1 : Create a project as usual in WebIDE/Eclipse (I’ll be showing the example in WebIDE, if you need help in Eclipse please let me know).

File / Right Click in Workspace > New > Project From Template

Choose SAPUI5 Application > Next

Enter Project Name, in my case it is ‘ExpressionBinding’ > Next

Provide your view name > Finish (for my example it is HomePage)

PS: Do not forget to put the code snippet (shown in the above section) in this XML view.

Your project is created. Now we will start with the real topic which I wanted to demonstrate. ?

Step 2 : Create a JSON data (I have named it BindingData.json) which will be used in binding.

Step 3 : Define the model in manifest.json

Please take note of the URI i.e “model/BindingData.json”

Also Read: An ABAPer’s Second SAPUI5 App

Step 4 : Run your application. Eureka!! There you go. You got your output

You can see in the screen for the age who has 18 or less is showing ‘Red’ in color (it means ‘Error’ according to our code “{= ${Age} < 18 ? ‘Success’ : ‘Error’}”). Try changing the expression and play with it.

Please follow the link to have a better understanding on ‘Expression Binding‘. Please feel free to ask me you have any doubts. You may leave your Questions and Comments below as well. We would respond to them swiftly.

We have a very active Telegram (App) SAP Technical Group with more than 1823+ SAP Technical Practitioners from 6 Continents of the SAP World. Please join it using below link.
Telegram SAP Technical Discuss Group. You need to install the Telegram App first on your mobile device. Once you have it on your mobile, you can join the group and also access it from the Web on your computer and laptop.

Step by Step Tutorials on SAPUI5

Read 57 times

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.