Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Vijay_S_Rajput
Advisor
Advisor

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.


 


To enable the Beta service in HCP trial account. Following Configuration is need to updated in you trial account setup.


1. Click on Europe(Trial) in HCP cockpit and edit account configuration.





Figure 1 : Account setting to enable beta features


 

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.



Figure 2 HCP Cockpit Service Page


Assign Role to user who can assess Translation services



          Figure 3 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



Figure 4 HCP Destination for translation services

 

to using the authentication type AppToAppSSO to work, Principal Propagation must be enable in HCP account Trust settings.



Figure 5 HCP Trust Configuration

 

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.



Figure 6 SAP UI5 View File

After selecting, the correct text from suggestion these text are automatically added in your project translation i18n.properties files.



Figure 7 Text reference bind to i18n model

 


Figure 8 i18n.properties file

 

By this process, you can make sure that Translation Service translates project text automatically.


 

Translating your Properties File



  1. Make sure your project is attached to a HCP Git repository.


Select HTML5 Project settings - > GIT Repository Configuration and check GIT server configuration.


 


Following following blog to atttach your HTML5 application with Git repository


http://scn.sap.com/docs/DOC-72610#DeployingAppPushToGit


 




Figure 9 GIT Configuration for Project

 

Select the i18 properties file of the project you want to translate -> Right-click and select Generate Translation Files

.



Figure 10 Option for Generation new Translation Files

 

Select the Languages in which translation files are required.



Figure 11 Translation language selection screen

 


Figure 12 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.


 



Figure 13 GIT Pull Operation Option

 


Translation files are automatically generated in HTML project i18n folder.



Figure 14 Translation files in Project

 


Figure 15 Translation file in German Language

 

Since this service is in beta stage, All the translations is not provided by service automatically. For rest of translation, it manually need to add from Translation Hub Service.

 



Figure 16 HCP Cockpit for SAP Translation Hub Service

 

Translation Project is already created with HTML5 application name



Figure 17 Translation hub Service portal with HTML5 application.

 

Open Translation tab and select target language.



Figure 18 Edit Translation page

 

Maintained the un-suggested translation manually in provided box.



Figure 18 Manual translated text

 

Save the translation to GIT repository with Get Translation button.



Figure 19 GIT repository update

 

Go to WebIDE , HTML5 application and pull the latest git updated.



Figure 20 WebIDE GIT Pull

 

Testing translations


WebIDE Test framework provide mechanism by which you can check different translation during development phase. Select Project and Run Configuration.

 



Figure 21 WebIDE Run Configuration

 

Enable Run setting as Preview as Frame and Run with mock data.



Figure 22 Run Configuration Setting

 

Translated languages can be change from right hand side Language Box in Test Frame.



Figure 23 WebIDE Test View

 


Figure 24 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.

8 Comments