Let's follow up this discussion at the Neptune Community

(this forum will be kept in read-only mode)

Use the Data Binding Type System for input formatting and validation

Dear Neptune team,


had to use this approach at a customer where the requirement was to format numbers in sap.m.Input with binding. The Neptune build in formatters for the value property don't work in this case (see QTY input field in screenshot), the entered value is not formatted and the bind doesn't work.

So I defined the type and assigned it to the binding (as in SAP help data binding types), same kind of declaration is generated by Neptune when using the build in formatter "number:SAPUserDefault" so maybe you can reuse some logic ;) 

var floatLABST = new sap.ui.model.type.Float({
    groupingEnabled: true, 
    groupingSeparator: " ", 
    decimalSeparator: ","
}, { // validation constraints
    maximum: 1000000,
    minimum: -10,
});
inoSimpleFormLABST.bindValue("/LABST", floatLABST); 

What is also nice is that the model is typed accordingly - LABST is a number, not a string:


In addition, when registering the control to the message manager, input validation is carried out and messages displayed automatically in the preferred browser language (See SAP help UI messages):

sap.ui.getCore().getMessageManager().registerObject(inoSimpleFormLABST, true);

e.g. format error

or constraints violation


Once a validation has been triggered and you leave the input empty, the input stays in error status prompting for a valid number. Maybe own implementation of the handlers is the solution when input should be optional.


For Integer and Float (and String of course) the values are transferred properly to the backend in an ajax call.


Regarding the Date/Time type, what can be interesting for certain scenarios is that the browser timezone is included in the model and transferred to the backend:


In an ajax call the JSON string looks like this:

{"VFDAT":"2016-08-07T22:00:00.000Z"}

For String type, the validation of length contraints may be useful:

var stringMAKTX = new sap.ui.model.type.String(null, {minLength: 5});
inoSimpleFormMAKTX.bindValue("/MAKTX", stringMAKTX);
sap.ui.getCore().getMessageManager().registerObject(inoSimpleFormMAKTX, true);



Where to put this in the designer: e.g. as an additional button in the binding dialog and then the type can be derived automatically from backend type, DEC/QUAN = Float etc.:


Attached the example application.


Please let me know what you think.


Thanks and best regards

xml

2 people like this idea

Hi Martin,


This is great info and I love the way you documented it.  Could not be clearer.   :)    Thank you!

We will explore more into this approach and analyze it for the next release.


Nowadays, we are using sap.m.MaskInput (and sap.m.MaskInputRule) to validate input fields on the front end (example here).


Thanks again for sharing this approach!

Kind regards,

Julian

Thanks for looking into that Julian :) unfortunately I couldn't MaskInput for my scenario since it is more useful for fixed-width input (e.g. phone/credit card number, IP address, MAC address), whilst I needed input formatting for float and integer of any width, e.g. for float greater 0 as here:


Thanks and best regards

Hi Martin


Thank you for the feedback and solution. We have now added this functionality for SP02. It will only be applied for sap.m.Input - I think that is the only one who needs it.


Supports using premade formatObjects or declaring your own, so should be easy to use and highly flexible.



blob1477145263795.png


blob1477145341578.png




Regards

Ole Andre 


1 person likes this

Wow nice :) thanks for adding this. Looking very much forward to SP02. Best regards

Thanks to you, Martin! :)

Login or Signup to post a comment