We recently had a request from a customer to develop a SAPUI5 application that should be translated into German and English. The English language should be used by default, if the user language was neither English nor German.
At the same time, a SAP gateway service was used from a system where the default language was not English but German.
This immediately resulted in three problems when running the app with a language other than English or German:
This results in a scenario where a total of 3 different languages are used. Eg: If French is set as the language in the browser, the texts of the app were displayed in English, the texts of the metadata in German and SAPUI5 standard texts in French.
In the SAPUI5 core configuration it is possible to both read and set the current language. So the solution was that the app itself checks the automatically by the framekwork determined language and replaces it with the fallback language English if necessary.
In the end, the main challenge was finding the appropriate moment to do this, since the service metadata were already loaded when the component was initialized.
Luckily, there is a hook that allows to execute own coding immediately after the initialization of the framework and thus before reading the metadata, so that it is possible to overwrite the language right at the start by attaching an own function to the core.
Since we have defined the available languages in the manifest.json file as follows,
it was very easy to determine whether the user language is supported or not and, if necessary, overwrite it with a fallback language so that the metadata, all backend data and all UI texts are displayed in English.
The only thing needed for this is the following small code snipplet, which is placed directly in the index.html file.
If anyone knows how to additionally determine the fallback language from the manifest.json file, I would appreciate any tips.
At the same time, a SAP gateway service was used from a system where the default language was not English but German.
This immediately resulted in three problems when running the app with a language other than English or German:
- SAPUI5 is translated into many more languages than the application itself, so if the language was not supported, the app's texts were displayed in the fallback language English, but for standard components, the "correct" translations available in SAPUI5 were displayed (e.g., for a MessageBox)
- Since some texts are determined based on the metadata of the service, the default language (German) of the SAP system was used if the language was different.
- Also translatable texts in the SAP system are read in the default language of the system instead of the default language of the application
3 different languages in the same app
This results in a scenario where a total of 3 different languages are used. Eg: If French is set as the language in the browser, the texts of the app were displayed in English, the texts of the metadata in German and SAPUI5 standard texts in French.
In the SAPUI5 core configuration it is possible to both read and set the current language. So the solution was that the app itself checks the automatically by the framekwork determined language and replaces it with the fallback language English if necessary.
In the end, the main challenge was finding the appropriate moment to do this, since the service metadata were already loaded when the component was initialized.
Luckily, there is a hook that allows to execute own coding immediately after the initialization of the framework and thus before reading the metadata, so that it is possible to overwrite the language right at the start by attaching an own function to the core.
Since we have defined the available languages in the manifest.json file as follows,
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "xx.abc.def.i18n.i18n",
"supportedLocales": ["en", "de"],
"fallbackLocale": "en"
}
},it was very easy to determine whether the user language is supported or not and, if necessary, overwrite it with a fallback language so that the metadata, all backend data and all UI texts are displayed in English.
The only thing needed for this is the following small code snipplet, which is placed directly in the index.html file.
<script>
sap.ui.getCore().attachInit(() =>{
// Set default language to english if current language
// is not supported by app
const oConf = sap.ui.getCore().getConfiguration();
const aLang = oConf.getSupportedLanguages();
const sLang = oConf.getLocale().getLanguage();
if (!aLang.includes(sLang)) {
oConf.setLanguage('en');
}
});
</script>If anyone knows how to additionally determine the fallback language from the manifest.json file, I would appreciate any tips.
- SAP Managed Tags:
