Utilizing the Formatter Function in SAPUI5

To format the data that is being rendered on different UI controls on the UI screen, formatter functions are utilized. For instance, flag indicators like 0,1,2, etc. are returned by the data being received from the backend using an Odata Model. Additionally, you want to provide the user a meaningful sentence that corresponds to the flag. In this instance, the formatter function will be called, formatting the flag to appear to the user as a meaningful text.

We will go through an example of a formatter function in this tutorial. A JSON model will be created, and one of its properties—which contain codes or flag values—will be bound to a text field on the user interface. Next, a formatter function will be defined and attached to the text field on the user interface. We will implement logic to return corresponding meaningful text for a given input flag or code within the formatter function specification.

1. Create JSON Model

var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({code:"1"});
sap.ui.getCore().setModel(oModel); 

2. Create Text View in the View file

var oTextView = new sap.ui.commons.TextView("textView", {
    // bind text property of textview to code property of model
    text: "{/code}",
    formatter: '.formatter.statusText' 
});

3. Create Formatter.js file

Make a file called formatter.js in the WebContent/model folder.

sap.ui.define([], function () {
 "use strict";
 return {
 statusText: function (sStatus) {
 switch (sStatus) {
 case "0":
 return 'New';
 case "1":
 return 'In Progress';
 case "2":
 return 'Completed';
 default:
 return sStatus;
 }
 }
 };
});

4. Refer formatter.js file in View’s Controller

Define
sap.ui.define([
 "sap/ui/core/mvc/Controller",
 "sap/ui/model/json/JSONModel",
 "sap/ui/demo/wt/model/formatter"
], function (Controller, JSONModel, formatter) {
 "use strict";
 return Controller.extend("org.test.controller.Sample", {
 formatter: formatter,

Output

After this coding is finished, the output below will show up on the screen.

The output will be “New” in accordance with the formatter function description in step 3 above when the “code” property value is 0.

According to the formatter function description, the output will state “In Progress” when the “code” property value is 1.

When ‘code’ property value is 2, output will be ‘Completed’ as per formatter function definition

This is an easy illustration of the formatter function in SAPUI5.Even if the formatting is quite complex, the steps remain the same.Formatters are quite helpful in many real-world project scenarios for tasks like changing the output color and an element’s visibility, among many other things.

Please use the comment section to ask any queries you may have. We respond to each and every comment.


Read Our blog here:-

Mastering Customer 360 in Salesforce

Top SAP Module is best in 2024 for Career Growth

Salesforce Developer Salary in India An In-Depth Analysis

  • Related Posts

    Automatically Fill Test Data in FM & BAPIs for SE37 – The Lazy Way

    Automatically Fill Test Data in FM & BAPIs for SE37. We often come across many issues with the upload programs that we develop to facilitate mass upload. The most boring work…

    Fetching Data from Memory Stack Using New Tool (in Debugger)

    Fetching Data from Memory Stack Using New Tool (in Debugger) Commonly we get a necessity to add approvals for standard exchanges wherein the field esteem isn’t straightforwardly open in client…

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You Missed

    Automatically Fill Test Data in FM & BAPIs for SE37 – The Lazy Way

    • By Varad
    • May 6, 2025
    • 9 views
    Automatically Fill Test Data in FM & BAPIs for SE37 – The Lazy Way

    Fetching Data from Memory Stack Using New Tool (in Debugger)

    • By Varad
    • May 5, 2025
    • 23 views
    Fetching Data from Memory Stack Using New Tool (in Debugger)

    How to Debug any Work Item in SAP Workflow?

    • By Varad
    • May 4, 2025
    • 25 views
    How to Debug any Work Item in SAP Workflow?

    External Debugging of an Application of another SAP User in other Location in another Machine/System

    • By Varad
    • May 3, 2025
    • 39 views
    External Debugging of an Application of another SAP User in other Location in another Machine/System

    How to Debug any Work Item in SAP Workflow?

    • By Varad
    • May 2, 2025
    • 31 views
    How to Debug any Work Item in SAP Workflow?

    Fetching Data from Memory Stack Using New Tool (in Debugger)

    • By Varad
    • May 1, 2025
    • 41 views
    Fetching Data from Memory Stack Using New Tool (in Debugger)