In today’s globalized business landscape, SAP applications must cater to users across different regions, languages, and cultures. To provide a seamless user experience, SAP-UI5 applications need to support localization (l10n) and internationalization (i18n) — processes that enable applications to adapt text, formats, and layouts to diverse languages and locales.
This article explores how to implement localization and internationalization in SAP-UI5, leveraging built-in frameworks and best practices to deliver multilingual, culturally aware applications in the SAP ecosystem.
In SAP-UI5, internationalization is achieved primarily through resource bundles, formatting classes, and locale settings.
i18n.properties)Resource bundles are properties files containing key-value pairs where keys represent UI texts and values are their translations.
Example: i18n.properties
welcomeMessage=Welcome to SAP-UI5!
buttonSubmit=Submit
For German language, create i18n_de.properties:
welcomeMessage=Willkommen bei SAP-UI5!
buttonSubmit=Absenden
sap.ui.model.resource.ResourceModelSAP-UI5 provides the ResourceModel to load these properties files into your app and bind UI controls to the localized text.
var oResourceModel = new sap.ui.model.resource.ResourceModel({
bundleName: "my.app.i18n.i18n"
});
this.getView().setModel(oResourceModel, "i18n");
In XML views, bind text like this:
<Text text="{i18n>welcomeMessage}" />
<Button text="{i18n>buttonSubmit}" />
SAP-UI5 offers powerful formatting classes under the sap.ui.core.format namespace to handle locale-specific formatting of:
DateFormat)NumberFormat)CurrencyFormat)Example: Formatting a date according to user locale
var oDateFormat = sap.ui.core.format.DateFormat.getDateInstance({style: "medium"});
var sFormattedDate = oDateFormat.format(new Date());
SAP-UI5 automatically detects the user's locale based on browser settings or can be explicitly set via bootstrapping parameters:
<script
id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-language="de"
data-sap-ui-compatVersion="edge"
data-sap-ui-onInit="module:sap/ui/core/ComponentSupport">
</script>
welcomeUser=Welcome, {0}!
Bind with parameters:
var sUserName = "John";
var oBundle = this.getView().getModel("i18n").getResourceBundle();
var sText = oBundle.getText("welcomeUser", [sUserName]);
webapp/
i18n/
i18n.properties
i18n_de.properties
view/
App.view.xml
controller/
App.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/resource/ResourceModel"
], function(Controller, ResourceModel) {
return Controller.extend("my.app.controller.App", {
onInit: function() {
var oResourceModel = new ResourceModel({
bundleName: "my.app.i18n.i18n"
});
this.getView().setModel(oResourceModel, "i18n");
}
});
});
<mvc:View
controllerName="my.app.controller.App"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<VBox>
<Text text="{i18n>welcomeMessage}" />
<Button text="{i18n>buttonSubmit}" />
</VBox>
</mvc:View>
Implementing localization and internationalization in SAP-UI5 is straightforward with its rich support for resource bundles, formatting, and locale management. By following best practices and externalizing texts, developers can build flexible, multilingual SAP applications that deliver a truly global user experience.
SAP-UI5’s built-in i18n framework combined with SAP’s enterprise translation tools empower teams to scale their applications across languages and regions seamlessly.