Skip to Content
Previous

Translate your app into multiple languages

By Jim Jaquet

Use the SAP Cloud Platform Translation Hub to automatically generate i18n (internationalization) files for multiple languages

You will learn

Throughout this series you have inserted a number of labels into an i18n (internationalization) file in your project (i18n.properties). In addition to having all the strings in your app collected in one file (and therefore easy to update), SAPUI5 can load different language files based on your device language and locale settings.

Details

Examples of language settings are en for English, de for German. Language and locale combinations allow for dialects of languages such as en_UK and en_US for British and American English. SAPUI5 will also allow an app to select the most appropriate language. If a device is set to de_CH for Swiss German, but that file isn’t included in the app, it will look for a de (German) file to load.


Step 1: Open your SAP Cloud Platform cockpit

Log into your SAP Cloud Platform account, click on the Services in the left-hand navigation bar.

Step 2: Open the SAP Translation Hub overview page

Scroll down until you see the SAP Translation Hub tile.

Click on the tile to open the overview page.

Accounts settings
Step 3: Go To Service

Click on the Go to Service link.

Accounts settings
Step 4: Create a new translation project

When the Translation Hub page loads, click the + icon at the bottom of the window, and then select Git Project to create a new translation process.

Accounts settings
Step 5: Fill in project details

Fill in the project details as shown below:

Field Name Value
Application name te2016
Branch master
Path to properties file webapp/i18n/i18n.properties
Domain Basis
Target languages German, Spanish

Click on Save

Accounts settings
Step 6: Initiate translations

Once the project is created click the green Get Translations button, and log in if prompted.

Accounts settingsAccounts settings
Step 7: Translation completion

You will see the “All done.” toast message at the bottom of the screen when the translations are complete.

Accounts settings
Step 8: Pull translated files to Web IDE

Return to SAP Web IDE and open the Git pane.

You will notice that there is only the original i18n.properties file in your project folder.

In the Git pane, click the Pull button to pull the translated files from your Git repository to your local project folder.

Accounts settings
Step 9: Confirm translated files in project

If you check the i18n folder in your project, you will see the two new files:

  • i18n_de.properties
  • i18n_es.properties
Accounts settings
Step 10: Commit files, and deploy to the cloud

Commit your new files to Git and deploy the application to SAP Cloud Platform(following the same procedure as in the previous tutorial.

Right-click on your te2016 project folder, and select Deploy > Deploy to SAP Cloud Platform and click Deploy.

Step 11: Testing your language files

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:
  • https://te2016-p12345678trial.dispatcher.hanatrial.ondemand.com/
  • You can view the German strings by specifying:
  • https://te2016-p12345678trial.dispatcher.hanatrial.ondemand.com/?sap-ui-language=de
  • And the Spanish strings by specifying:
  • https://te2016-p12345678trial.dispatcher.hanatrial.ondemand.com/?sap-ui-language=es
Step 12: Run the app on your phone

If your device is set to either the German or Spanish locale, then the app will check the language and locale settings on the device, and load the appropriate strings file.

Next Steps

Updated 12/12/2017

Time to Complete

10 Min.

Beginner

Prerequisites

Next
Back to top