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


Monday, 13 May 2019 15:45

SAPUI5 Binding Part 5 – Expression Binding Approach 2

Written by
Rate this item
(0 votes)

Expression bindingis used for conditional checks in UI5 controls. In last unit of expression binding we have seen enabling and disabling the image using expression binding.

In this tutorial we are going to show case the value with color differentiation red and green color


We are going to display a list of animals which contains name and available field. When the available field has value greater than 50, we would write it in green. If it is less than 50, it means they are in the verge of extinction and therefore in red. ?

In order toachieve the above scenario, we follow the below steps


  1. Prepare the json (for mock data)
  2. Save the json in a folder
  3. Configure the json in manifest.json
  4. Create the view
  5. Add binding code in bootstrap
  6. Execute the application

Also Check: An ABAPer’s First Custom SAP OData Service

Step – 1: Prepare the json

We aremodifying my json data (from previous exercise) by removing all the fieldsexcept name field and adding a new field “available” providing numeric value asbelow

Please SUBSCRIBE to our Youtube Channel for Free SAP Video Courses

Step – 2: Save the json in a folder

I am savingmy json file in the folder models/mockData as

Step – 3: Configure the json in manifest.json

Also Read:My first S/4HANA Custom Program

Step – 4: Create the view

My viewwhich should display the list and view.xml code should look like

From the above image, we have used the expression binding as:

It is a simple if else condition. The availability field value should be display in red color if the value is less than 50 and it should be in green color if the value is greater than 50.

1. In order to handle the expression binding we should use ‘$’ before the binding value {available}.
We do not need to do any coding in controller.js in order to achieve expression binding

2. We are playing with color differentiator. The color enablement is available only in numberState property of objectListItem

Step – 5: Add binding code in bootstrap

We shouldonly add the complex binding code in our bootstrap in index.html file as

Free SAP ABAP 7.4+ New Syntax and Features Video Training

Step – 6: Execute the application

The moral of the story is: Save animals and save mother Earth. ?

Download and Upload the full project used for this article from here.

Please leave us your feedback below.

If you want to have real time discussions and resolutions, do join our SAP Technical Telegram Group where we have more than 4815+ active SAP consultants from 6 Continents.

Please Note: You need to install Telegram App on your mobile first and then you can join the group using the above link.

Please SUBSCRIBE to SAPYard’s Youtube Channel for Free End to End SAP Video Course and Training.

Step by Step Tutorials on SAPUI5

Read 107 times

Leave a comment

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