SAPUI5: How to Use the Formatter? (+ Examples Included)

This is how to use the formatter in SAPUI5.

The formatter is a daily companion.

So if you want to understand how to get this fundamental ’re in the right place.

Let’s dive right in!

3 Steps to get the SAPUI5 Formatter to Work

These are the three steps to using the SAPUI5 formatter:

  1. Create the formatter file
  2. Set the formatter in the controller
  3. Set the formatter in the view

Let’s kick things off with step #1:

#1 Create the Formatter File

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

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

Then create a method that contains the formatting logic:

For example, a method which takes as a parameter an integer—let’s call the the parameter iValue.

  • If iValue equals zero then the method returns foo (iValue == 0)
  • If iValue is greater than zero but less than five or equals five then the method returns bar (iValue > 0 && iValue <= 5)
  • If the iValue is greater than five than the methods returns foo bar (iValue > 5)
// in your formatter.js

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

  return {

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

      var sReturn = "";
      
      if (iValue) { // iValue is 0 (truthy and falsy)

        sRetrun = "foo";      

      } else if (iValue <= 5) {

        sReturn = "bar";

      } else if (iValue > 5) {

        sReturn = "foo bar";

      }

      // return sReturn to the view
      return sReturn;    

    }
	
  };

});

The parameter iValue of the method gets passed from the view as you’ll see in step #3.

#2 Set the Formatter in the Controller

After you created the formatter and put your logic in it, you need to set it 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 iValue = Math.floor(Math.random() * (10 - 0 + 1)) + 0;
    
      // create model and pass random boolean
      var oModel = new JSONModel({

        integer: iValue 

      });
      
      // attach model to the view
      this.getView().setModel(oModel, "integer");

    }
	
  });

});

#3 Set the Formatter in the View

Finally, you have 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

Here is the XML view where the integer model and the formatter method fooBar gets applied 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>

All done.

Leave a Comment