CODEWITHSUNDEEP
sapui5
Mike
Mike

Reputation: 14616

Uppercase or capital letters only in sap.m.Input controller of UI5

I'm using a sap.m.Input controller in my SAPUI5 application and I would like the input text in this field will be displayed with capital letters / in uppercase only. The actual value is formatted on a backend along with the data validation.

Is there any ready-to-use property to enable the uppercase mode?
I checked the control properties at API Reference, but can't find something similar.

A question extension:
As far as I understand, the alternative solution to JS is to use a CSS property: text-transform: uppercase; and to attach this style to the specific sap.m.Input controller.

Which approach is more preferable from the performance point of view — to use a CSS-based (text-transform) or a JS-based (liveChange) technique?

Upvotes: 2

Views: 8702

Answers (4)

dreamstate
dreamstate

Reputation: 179

Below is a single line of code you need only to write to solve your requirement. No need for controller, just type it in view :). This approach resolves your issue through use of expressions

<Input value = "{ value: '' constraints: { search: '^[A-Z]*$' } }" />

Use of the search constraint means that it will search in the input and check it against the value you set.

'^[A-Z]*$' means capital letters only, this is a regular expression, or regex.

To enable automatic error handling, simply add in 1line of code under the "sap.ui5" section of your manifest.json: "handleValidation": true, It will automatically render an error message to guide the user.

Another regex expression others may find useful: '^[A-Za-z]*$', which means you can type only alphabetical letters, uppercase and lowercase.

Here's a useful resource on inline validation: https://sapui5.hana.ondemand.com/#/topic/07e4b920f5734fd78fdaa236f26236d8

Upvotes: 1

Radosław Kiela
Radosław Kiela

Reputation: 21

... or you can attach a callback to the "validationSuccess" event of a input control and in the callback execute something like this:

var oSrc = oEvent.getSource();

if(oSrc && oSrc.setValue){
  oSrc.setValue(oSrc.getValue().toUpperCase()); 
}

Upvotes: 0

Inizio
Inizio

Reputation: 2256

As per my knowledge, the better solution is to use the CSS:

.sapMInput.myCustomCSSClass .sapMInputBaseInner {
    text-transform: uppercase;
}

Upvotes: 2

KristoffDT
KristoffDT

Reputation: 471

You could do this with the liveChange event:

<Input liveChange = "onLiveChange"></Input>

In your controller you define the function:

onLiveChange: function(oEvent) {

    var input = oEvent.getSource();

    input.setValue(input.getValue().toUpperCase());
}

If it is to display your initial value in your Input-control, you can define a formatter which formats your String to uppercase.

Upvotes: 1

Related Questions