Skip to Content

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.


Image 1.jpg

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



image 2.jpg




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.


image 3.jpg

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..

image 4.jpg

Content displayed in English language:

English language is selected as default language.

image 5.jpg

17 Comments
You must be Logged on to comment or reply to a post.
  • I done same but iam not getting out put.cab u please find my code and let me know if i done any mistake

    sap.ui.jsview(“internationalization.LocalView”, {

      /** Specifies the Controller belonging to this View.

      * In the case that it is not implemented, or that “null” is returned, this View does not have a Controller.

      * @memberOf internationalization.LocalView

      */

      getControllerName : function() {

      return “internationalization.LocalView”;

      },

      /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

      * Since the Controller is given to this method, its event handlers can be attached right away.

      * @memberOf internationalization.LocalView

      */

      createContent : function(oController) {

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

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

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

                   {bundleUrl : “translations/translation.properties”,

                  bundleLocale : “sLangu”});

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

      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-Namee4”,{

      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(“Miss”);

      oItem.setText(“Miss”);

      oDropdownBox1.addItem(oItem);

      oMatrix.createRow(oLabel4, oDropdownBox1);

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

      text :”{i18>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 :”{i18>LName}”,  // Mapping the Label Last Name(FName)

      });

      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 Label Male(Ma)

      });

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

      text : “{i18n>Fe}”, //Mapping 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(“PersonalDetails”, oMatrix);

      oTabStrip1.placeAt(“content”);

      }

    });

        • Can you change the line  bundleLocale : “sLangu”  as  “bundleLocale” : sLangu

          in your code

          Also change the i18 to i18n

          Change this line from sap.ui.getCore().setMode(this.oLangu, “i18n”); to

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

          Note : sLangu is variable which detect the browser language. It’s passed as string in your code

          • iam very new to ui5 and fiori i dont know how to solve the errors

            in first line we have written this jQuery.sap.require(“jquery.sap.resources”);

            but i did not install any pluggin related to jquery

            can u pls tell me how to debug and on what lines do we need to cncentrate

          • Hi Ajit,

            Yeah now i resolved my issue. I made some changes suggested by Abdul Rahman, itt helped me to solve my issue.

            Please show me your code so that i can help to resolve your issue

          • Hi Mantri,

            Please find the code below:

            main.view.js    :      Local view in my case

            ===================

            sap.ui.jsview(“zui5_resource_translate.main”, {

              /** Specifies the Controller belonging to this View.

              * In the case that it is not implemented, or that “null” is returned, this View does not have a Controller.

              * @memberOf zui5_resource_translate.main

              */

              getControllerName : function() {

              return “zui5_resource_translate.main”;

              },

              /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

              * Since the Controller is given to this method, its event handlers can be attached right away.

              * @memberOf zui5_resource_translate.main

              */

              createContent : function(oController) {

            /* return new sap.m.Page({

              title: “Title”,

              content: [

              ]

              });*/

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

                    // To Determine the browser language

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

                   

                    // Resource model         

                    //Create instance of resource model

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

                    bundleUrl : “translations/translation.properties”,

                        “bundleLocale”: sLangu //”bundleLocale”:”en” —>can be hard coded

                        });   

                       

                    //Bind the model under an ID—i18n in this example—to the Core Model:

                    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’] });    

            //—–>Creating first row       

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

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

                   

                    //Create a dropdown instance

                    var oDropdownBox1 = new sap.ui.commons.DropdownBox(“DropdownBox1”);

              oDropdownBox1.setTooltip(“Title”);

              oDropdownBox1.setEditable(true);

              oDropdownBox1.setWidth(“100px”);       

                   

              //Add drop down values as list

                    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);

                   

                    // Add label and dropdown as row in the matrix layout

                    oMatrix.createRow(oLabel4, oDropdownBox1);

            //—–>Creating second row

                    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);       

            //—–>Creating third row

                    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);     

            //—–>Creating fourth row

                    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);   

                

            //—–>Creating fifth row

                    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);       

                   

                    //Attach matrix layout with all rows in tab

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

                   

                    //Put the tabstrip in content area

                    oTabStrip1.placeAt(“content”);

                   

              }

            });

            index.html

            ===========

            <!DOCTYPE HTML>

            <html>

              <head>

              <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

              <meta http-equiv=’Content-Type’ content=’text/html;charset=UTF-8’/>

              <script src=”resources/sap-ui-core.js”

              id=”sap-ui-bootstrap”

              data-sap-ui-libs=”sap.m,sap.ui.commons,sap.ui.model,sap.ui.commons.layout,sap.ui.core,sap.ui.core.Configuration”

              data-sap-ui-theme=”sap_bluecrystal”>

              </script>

              <!– only load the mobile lib “sap.m” and the “sap_bluecrystal” theme –>

              <script>

              sap.ui.localResources(“zui5_resource_translate”);

              var app = new sap.m.App({initialPage:”idmain1″});

              var page = sap.ui.view({id:”idmain1″, viewName:”zui5_resource_translate.main”, type:sap.ui.core.mvc.ViewType.JS});

              app.addPage(page);

              app.placeAt(“content”);

              </script>

              </head>

              <body class=”sapUiBody” role=”application”>

              <div id=”content”></div>

              </body>

            </html>

            Regards,

            Ajit

          • Hi i went through your code and find there is some small correction need to be done in index.html file.

            In data-sap-ui-libs you have declared all unnecessary and libraries it seems.Please delete all the libraries from data-sap-ui-libs except sap.m and sap.ui.commons.

            I hope this will help you to resolve your issue.

          • Please create a new Discussion marked as a Question.  The Comments section of a Blog (or Document) is not the right vehicle

            for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution

            (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document

            is related, put in a link.

            NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select

            Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the

            options and select T (on the right) to Auto-Title the url.

            Thanks, Mike (Moderator)

            SAP Technology RIG