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.
Very helpful article for beginners like me.
Nice and Good article to learn. Keep Sharing 🙂 …
Nice Article.
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”);
}
});
Are you getting any empty screen or browser default language is not displayed.
yes iam getting a blank screen
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
I made the changes but it is still showing blank screen
Can you open the web app url in Google chrome and check for errors in developer tools
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 Mantri,
I am facing the same issue. Did you resolve it? If yes, can you please tell me what changes you did.
Regards,
Ajit
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.
Thanks dude 🙂 It’s working now..
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.
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