Using a single file not only makes it easy to update strings in the future, but it makes it trivial to localize the UI to different languages and locales. If you want to support multiple languages (English, Spanish, German, French, etc.) or multiple locale settings for a given language (e.g. UK vs US English, or German vs Swiss German) you can create separate files to store the localized strings.
In this tutorial, you will add implement language support for Dutch (
nl) Spanish (
es), German (
de), with the base file covering English (
en) via the HANA Cloud Platform Translation Hub. Additionally, strings are provided for Swiss German (
de_CH) to demonstrate language and locale support. After running the app, you will test that the runtime loads the correct files by setting the language/locale in your browser.
Background on i18n:
When loading an app, SAPUI5 will check the container’s (in this case your browser’s) language/local settings, then attempt to load the most specific locale resource bundle file, with graceful degradation down to a “catch-all” case. For example, with a Swiss German-based browser, and no explicit language-related URL parameters, the SAPUI5 runtime will attempt to load the following files in this order:
Strings in more specific resource bundles (loaded earlier) will take precedence over strings for the same translation keys in less specific resource bundles (loaded later).
>An important point: Before you begin, make sure you have deployed the current version of your app to SAP HANA Cloud Platform. This ensures that your latest code is checked into your Git Repository and is available to the Translation Hub service.
Log into your HCP account, click on the Services tab, scroll down until you see SAP Translation Hub, then click on the SAP Translation Hub tile.
Click the Go To Service link to open the Translation Hub service page.
Click the + icon to create a new translation project and enter the following information in the Create Translation Project page. You will see a toast notification at the bottom of the screen with the selected languages. Click Save after entering all information. A toast notification is a non-modal UI element used to display brief alerts to a user.
- Field: Value
- Application Name:
northwind (See note below)
- Path to Properties File:
- Target Languages: Click on the menu and check:
Dutch, French, German, Spanish
Note: The application name must be lower case, and match the HTML5 Application name in your git repository. To check your app name, go to your HCP Cockpit and click on Git Repositories in the left navigation bar.)
The Translation Hub will display the Project Details. Click Get Translations in the lower right corner of the window, enter your password and click Submit when prompted.
The Translation Hub service will create the appropriate
messageBundle_xx.properties files and add them to your Git repository (but they will not be visible in your project folder until you complete the next two steps).
To review and optionally edit the translated text, click the Edit icon, and then select the desired language to review from the pull down menu.
- To change the suggested text for any of the fields (for instance use the German word
Ort instead of
Stadt for the
label_City string) simply edit the field under Translated Text. Once your review and your edits are complete, click Save. If you don’t make any edits, you can simply click Cancel.
If you have made changes you will need to click the Get Translations button again, and enter your git password for them to be saved to your repository.
Switch to your Web IDE tab, select the Git Pane on the right hand side of the window. Notice that:
- The northwind repository and the master branch are selected
- The new
messageBundle_xx.properties files are not yet in your project.
To download the new language files, click on the Pull button.
Login in with your HCP credentials when prompted. You will see a progress indicator on the Pull button as the new
messageBundle_xx.properties files are added to your project folder.
The green dot next to the files indicates that the version in your project is identical to the version in your Git repository.
The files added to your Web IDE northwind > i18n folder are:
Double-click on the new files and you will see each has the same 31 entries as
Mobile web, hybrid and native applications have the ability to support both language and locale (for example
de_CH for Swiss German).
The SAP Translation Hub does not yet support Swiss German, so to add that language to your app, you will create a file with the appropriate name and copy in the strings provided below.
Right-click on the i18n folder and select New > File. Name the file
Copy and paste the text below (these are Swiss German strings) into the new file and save your changes.
notFoundText=Die agfordereti Ressource isch nöd gfunde worde
masterSearchPlaceholder=Sueche nach Produktname
masterSearchTooltip=Produktname i geh
Your new file should look like this. Note that the
messageBundle_de_CH.properties file does not have a green dot because it hasn’t been committed and pushed to your Git repository yet.
Commit your new file to Git (following the same procedure as in the previous tutorial.
Deploy your app to HCP (following the same procedure as in an earlier tutorial and open the new, active version of the app.
To test the language support in the deployed app, we can utilize the SAPUI5
sap-ui-language URL parameter. To do so, just append
?sap-ui-language=xx_YY to your application URL
- If your standard application URL looks like this:
- You can view the German strings by specifying:
- Swiss German strings by specifying:
- Spanish strings by specifying:
As described in the introduction for this tutorial, when a user opens your app URL, the app will check the language and locale settings on the device, then load the appropriate strings file.