Skip to Content
Previous

Prepare sample Fiori app for translation

By ianarm

Create an app based on a sample Fiori app and prepare it for translation with SAP Translation Hub.

You will learn

You will use a sample Fiori app to create a new HTML5 app and prepare it for translation using SAP Translation Hub.

Details


Step 1: Locate SAP Web IDE in the cockpit

In the service catalog, locate the SAP Web IDE tile by searching for Web, and then choose the tile.

Locate SAP Web IDE
Please log in to access this content.
Step 2: Open SAP Web IDE

Choose Go to Service.

Open SAP Web IDE
Please log in to access this content.
Step 3: Create a new project from a sample application

To get started with the app, choose New Project from Sample Application.

Choose new project
Please log in to access this content.
Step 4: Choose shop app

To add a project with the required files to your account, choose Shop and then Next.

Choose shop app
Please log in to access this content.
Step 5: Accept standard license conditions

Accept the standard license conditions by choosing I agree and then Finish.

Accept conditions
Please log in to access this content.
Step 6: Define project settings

To be able to view the app in multiple languages, you need to adjust the language settings. To do that, right-click the project name and choose Project Settings.

Define project settings
Please log in to access this content.
Step 7: Define language settings

On the Languages tab, make the following settings:

Field Name Value
Application Domain Sales
Supported Languages Add the languages of your choice; this tutorial uses the following: Danish, Dutch, English, Finnish, French, and German
Default Language English

Once you’ve finished, choose Save and then Close.

Define language settings
Please log in to access this content.
Step 8: Finalize project settings

To complete the configuration needed for SAP Translation Hub, add the location of the resources file to the project settings. Open the .project.json file and enter i18n as the "resourceModelName":

Add i18n to project.json file

Save the .project.json file.

Please log in to access this content.
Step 9: Create run configuration

To test the application with mock data from a local system, you’re going to need a special run configuration. To do this, right-click the application and choose Run > Run Configurations.

Run configurations
Please log in to access this content.
Step 10: Choose Web application

Choose + > Web Application.

Web application
Please log in to access this content.
Step 11: Assign run application file

Now you need to do the following:

  • Under File Name, enter the application file name testFLPservice.html.
  • Under Preview Mode, choose With Frame.
  • Under Mock Data, select Run with mock data.

Once you’ve done that, choose OK.

Run application
Please log in to access this content.
Step 12: Open app in Fiori launchpad

Now you want to see what the application looks like by accessing it from a Fiori launchpad. To do this, choose the green button shown below.

Open with Fiori Launchpad
Please log in to access this content.
Step 13: Open the app

Choose the Shop tile.

Shop app

To make things look more realistic, the app uses mock data:

Fiori app with mock data
Please log in to access this content.

Next Steps

Updated 05/20/2017

Time to Complete

10 Min.

Beginner

Prerequisites

Next Steps

Next
Back to top