How to Use the Formatter in SAP UI5?

There are three steps to use the formatter in SAP UI5:

1. create the formatter file
2. set the formatter in the controller
3. set the formatter in the view

1. Create the Formatter File

Create a formatter file in the folder webapp/model/ in your SAP UI5 application folder structure:

— webapp
—— controller
—— i18n
—— localService
—— model
——— formatter.js
—— test
—— view

Then create in the formatter a method which contains the formatting logic.

For example, a method which takes as a parameter an Integer. If the Integer equals zero then the method returns ‘foo’, if the Integer is greater than zero but less than five or equals five then the method returns ‘bar’, and if the Integer is greater than five than the methods returns ‘foo bar’.

// formatter.js

sap.ui.define([], function () {
  "use strict";

  return {

    // formatter method contains the formatting logic
    // parameter iInteger gets passed from the view ...
    // ... that uses the formatter
    fooBar: function(iInteger) {

      var sReturn = "";
      
      if (iInteger) { // iInteger is 0

        sRetrun = "foo";      

      } else if (iInteger <= 5) {

        sReturn = "bar";

      } else if (fFloat > 5) {

        sReturn = "foo bar";

      }

      // return sReturn to the view
      return sReturn;    

    }
	
  };

});

The parameter iInteger of the method gets passed from the view as you will see in step 3.

2. Set the Formatter in the Controller

After you created the formatter and put your logic inside via a method you need to set the formatter in the controller:

// in your controller

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/ui/model/json/JSONModel",

  // tell the controller where to find the formatter
  "../model/formatter"

], function (Controller, JSONModel, formatter) {
  "use strict";

  return Controller.extend("foo.bar.controller.View1", {
    
    // set the formatter
    formatter: formatter,

    onInit : function () {
       
      // generate random number between 0 and 10
      var iInteger = Math.floor(Math.random() * (10 - 0 + 1)) + 0;
    
      // create model and pass random boolean
      var oModel = new JSONModel({
        integer: iInteger
      });
      
      // attach model to the view
      this.getView().setModel(oModel, "integer");

    }
	
  });

});

3. Set the Formatter in the View

Finally, you need to set the formatter in the view. The output of the text in the view is either ‘foo’, ‘bar’, or ‘foo bar’ – because:

• the controller creates randomly a number between 0 and 10 and passes it to the integer model
• the view model gets attached to the View1.xml
• the sap.m.Text reads the number between 0 and 10 from the integer model
• the sap.m.Text passes the number to the formatter method fooBar
• in the formatter the method fooBar checks whether the number is 0, less than or equal 5 or greater than 5
• if the number is 0 a ‘foo’ is returned to the View1.xml, a ‘bar’ if the number is less than or equal 5, and a ‘foo bar’ if the number is greater than 5
• the sap.m.Text outputs the formatter’s fooBar method returned value

The XML view in which the integer model and the formatter method fooBar gets set to a text control:

<!-- in your XML view -->

<mvc:View 
 controllerName="foo.bar.controller.View1"
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc">

  <Text text={
  
    // set the binding path to the integer model
    path: 'integer>/integer',
    
    // set the formatter
    formatter: '.formatter.fooBar'
 
  }></Text>

</mvc:View>

See here for how to format an OData date-time value.