Design Studio SDK 1.6 speaks now Japanese

[Martin-Pankraz]

Since Design Studio 1.5 it is possible to design your dashboards for multi-language scenarios using the standard component TEXT_POOL alongside with the standard SAP backend localization features which work out of the box (e.g. date formats according to your user’s language settings). But what about SDK components? No worries we got something for you.

i18n and Localization

Localization and internationalization in terms of software is often abbreviated as i18n. SAP uses the term as well for their translation approach with their SAPUI5 library.

At first you need means to identify the user’s locale. You can do so using the method:

     this.sCurrentLocale = sap.ui.getCore().getConfiguration().getLanguage()

This method will return a language identifier (e.g. “de” for German) which again can be used to load the needed properties file containing the translations. Those files can be loaded as needed using SAP’s resources library exposed through jQuery. Please note it is not necessary to include the library as it is already loaded by default.

     jQuery.sap.resources({url : <path to default translation file>, locale: this.sCurrentLocale});

Of course there are many other libraries/plugins even jQuery based that support this localization mechanism as well. For this article I stick with the SAPUI5 implementation though.

Properties Files

The properties files need to contain key value pairs. A key identifying the property and a corresponding text. A file naming convention using SAP language codes as suffixes enables you to make your SDK properties and texts translatable (for example “i18n_ja.properties” for Japanese translations). You need to provide a default file from which the localized versions can be derived. In my case with regard to the example above the name would be “i18n.properties”.

Example of property file content:

     # SCN SDK community properties file to support text translations for our SDK components

     # Author: Martin Pankraz

     # Version 1.0 (21st of Feb 2016)

     Your_identifier=my translated value

How to provide the URL to the properties file to the SDK component? The easiest way is to add a property to your “contribution.xml” file of type Url. The Design Studio framework will make sure the access path is correct and offer you a file choosing dialog on design time. You need to choose your default file for the property and put all translations on the same folder! The library will load the translations by adding the suffix to the name of your default file. So you need to make sure the file naming is correct. Check the method to load translations again below.

     var oBundle = jQuery.sap.resources({url : <path to default translation file>, locale: this.sCurrentLocale});

The variable oBundle will contain the key value pairs provided in your loaded language file. You can access them using:

     oBundle.getText(“Your_identifier”);

Now you can assign this text to any of your texts on your SDK component and be ready to support multiple languages.

I would advise to make sure to supply default texts in English when no properties file is loaded for ease of use of the dashboard designer. In addition to that it would be nice to provide a small documentation so that the designer can learn what keys to use on the properties files to actually offer a new language other than English.

SAP Standard Texts

If you want to use SAP’s standard tools to offer translations for your SDK component you can use the property type “Text” on your “contribution.xml” file. In doing so this property will be translatable (check page 29 on the Developer Guide: Design Studio SDK 1.6).

Testing Localization

An easy way to test your SDK component localization implantation is to add an additional language to Internet Explorer (Intern options -> Language -> Add) and move it to the top of the list to make it your default locale. Now you can check if the corresponding properties file is loaded and your texts are translated as intended. For my first implementation I added Japanese and noticed that my i18n_ja.propties file was loaded successfully.

Make sure the character encoding supports the character set of your target language.

Final Words

To rely on SAP’s standard translation tools you should stick to the standard TEXT_POOL component and the SDK component property type “Text”. If that is not necessary the SAPUI5 resources library approach is also very easy, flexible and on top of it SAPUI5 compliant. For the community repository we haven’t decided yet how to approach this topic on a bigger scale. We have some ideas to integrate it with our shared components and modify our code generators so that newly generated community components are translatable out of the box. Modifying all components to use properties of type “Text” is also a possibility. You can check the coding for the SAPUI5 approach in action on our MultiComboBox component.

As always feel free to ask lots of follow up questions.

Yours

Martin