In the concluded expression binding unit we learned how to show the value of the color differentiation by using expression binding code written in view.xml. In this tutorial we will implement the same example using formatters.
Scenario:
We are going to display a list which contains name and available field, where the availability filed value is shown in red color and green color based on conditions.
We need to follow the below steps:
Steps:
- Json data creation and configuration
- Create formatter file
- Use the formatter file in the controller of the view
- Use formatter within the view
- Function within the formatter.js
- Execute the application
Step – 1: Json data creation and configuration
My json data has no change. In expression binding unit we have shown how to create json file and save in a folder and how to configure in manifest.json (Expression Binding in SAPUI5 Part 2).
Step – 2: Create formatter file
Create a folder ‘utils’ and a file ‘formatter.js’ within it. The folder should look like below:
The full webapp folder looks like below.
Step – 3: Use the formatter file in the Controller of the View
In the above image, we have specified the formatter file location in the headers of the controller as:
“sapspot_formatters/utils/formatter”
And we should use the formatter function within the controller as
i.e., the syntax should be formatter:< name of formatter file>,.
Since we have provided the formatter file name as formatter, therefore it is formatter: formatter for us. It’s a standard practice but you can give your own name to the file if you would like to create.
The above code is defined globally and it can be used within any methods.
Step – 4: Use formatter within the view
i.e., the syntax should be formatter: formatter: ‘<.formatter filename>.’
Step – 5: Function within the formatter.js
In the above image, we are getting the value of available field and based on condition if it greater than 50, it should display as success (green color) else error (red color)
Step – 6: Execute the application
Output:
Note: Formatter will keep the data ready by using functions written with the formmater.js and it will bind or display the formatted data in the view. It will not perform the formatter function after the view is rendered.
You still need to design the View and Controller. The Manifest file should be correct.
