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

To report this post you need to login first.

17 Comments

You must be Logged on to comment or reply to a post.

  1. Mantri Shekar

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

      }

    });

    (0) 
        1. Abdul Rahman Post author

          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

          (0) 
              1. Mantri Shekar

                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

                (0) 
                  1. Mantri Shekar

                    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

                    (0) 
                    1. Ajit Kumar Panda

                      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

                      (0) 
                      1. Mantri Shekar

                        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.

                        (0) 
                            1. Michael Appleby

                              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

                              (0) 

Leave a Reply