SAPUI5 provides a set of simple data types such as Boolean, Currency, Date and Float. These data types can then be applied to UI controls in order to ensure firstly that the value presented on the screen is formatted correctly, and secondly, if the field is open for input that the value entered by the user conforms to the requirements of that data type.
We will now add a new field called "Sales to Date" and declare it to be of type "Currency".
11.1. Preview
11.2. ./models/model.json
"salesToDate" : 12345.6789, "currencyCode" : "EUR"
}
Two new model properties are created called salesToDate and currencyCode.
11.3. ./views/App.view.xml
... SNIP ...
<Panel headerText="{i18n>panel2HeaderText}" class="sapUiResponsiveMargin" width="auto">
<content>
<Label text="{i18n>dateOfBirth}" />
<Text text="{parts: [{path: '/dateOfBirth'}, {path: 'i18n>invalidDate'}], formatter: '.formatter.dateFormatter' }"
width="200px" class="sapUiSmallMargin" />
<Label text="{i18n>salesToDate}" class="sapUiSmallMargin" />
<Input width="200px" enabled="{/enabled}"
description="{ path: '/currencyCode',
A new pair or <Label> and <Input> elements have been created for the salesToDate model property.
The description property of the <Input> element has been bound to the currencyCode model property and also assigned the getCurrencyCode formatter function. The purpose of the formatter function is to calculate the correct currency symbol based on the combination of the currency code and the current locale.
The value property of the <Input> element has been bound to the model properties salesToDate and currencyCode. The {showMeasure: false} parameter switches off the display of the currency symbol within the input field itself. This is not needed because it is being displayed using the <Input>
element's description property.
11.4. ./controllers/formatter.js
sap.ui.define([], function() { "use strict";
// Based on the language and region supplied from the browser, create a // Locale object from which a LocaleData object can then be created.
//
// * * * Warning * * *
// It may not be safe to assume that you can determine the business // application's language based on the browser's default language.
//
// It is entirely possible that a user might have their browser set to // their native language (say French), but then perform all business // transactions in their company's business language (say English).
//
// In a real business scenario, the value held in variable sBrowserLocale // would typically be replaced with the application language supplied by // software such as your corporate identity provider or active directory // server.
var sBrowserLocale = sap.ui.getCore().getConfiguration().getLanguage();
var oLocale = new sap.ui.core.Locale(sBrowserLocale);
var oLocaleData = new sap.ui.core.LocaleData(oLocale);
// --- var getCurrencySymbol = function(pCurrCode) {
// Return the correct currency symbol for the given currency code as seen // from the perspective of the current locale.
// If the currency code is not supplied, then default to Euros return oLocaleData.getCurrencySymbol(pCurrCode || "EUR");
};
...SNIP...
// --- return {
dateFormatter : dateFormatter, getCurrencySymbol : getCurrencySymbol };
salesToDate=Verkäufe bis zum heutigen Datum ...SNIP...
Explanation and Warning
Please resist the temptation to hardcode currency symbol characters such as "£", or "$" or "€" into a model object!
Also, you must definitely not place currency symbol characters into the i18n resource bundle because this will break the formatter function!
The value displayed in a currency field is a composite value built from a currency value and a currency symbol. If you then place a currency symbol into an i18n file, you create a conflict based on the different data binding modes being used:
1. All JSON models use two-way data binding 2. All resource models use one-way data binding.
Therefore, if you create a currency field in which one part of the data (the currency value) is derived from a model using two-way data binding and the other part of the data (the currency code) is derived from model using one-way data binding, then the overall data binding for both values will be
downgraded to the lowest common binding method – which is one-way data binding.
Consequently, if such a field is open for input, the one-way data binding will not only prevent the currency value entered by the user from being written back to the model object, but it will also mean that the formatter function will only be able to run once when the screen is first rendered.
Currency Symbols are Locale Specific
Apart from the technical reasons described above, there is a more important reason for not
hardcoding currency symbols. This is because certain countries have currencies that share the same currency symbol and possibly even the same currency name, but are otherwise completely
independent currencies.
For instance, the currencies of Canada, Mexico and the US all use the dollar symbol "$" and are all (at least colloquially) referred to as "dollars"; however, it would be ambiguous to display currency values in American Dollars and Mexican Pesos together on the same screen using only the "$" symbol.
Therefore, SAPUI5 uses the standard Unicode Common Locale Data Repository in order to derive the correct currency symbol for a given currency code and locale.
The coding in formatter.js ensures that from the perspective of a given locale, all currency symbols are displayed correctly.
The Browser's Locale May Not Be The Application Language
In order to create a sap.ui.core.Locale object, we need a language code. In this example we have used the browser's default language which is typically a language code followed by a region code. For example:
en-GB The English spoken in England (Queen's English, hurrah!)
de-AT The German spoken in Austria
As was mentioned in Step 7: above, we have assumed that the language information sent from the browser can be used to determine the language in which this business application should be run.
This might not always be true for your business scenario!
Behaviour
This example has been designed to display the currency value in Euros. However, the following combinations illustrate how SAPUI5 can calculate the correct currency symbol when a currency code is displayed from the perspective of a particular locale.
This table shows the different currency symbols for a given combination of currency code and locale:
Currency Locale
US Dollar (USD)
Canadian Dollar (CAD)
Mexican Peso (MXN)
British English (en-GB) US$ CA$ MX$
Canadian English (en-CA) $ CA$ MX$
American English (en-US) $ CA$ MX$
Mexican Spanish (es-MX) USD CAD $
To see these changes, alter the currency code value in the JSON model, and the value of the sBrowserLocale variable in formatter.js to one of the combinations seen above.
For instance, set the currency code to US Dollars and the locale to British English:
./models/model.json
... SNIP ...
"salesToDate" : 12345.6789, "currencyCode" : "USD"
}
./controllers/formatter.js
... SNIP ...
// var sBrowserLocale = sap.ui.getCore().getConfiguration().getLanguage();
var sBrowserLocale = "en-GB";
var oLocale = new sap.ui.core.Locale(sBrowserLocale);
var oLocaleData = new sap.ui.core.LocaleData(oLocale);
... SNIP ...