Localized ui5 Application

This post show how to create Multilingual Apps with an dynamic Switch Button.

The Basic Concept of creating an Multilingual App is quite common.

But it includes also some Points you need to know to be successfull.

The Samplecode includes a SegmentedButton which delivers “on the fly Language switch”.

This was the main Difficultys I had to solve. Loading Language Resources only is not to difficult.

Step 1: Create Ressource Files which contain the Translations

As you see you can place an folder below WebContent and create within this as many language files as you need.

In this Solution we have the Standardfile tis_ui5.commons.frontendtext.properties and three Language alternatives (de / en / ru).

The Content includes a List of Item-Names and the related Translation:

MyButtonText=This is the Button Text
MyLabelText=This is the Label Text

You can do this for every Language you need.

Step 2: Initialize Localization

In you View, or your HTML File where you want to Localize your Content you detect first the Client Language:

var locale = sap.ui.getCore().getConfiguration().getLanguage();

Next you have to load the Resource. In this Case I use ResourceModel:

var obundModel = new sap.ui.model.resource.ResourceModel({bundleUrl:'localization/tis_ui5.commons.frontendtext.properties', bundleLocale:locale});
sap.ui.getCore().setModel(obundModel, 'myResourceKey');

To load the Resource you need to pass the relative Path to the default Resourcefile and the Locale you want to load. In this case we load the default Client Language. The Second line is important to keep the Model Accessable. the String myResourceModel is just a Name you give the Model

Step 3: Create a Control which displays your localized Text

In this case I use a Label. Sure there are many ways to do that…

var oLabel = new sap.ui.commons.Label({id: 'l1', text:'{myResourceKey>MyLabelText}'});
oLabel.setModel(obundModel, 'localization/tis_ui5.commons.frontendtext');
oLabel.placeAt('SomeDivId');

The first Line creates the Label Object, passes an ID for it and uses the global Resourcepath myResourceKey followed by a > and again followed by the Item-Name of the Resource (MyLabelText).

The second Line binds the Label to the Model. In this case you have to pass the Path to the Resource (without .properties).

The third Line places the Label into an given DIV-Tag (Which you have to place into the HTML).

Step 4: Switching the Language

Basically you are done already, but – as my desire was – when you want to switch the language dynamically, then you need to set the Model new and (which I never found described anywhere) recall the Globalization.

In this Example I use a SegmentedButton to switch, but you can use anything you like

  var oSegmentedButton = new sap.ui.commons.SegmentedButton({id:"SBLang",buttons:[new sap.ui.commons.Button({id:"But_en",text:"EN"}),
new sap.ui.commons.Button({id:"But_de",text:"DE"}),
new sap.ui.commons.Button({id:"But_ru",text:"RU"})]});
  oSegmentedButton.placeAt("langSelection");
  oSegmentedButton.setSelectedButton("But_" + sap.ui.getCore().getConfiguration().getLanguage());
  oSegmentedButton.attachSelect(function(oEvent) {
  locale = oEvent.getParameters().selectedButtonId.replace('But_','');
  obundModel = new sap.ui.model.resource.ResourceModel({bundleUrl: 'localization/tis_ui5.commons.frontendtext.properties', bundleLocale:locale});
  sap.ui.getCore().setModel(obundModel, 'myResourceKey');
  });

To Line 5 I create the Control with three Buttons and place it to the Div langSelection.

At Line 7 I highlight the Button of the default Language.

From Line 8 onward I attach the Select-Event.

Finally it is important to initialize the Model with the selected Language newly and to re-Globalize it (getCore().setModel(…). ).