Multi language support out of the box - UI5's pedigree

30 Days of UI5- Day 13 by DJ Adams

Message Page control

I was browsing through the controls that were new with 1.28, using the OpenUI5 SDK’s Explored app’s filter-by-release feature, and came across the Message Page control.

What caught my eye was the text on the control. When you think about it, there aren’t that many controls that have default text on them.

Looking into how this would work in other locales (this control as you see it would only make immediate sense in English-speaking countries), and how the text was specified, led me down a path that ended up at a place that reminded me of OpenUI5’s pedigree. Born inside of SAP, the enterprise scale thinking permeates throughout the toolkit, and is very visible in this context.

In the init function of MessagePage.js you can see that the control’s text property is being set to the value of the MESSAGEPAGETEXT property in the message resource bundle:

init function source code

This MESSAGEPAGETEXT property in the base resource file has the value “No matching items found.”:


Even if you know only a little about how resource models work, you may realise that there’s more to it than this. There are actually 39 different translated versions of this base resource representing many languages (more specifically locales) into which this control (and other controls) have been translated:
looking at languages

Let’s have a look at a few (with the second grep I’m omitting those that have Unicode encodings, because they’re hard to read):

looking at languages, reduced

And of course, not only does UI5’s pedigree extend to just translations, right-to-left (RTL) is also supported, out of the box.

Let’s bring this post to a close with a couple of examples. Don’t forget you can explicitly specify the language or locale with a special query parameter “sap-language” in the URL.

Here’s Hebrew (“iw”), with RTL kicking in automatically:

RTL in Hebrew

And to finish, how about another language:

Message page in Finnish

(See what I did there? :-)