Preface – This post is part of the UI5 Programs series.

i18n, which stands for internationalization, are Translatable Texts, all in a single place. It means a developer should keep all the texts of their app within i18n so that, in case it is required to have another version of the app with a different language, then all together, a copy of i18n can be made, and those texts can be converted into another language at once.

Suppose you have only one version that too in English; then you just need a single i18n file. In case you have multiple languages like English (Britsh and US separate), German and French. Then you will need to have these i18n files:

• i18n.properties [default]
• i18n_en.properties [for English – British]
• i18n_en_US.properties [for English – US]
• i18n_de.properties [for German]
• i18n_fr.properties [for French]

Once you create these files, you need to add them in Manifest as a resource bundle. Then, within a controller, you need to use them as per the language of the browser. You can also provide your own language switcher drop-down like this:

In case the app is deployed over Fiori, and then you can take the language set within Fiori:

Guidelines of writing i18n

You can write the entire i18n file in the form of key= value as shown below, where the key will be then added overview and controller, and the value will be the one shown over UI.

title=Admin Panel
appTitle=Admin Panel
appDescription=Admin Panel for SAP
id=User ID
pass=Password
version=Ver 2.3.0

Which will look like this in the code editor:

But, SAP UI5 suggests the following as the guidelines for writing i18n in a correct and standardized way:

1. All the keys should be written in a lowercase
2. The values of i18n can contain parameters like {0}, {1}, {2}, … [This can be used for special dynamic conditions]
3. For special characters, use Unicode escape sequences
4. Add comments using ‘#’ before sets of texts that are for certain category like:

   #XMSG: title of App
   title=Admin App
   appTitle=Admin App
   appDescription=Admin App
   #XMSG: App Version for Local Use
   appVersion=Version 2.0.14
   #XMSG: Not Found texts
   NotFound=Not Found
   NotFound.text=Sorry, but the requested resource is not available.
   NotFound.description=Please check the URL and try again.
   noDataDescriptiont=No data found. Try adjusting the filter settings or check your service.
   #XFLD: Form Texts
   COUNTRY=Country
   ServiceType=Service Type
   InOut=Inbound/Outbound
   GroupID=Group ID
   In=Inbound
   Out=Outbound
   

    

Adding i18n in Manifest File

Majorly, i18n is preconfigured within the manifest file. Anyhow, you can configure like shown below [it will be within “sap.ui5” object]:

"models": {
    "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
            "bundleName": "YRR.YRR.i18n.i18n"
        }
    }
}

Using i18n in View

To use i18n in UI5 View (once it is already set as above in the manifest file), you need to just specify the value in the i18n file and use it for texts using the named model call, i.e. {i18n>text} where text is the key in i18n file with a value against it, like text = This is a text.

To understand better, we will specify everything in different sections and showcase the output:

i18n Content

title=Admin Panel
appTitle=YRR
appDescription=App Description
id=User ID
pass=Password
fieldsMandatory=All the fields are mandatory.
version=Ver 2.3.0

View Content

<tnt:header>
<tnt:ToolHeader>
<Button id="sideNavigationToggleButton" icon="sap-icon://menu2" type="Transparent" press="onCollapseExpandPress">
<layoutData>
<OverflowToolbarLayoutData priority="NeverOverflow"/>
</layoutData>
</Button>
<ToolbarSpacer/>
<core:Icon src="sap-icon://vehicle-repair"></core:Icon>
<Text text="{i18n>title}" wrapping="false">
<layoutData>
<OverflowToolbarLayoutData priority="Disappear"/>
</layoutData>
</Text>
<ToolbarSpacer/>
<Button text="Download User Excel" icon="sap-icon://excel-attachment" type="Transparent" press="onSelectExtendedUser"/>
<Text text="{i18n>version}" wrapping="false"/>
<!--<Button icon="sap-icon://bell" press="handleMessagePopoverPress"/>-->
</tnt:ToolHeader>
</tnt:header>

Output

As you can see, we have binded the title and version with i18n, but the button text ‘Download Excel’ is hardcoded.

Using i18n in Controller

To get i18n data in View, you can use the global model that was specified within the manifest. For Controller too, we fetch the same model. You can either fetch everytime you need it, or make it global for that controller by specifying the following within onInit function:

// Bundle for i18n 
this.oBundle = this.getOwnerComponent().getModel("i18n").getResourceBundle();

Once you have specified the above

Showing Message from i18n in MessageBox

Now, we will use the above bundle to fetch a text from our i18n:

// read msg from i18n model
sMsg = that.oBundle.getText("fieldsMandatory");
MessageBox.error(sMsg);

Now, the MessageBox will load the message from i18n, and you don’t have to hardcode the text within the controller.