In today’s globalized business environment, applications must cater to users across different languages and cultures. SAP UI5 supports internationalization (i18n) out of the box, enabling developers to create applications that adapt seamlessly to diverse linguistic and regional settings. Central to SAP UI5’s i18n capabilities are resource bundles, which store localized texts and labels separately from the application logic.
This article explores how to work effectively with resource bundles in SAP UI5 to implement internationalization and deliver user-friendly, multi-language applications.
Internationalization (often abbreviated as i18n, where 18 represents the number of letters between 'i' and 'n') is the process of designing an application so it can be adapted to various languages and regions without engineering changes. Localization (l10n) follows, involving the actual adaptation for specific languages, including translations, date formats, and currency.
SAP UI5 provides a structured way to separate texts and UI labels from the code, making translations manageable and scalable.
Resource bundles are property files (.properties) containing key-value pairs, where the keys represent unique identifiers for UI texts, and the values are the actual strings displayed to the user.
For example, the i18n.properties file might contain:
welcomeMessage=Welcome to SAP UI5!
buttonSubmit=Submit
buttonCancel=Cancel
Localized versions of this file can be created for different languages, such as i18n_de.properties for German:
welcomeMessage=Willkommen bei SAP UI5!
buttonSubmit=Einreichen
buttonCancel=Abbrechen
Place the i18n.properties files in the i18n folder under the webapp directory:
webapp/
└── i18n/
├── i18n.properties
├── i18n_de.properties
└── i18n_fr.properties
Register the resource bundle in the application descriptor (manifest.json) to make it available across the app:
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "your.namespace.i18n.i18n"
}
}
}
Replace "your.namespace" with your app’s actual namespace.
In XML Views:
Use data binding syntax with the resource model prefix:
<Button text="{i18n>buttonSubmit}" />
<Text text="{i18n>welcomeMessage}" />
In JavaScript Controllers:
Access the resource bundle to retrieve localized texts programmatically:
var oBundle = this.getView().getModel("i18n").getResourceBundle();
var sWelcome = oBundle.getText("welcomeMessage");
sap.m.MessageToast.show(sWelcome);
Resource strings can contain placeholders for dynamic values:
welcomeUser=Welcome, {0}!
You can pass parameters when retrieving the text:
var sUserName = "John";
var sWelcomeUser = oBundle.getText("welcomeUser", [sUserName]);
This outputs: Welcome, John!
SAP UI5 automatically detects the user’s browser locale and loads the corresponding resource bundle. However, you can programmatically set or change the locale at runtime:
var oCore = sap.ui.getCore();
oCore.getConfiguration().setLanguage("de");
This triggers UI texts to refresh with the German resource bundle.
Internationalization is essential for SAP UI5 applications targeting global audiences. Working effectively with resource bundles allows developers to externalize UI texts, simplify localization, and provide a seamless multilingual experience.
By following the outlined steps and best practices, developers can build SAP UI5 applications that easily adapt to users’ languages and cultural preferences — an important factor in driving user satisfaction and adoption worldwide.