Step 6: Custom Utilities

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:

jQuery.sap.declare("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:

<ObjectStatus
    text="{
        path: 'Rating',
        formatter: 'sap.ui.demo.tdg.util.Formatter.ratingStatusValue' 
    }"
    state="{
        path: 'Rating',
        formatter: 'sap.ui.demo.tdg.util.Formatter.ratingStatusState' 
    }" />

and one from the Detail view:

<ObjectHeader
    title="{Name}"
    icon="sap-icon://database"
    number="{
        path: 'Price',
        formatter: 'sap.ui.demo.tdg.util.Formatter.currencyValue'
    }"
    numberUnit="USD">
    ...
</ObjectHeader>

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).

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