SAPUI5 - Number Format Localisation

bilen picture bilen · Jun 24, 2017 · Viewed 9.9k times · Source

I have an issue related to number formatting for decimals in different languages. For the CURRENCY control, system takes the correct format based on the language coming from the URL parameter; US and DE ?sap-ui-language=DE or ?sap-ui-language=US

For the input fields which has type=Number attribute, always uses DOT as decimal separator regardless of language setting. Is there a solution for this problem ? I have a dynamic sap.ui.table populated (for both rows and columns) and some rows has number fields and some rows as text fields so i am sending dataformat from the backend dynamically as below;

temp = new sap.m.Input(sColumnId + index,{  value:"{path: '" + sColumnId + "'}" , type:"{DATATYPE}",  textAlign:"Right", liveChange:[handle_livechange,this], change:[handle_change, this] , editable:"{path:'EDITABLE', type:'sap.ui.model.odata.type.String'}" }

since some rows are text based, i cannot hard code formatter as below;

 type:'sap.ui.model.type.Float', formatOptions : {   groupingEnabled: true, groupingSeparator: '.', decimalSeparator : ',', minFractionDigits: 2}}"

I tried custom formatter but somehow on dynamic table my formatter function cannot be found. I tried onChange method to dynamically format but in this case my javascript calculations doesnt work.

If i can control the formatting option based on the row value with expression binding, it will also fix my issue but below code doesn't work.

temp = new sap.m.Input(sColumnId + index,{  value:"{path: '" + sColumnId + ", =${DATATYPE} === 'Number' ? type:'sap.ui.model.type.Float', formatOptions : {   groupingEnabled: true, groupingSeparator: '.', decimalSeparator : ',', minFractionDigits: 2} : type:'sap.ui.model.type.String' }"

Answer

khodayar J picture khodayar J · Aug 10, 2017

This approach works for me : define the format based on the locale, e.g., in a formatter file :

        sap.ui.define([
            "sap/ui/core/format/NumberFormat"
        ], function (NumberFormat) {     
        var oFloatNumberFormat = NumberFormat.getFloatInstance({
                    maxFractionDigits: 2,
                    minFractionDigits : 2,
                    groupingEnabled: true
                } , sap.ui.getCore().getConfiguration().getLocale());
        }


        return {
                 floatFormat: function(value){
                 return oFloatNumberFormat.format(value);
            },
    }
});

now where you want to use it :

var MyVar= new sap.m.Input({
            value: {
                path: "..../amount" ,
                formatter : function(amount) {
                    return yourdefinedname.floatFormat(amount);
                }
             }
          });