Skip to Content
Author's profile photo Ian Armstrong

Part 4: Change Your App and Start the Translation Process for Your Fiori App Again

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 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))


Save your changes. Section4.1_f.png

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:

  1. In the top-right corner of the browser window, open the Chrome menu (button with horizontal bars).
  2. Choose History and recent tabs -> History.
  3. Choose Clear browsing data.
    A dialog box appears.
  4. In the drop-down menu, select how much history you want to delete; to clear your entire browsing history and cache, select the beginning of time.
  5. Check the boxes for the data you want Chrome to clear; at the very least, select Browsing history.
  6. Choose Clear browsing data.
To commit your changes to your Git repository, open the Git pane in SAP Web IDE. Section4.1_h.png
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. Section4.1_i.png
Choose the Commit and Push button, and select origin/master. Section4.1_j.png

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. Section4.2_b.png
A confirmation message appears for a few seconds. Section4.2_c.png

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. Section4.3_a.png
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. Section4.3_b.png

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.

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.