Show TOC

Step 6: Custom UtilitiesLocate this document in the navigation structure

When developing an application there is always the need to reuse JavaScript coding in multiple views and controllers. This is achieved by storing this code in separate files in the util folder. The SAPUI5 modularization concept is used to dynamically load this code at runtime.

One prominent example is the reuse of formatters in data bindings. In our sample application, we have properties in data bindings that need to be formatted. The code is defined in a Formatter.js file in the util folder.

Here's the content of the file:"sap.ui.demo.tdg.util.Formatter");

sap.ui.demo.tdg.util.Formatter = {

	uppercaseFirstChar : function(sStr) {
		return sStr.charAt(0).toUpperCase() + sStr.slice(1);

	discontinuedStatusState : function(sDate) {
		return sDate ? "Error" : "None";

	discontinuedStatusValue : function(sDate) {
		return sDate ? "Discontinued" : "";

	currencyValue : function (value) {
		return parseFloat(value).toFixed(2);


Here are a couple of examples of where these formatting functions are used - one from the Master view:

        path: 'Rating',
        formatter: 'sap.ui.demo.tdg.util.Formatter.ratingStatusValue' 
        path: 'Rating',
        formatter: 'sap.ui.demo.tdg.util.Formatter.ratingStatusState' 
    }" />

and one from the Detail view:

        path: 'Price',
        formatter: 'sap.ui.demo.tdg.util.Formatter.currencyValue'

We see from the Master view example that the formatter functions are used not only to format numeric values, but also to supply the appropriate value from an enumeration (such as the sap.ui.core.ValueState for an sap.m.ObjectStatus).

Progress Check

After adding the Formatter.js file in the new util subfolder, our app folder content looks like this:

  +-- i18n/
  |     |
  |     +--
  +-- util/
  |     |
  |     +-- Formatter.js
  +-- Component.js
  +-- index.html
  +-- MyRouter.html