Show TOC

Custom Formatter FunctionsLocate this document in the navigation structure

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:

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: 

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
});