Search code examples
formattingsapui5currency

OpenUI5 sap.m.Input Currency Formatting


This looks to be answered many different times but I can't seem to get it working with my implementation. I am trying to format and limit the data in a sap.m.Input element. I currently have the following:

var ef_Amount = new sap.m.Input({
  label: 'Amount',
  textAlign: sap.ui.core.TextAlign.Right,
  value: {
    path: '/amount',
    type: 'sap.ui.model.type.Currency'
  }
});

The first problem is that it kind of breaks the data binding. When I inspect the raw data (with Fiddler) submitted to the server it is an array like this:

"amount": [1234.25,null]

The server is expecting a single number and as such has issues with the array.

When I use the following, the binding works as desired but no formatting is performed.

var ef_Amount = new sap.m.Input({
  label: 'Amount',
  textAlign: sap.ui.core.TextAlign.Right,
  value: '{/amount}'
});

The second problem is that the data entered is not limited to numbers.

I have tried using sap.m.MaskedInput instead but I don't like the usage of the placeholders because I never know the size of the number to be entered.

And lastly, it would be nice if when focus is placed on the input field, that all formatting is removed and re-formatted again when focus lost.

Should I be looking into doing this with jQuery or even raw Javascript instead?

Thank you for looking.


Solution

    1. the array output is a normal one according to documentation. So you need to teach your server to acccept this format or preprocess data before submission;
    2. this type is not intended to limit your data input;
    3. good feature, but ui5 does not support this, because the Type object has no idea about control and it's events like "focus" it only deals with data input-output. So you have to implement this functionality on your own via extending the control or something else.

    I would suggest using amount and currency separately. It's likely that user should be allowed to enter only valid currency, so you can use a combobox with the suggestions of the available currencies.