i18n demo

i18n_ch.properties:
greet=\u4F60\u597D
i18n_de.properties:
greet=hallo
i18n.properties:
greet=hello

demo.controller.js:
onInit: function() {
//var sLoc=sap.ui.getCore().getConfiguration().getLanguage();
var sLoc="zh_Hans";
var i18npath="i18n/i18n";
if(sLoc==="de"){
i18npath=i18npath+"_de.properties";
}else if(sLoc==="zh_Hans"){
i18npath=i18npath+"_ch.properties";
}else{
i18npath=i18npath+".properties";
}
var oi18nModel=new sap.ui.model.resource.ResourceModel({
bundleUrl:i18npath
});
sap.ui.getCore().setModel(oi18nModel,"i18n")
},
demo.view.js:
sap.ui.jsview("i18ndemo.demo", {


getControllerName : function() {
return "i18ndemo.demo";
},


createContent : function(oController) {
var oBtn= new sap.m.Button({
text:"{i18n>greet}"
})
  var opage= new sap.m.Page({
title: "i18n example",
content: [
oBtn
]
});
  return opage
}


});
output:

xml form sapui5

form.view.xml:
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="xmlform.form" xmlns:f="sap.ui.layout.form">
<Page title="Title">
<content>
<f:SimpleForm editable="false" layout="ResponsiveGridLayout" id="SimpleForm">
<f:content id="FormContent">
<core:Title text="Title"/>
<Label text="Label 1" id="Label1"/>
<Input width="100%" id="Input1" value="Input 1" enabled="false"/>
<Input width="100%"  id="Input2" value="Input 2" enabled="false"/>
<Label text="Label 2" id="Label2"/>
<Input width="100%"  id="Input3" value="Input 3" enabled="false"/>
</f:content>
</f:SimpleForm>
</content>
</Page>
</core:View>
output:

xmltable sapui5

view.controller.js:

sap.ui.define([

               "sap/ui/core/mvc/Controller"

             ], function(Controller) {

               "use strict";

                return Controller.extend("xmltable.view", {

             

               onInit: function() {

               

             

               var datapath=

               [{"name":"Sai Giridhar","company":"SAP"},

                     {"name":"Vignesh","company":"TCS"},

                     {"name":"Mike","company":"SAP"}];

             

               var oModel = new sap.ui.model.json.JSONModel(datapath);
        this.getView().setModel(oModel);

               }

               });

             });

     view.view.xml:
<core:View

xmlns:core="sap.ui.core"
controllerName="xmltable.view"

xmlns:html="http://www.w3.org/1999/xhtml"

xmlns:mvc="sap.ui.core.mvc"

xmlns="sap.m"

xmlns:table="sap.ui.table">

 



  <Page title="table">

  <content>

  <table:Table id="Table1" rows="{/}">

            <table:title>

            <Text text="SAPUI5 sap.ui.table XML view"></Text>

            </table:title>

            <table:columns>

                        <table:Column sortProperty="name" filterProperty="name">

                                  <Label text="Employee name"/>

                                        <table:template><Text text="{name}" ></Text></table:template>

                        </table:Column>

                        <table:Column sortProperty="company" filterProperty="company">

                                  <Label text="Company"/>

                                        <table:template><Text text="{company}" ></Text></table:template>

                        </table:Column>

            </table:columns>

  </table:Table>

  </content>

  </Page>

 

 
</core:View>
output:

grid sapui5 js

grid.view.js:
sap.ui.jsview("grid.grid", {


getControllerName : function() {
return "grid.grid";
},


createContent : function(oController) {
var oGridForm = new sap.ui.layout.Grid({
hSpacing: 1,
vSpacing: 1,
content: [
new sap.ui.commons.Label({
id:"lbl1",
text: 'Firstname',
layoutData : new sap.ui.layout.GridData({
span: "L3 M3 S5"
})
}).addStyleClass("labelClass"),
new sap.ui.commons.TextField({
id:"fld",
width: "100%",
layoutData : new sap.ui.layout.GridData({
span: "L7 M9 S12"
})
}).addStyleClass("txtFldClass"),
new sap.ui.commons.Label({
text: 'Lastname',
layoutData : new sap.ui.layout.GridData({
span: "L3 M3 S12",

})
}).addStyleClass("labelClass"),
new sap.ui.commons.TextField({
width: "100%",
layoutData : new sap.ui.layout.GridData({
span: "L7 M9 S12"
})
}),
new sap.ui.commons.Label({
text: "ZIP / City",
layoutData : new sap.ui.layout.GridData({
span: "L3 M3 S12",

})
}).addStyleClass("labelClass"),
new sap.ui.commons.TextField({
width: "100%",
layoutData : new sap.ui.layout.GridData({
span: "L1 M1 S12"
})
}),
new sap.ui.commons.TextField({
width: "100%",
layoutData : new sap.ui.layout.GridData({
span: "L6 M8 S12"
})
}),
new sap.ui.commons.Button({
text: 'Submit',
width: "100%",
layoutData : new sap.ui.layout.GridData({
indent: "L3 M3",
span: "L3 M3 S12"
})
})
]
});

  return new sap.m.Page({
title: "Title",
content: [
oGridForm
]
});
}

});
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.layout,sap.ui.commons"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

<script>
sap.ui.localResources("grid");
var app = new sap.m.App({initialPage:"idgrid1"});
var page = sap.ui.view({id:"idgrid1", viewName:"grid.grid", type:sap.ui.core.mvc.ViewType.JS});
app.addPage(page);
app.placeAt("content");
</script>
<style>
.labelClass{
color:red;}
</style>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
output:

vizframe stackedcolumn sapui5 js

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.viz,sap.ui.layout,sap.ui.table,sap.ui.commons"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

<script>
sap.ui.localResources("vizframe");
var app = new sap.m.App({initialPage:"idvizframe1"});
var page = sap.ui.view({id:"idvizframe1", viewName:"vizframe.vizframe", 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>
vizframe.view.js:
sap.ui.jsview("vizframe.vizframe", {


getControllerName : function() {
return "vizframe.vizframe";
},


createContent : function(oController) {



  // some business data
var oModel = new sap.ui.model.json.JSONModel({
businessData : [
{Country :"Canada",revenue:410.87,profit:-141.25, population:34789000},
{Country :"China",revenue:338.29,profit:133.82, population:1339724852},
{Country :"France",revenue:487.66,profit:348.76, population:65350000},
{Country :"Germany",revenue:470.23,profit:217.29, population:81799600},
{Country :"India",revenue:170.93,profit:117.00, population:1210193422},
{Country :"United States",revenue:905.08,profit:609.16, population:313490000}
]
});

// A Dataset defines how the model data is mapped to the chart
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [{axis : 1, name : 'Country', value : "{Country}"}],
measures : [
{name : 'Profit', value : '{profit}'},
{name : 'Revenue', value : '{revenue}'}
],
data : {path : "/businessData"}
});
// create a Bar chart
    // you also might use Combination, Line, StackedColumn100, StackedColumn or Column
    // for Donut and Pie please remove one of the two measures in the above Dataset. 
   
  var oVizFrame = new sap.viz.ui5.controls.VizFrame({
'width': '90%',
'height': '400px',
  'vizType' : 'stacked_column',
    dataset: oDataset
  });
  oVizFrame.setModel(oModel)
  var feedPrimaryValues = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid' : "valueAxis",
'type' : "Measure",
'values' : ["Profit", "Revenue"]
  }), feedAxisLabels = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid' : "categoryAxis",
'type' : "Dimension",
'values' : ["Country"]
  });
  oVizFrame.addFeed(feedPrimaryValues);
oVizFrame.addFeed(feedAxisLabels);

  return new sap.m.Page({
title: "Title",
content: [
oVizFrame
]
});
}

});
output:

sapui5 table formatters

sample.controller.js:
sap.ui.controller("sample.sample", {

     sample:function(){
    var oTable= sap.ui.getCore().byId("mytable");
    oTable.addColumn(new sap.ui.table.Column({
    id:"ot",
    label: new sap.ui.commons.Label({text: "status"}),
    template: new sap.ui.commons.TextView({text:{path:"status",formatter:function(status)
    {
    if(status==1)
    {
    return true
    }
    else if (status==0)
    {
    return false
    }
    }}})
  }));
     }
});
sample.view.js:
sap.ui.jsview("sample.sample", {


getControllerName : function() {
return "sample.sample";
},


createContent : function(oController) {

var data = [
    {lastName: "Dente", Name: "Al",status:1},
    {lastName: "Friese", Name: "Andy",status:0},
    {lastName: "Mann", Name: "Anita",status:1}
  ];
var oModel = new sap.ui.model.json.JSONModel();
  oModel.setData(data);
var oTable = new sap.ui.table.Table({
id:"mytable",
visibleRowCount: 3,
        width : "85%"
});
 
  oTable.addColumn(new sap.ui.table.Column({
    label: new sap.ui.commons.Label({text: "lastName"}),
    template: new sap.ui.commons.TextView({text:"{lastName}"})
  }));
  oTable.addColumn(new sap.ui.table.Column({
    label: new sap.ui.commons.Label({text: "Name"}),
    template: new sap.ui.commons.TextView({text:"{Name}"})
  }));
  oTable.setModel(oModel);
  oTable.bindRows("/");
var btn =new sap.m.Button({
        text:"button1",
        press:oController.sample
        });
        var btn1 =new sap.m.Button({
        text:"button2",
        press:function(){
        oTable.removeColumn(sap.ui.getCore().byId("ot") );
        }

       
       
        });
        var oHBox1 = new sap.m.HBox({
    items:[
    oTable,
    btn,btn1,
   
    ]
    });
        var oModel = new sap.ui.model.json.JSONModel({
        businessData : [
        {Country :"Canada",revenue:410.87,profit:-141.25, population:34789000},
        {Country :"China",revenue:338.29,profit:133.82, population:1339724852},
        {Country :"France",revenue:487.66,profit:348.76, population:65350000},
        {Country :"Germany",revenue:470.23,profit:217.29, population:81799600},
        {Country :"India",revenue:170.93,profit:117.00, population:1210193422},
        {Country :"United States",revenue:905.08,profit:609.16, population:313490000}
        ]
        });
       
           
        var oDataset = new sap.viz.ui5.data.FlattenedDataset({
        dimensions : [
        {
        axis : 1, 
        name : 'Country',
        value : "{Country}"
        }
        ],
        measures : [
        {
        name : 'Profit', 
        value : '{profit}'   
        },
        {
        name : 'Revenue',
        value : '{revenue}'
        }
        ],
        data : {
        path : "/businessData"
        }
       
        });
 
        var oBarChart = new sap.viz.ui5.Bar({
        width : "80%",
        height : "400px",
        plotArea : {
        },
        title : {
        visible : true,
        text : 'Profit and Revenue By Country'
        },
        dataset : oDataset
        });
        oBarChart.setModel(oModel);
        var oVBox2 = new sap.m.VBox("Vbox2", {
    items:[
   
                              oBarChart
    ]
    });
       

  return new sap.m.Page({
title: "Title",
content: [
             oHBox1,oVBox2
]
});
}

});

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.viz,sap.ui.layout,sap.ui.table,sap.ui.commons"

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

</script>

<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

<script>

sap.ui.localResources("sample");

var app = new sap.m.App({initialPage:"idsample1"});

var page = sap.ui.view({id:"idsample1", viewName:"sample.sample", 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>

output:

table cell click alert massage

tablesa.view.js:
sap.ui.jsview("tablesa.tablesa", {

 
getControllerName : function() {
return "tablesa.tablesa";
},


createContent : function(oController) {
var data = [ {fname : "indrajith" , lname : "SCN"},
             {fname : "fred" , lname : "SCN1"},
             {fname : "den" , lname : "SCN2"},
             {fname : "foo" , lname : "SCN3"},
             {fname : "red" , lname : "SCN4"},
            ]
var oModel = sap.ui.model.json.JSONModel();
oModel.setData(data)

var oTable = new sap.m.Table({
mode: sap.m.ListMode.SingleSelectMaster,

columns: [
          new sap.m.Column({
             
              header : new sap.m.Label({
                  text : "First Name"
              })
          }),
          new sap.m.Column({
           
              header : new sap.m.Label({
                  text : "Last Name"
              })
          })
        ],
       
       
 
});

oTable.setModel(oModel)


oTable.bindAggregation("items", {
        path: "/",
        template: new sap.m.ColumnListItem({
            cells: [
                (new sap.m.Text({ text: "{fname}" }).attachBrowserEvent("click",function(e){
var pid = e.target.id
            /* alert(pid);*/
alert(sap.ui.getCore().byId(pid).getText())
})),
                    (new sap.m.Text({ text: "{lname}" }).attachBrowserEvent("click",function(e){
var pid = e.target.id
                /*alert(pid);*/
alert(sap.ui.getCore().byId(pid).getText())
})),
                   
                    ]
        })

})

  return new sap.m.Page({
title: "Title",
content: [
oTable
]
});
}


});

output: