Skip to Content

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):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
/wp-content/uploads/2013/07/2_240883.jpg /wp-content/uploads/2013/07/6_240898.jpg
/wp-content/uploads/2013/07/3_240896.jpg /wp-content/uploads/2013/07/7_240902.jpg
/wp-content/uploads/2013/07/9_240903.jpg /wp-content/uploads/2013/07/8_240904.jpg

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.


You must be Logged on to comment or reply to a post.
  • Hi Murali,

    i like the idea, perhaps the next step is to create an infoobject “Titles” that is language dependent? and filling the titles from the application at start up script?

    • I like your idea of keeping every text in BW, so that it is centralized. I can assign the info-object as the datasource, but not sure how to get the dimension value (if text is the dimension). getData only works for a measure. I can get dimension value only from other components not datasource directly. Let me know if you have a way to do that.

      Meanwhile, I find maintaining it in the CSS is simpler, but the texts are not centralized, rather distributed across all applications.

      I would prefer SAP to provide a way to incorporate i18n internationalization, so that we maintain text files for different languages and the application retrieve them accordingly.

      Thanks for your suggestion

      • Hi Murali,

        i was just brainstorming as i liked the direction you are going.

        I haven’t got the time at the moment to work it out (final stages of book writing) but i think

        I you set a datasource with a 2 infoobject filter (application + title number)

        then you apply the filter on the datasource our application and title number 1.

        then with the method .GetFilterText you get a string value of the applied filter

        if you use this value to setText on the title we might have something.

        If 1.2 would have some kind of loop function in script then it would become even better.

        This is off course also brainstorming 😉

        • I was able to test it out and it works perfectly fine.

          As you suggested, I used the following:

          DS_2.setFilter(“BDSTITLE”, “TTL001”);

          DS_2.setFilter(“BDSTITLE”, “TTL009”);

          DS_2.setFilter(“BDSTITLE”, “TTL013”);

          The only negative is the datasource is accessed multiple times.

          I can use an array to set the filter and pass it in one shot, but the return (getFilterText) is a string. If only we had split() function, we can have the returned values in a array and use them. This way, datasource can be accessed only once.

          The other potential issue is texts cannot be more than 60 characters (length of long text).


          • You could use a 2 column data source and use getDataAsString to pick exactly the value that you would need and if needed extend the data source by another column to have another language


    • Hi, Thanks for your blog. I would like to know if cross tab data can be translated. My browser language and CMC preference locale view are both in English. and my query is maintained in English and local language. but my dashboard is still displayed in local language. How do I translate it to English. thanks, Bhat

  • Hi Murali,

    The CSS in my case is not working. I have set the language of browser to FR still the text is just blank. Would you please provide what other settings changes are required for the CSS to work?

  • Hi,

    is there actually a BIAL script method to retreive the current logon language (locale), e. g. something like APPLICATION.getUserLocale() ???

    This would be required, if you need to dynamically create language-dependent text strings.


      • Hi Mustafa,

        what about dynamic texts, which make use of text elements which are not yet known during runtime. E. g. some script logic like

        myText = “Hello” + DS_1.getVariableText(“myVar”) + “World”;

        Here, I would have problems to translate “Hello” and “World” according to the logon locale of the user, if I would not know it…



        • Hi Philipp,

          Even with dynamic texts, there is no need to explicitly know the locale.  In summary, the implementation steps are as follows:

          1.  Create a Text Pool component in your application and define the dynamic text keys and text in original language, as shown below:


          2.  Define the translations for these dynamic texts for each required language as described in the post  Multilingual Design Studio application using Translation Management Tool

          3.  Using your example, reference the relevant dynamic texts in BIAL script as follows:

          var myText = TEXT_POOL.myTextKey1 + DS_1.getVariableText(“myVar”) + TEXT_POOL.myTextKey2;

          The Text Pool component will automatically return the correct text description based on the current language / locale setting.