Where are you?
You're currently reading the fourth 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 translated your app into 16 languages, you might want to find out what people think of your app, so how about adding a Feedback button? And because your app is now available in 16 languages, you'll need to translate that one text into those 16 languages, too. Thankfully, it's pretty quick with SAP Translation Hub. Let's get started.
Adding a New Button to Your App
In your project in SAP Web IDE, expand the view folder, and open the S2_ProductList.view.xml file. In the <headerContent> tags, add a new button by entering the following code on a new line: <Button text="" width="100px" id="__button1" /> |  |
| Place the cursor between the speech marks after text=. Call the SAP Translation Hub suggestion service by choosing CTRL+Space. |  |
Start typing Feedba. The texts that appear come from the multilingual text repository. Note: If no texts appear in the suggestion service box, go to the optional step in the next row in this table. |  |
Select Feedback. A new key is added to the xml file, and a new entry is added to the properties file. Save the S2_ProductList.view.xml file. Conditional: If the suggestion service does not work, enter the following: {i18n>Feedback_563580} You must add this text to the end of the properties file, too. |  |
To verify that the new text was added to the properties file, expand the i18n folder. Open the i18n.properties file, and locate the new text. Optional: If you were not able to use the suggestion service to add Feedback, add the following to the end of the file: # XMIT:563580(Basis(BC)) Feedback_563580=Feedback |  |
| Save your changes. |  |
To check whether the Feedback text was added to the UI, refresh the browser window in which you ran the app with mock data. If that browser window is no longer open, select your project, right-click the localindex.html file, and choose Run –> Run with Mock Data. |  |
Note: Due to cache issues with Chrome, the new text is not always visible in the app preview after you refresh the window. To solve this problem, carry out the steps explained in the adjacent cell: |
|
| To commit your changes to your Git repository, open the Git pane in SAP Web IDE. |  |
| In the Git pane, scroll down to the Commit section. Select the Stage All checkbox, and enter a description for the commit, for example, New feedback button. |  |
| Choose the Commit and Push button, and select origin/master. |  |
To check whether your changes were pushed to the master branch in your Git repository, go to the HCP cockpit. In the HTML5 Applications section, display your application, and choose Versioning in the left pane. You should see an entry that confirms your changes were pushed to your Git repository. Note: As an alternative to using the Versioning section in your app, you can view the details of files in your Git repository in the Git service in the the SAP Cloud Platform cockpit. |  |
So, you've now added your feedback button to your app and pushed the change to your Git repository. It's now time to have SAP Translation Hub pick up the new text, translate it into 16 languages, and push those translations in to the respective language-specific properties files.
Getting Translations
| What You Need to Do | What you See |
|---|---|
Switch to the SAP Translation Hub UI (if you closed it earlier, in the HCP cockpit, choose the SAP Translation Hub tile, and choose Go to Service). Choose the translation project that you created earlier, and, on the details screen, choose Get Translations. |  |
| Log on to the Git repository by entering your SAP ID password. |  |
| A confirmation message appears for a few seconds. |  |
Choose the second tab to view and edit translations. Select a language, for example, Japanese, and check whether the Feedback text was translated. |  |
We're almost there. The feedback button has now been translated and the translations are all in their respective properties files in your Git repository. All that remains now is to take a look at those properties files in SAP Web IDE and to run the app to test the appearance of the button.
Pull the Updated Properties Files from the Git Repository to SAP Web IDE
| What You Need to Do | What You See |
|---|---|
| Go back to your project in SAP Web IDE. In the Git pane, pull your changes from the Git repository. |  |
| If you did not have the system remember your user and password in the previous exercises, log on with your SAP ID user and password. |  |
Expand the i18n folder. Check the properties file for one or more languages to verify that the new Feedback text was entered in the properties file for each target language. |  |
Select your project, right-click the localindex.html file, and choose Run –> Run with Mock Data. To verify that the Chinese translation of Feedback was stored in your project correctly, choose Chinese from the dropdown in the upper right corner of the UI. |  |
The Bottom Line
That's it for the final part of this tutorial. You now have an app that exists in 16 languages, and a feedback button to help your users share their experience with you.
- SAP Managed Tags:
