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


Thursday, 23 May 2019 04:00

SAPUI5 – List Control Using Formatters

Written by
Rate this item
(0 votes)

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.


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:


  1. Json data creation and configuration
  2. Create formatter file
  3. Use the formatter file in the controller of the view
  4. Use formatter within the view
  5. Function within the formatter.js
  6. Execute the application

Also Check : Free Video Tutorial on SAP OData End to End

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). Please refer to that post or you may also import the zipped project directly to your development system and refer it.

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:

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.

Also Check: An ABAPer’s Second SAPUI5 App

Step – 4: Use formatter within the view

i.e., the syntax should be formatter: formatter: ‘<.formatter filename>.<function within formatter file>’

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)

Also Check: My First Custom Program in S/4HANA

Step – 6: Execute the application


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.

If you have not taken the Binding Series at SAPYard, it would be a good idea to go through them. Also, you may import this project zipped file on Formatter in SAPUI5 to your WebIDE or Eclipse and execute. It has all the code and config needed. You can just import and run. Even better, you put break points and debug the view and controller files.

If you still face issue or have some doubt, feel free to write to us at This email address is being protected from spambots. You need JavaScript enabled to view it. or put your questions in the comment section below. We respond to each and every comment.

If you want to have real time discussions and resolutions, do join our SAP Technical Telegram Group where we have more than 4900+ 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 185 times

Leave a comment

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