Skip to Content

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.

/wp-content/uploads/2016/04/19_990362.jpg

/wp-content/uploads/2016/04/20_990363.jpg

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.

/wp-content/uploads/2016/04/1_936670.jpg

Figure 2 HCP Cockpit Service Page

Assign Role to user who can assess Translation services

/wp-content/uploads/2016/04/2_936680.jpg

          Figure 3 Translation Service Role Management

 

2. Create HCP Destination to Translation service

Create destination on account level with nametranslationHubBeta 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

/wp-content/uploads/2016/04/3_936681.jpg

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.

/wp-content/uploads/2016/04/18_983420.jpg

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.

/wp-content/uploads/2016/04/4_936682.jpg

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.

/wp-content/uploads/2016/04/5_936683.jpg

Figure 7 Text reference bind to i18n model

 

/wp-content/uploads/2016/04/6_936685.jpg

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

 

/wp-content/uploads/2016/04/7_936689.jpg

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

.

/wp-content/uploads/2016/04/8_936690.jpg

Figure 10 Option for Generation new Translation Files

 

Select the Languages in which translation files are required.

/wp-content/uploads/2016/04/9_936691.jpg

Figure 11 Translation language selection screen

 

/wp-content/uploads/2016/04/10_936692.jpg

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.

 

/wp-content/uploads/2016/04/11_936693.jpg

Figure 13 GIT Pull Operation Option

 

Translation files are automatically generated in HTML project i18n folder.

/wp-content/uploads/2016/04/12_936694.jpg

Figure 14 Translation files in Project

 

/wp-content/uploads/2016/04/13_936695.jpg

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.

 

N_1.png

Figure 16 HCP Cockpit for SAP Translation Hub Service

 

Translation Project is already created with HTML5 application name

N_2.png

Figure 17 Translation hub Service portal with HTML5 application.

 

Open Translation tab and select target language.

N_3.png

Figure 18 Edit Translation page

 

Maintained the un-suggested translation manually in provided box.

N_4.png

Figure 18 Manual translated text

 

Save the translation to GIT repository with Get Translation button.

N_6.png

Figure 19 GIT repository update

 

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

N_5.png

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.

 

/wp-content/uploads/2016/04/14_936696.jpg

Figure 21 WebIDE Run Configuration

 

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

/wp-content/uploads/2016/04/15_936697.png

Figure 22 Run Configuration Setting

 

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

/wp-content/uploads/2016/04/16_936698.jpg

Figure 23 WebIDE Test View

 

/wp-content/uploads/2016/04/17_936699.jpg

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.

To report this post you need to login first.

8 Comments

You must be Logged on to comment or reply to a post.

  1. Aditya Palekar

    Hi Vijay,

    Thanks for sharing this news! This is a big plus feature of the Web IDE and eliminates a lot of manual work and improves accuracy in translations. A boon for UI5 developers as considerable time is saved.

    Best Regards,

    Aditya

    (0) 
  2. Krishna Kumar S

    Hi ,

    In my trial account, i don’t see the “account” tab in the left. So how do we enable this beta services on HCP?

    Thanks, Krishna

    (0) 
    1. Vijay Singh Rajput Post author

      Hi Krishna,

      HCP(trial) cockpit has changed for this configuration. I have updated the Introduction section with new screen-shots.

      Best Regards,

      Vijay

      (0) 
  3. Mairead Manifold

    Hi Vijay,

    Thank you for an excellent and comprehensive blog post. However, there are a few things I am uncertain about and I would like clarification on.

    What happens when you don’t find the word or phrase you are looking for in the drop down suggestion list after typing <ctrl + space> ?

    Is it that you need to create a manual property entry in the Web IDE and manually configure the properties file too when the suggestion list doesn’t contain a suitable entry?

    From my limited experience with the Translation Hub suggestion list and how it works, am I correct in saying that the auto addition of properties entries at the end of properties file still requires the developer to annotate the entry and move it around so that the properties file is easily digestible by others?

    Can you direct me to developer instructions on using the suggestion list and how to organise the properties file.

    I assume the developers need to end up with a properties file similar in layout to the attached HTML/XML file which came from the Manage Products sample project in the Web IDE.

    Your help is much appreciated.

    Regards,

    # This is the resource bundle for Manage Products
    
    #XTIT: Application name
    appTitle=Manage Products
    
    #YDES: Application description
    appDescription=
    
    #~~~ Worklist View ~~~~~~~~~~~~~~~~~~~~~~~~~~
    #XTIT: Table view title
    worklistViewTitle=Manage Products
    
    #XTIT: Table view title
    worklistTableTitle=Products
    
    #XTOL: Tooltip for the search field
    worklistSearchTooltip=Enter a product name or a part of it.
    
    #XBLI: text for a table with no data with filter or search
    worklistNoDataWithSearchText=No matching products found
    
    #XTIT: Table view title with placeholder for the number of items
    worklistTableTitleCount=Products ({0})
    
    #XTIT: The title of the column containing the ProductID of ProductSet
    tableNameColumnTitle=Product
    
    #XTIT: The title of the column containing the product's supplier name
    tableSupplierColumnTitle=Supplier
    
    #XTIT: The title of the column containing the product's supplier web address
    tableSupplierWebAddressColumnTitle=Web Address
    
    #XTIT: The title of the column containing the Price and the unit of measure
    tableUnitNumberColumnTitle=Price
    
    #XBLI: text for a table with no data
    tableNoDataText=No products are currently available
    
    #XLNK: text for link in 'not found' pages
    backToWorklist=Show Manage Products
    
    #XTIT: The title of the products quick filter
    worklistFilterProductsAll=Products
    
    #XTIT: The count for the all products quick filter
    worklistFilterProductsAllCount=All
    
    #XTIT: The title of the cheap products filter
    worklistFilterCheap=Cheap
    
    #XTIT: The title of the moderate products filter
    worklistFilterModerate=Moderate
    
    #XTIT: The title of the expensive products filter
    worklistFilterExpensive=Expensive
    
    #~~~ Worklist Popover Fragment ~~~~~~~~~~~~
    #XTIT: The title of the popover for product dimensions
    dimensionsTitle=Product Dimensions
    
    #XTIT: Label for the product width dimension
    productWidth=Width
    
    #XTIT: Label for the product height dimension
    productHeight=Height
    
    #XTIT: Label for the product depth dimension
    productDepth=Depth
    
    #XTIT: Label for the product weight
    productWeight=Weight
    
    #~~~ Object View ~~~~~~~~~~~~~~~~~~~~~~~~~~
    
    #XTIT: Object view title
    objectTitle=Product
    
    #XGRP: Product panel title
    productTitle=Product
    
    #XFLD: Product category
    productCategoryLabel=Category
    
    # : 361235(undefined())
    productNameLabel=Test
    
    #XFLD: Product weight
    productWeightLabel=Weight
    
    #XGRP: Supplier panel title
    supplierTitle=Supplier
    
    # : 931472(undefined())
    mapTitle=Service Map
    
    #~~~ Footer Options ~~~~~~~~~~~~~~~~~~~~~~~
    
    #XTIT: Send E-Mail subject
    shareSendEmailWorklistSubject=<Email subject PLEASE REPLACE ACCORDING TO YOUR USE CASE>
    
    #YMSG: Send E-Mail message
    shareSendEmailWorklistMessage=<Email body PLEASE REPLACE ACCORDING TO YOUR USE CASE>\r\n{0}
    
    #XTIT: Send E-Mail subject
    shareSendEmailObjectSubject=<Email subject including object identifier PLEASE REPLACE ACCORDING TO YOUR USE CASE> {0}
    
    #YMSG: Send E-Mail message
    shareSendEmailObjectMessage=<Email body PLEASE REPLACE ACCORDING TO YOUR USE CASE> {0} (id: {1})\r\n{2}
    
    #~~~ Add View ~~~~~~~~~~~~~~~~~~~~~~~~~~
    
    #XTIT: Add view title
    addPageTitle=New Product
    
    #XTIT: The titel of the form
    formTitle=Product Information
    
    #XTIT: The titel of the form group
    formGroupLabel=General Information
    
    #YMSG: The not found text is displayed when there was an error loading the resource (404 error)
    newObjectCreated=The product {0} has been added
    
    
    
    #~~~ Not Found View ~~~~~~~~~~~~~~~~~~~~~~~
    
    #XTIT: Not found view title
    notFoundTitle=Not Found
    
    #YMSG: The ProductSet not found text is displayed when there is no ProductSet with this id
    noObjectFoundText=This Product is not available
    
    #YMSG: The ProductSet not available text is displayed when there is no data when starting the app
    noObjectsAvailableText=No Products are currently available
    
    #YMSG: The not found text is displayed when there was an error loading the resource (404 error)
    notFoundText=The requested resource was not found
    
    #~~~ Error Handling ~~~~~~~~~~~~~~~~~~~~~~~
    
    #YMSG: Error dialog description
    errorText=Sorry, a technical error occurred! Please try again later.
     

     

    (0) 

Leave a Reply