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:
- 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
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 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.
Step by Step Tutorials on SAPUI5
- Journey to SAPUI5
- SAPUI5 Tutorial with WebIDE. Part I. How to Consume Custom OData in SAPUI5 Application
- SAPUI5 Tutorial with WebIDE. Part II. Routing and Navigation in SAPUI5 Application
- SAPUI5 Tutorial with WebIDE. Part III. Drop Down in SAPUI5 Applications (2 Methods)
- SAPUI5 Tutorial. Part IV with WebIDE. Routers and Routing in SAPUI5
- SAPUI5 Tutorial with WebIDE. Part V. Navigation in SAPUI5 without Routers
- SAPUI5 Tutorial with WebIDE. Part VI. Using Fragments in SAPUI5 Fiori Applications
- SAPUI5 Tutorial with WebIDE. Part VII. An ABAPer’s First SAPUI5 App in SAP WebIDE
- SAPUI5 Tutorial with WebIDE. Part VIII. Deploy my First SAPUI5 App in WebIDE
- SAPUI5 Tutorial with WebIDE. Part IX. Alternative to oModel.setSizeLimit()
- SAPUI5 Tutorial with WebIDE. Part X. Using Media Queries in UI5 Application
- SAPUI5 Tutorial with WebIDE. Part XI. An ABAPer’s Second SAPUI5 App
- SAPUI5 Tutorial with WebIDE. Part XII. SAPUI5 Basic Debugging for Beginners
- Routing and Navigation in SAP UI5 – Theoretical Explanation Part 1
- Routing and Navigation in SAP UI5 – Theoretical Explanation Part 2
- Add Delete & Save Multiple Records in SAPUI5. Part 1 – ADD
- Add Delete & Save Multiple Records in SAPUI5. Part 2 – DELETE
- Add Delete & Save Multiple Records in SAPUI5. Part 3 – SAVE
- Modularization and Large Scale Architecture in SAPUI5
- Use of Third Party (or) External Resources in SAPUI5. Part I – Overview
- Use of Third Party (or) External Resources in SAPUI5. Part II – Practical with Gauges
- SAPUI5 For ABAPers – Component Reuse with Real Time Example
- SAPUI5 for ABAPers – Consuming OData Service from SAPUI5 Application – CRUD Operations
- Trick to Send QR code or Barcode Data Remotely from Android to PC for SAPUI5 App
- Push Notification in SAP – ABAP Push Channel, ABAP Messaging Channel in SAPUI5 – a Real Time Interaction
- How to send e-mail in SAPUI5 Hybrid App?
- How to Get Weight from the Weigh Scale/Weigh Bridge Bluetooth Device using SAPUI5 Hybrid App?
- SAPUI5 – How to Change the Master List Item Selection Based on Changes in Hash Tag URL?
- SAPUI5 – How to Load a Full Screen and Navigate to Master-Detail Application? Approach 1
- SAPUI5 – How to Load a Full Screen and Navigate to Master-Detail Application – Approach 2
- SAPUI5 – How to change the background color of sap.m.Table’s cells of each row based on specific condition?
- SAPUI5 Binding Part 1- Aggregation Binding in Table Control
- SAPUI5 Binding Part 2 – Element Binding Approach 1
- SAPUI5 Binding Part 3 – Element Binding Approach 2
- SAPUI5 Binding Part 4 – Expression Binding Approach 1
- SAPUI5 Binding Part 5 – Expression Binding Approach 2
- Expression Binding Overview in SAPUI5
- SAPUI5 – Factory Functions for Beginners
- SAPUI5 – List Control Using Formatters