Where are you?
You're currently reading the second 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 things get a little more interesting. We leave behind the preparation stuff and move on to cool things in SAP Web IDE, the development environment on SAP Cloud Platform. To make things a little easier, we've prepared an app that you can import straight into SAP Web IDE. The story then continues something like this:
- Once you've imported the app, you add a new text to the app by leveraging the lookup capabilities of SAP Translation Hub's suggestion service.
Not only does this mean you can reuse existing texts, it also adds the text and ID to the properties file, which is a big help if you're adding lots of texts. - You then need to put your app's project in a Git repository - to stick with one integrated platform, we show you how to use the Git repository in SAP Cloud Platform.
Accessing SAP Web IDE
| What You Need to Do | What You See |
|---|---|
In the navigation tree of the SAP Cloud Platform cockpit, choose Services. In the Search box, enter Web. Choose the SAP Web IDE tile. |  |
| Choose Open SAP Web IDE. |  |
If the automatic logon feature in SAP Cloud Identity is not active, log on with your user and password of SAP ID Service. Note: To avoid having to log on each time, choose Remember me. |  |
| SAP Web IDE opens. |  |
Now that you're in the development environment, it's time to grab the app that we prepared.
Importing a Fiori Project
You can use any app for this part, but to save time, simply download our simple shop app to get started in no time at all.
| What You Need to Do | What You See |
|---|---|
Open the mysimpleshop folder on GitHub. Choose View Raw and save the my_simple_shop.zip file in a folder that you will be able to locate easily. You'll need to navigate to this folder in the next step. |  |
| In SAP Web IDE, right-click Local, and choose Import -> From File System. |  |
Do the following:
|  |
Open theMy_simple_shop project that you imported in the previous step and locate the localindex.html file in the file structure on the left. Right-click thelocalindex.html file, and choose Run –> Run with Mock Data. |  |
A Fiori Web shop UI appears with some texts that you are going to translate in the subsequent exercises. Note: You will translate the field labels (Image,Name, Description, and so on), not the texts that describe the actual content of the Web shop, such as Quality cables for notebooks and projects in this example. |  |
Drill down to the product details by choosing any product in the list.
The field labels (Product ID, Description, and so on) that you see in the screenshot on the right are also texts that you will translate. |  |
You have now imported a sample app into SAP Web IDE. You're now going to add a text by using SAP Translation Hub's suggestion service.
Use Suggestion Service to Add New UI Text
| What You Need to Do | What You See |
|---|---|
| Before you translate the texts in the app, you would like to add a title called List of Products to the area highlighted yellow in the adjacent screenshot. |  |
Switch to the browser tab in which SAP Web IDE is open, and expand the view folder. Double click the S2_ProductList.view.xml file, and search for <Page id="productListPage" title="" |  |
Place the cursor between the two speech marks (""). To access the suggestion service, choose CTRL+Space. |  |
Start typing List of Produ. 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 two rows lower down this table of steps. |  |
Select List of Products. 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. |  |
Optional: If the suggestion service does not work, enter the following: {i18n>List_of_Products_345925} You must add this text to the properties file, too (see optional step in next row). | |
To verify that the new text has been added to the properties file, expand the i18n folder, and open the i18n.properties file. Optional: If you were not able to use the suggestion service to add List of Products, add the following to the end of the end of the i18n.properties file: # YMSI:345925(Basis(BC)) List_of_Products_345925=List of Products |  |
| Save both changed files. |  |
To check whether the text has been added to the UI correctly, refresh the window in which you ran the app with mock data. If you closed that window, choose the Run button in SAP Web IDE. |  |
Note: Due to cache issues with Google 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: |
|
Now that you've added a new text to the app, you need to deploy the app to SAP Cloud platform and push the app files to the Git repository of SAP Cloud Platform.
Deploying Your App and Pushing Project to Git Repository
| What You Need to Do | What You See |
|---|---|
| Deploy your app to SAP Cloud Platform by right-clicking your project, and by choosing Deploy –> Deploy to SAP Cloud Platform. |  |
| Log in to SAP Cloud Platform. |  |
Check the
Choose Deploy. |  |
A message confirming the successful deployment appears. Choose Open the application’s page in the SAP Cloud Platform cockpit. |  |
To manage the application’s source code in Git, you connect your project to the Git repository on SAP Cloud Platform. To do this, you need the URL for your application in the Git repository. Choose Versioning on the left and copy the Git repository URL. Note: Although you could use the URL to edit your app in any Git client, during the exercises, you always edit the app online in SAP Web IDE. You can also use the Versioning section to check when your Git repository was updated. You can check the versions of your app at any time during the exercises to verify that a particular step was carried out correctly, such as translations being updated. |  |
| Optional: As an alternative to using the Versioning section to see what is happening with your app files in the Git repository, you can view the contents of the Git repository by using the Git service in the service SAP Cloud Platform cockpit. |  |
| Go back to SAP WEB IDE and choose the Close button. |  |
To connect your project to the SAP Cloud Platform Git repository, you initialize the local repository. To do this, right-click your project and choose Git -> Initialize Local Repository. |  |
In the Configure Git Repository window, paste the URL that you copied from the application’s page in the SAP Cloud Platform cockpit. Choose OK. |  |
| Select your project in the left frame and open the Git pane. |  |
| To be able to work with the content in the remote repository, you must first pull the content structure from the remote 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 content structure was pulled successfully. Note: The message appears for only a few seconds. |  |
Select the Stage All checkbox and write a short description for the commit. Choose Commit and Push, and select Remote Branch. |  |
| Select origin/master and choose OK. |  |
A message confirms that the app content was pushed successfully. Note: The message appears for only a few seconds. |  |
Optional: To verify that the app content was pushed to the Git repository, check the versions of the HTML5 app in SAP Cloud Platform cockpit. You should see at least two commits here. |  |
The Bottom Line
That's it for this part of the tutorial. You've imported a ready-made app into SAP Web IDE, added a text - complete with internationalization steps - to the app, and pushed the content of the app to the Git repository of SAP Cloud Platform.
Now it's time to translate the app in Part 3: Create a Translation Project and Translate Your Fiori App.
- SAP Managed Tags:
