How To: Internationalize your Design Studio Application..

A few days ago there was a question about translating the DS application. To that question, I quoted the Admin Guide which talks about Languages as a suggestion/solution.

Today, I was able to demo an application running on SAP BW, presenting in both English and German. See below for the screenshots.

In this blog, let me walk through the process in achieving Internationalization of Dashboards.

In my application there are multiple components that need to be translated

a) Title (static text)

b) Dropdown Box titles (static text)

c) Dropdown Box contents (data from BW)

d) Crosstab contents (data from BW)

When the application is run on the browser, the browser has a Language setting which can be manually changed (as I did for my demo) or set to the User profile by default.

When you look at the source code of the application, you can notice, SAP uses the lang component as shown below:

Using this language setting, I can dynamically control the text of the textboxes using pseudo classes (either :before or :after – as the actual text is set to blank) of CSS. See below for the code I used for my Application title. When browser language is English, my title is “USA – Population by Race”, alternatively when it is German, it switches to “USA – Bevölkerung nach Herkunft”.

.txtHdr:lang(en) {
}
.txtHdr:lang(en):before {
content: "USA - Population by Race";
}
.txtHdr:lang(de){
}
.txtHdr:lang(de):before {
content: "USA - Bevölkerung nach Herkunft";
}

I use the same technique for the dropdown titles too.

There are two types of data that comes from BW. Master Data texts and Meta Data. For any customer/client who has international presence, these two will be maintained in BW. In my case, I have to build them.

1) Master Data Texts –  For this demo purpose, I made State Names as language dependent texts, even though they are proper nouns with same text in English and German. For demo purpose, I made English text as all UPPERCASE and German text as all lowercase

2) Meta Data – For all  Infoobject, I created German equivalent of the English description texts (I don’t know German and relied completely on Google Translate – so pardon my mistakes)

Both the dropdown boxes and the crosstab are bound to the BW query and hence get the language dependant data from BW. Following is the screenshot of both the cases.

English	German

I tested this application on both IE and Chrome and both worked fine.

Following is the Design Studio screenshot showing all the components.

This is a simple demo, but for complex projects that uses hardcoded texts and text validation logic, we have to wait until SAP provides Translation/Internationalization tools.

I hope this How-To helps anyone working on Internationalization projects.

Thanks.