Skip to Content
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.

/wp-content/uploads/2013/09/ui5_trans1_285785.jpg

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

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

/wp-content/uploads/2013/09/ui5_trans2_285786.jpg

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.

/wp-content/uploads/2013/09/ui5_trans3_285787.jpg

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

/wp-content/uploads/2013/09/ui5_trans4_285788.jpg

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

/wp-content/uploads/2013/09/ui5_trans5_285790.jpg

Now it is time to do translations!


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

/wp-content/uploads/2013/09/ui5_trans6_285794.jpg

Select SAPUI5 Texts as displayed in below screen.

/wp-content/uploads/2013/09/ui5_trans7_285795.jpg

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

/wp-content/uploads/2013/09/ui5_trans8_285796.jpg

Maintain the required translation and click on Save.

/wp-content/uploads/2013/09/ui5_trans8_285796.jpg

That’s it!  You are almost done πŸ™‚ 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

/wp-content/uploads/2013/09/ui5_trans10_285800.jpg

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

/wp-content/uploads/2013/09/ui5_trans11_285801.jpg

Closing Remarks –

We can easily do the translations for SAPUI5 application and can have i18n of SAPUI5 application. Your Comments/Suggestions are most welcome πŸ™‚

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

/wp-content/uploads/2013/09/ui5_trans12_309773.jpg

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)

/wp-content/uploads/2013/09/ui5_trans13_309783.jpg

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.

To report this post you need to login first.

7 Comments

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

  1. Michael Herzog

    Hi Chandrashekhar,

    this post was really helpful, thanks! πŸ™‚

    Please note: To avoid a runtime error in context HR-Renewal and translation, i had to implement note 1930822.

    Regards

    (0) 
  2. Patrick S

    Hi Chandra,

    do you know, how the modifications can be transported? I can’t se an option to add the modification to an transport request.

    Regards,

    Patrick

    (0) 
  3. Sagar Patil

    Hi Chandra,

    I am working on one app which should provide an option for user to switch the language.I have maintained different languages property files and it is working fine. But my requirement is , on switching to different language  I want to change the data which is coming from the back end server. Lets say data which is bound to Drop down box  is displayed in  English and on switching to German language I want to change the language of data which is bound to Drop down to German language.So please help me to fix this. Hope we need to reload the url/metadata.

    Thanks and Regards,

    Sagar M Patil

    (0) 
  4. Uwe Kunath

    Thanks a lot, Chandra!

    Great post!

    Maybe the german translation “Krankheitsüberträger” for “Carrier” is not really what you are looking for (“carrier of a disease”). You may want to use “Fluggesellschaft” instead πŸ™‚

    Regards,

    Uwe

    (0) 
  5. Himanshu Kandpal

    Hi Chandra,

    Thanks for the wonderful blog and all the help it provided to me .

    Can you help me understand as to how can I translate a text more that 255 chars in length . The text is maintained in  SAP as shown by you but gets truncated at the 255th position . I do not want to split the text into two parts .

    Is it even possible ?

    Thanks,

    Himanshu

    (0) 
  6. Denis Galand

    Thank you for the useful blog πŸ™‚

    I have one fundamental question that’s i can’t find the answer, how can we dynamically fill theΒ sap-ui-language based on the logon of the user?

    There is this page explaining the parameter, but it is for a URL tile, not an custom fiori app from LPD CUST

    https://uacp2.hana.ondemand.com/viewer/a7b390faab1140c087b8926571e942b7/7.51.1/en-US/ba45ed0beb8d4c64aadf109ae6cd0fd7.html

    So where and how do we configure dynamic logon language for these custom fiori apps?

    (0) 

Leave a Reply