Using translatable texts with Placeholders in XML views

[former_member5235]

Maybe you know the Walktrough Tutorial in SAPUI5 SDK - Demo Kit

There is one tutorial step "Translatable Texts" that show you how to use the i18n files.
SAPUI5 SDK - Demo Kit Walktrough Step 8 Translatable Texts

And it shows also how you can use placeholders with the i18n files. BUT only in the controller, but what is if you want use it in your xml view? How does the source Code look?

There is an information in this tutorial:
The description text is not completely localized in this example for illustration purposes. To be on the safe side, we would have to use a similar mechanism as in the controller to use a string from the resource bundle and replace parts of it. This can be done with the jQuery.sap.formatMessage formatter.

Ok, and I will show you how.

At first we will build a similar app as the tutorial app:
In this code sample we have a "donate" button, a MessageToast (in java Script) which shows you how often you clicked (how much you've donated) the button, and a label which shows you the same (in XML). The text depends of the browser language, and also the position of the value which we define in the i18n files.

Create a new application with the template SAPUI5 Application (we choose the quick way)



As the view, choose the xml view and then click Finish



The template creates a complete project with all important files like the view and the controller, css files, the default i18n file etc.



At first we create a button on the XML view.

<Button text="{i18n>donateButton}" press="showMessage"></Button>

Then we go to our controller

onInit: function () {

var model = new sap.ui.model.json.JSONModel();

model.setData({

number: 0

});

this.getView().setModel(model, "view");

},

Here we create a really small model with only one value

showMessage: function () {

var oResourceBundle = this.getView().getModel("i18n").getResourceBundle();

var oViewModel = this.getView().getModel("view");

oViewModel.setProperty("/number", oViewModel.getProperty("/number") + 1);

var oText = oResourceBundle.getText("donateText", [oViewModel.getProperty("/number")]);

sap.m.MessageToast.show(oText);

}

This is our function which is called when we click the button.
In the showMessage event handler function we access the i18n model to get the text from the message bundle file and replace the placeholder {0} with the number from our data model. The getProperty method can be called in any model and takes the data path as an argument. In addition, the resource bundle has a specific getText method that takes an array of strings as second argument.



Now we look into the i18n file.
in i18n.properties add/change:

title=Donation App

appTitle = App Title

appDescription=App Description



donateButton=+ EUR 1

donateText=Already donated EUR {0}

add a new i18n file "i18n_de.properties" and add the following:

title=Spenden Applikation

appTitle = App Titel

appDescription=App Beschreibung



donateButton=+1 EUR

donateText={0} EUR bereits gespendet

Right click on your project folder, Run -> Run Configurations, choose "Run index.html" and choose the "With Frame" Preview Mode.



And then, run the App
You can switch between the different languages. It will use the i18n files to show the correct translation.







But how we can do this in XML e.g. for a label or on a button without using java script?
This can be done with the jQuery.sap.formatMessage formatter.

SAPUI5 SDK - Demo Kit API reference jQuery.sap.formatMessage

The Formatter does the work: it replace the placeholders with the actuel values.
Open your view.xml file.

After your button add a label:

<Label text="{parts: [

'i18n>donateText',

'view>/number'

],

formatter: 'jQuery.sap.formatMessage'}"/>

The Label gets parts which contain the text from the i18n file and the model data field which will fill out the placeholder {0} in the i18n text.



Note: If you use more than one placeholders in your i18n file (Hello {0} {1}) then your xml code should look like this
<Label text="{parts: ['i18n>text',
'view>/firstName',
'view>/lastName'
],
formatter: 'jQuery.sap.formatMessage'}"/>

You can pass as many parameters as you want, but the first "part" is the property key.
Save and run your application again and also test your different languages.



Here you can see the application.

And here you will find the Code.

 

More Web IDE stuff published by Technology RIG :smile:

 

 

See you

Claudi