Design studio SDK: Text component: translate text and display comments

[former_member189161]

This blog is written by Arwold Koelewijn (sr SAP BI consultant, Tacstone) and Attila Houtkooper (sr Web Developer, Roughdot websolutions).

Introduction

This component is used to translate descriptions of elements and to display comments in the dashboards, based on a datasource as input.

As of DS1.4 standard functionality is available to do translating. However, this component will remain useful since:

• The business users are in charge of translating. Changes and additions are easily uploaded into SAP BI;
• Dashboard comments (up to 2000 characters) are loaded from a source system;

Initially we started of using Design Studio scripting to do the translating.

But since it can occur that several lines of 60 characteristics need to be compounded, it is more efficient to do this in a SDK component. Also, in our environment it turned out to be better for performance as well.

How does it work?

For example, the text:

‘There were sufficient opportunities (assignments, activities, interim exams) for my study progress to be tested during the course’

Is delivered by the datasource (DS_TAAL) as:

In the properties of the component, the language (EN) and de key (T142) is set.

The component uses the language (EN) and the key (T142) to retrieve the corresponding data set, and join the rows together in one string.

The dashboard comments are stored in a similar way.

The source systems delivers the comments in html format, example:

<strong>This course</strong> has been well attended and well reviewed.</br></br>Next year we will improve the course in the following way:<ul> <li>smaller groups in the tutorials</li> <li>new reading material</li></ul>  </br>Further will we…

In BW using start- and endroutines this string is cut into pieces of 60 characters.

Example of a dashboard using translated text and comments

The component has been build by Attila Houtkooper, he will shed some light on the scripting of the component in this blog

Building the component

Well, there were a couple of considerations from the get-go.

The component needed to have a simple interface that allowed updates through scripting, such as setting the language automatically. It also needed to be fast; this component is used a lot throughout a single report, so there it can take up only a small footprint in terms of memory usage. Following the best practice of Don’t Repeat Yourself (DRY), the translation data is loaded only once, when the page loads.

To accommodate for this the interface of the component became quite simple, there are setters (and for no particular reason also getters) for the following properties: language, phrase (identifier) and data(source).

• Language; denotes the internal key representing a language, this can be a locale such as “en_US” or “de_DE”, in our implementation simple two letter codes are used, namely “EN” and “NL”.
• Phrase (identifier); this is the specific phrase identifier that is to be displayed, e.g. “T142”.
• Data(source); this is where the datasource (DS_TAAL) goes that is described above.

When translations are larger than 60 characters, the string gets split up into blocks of 60 characters and within the component it is important to put them together again. The translations are aggregated as follows:

The component will want to look up a translation with a simple 2-dimensional map; the first level being the language and the second being the phrase identifier.

The most interesting logic is where the different parts of a phrase are concatenated together to form a single string. This logic is described in the JavaScript source below:

// It is assumed to be chopped up into chunks of max 60 characters each.
// These chunks are concatenated and stored for displaying.
customComponent_translations = {};
var dimensions = resultSet["dimensions"];

resultSet["axis_rows"].forEach(function(valueIndexRow) {
var languageIndex = valueIndexRow[0];
var languageId = dimensions[0]["members"][languageIndex]["text"];
var phraseIndex = valueIndexRow[1];
var phraseId = dimensions[1]["members"][phraseIndex]["text"];
var chunkIndex = valueIndexRow[3];
var chunkText = dimensions[3]["members"][chunkIndex]["text"];

       // If there are no translations aggregated yet for the language, add a new map.
if (customComponent_translations[languageId] === undefined) {
customComponent_translations[languageId] = {};
}

       // If the phrase (identifier) has not been encountered before, initialize it.
if (customComponent_translations[languageId][phraseId] === undefined) {
customComponent_translations[languageId][phraseId] = "";
}

       customComponent_translations[languageId][phraseId] += chunkText;
});

Two elements of the data source are used; the axis_rows and the dimensions. Looping through the axis_rows, we assume that the data is ordered as follows: languageId, phraseId, chunkText. It is the chunkText that may only be a part of the entire text. Notice that while getting the positions of each of these values an index is skipped. Element 2 contains a serial number of the chunk. We assume the data to be ordered so we do not make use of the index.

Once all important values (languageId, phraseId and chunkText) have been identified, subsequently the language and the phraseId will be initialized if necessary. After that the chunkText is added to the value of the phraseId.

I hope you enjoyed reading about the TranslatedText component, and I look forward to any comments in the section below.

Happy hacking :smile:

To conclude

Attila has placed the component in the directory: https://github.com/am-houtkooper/translated-text-design-studio-component

We have not tried to place it in the SDK Development Community yet, maybe later.