Introduction
SAP Translation Hub (Beta) service in HCP enables you to translate short texts in HCP applications into additional languages quickly and easily. These services are available as REST services. In new release (April 2016) of SAP WebIDE, these translation services are integrated with SAP WebIDE and HTML5 application can get translated in different languages within WebIDE.
SAP UI5 Translations
All the translation in HTML5 application are done by i18n.properties files stored in webapp/i18n. Ui5 Project has a separate file for each supported language with a suffix for the locale, for example i18n_de.properties for German, i18n_fr.properties for French, and so on. When a user runs the app, SAPUI5 will load the language file that fits best to the user's environment.These translation files are bind to SAP UI5 views using ResourceModel.
You can find the details process in following links
https://sapui5.netweaver.ondemand.com/docs/guide/df86bfbeab0645e5b764ffa488ed57dc.html
https://help.sap.com/saphelp_uiaddon10/helpdata/en/91/f385926f4d1014b6dd926db0e91070/content.htm
Configuration
To enable the translation services access from SAP WebIDE, Following configuration is required.
1. Enable and Configure the SAP Translation Hub service for your HCP account.
Enable SAP Translation Hub service in HCP cockpit.
Image may be NSFW.
Clik here to view.
Figure 1 HCP Cockpit Service Page
Assign Role to user who can assess Translation services
Image may be NSFW.
Clik here to view.
Figure 2 Translation Service Role Management
2. Create HCP Destination to Translation service
Create destination on account level with name - translationHubBeta with following Property
Name = translationHubBeta
Type=HTTP
URL= https://saptranslation-<HCP trial account name>.hanatrial.ondemand.com/ui
Authentication=AppToAppSSO
Proxy Type=Internet
Additional Properties:
TrustAll=true
WebIDEEnabled=true
Image may be NSFW.
Clik here to view.
Figure 3 HCP Destination for translation services
Proper usage of Translation Service
WebIDE is integrated with Translation Data source and it suggest you the text that can be used in UI5 view files. With the use of this suggestion, translation services assures that you will get translation of this text in most of the languages.
You can choose these suggestions using CTRL + SPACE button while filling the text in UI5 view.
Image may be NSFW.
Clik here to view.
Figure 4 SAP UI5 View File
After selecting, the correct text from suggestion these text are automatically added in your project translation i18n.properties files.
Image may be NSFW.
Clik here to view.
Figure 5 Text reference bind to i18n model
Image may be NSFW.
Clik here to view.
Figure 6 i18n.properties file
By this process, you can make sure that Translation Service translates project text automatically.
Translating your Properties File
- Make sure your project is attached to a HCP Git repository.
Select HTML5 Project settings - > GIT Repository Configuration and check GIT server configuration.
Image may be NSFW.
Clik here to view.
Figure 7 GIT Configuration for Project
Select the i18 properties file of the project you want to translate -> Right-click and select Generate Translation Files
.
Image may be NSFW.
Clik here to view.
Figure 8 Option for Generation new Translation Files
Select the Languages in which translation files are required.
Image may be NSFW.
Clik here to view.
Figure 9 Translation language selection screen
Image may be NSFW.
Clik here to view.
Figure 10 WebIDE Notification for Successful Translation
Translation service automatically generates the translation files in selected language and stores in GIT remote server. You need to fetch these changes in your WebIDE using GIT Pull option.
Image may be NSFW.
Clik here to view.
Figure 11GIT Pull Operation Option
Translation files are automatically generated in HTML project i18n folder.
Image may be NSFW.
Clik here to view.
Figure 12 Translation files in Project
Image may be NSFW.
Clik here to view.
Figure 13 Translation file in German Language
Testing translations
WebIDE Test framework provide mechanism by which you can check different translation during development phase. Select Project and Run Configuration.
Image may be NSFW.
Clik here to view.
Figure 14 WebIDE Run Configuration
Enable Run setting as Preview as Frame and Run with mock data.
Image may be NSFW.
Clik here to view.
Figure 15 Run Configuration Setting
Translated languages can be change from right hand side Language Box in Test Frame.
Image may be NSFW.
Clik here to view.
Figure 16 WebIDE Test View
Image may be NSFW.
Clik here to view.
Figure 17 Test in different Language
Similarly, you can test the translation in other languages too.
I hope with this short example you are able to understand the power of Translation Hub Service, that how easily one can convert their application into multi-lingual applications.