Part 3: Create a Translation Project and Translate Your Fiori App
Where are you?
You’re currently reading the third part of a four-part tutorial:
1. Create a Trial Account and Enable SAP Translation Hub.
2. Use SAP Web IDE to Create a Simple Fiori App and to Search for UI Texts.
3. Create a Translation Project and Translate Your Fiori App.
4. Change Your App and Start the Translation Process for Your Fiori App Again (Optional).
What’s this part of the tutorial about?
Now that you’ve prepared your app in English, it’s time to think about making it speak the languages of your customers. That involves the following parts:
- Creating a translation project in SAP Translation Hub
- Checking the translations that SAP Translation Hub gives you
- Pulling the translated properties file from your Git repository to SAP Web IDE
Creating a Translation Project in SAP Translation Hub
| What You Need to Do | What You See |
|---|---|
|
In the SAP Cloud Platform cockpit, navigate to the SAP Translation Hub service, and open the UI by choosing Go to Service.
Note: We recommend that you open the UI in a new tab or window. When the UI appears, refresh the browser tab or window. |
 |
| On the SAP Translation Hub UI, create a new translation project by choosing the plus + sign. |  |
|
Fill in the fields as follows:
Note: The simple Web shop app provided for this tutorial was configured only for these languages. If you want different languages, adjust the languages in the project settings in SAP Web IDE; see Defining Application Languages. Domain: Basis |
 |
| Save your entries. |  |
|
Your translation project should be listed on the left. If the translation project is not listed, refresh the browser window. Select your translation project, and check whether all entries are correct. |
 |
Having told SAP Translation Hub where your project is and into which languages you want to translate the app texts, you’re now ready to get the translations from SAP Translation Hub.
Getting Translations and Checking the Translated Texts
| What You Need to Do | What you See |
|---|---|
| On the details screen for your translation project, choose Get Translations. |  |
| Log on to the Git repository by entering your SAP ID password. |  |
| A confirmation message appears for a few seconds. |  |
|
A new tab appears on the UI:
To view and edit the translations, choose this new tab.
Select any language, for example, Spanish, and check whether all texts are translated into Spanish. |
 |
|
If you do not like one of the proposed translations, you can overwrite the proposed translation.
Example: Choose Spanish, and search using Ctrl+F for Name. Overwrite the Spanish translation, Nombre, with Nombre del producto. |
 |
|
Save your changes.
To update the translations in the Git repository, choose Get Translations. |
 |
| Log on to the Git repository by entering your SAP ID password. |  |
| A confirmation message appears. |  |
| Optional: You can verify if the changes have been made to your HTML5 app by refreshing the version list of your app or by taking a look at the Git Repositories section in the SAP Cloud Platform cockpit. |
 |
SAP Translation Hub has now translated your app texts and created language-specific properties files in the Git repository. To check the properties files and view translation versions of the app, you need to pull the properties files to your project in SAP Web IDE.
Pull the New Properties Files from the Git Repository to SAP Web IDE
| What You Need to Do | What You See |
|---|---|
| In SAP Web IDE, open the Git pane. |  |
| Select your project on the left of the screen, and pull the latest changes from the Git repository. |  |
|
Log on to the Git repository with your SAP ID user and password. To avoid having to log on in the future, select Remember Me, and choose OK. |
 |
|
A message confirms that the changes have been pulled successfully. Note: The message appears for only a few seconds. |
 |
| To ensure that there are no refresh issues in the browser, refresh your browser. |  |
| Expand the i18n folder in your project, and check whether there is an i18n file for each target language that you chose on the SAP Translation Hub UI. |  |
|
Select your project, right-click the localindex.html file, and choose Run –> Run with Mock Data.
|
 |
|
The Web shop app appears.
Note: If translations do not appear correctly, refresh the page. |
 |
The Bottom Line
That’s it for this part of the tutorial. You’ve now translated the texts in your app into 16 languages and pulled the resulting properties files into your project in SAP Web IDE. The next exercise is optional. If you’re hungry for more, head over to the next exercise, in which you add a button to your app: Part 4: Change Your App and Start the Translation Process for Your Fiori App Again.