Expression binding is 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
Scenario:
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 to achieve the above scenario, we follow the below steps
Steps:
- Prepare the json (for mock data)
- Save the json in a folder
- Configure the json in manifest.json
- Create the view
- Add binding code in bootstrap
- Execute the application
Step – 1: Prepare the json
We are modifying my json data (from previous exercise) by removing all the fields except name field and adding a new field “available” providing numeric value as below
Step – 2: Save the json in a folder
I am saving my json file in the folder models/mockData as
Step – 3: Configure the json in manifest.json
Step – 4: Create the view
My view which 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.
Note:
- 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 - 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 should only add the complex binding code in our bootstrap in index.html file as
Step – 6: Execute the application
The moral of the story is: Save animals and save mother Earth.
