Custom Formatter Functions

SAPUI5 supports the definition of custom formatters.

The examples for constructor declaration and bind property declaration (see Calculated Fields for Data Binding) do not contain a formatter function. In this case, all values of the various parts are joined together as a string with a space separator. To specify your own formatter, proceed as shown in the following example:

#!js
oTxt.bindValue({
                parts: [
                    {path: "/firstName", type: new sap.ui.model.type.String()},
                    {path: "/lastName", type: new sap.ui.model.type.String()},
                    {path: "/amount", type: new sap.ui.model.type.Float()},
                    {path: "/currency", type: new sap.ui.model.type.String()}
                    ],
               formatter: function(firstName, lastName, amount, currency){ // all parameters are strings
                   if (firstName && lastName) {
                          return "Dear " + firstName + " " + lastName + ". Your current balance is: " + amount + " " + currency; 
                   } else {
                          return null;
                   }
               }
});

The values provided in the parameters of the formatter function are already formatted to the output type of the control, which is a string in this case (that is, the value property of text field is a string).

Custom Formatter Function with Raw Values

If you do not want the provided values in the formatter function being already formatted according to their type, you can set a flag to get the raw unformatted values. These values are also stored in the model. In this case, the types of the parts are ignored:

#!js
oTxt.bindValue({
        parts: [
            {path: "/firstName", type: new sap.ui.model.type.String()},
            {path: "/lastName", type: new sap.ui.model.type.String()},
            {path: "/amount", type: new sap.ui.model.type.Float()},
            {path: "/model2>debts", type: new sap.ui.model.type.Float()}
            ],
        formatter: function(firstName, lastName, amount, debt){ // string, string, float, float
            if (firstName && lastName) {
                    return "Dear " + firstName + " " + lastName + ". Your current balance is: " + (amount - debts); 
            } else {
                    return null;
            }
        },
        useRawValues : true
});