Translations in SAPUI5 Application

[ChandraMahajan]

What's new
Update [2013-10-28] - Added 2nd way of translating SAPUI5 Application using ".properties" files

Introduction –

In this blog, we will see how we can translate various texts of SAPUI5 application. You can also refer link https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/UI5BSPRepositoryTaskTranslation.html for more information. In this blog, I will elaborate few steps which are required for translation.

Steps -

Use report /UI5/TEXT_FILE_GEN_TRANS_KEY to generate unique GUID.

It will generate unique GUID. Copy the entire line which should be pasted as 1^st line into SAPUI5 “.properties” file.

Below is the SAPUI5 application screen with mapping of various texts to .properties file.

Sample File – i18n.properties

# SAPUI5 TRANSLATION-KEY 005056B02EE71EE389834C6FD9368C95

#XHED,60

APP_TITLE = SAP NetWeaver Gateway Sample Apps

#XDAT,35

WORKSET_TITLE = Carrier

#XTXT,35

CARRIER__LIST_TITLE = Carrier

#XCOL,40

CARRIER_CARRID = Airline ID

#XCOL,45

CARRIER_CARRNAME = Airline

#XCOL,60

CARRIER_CURRCODE = Airline Currency

#XCOL,15

CARRIER_URL = URL

Once this step is completed, deploy SAPUI5 application to ABAP server. You can see the content in deployed BSP application.

Table /UI5/TREP_TEXT will show the information of translation entries.

Table /UI5/TREP_FILES (UI5 mapping table for property files with text entries) will show the path of .properties file and BSP application name.

Now it is time to do translations!

Go to transaction SE63. Access menu path ABAP Objects --> Short Texts

Select SAPUI5 Texts as displayed in below screen.

Provide unique GUID which we got as explained in 1^st step. Select source and target language and click Edit. Here I am displaying translation for German and French language.

Maintain the required translation and click on Save.

That’s it!  You are almost done :smile: and now its time to run the application !

Run the application and provide correct value to URL parameter sap-ui-language.

SAPUI5 Application with URL parameter sap-ui-language = DE

SAPUI5 Application with URL parameter sap-ui-language = FR

Closing Remarks –

We can easily do the translations for SAPUI5 application and can have i18n of SAPUI5 application. Your Comments/Suggestions are most welcome :smile:

Update[2013-10-28] (2nd way of translating SAPUI5 Application) –

There is other way to do translation of SAPUI5 application.

We can add ".properties" file corresponding to each language as below.

for e.g

• English - i18n_en.properties
• German - i18n_de.properties
• French - i18n_fr.properties

By adding files in this way, we can simply do the translation for SAPUI5 application. you can deploy this application to backend ABAP server and test it by providing url parameter sap-ui-language=<language_key> (en, de, fr etc)

With this approach, you need not to do translations using SE63. This is simple way of doing translations provided you maintain same UI element ID in all ".properties" file as explained in above screen snaps.