Skip to Content
Author's profile photo Abdul Rahman

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

Assigned Tags

      17 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Savarimuthu Sagayaraj
      Savarimuthu Sagayaraj

      Very helpful article for beginners like me.

      Author's profile photo Former Member
      Former Member

      Nice and Good article to learn. Keep Sharing 🙂 ...

      Author's profile photo Former Member
      Former Member

      Nice Article.

      Author's profile photo Mantri Shekar
      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");

        }

      });

      Author's profile photo Abdul Rahman
      Abdul Rahman
      Blog Post Author

      Are you getting any empty screen or browser default language is not displayed.

      Author's profile photo Mantri Shekar
      Mantri Shekar

      yes iam getting a blank screen

      Author's profile photo Abdul Rahman
      Abdul Rahman
      Blog 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

      Author's profile photo Mantri Shekar
      Mantri Shekar

      I made the changes but it is still showing blank screen

      Author's profile photo Abdul Rahman
      Abdul Rahman
      Blog Post Author

      Can you open the web app url in Google chrome and  check for errors in developer tools

      Author's profile photo Mantri Shekar
      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

      Author's profile photo Ajit Kumar Panda
      Ajit Kumar Panda

      Hi Mantri,

      I am facing the same issue. Did you resolve it? If yes, can you please tell me what changes you did.

      Regards,

      Ajit

      Author's profile photo Mantri Shekar
      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

      Author's profile photo Ajit Kumar Panda
      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

      Author's profile photo Mantri Shekar
      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.

      Author's profile photo Ajit Kumar Panda
      Ajit Kumar Panda

      Thanks dude 🙂 It's working now..

      Author's profile photo Mantri Shekar
      Mantri Shekar

      Its Ok Ajit. I think you are a newbie to UI5 , am also newbie to UI5.

      Please try to know about the libraries in UI5 and know the usage.

      Author's profile photo Michael Appleby
      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