Internationalization with Resource Model in Sap ui5

Hi All,

This blog shows the step by step procedure to implement internationalization with resource model in sap ui5.

Resource model:

The Resource Model is used as a kind of adapter to create and manage texts in a language-dependent manner.The attribute bundleURL specifies the path to the relevant directory, and bundleLocale specifies the language. The .properties file itself is created according to the key value schema.

Step 1: Create the Sap UI5 Application project

In Eclipse, File–>New–>Other and select “SAP UI5 Application Development” –>Application Project (Localization) and click on next button.

Then provide the name of the view and click on Finish.

Then select the Project Localization and create a new folder using the context wizard. Create a new folder named “translations” in the Web Content directory.

Then create the two files named translation_de.properties, translation_en.properties under the folder translations

Note: The id used in the language file needs to be same in all the properties.

The file translation_en.properties should contain the below data

Tit = Title

FName = First Name

LName = Last Name

Dob = Date of Birth

Gen = Gender

Ma = Male

Fe = Female

The file translation_de.properties should contain the below data

Tit = Titel

FName = Vorname

LName = nachname

Dob = Geburtsdatum

Gen = Geschlecht

Ma = männlich

Fe = weiblich

Then implement the following code in the create content method of the view.

createContent : function(oController) {

            

              jQuery.sap.require(“jquery.sap.resources”);

            

              // To Determine the browser language

              var sLangu =

                     sap.ui.getCore().getConfiguration().getLanguage();

            

            

              // Resource model

            

              this.oLangu = new sap.ui.model.resource.ResourceModel(

                           {bundleUrl : “translations/translation.properties”,

                           “bundleLocale”:sLangu});

            

            

              sap.ui.getCore().setModel(this.oLangu, “i18n”);

            

            

              // Create a TabStrip instance

              var oTabStrip1 = new sap.ui.commons.TabStrip(

                           “TabStrip1”);

              oTabStrip1.setWidth(“950px”);

              oTabStrip1.setHeight(“550px”);

              oTabStrip1.attachClose(function(oEvent) {

                     var oTabStrip = oEvent.oSource;

                     oTabStrip.closeTab(oEvent.getParameter(“index”));

              });

            

              var oMatrix = new sap.ui.commons.layout.MatrixLayout({

                     layoutFixed : true,

                     width : “60%”,

                     columns : 3,

                     widths : [‘120px’] });

                   

              var oLabel4 = new sap.ui.commons.Label(“Label-Name4”, {

                     text : “{i18n>Tit}”, // Mapping the label Title (Tit)

                   

              });

              var oDropdownBox1 = new sap.ui.commons.DropdownBox(

                           “DropdownBox1”);

              oDropdownBox1.setTooltip(“Title”);

              oDropdownBox1.setEditable(true);

              oDropdownBox1.setWidth(“100px”);

              var oItem = new sap.ui.core.ListItem(“Mr”);

              oItem.setText(“Mr”);

              oDropdownBox1.addItem(oItem);

              oItem = new sap.ui.core.ListItem(“Mrs”);

              oItem.setText(“Mrs”);

              oDropdownBox1.addItem(oItem);

              oItem = new sap.ui.core.ListItem(“Miss”);

              oItem.setText(“Miss”);

              oDropdownBox1.addItem(oItem);

              oMatrix.createRow(oLabel4, oDropdownBox1);

            

            

            

                     var oLabel2 = new sap.ui.commons.Label(“Label-Name2”, {

                           text : “{i18n>FName}”,  // Mapping the label First Name (Fname)

                         

                     });

                     var oTF2 = new sap.ui.commons.TextField(

                                  “TextField-Name2”, {

                                         editable : true,

                                         width : ‘150px’

                                  });

                     oMatrix.createRow(oLabel2,oTF2);

                         

                                                            

                     var oLabel3 = new sap.ui.commons.Label(“Label-Name3”, {

                           text : “{i18n>LName}”, // Mapping the label Last Name (Lname)

                         

                     });

                     var oTF3 = new sap.ui.commons.TextField(

                                  “TextField-Name3”, {

                                         editable : true,

                                         width : ‘150px’

                                  });

                     oMatrix

                                  .createRow(

                                                oLabel3,oTF3);

                   

                     var oLabel5 = new sap.ui.commons.Label(“Label-Name5”, {

                           text :  “{i18n>Gen}”, // Mapping the label Gender (Gen)

                     });

                     var oRB1 = new sap.ui.commons.RadioButton({

                           text : “{i18n>Ma}”, // Mapping the label male (ma)

                     });

                     var oRB2 = new sap.ui.commons.RadioButton({

                           text : “{i18n>Fe}”, // Mapping the label female (fe)

                     });

                     oMatrix.createRow(oLabel5, oRB1, oRB2);

                     var oLabel6 = new sap.ui.commons.Label(“Label-Name6”, {

                           text : “{i18n>Dob}”, // Mapping the label Date of birth (dob)

                           required : true

                     });

                     var oDatePicker1 = new sap.ui.commons.DatePicker(

                                  ‘date1’);

            

                     oMatrix.createRow(oLabel6,oDatePicker1);

                     oTabStrip1.createTab(“Personal Details”, oMatrix);                               

                     oTabStrip1.placeAt(“content”);

            

            

            

       }

});

Right click on the index.html and select the option run on server.

Content displayed in German language based on browser priority.

German language is selected as default language..

Content displayed in English language:

English language is selected as default language.