In today’s globalized business landscape, applications must cater to users across different languages, regions, and cultures. SAP Fiori applications, built using the SAPUI5 framework, embrace this need through Internationalization (i18n) — the process of designing apps so they can be easily adapted to various languages and regional settings.
This article explores how SAPUI5 supports internationalization, enabling developers to create scalable, multilingual Fiori applications that provide a seamless experience to users worldwide.
Internationalization (often abbreviated as i18n) is the practice of preparing software so it can be localized — that is, translated and adapted for different languages and cultural contexts without engineering changes. It involves separating static text, dates, numbers, currencies, and other locale-dependent elements from the core code.
Localization (l10n) follows internationalization and refers to the actual translation and cultural adaptation process.
SAPUI5 provides a built-in, standardized framework to manage multilingual content through:
i18n.properties files)i18n.properties.i18n_en.properties for English, i18n_de.properties for German, etc.ResourceModelResourceModel to bind UI texts to keys defined in the properties files.{i18n>submitButtonText}, which gets replaced with the localized string at runtime.SAPUI5 includes formatting classes to handle locale-specific representation of:
These formatters automatically adapt based on the user’s locale settings.
Create the i18n.properties file
Place your default language resource bundle under the i18n folder in your project.
Add translations for other languages
Create copies of the file named with locale codes (e.g., i18n_fr.properties for French).
Declare the ResourceModel in the Component.js or manifest.json
var i18nModel = new sap.ui.model.resource.ResourceModel({
bundleName: "your.app.namespace.i18n.i18n"
});
this.setModel(i18nModel, "i18n");
Use i18n keys in XML views or controllers
In an XML view:
<Button text="{i18n>submitButtonText}" />
In a controller:
var oBundle = this.getView().getModel("i18n").getResourceBundle();
var sText = oBundle.getText("submitButtonText");
Test different locales
You can simulate different locales in the browser or configure your backend to send locale information.
Internationalization is a crucial aspect of building enterprise-ready SAP Fiori applications, ensuring your SAPUI5 apps can serve diverse users globally. By leveraging SAPUI5’s i18n framework and best practices, developers can build scalable, multilingual applications that provide a smooth and native experience for every user, regardless of their language or region.