UI Formatting

Formatting

To change language dependent format for testing: sap.ui.getCore().getConfiguration().setFormatLocale("en")

You can parse language dependent decimal numbers with sap.ui.core.format.NumberFormat.getFloatInstance().parse("12.000");

Type: sap.ui.model.type.Currency

OptionsDefaultDescription
minIntegerDigits
maxIntegerDigits
minFractionDigits
maxFractionDigits
decimals
precision
groupingSeparator
showMeasure

Assuming you have such kind of data stored in your model:

{
"data1": {
"number1": [123, "TRY"],
},
"data2": {
"number2": 567, //(value should be number, not string)
"currency2": "TRY"
}
}

you can show it in your page formatted using one of two methods:

<ObjectNumber
number="{
path: '/data1/number1',
type: 'sap.ui.model.type.Currency',
formatOptions: {showMeasure: false}
}"
/>
<ObjectNumber
number="{
parts:[{path:'/data2/number2'},{path:'/data2/currency2'}],
type: 'sap.ui.model.type.Currency',
formatOptions: {showMeasure: true}
}"
/>

or using formatter:

{ //as an alternative, use formatter
formatCurr_1: function(sal, curr) {
var oCurrFormatter = new sap.ui.model.type.Currency();
return oCurrFormatter.formatValue([sal, curr], "string");
},
formatCurr_2: function(sal, curr) {
// Shows as a symbol like '€'
var oBrowserLocal = sap.ui.getCore().getConfiguration().getLanguage();
var oLocal = new sap.ui.core.Locale(oBrowserLocal);
var oLocalData = new sap.ui.core.LocaleData(oLocal);
return sal + " " + oLocalData.getCurrencySymbol(curr)
}
}

sap.ui.model.type.Float

OptionsDefaultDescription
minIntegerDigits1minimal number of non-fraction digits
maxIntegerDigits99maximal number of non-fraction digits
minFractionDigits0minimal number of fraction digits
maxFractionDigits99maximal number of fraction digits
groupingEnabledtrueenable grouping (show the grouping separators)
groupingSeparator","the used grouping separator
decimalSeparator"."the used decimal separator
Available Constrains
maximum
minimum

Given that you have the data:

{
"number1": 123.4, // Data (number can be number or string)
"number2": "456.7",
}

you can format it like this:

<ObjectNumber
number="{
path: '/number1',
type: 'sap.ui.model.type.Float'
}"
/>
<ObjectNumber
number="{
path: '/number2',
type: 'sap.ui.model.type.Float',
formatOptions: {minFractionDigits: 2}
}"
/>

Type: sap.ui.model.odata.type.String

ConstraintsDescription
maxLengthexpects an integer number
minLengthexpects an integer number
startsWithexpects a string
startsWithIgnoreCaseexpects a string
endsWithexpects a string
endsWithIgnoreCaseexpects a string
containsexpects a string
equalsexpects a string
searchexpects a regular expression
<Text text="{path: 'doc>Itemno', type : 'sap.ui.model.odata.type.String', constraints: {
isDigitSequence : true,
maxLength : 10
}}"/>

Type: sap.ui.model.odata.type.Decimal

<Input value="{
path: 'data/number',
type: 'sap.ui.model.odata.type.Decimal',
constraints: {
scale: 'variable'
}
}"/>
<core:Title text="sap.ui.model.odata.type.Decimal" />
<Label text="scale: 3" labelFor="I26"/>
<Input value="{path: 'Decimal', type: 'sap.ui.model.odata.type.Decimal', constraints: {scale: 3}}" id="I26"/>
<Label text="precision: 10, scale: &quot;variable&quot;, nullable: false" labelFor="I27"/>
<Input value="{path: 'Decimal', type: 'sap.ui.model.odata.type.Decimal', constraints: {nullable: false, precision: 10, scale: 'variable'}}" id="I27"/>
<Label text="precision:10, scale: 3" labelFor="I28"/>
<Input value="{path: 'Decimal', type: 'sap.ui.model.odata.type.Decimal', constraints: {precision: 10, scale: 3}}" id="I28"/>
<Label text="scale: default (0), nullable: false" labelFor="I29"/>
<Input value="{path: 'Decimal', type: 'sap.ui.model.odata.type.Decimal', constraints: {nullable: false}}" id="I29"/>
<Label text="stepInput: min: 0 max: 99 scale: 0" labelFor="stepInput"/>
<StepInput id="stepInput" min="0" max="99" value="{path: 'Decimal', type: 'sap.ui.model.odata.type.Decimal', constraints: {nullable: false, scale: 0}}"/>
<Label text="scale: &quot;variable&quot;, style: &quot;short&quot;, shortDecimals: 3" labelFor="I30"/>
<Input value="{path: 'Decimal', type: 'sap.ui.model.odata.type.Decimal', constraints: {nullable: false, scale: 'variable'}, formatOptions: {style: 'short', shortDecimals: 3}}" id="I30"/>
<Label text="precision: 10, scale: 3, minimum: 100 (exclusive), maximum: 1000" labelFor="decimalInput"/>
<Input id="decimalInput" value="{path: 'Decimal', type: 'sap.ui.model.odata.type.Decimal', constraints: {precision: 10, scale: 3, minimum: '100', minimumExclusive: true, maximum: '1000'}}"/>

Type: sap.ui.model.type.Date

<Text
text="{
path: 'Edatu',
type: 'sap.ui.model.type.Date',
formatOptions: { pattern: 'dd/MM/yyyy' }
}"
/>
<DatePicker
displayFormat="short"
change="handleChange"
class="sapUiSmallMarginBottom"
value="{
path: 'json>/Trh',
type: 'sap.ui.model.type.Date',
formatOptions: { pattern: 'dd.MM.yyyy', UTC: true }
}"
/>
var oDate = new Date();
var oDateFormat = sap.ui.core.format.DateFormat.getDateTimeInstance({pattern: "dd/MM/yyyy"});
oView.byId("energytitle").setText(oDateFormat.format(sDate));

Type: sap.ui.model.odata.type.Time

<Text text="{
path: 'Erzet', type: 'sap.ui.model.odata.type.Time',
formatOptions: {pattern : 'HH:mm:ss'}
}"
/>

References