Globalization(i18n)

Internationalization and localization

It is a way, how a computer software could be adapted to different languages. Internationalization(i18n) is actually the process of designing a software so that it can be adapted to different languages across the world, here 18 stands for number of alphabets between I & n.  Localization is the process of adapting internationalized software for a particular region or language by adding locale-specific components and translating text.

We use internationalization and localization in our Sapui5 application for replacing the hard coded text from the application. It is one of the best practices of SAP to use i18n for hard coded texts.  Generally we use Resource Model for defining, since it is one way binding (sap.ui.model.resource.ResourceModel)

The i18n model is set up in the Component's initialization section, or it could also be defined in the manifest.json file.

//set i18n model

var rootPath = jQuery.sap.getModulePath("sap.ui.demo.tdg");

Vari18nModel = newsap.ui.model.resource.ResourceModel({

          bundleUrl : "i18n/messageBundle.properties"});

          oView.setModel(i18nModel, "i18n");

Now create a folder named i18n in the project directory and maintain i18n files according to the languages.

The configuration specifies the relative location of the resource bundle. This is made absolute (in relation to our app's namespace) by use of the

jQuery.sap.getModulePathutility function, and then used to create the named model, before it is set on the component.

Now in the i18n.properties file, enter all the hard coded text that has been used in the application. And bind the data using the i18n model

Example

<Tableid="idOrderTable">

      <columns>

            <Columnwidth="8em">

                  <Texttext="{i18n>s3OrderColumnSales}"/>

            </Column>

            <Column>

                  <Texttext="{i18n>s3OrderColumnDelivery}"/>

            </Column>

            <Column>

                  <Texttext="{i18n>s3OrderColumnOrder}"/>

            </Column>

            <Column>

                  <Texttext="{i18n>s3OrderColumnRequested}"/>

            </Column>

            <Column>

                  <Texttext="{i18n>s3OderColumnAmount}"/>

            </Column>

      </columns>

</Table>

Here we have used a table and, the column text name is a hard coded value, hence we are using i18n model for the same.  Now we have to maintain the same fields in the i18n.properties file.

s3OrderColumnSales=SalesOrder

s3OrderColumnDelivery=DeliveryStatus

s3OrderColumnOrder=OrderDate

s3OrderColumnRequested=RequestedDate

s3OderColumnAmount=OrderAmount

Hence this is done, now to serve the real purpose of i18n file, another file will be created in the i18n folder for the german language. Name it as i18n_DE.properties

Now, maintain the same field names in this particular file.

s3OrderColumnSales=Kundenauftrag

s3OrderColumnDelivery=Lieferstatus

s3OrderColumnOrder=Auftragsdatum

s3OrderColumnRequested=Wunschtermin

s3OderColumnAmount=Bestellbetrag

Now to see the output, in german language, just add DE instead of EN in the application url. Add ?sap-ui-language=DE after the url.

Suppose the default url is:

http://localhost:42067/demo_i18n/index.html just add ?sap-ui-language=DE.

Now the url would be :

http://localhost:42067/demo_i18n/index.html?sap-ui-language=DE

Output