details about tablets

https://www.tabletwise.com/

m.table js

table.view.js:
sap.ui.jsview("m.table.table", {
getControllerName : function() {
return "m.table.table";
},
createContent : function(oController) {
var oModel = new sap.ui.model.json.JSONModel([
                                               { value: 50, name: "ramu" },
                                               { value: 60, name: "ravi" },
                                               { value: 70, name: "raju" },
                                               { value: 80, name: "rao" }
                                             ]);

                                             var oTable = new sap.m.Table({
                                            id:"otable",
                                               columns: [
                                                 new sap.m.Column({ header: new sap.m.Label({text: "Name"})}),
                                                 new sap.m.Column({ header: new sap.m.Label({text: "Value"})})
                                               ],
                                               items: {
                                                 path: "/",
                                                 template: new sap.m.ColumnListItem({
                                                   cells: [
                                                     new sap.m.Text({ text: "{name}" }),
                                                     new sap.m.Text({ text: "{value}" })
                                                   
                                                   ]
                                                 })
                                               },
                                             });
                                           
                                             oTable.setModel(oModel);
                                             var btn1 =new sap.m.Button({
                                            id:"bt",
                              text:"button2",
                              press:function(){
                              oTable.removeColumn("value");
                              }
                             
                              }).addStyleClass("123");

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

});

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"

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

</script>

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

<script>

sap.ui.localResources("m.table");

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

var page = sap.ui.view({id:"idtable1", viewName:"m.table.table", type:sap.ui.core.mvc.ViewType.JS});

app.addPage(page);

app.placeAt("content");

</script>

<style>

#otable{

background-color: yellow;

 

}

.123{

background-color: dodgerblue;

justify-content:flex-end;

}

</style>

</head>

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

<div id="content"></div>

</body>

</html>

output:

custom control

NewControl.js:
sap.ui.define([
"sap/ui/core/Control",
"sap/m/RatingIndicator",
"sap/m/Label",
"sap/m/Button"

], function (Control, RatingIndicator, Label, Button) {
"use strict";
return Control.extend("control.NewControl", {
metadata : {
properties : {
value: {type : "float", defaultValue : 0}
},
aggregations : {
_rating : {type : "sap.m.RatingIndicator", multiple: false, visibility : "hidden"},
_label : {type : "sap.m.Label", multiple: false, visibility : "hidden"},
_button : {type : "sap.m.Button", multiple: false, visibility : "hidden"}
},
events : {
change : {
parameters : {
value : {type : "int"}
}
}
}
},
init : function () {
this.setAggregation("_rating", new RatingIndicator({
value: this.getValue(),
iconSize: "2rem",
visualMode: "Half",
liveChange: this._onRate.bind(this)
}));
this.setAggregation("_label", new Label({
text: "{i18n>productRatingLabelInitial}"
}).addStyleClass("sapUiSmallMargin"));
this.setAggregation("_button", new Button({
text: "{i18n>productRatingButton}",
press: this._onSubmit.bind(this)
}).addStyleClass("sapUiTinyMarginTopBottom"));
},

setValue: function (fValue) {
this.setProperty("value", fValue, true);
this.getAggregation("_rating").setValue(fValue);
},

reset: function () {
var oResourceBundle = this.getModel("i18n").getResourceBundle();

this.setValue(0);
this.getAggregation("_label").setDesign("Standard");
this.getAggregation("_rating").setEnabled(true);
this.getAggregation("_label").setText(oResourceBundle.getText("productRatingLabelInitial"));
this.getAggregation("_button").setEnabled(true);
},

_onRate : function (oEvent) {
var oRessourceBundle = this.getModel("i18n").getResourceBundle();
var fValue = oEvent.getParameter("value");

this.setProperty("value", fValue, true);

this.getAggregation("_label").setText(oRessourceBundle.getText("productRatingLabelIndicator", [fValue, oEvent.getSource().getMaxValue()]));
this.getAggregation("_label").setDesign("Bold");
},

_onSubmit : function (oEvent) {
var oResourceBundle = this.getModel("i18n").getResourceBundle();

this.getAggregation("_rating").setEnabled(false);
this.getAggregation("_label").setText(oResourceBundle.getText("productRatingLabelFinal"));
this.getAggregation("_button").setEnabled(false);
this.fireEvent("change", {
value: this.getValue()
});
},
renderer : function (oRM, oControl) {
oRM.write("<div");
oRM.writeControlData(oControl);
oRM.addClass("myAppDemoWTProductRating");
oRM.writeClasses();
oRM.write(">");
oRM.renderControl(oControl.getAggregation("_rating"));
oRM.renderControl(oControl.getAggregation("_label"));
oRM.renderControl(oControl.getAggregation("_button"));
oRM.write("</div>");
}
});});
App.controller.js:
sap.ui.controller("sap.ui.core.n-t.n-t.App", {
App.view.xml:
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="sap.ui.core.n-t.n-t.App" xmlns:html="http://www.w3.org/1999/xhtml">

<App id="app"></App>


</core:View>
master.controller.js:
sap.ui.controller("sap.ui.core.n-t.n-t.master", {



onPress: function(oEvent)
  {
  var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
  oRouter.navTo("second");
  }
 
master.view.xml:
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:cntrl="control"
controllerName="sap.ui.core.n-t.n-t.master" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Master view">
<content>
<VBox>
  <Label text="Welcome on the first view !" />
  <Button text="Navigate to the second view" press="onPress" />
  <cntrl:NewControl value="2" />
  </VBox>
</content>
</Page>
</core:View>
Slave.controller.js:
sap.ui.controller("sap.ui.core.n-t.n-t.Slave", {


onBack: function()
  {
sap.ui.controller("sap.ui.core.n-t.n-t.master").onPress();


  var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
  oRouter.navTo("master", true);
 
  }
Slave.view.xml:
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="sap.ui.core.n-t.n-t.Slave" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Slave view">
<content>
<VBox>
  <Label text="Welcome on the second view !" />
  <Button text="Navigate back to the first view" press="onBack" />
  </VBox>
</content>
</Page>
</core:View>
Component.js:
sap.ui.define( ["sap/ui/core/UIComponent"], function (UIComponent) {
"use strict";
return UIComponent.extend("sap.ui.core.n-t", {

metadata: {
"manifest":"json"

},

init : function () {
UIComponent.prototype.init.apply(this, arguments);

// Parse the current url and display the targets of the route that matches the hash
this.getRouter().initialize();
}

});
}, /* bExport= */ true);

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"

data-sap-ui-theme="sap_bluecrystal"

data-sap-ui-resourceroots='{

            "sap.ui.core.n-t": "./"

         }'>

</script>

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

<script>

sap.ui.localResources("control");

sap.ui.getCore().attachInit(function () {

            new sap.ui.core.ComponentContainer({

               name : "sap.ui.core.n-t"

            }).placeAt("content");

         });

</script>

</head>

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

<div id="content"></div>

</body>

</html>

manifest.json:

 {

  "_version": "1.8.0",

 

  "sap.ui5": {

"models": {

},"rootView": {

"viewName": "sap.ui.core.n-t.n-t.App",

"type": "XML",

"async": true

},

"routing": {

  "config": {

"routerClass": "sap.m.routing.Router",

"viewType": "XML",

"viewPath": "sap.ui.core.n-t.n-t",

"controlId": "app",

"controlAggregation": "pages",

"async": true

  },

  "routes": [

{

  "pattern": "",

  "name": "master",

  "target": "master"

},

{

  "pattern": "second",

  "name": "second",

  "target": "second"

}

  ],

  "targets": {

"master": {

  "viewID": "master",

  "viewName": "master"

},

"second": {

  "viewId": "Slave",

  "viewName": "Slave"

}

  }

}

  }

}

 

output:

routing

routing:
App.controller.js:
sap.ui.controller("routing1.routing.App", {
App.view.xml:
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="routing1.routing.App" xmlns:html="http://www.w3.org/1999/xhtml">


<App id="app"></App>

</core:View>
child.controller.js:
sap.ui.controller("routing1.routing.child", {


onBack: function()
  {

  var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
  oRouter.navTo("master", true);
 
  }
child.view.xml:
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="routing1.routing.child" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="child view">
<content>
<VBox>
  <Label text="Welcome on the second view !" />
  <Button text="Navigate back to the first view" press="onBack" />
  </VBox>
</content>
</Page>
</core:View>

 master.controller.js:
sap.ui.controller("routing1.routing.master", {



onPress: function(oEvent)
  {
  var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
  oRouter.navTo("second");
  }
master.view.xml:
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="routing1.routing.master" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Master view">
<content>
<VBox>
  <Label text="Welcome on the first view !" />
  <Button text="Navigate to the second view" press="onPress" />
  </VBox>
</content>
</Page>
</core:View>

Component-preload.js:

Component.js:

sap.ui.define( ["sap/ui/core/UIComponent"], function (UIComponent) {

"use strict";

return UIComponent.extend("routing1", {

metadata: {

"manifest":"json"

},

init : function () {

UIComponent.prototype.init.apply(this, arguments);

// Parse the current url and display the targets of the route that matches the hash

this.getRouter().initialize();

}

});

}, /* bExport= */ true);

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"

data-sap-ui-theme="sap_bluecrystal"

        data-sap-ui-resourceroots='{

            "routing1": "./"

         }'>

</script>

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

<script>

sap.ui.getCore().attachInit(function () {

            new sap.ui.core.ComponentContainer({

               name : "routing1"

            }).placeAt("content");

         });

</script>

</head>

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

<div id="content"></div>

</body>

</html>

manifest.json:

{

  "_version": "1.8.0",

 

  "sap.ui5": {

"models": {

},"rootView": {

"viewName": "routing1.routing.App",

"type": "XML",

"async": true

},

"routing": {

  "config": {

"routerClass": "sap.m.routing.Router",

"viewType": "XML",

"viewPath": "routing1.routing",

"controlId": "app",

"controlAggregation": "pages",

"async": true

  },

  "routes": [

{

  "pattern": "",

  "name": "master",

  "target": "master"

},

{

  "pattern": "second",

  "name": "second",

  "target": "second"

}

  ],

  "targets": {

"master": {

  "viewID": "master",

  "viewName": "master"

},

"second": {

  "viewId": "child",

  "viewName": "child"

}

  }

}

  }

}

output:

overlaycontainer

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


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


createContent : function(oController) {
function handler(oEvent) {
alert("Event '"+oEvent.getId()+"' triggered");
}

var oOverlayContainer = new sap.ui.ux3.OverlayContainer();
oOverlayContainer.addContent(new sap.ui.commons.TextView({text: "Some Content ..."}));
oOverlayContainer.addContent(new sap.m.Button({text:"button"}));
       
oOverlayContainer.attachClose(handler);
oOverlayContainer.attachOpen(handler);
oOverlayContainer.attachOpenNew(handler);

var oButton = new sap.ui.commons.Button({
text: "Open Overlay Container",
press: function(oEvent){
if(!oOverlayContainer.isOpen()){
oOverlayContainer.open();
}
}
}).addStyleClass("red");
  return new sap.m.Page({
title: "Title",
content: [
oButton
]
});
}

});
output:

treetable

sap.ui.jsview("treetable.treetable", {


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


createContent : function(oController) {
oTableData={
      root:{ branch:"br",details:"br details",
      0:{ branch:"mech",details:"mechanical engg",
    0:{subject:"Dynamics",grade:"3"},
    1:{subject: "hydraulics",grade:"4"}
      },
    1: { branch:"elec",details:"electrical engg",
     
    0:{subject:"circuit theory",grade:"4"},
    1:{subject: "elec motors",grade:"4"}
      },
     2: { branch:"ece",details:"electrical engg",
    0:{subject:"analog electronics",grade:"4"},
    1:{subject: "digital electronics",grade:"3"}
      },
  3: { branch:"cse",details:" coputer sc engg",
    0:{subject:"c programming",grade:"3"},
    1:{subject: " c++ programming",grade:"4"}
      }
                    }
};
oTable = new sap.ui.table.TreeTable({
columns: [
new sap.ui.table.Column({label: "Branch", template: "branch"}),
new sap.ui.table.Column({label: "Subject", template: "subject"}),
new sap.ui.table.Column({label: "Details", template: "details"}),
new sap.ui.table.Column({label: "Grade", template: "grade"})
],

});
oModel= new sap.ui.model.json.JSONModel();
oModel.setData(oTableData);
oTable.setModel(oModel);
oTable.bindRows("/root");

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

});
output:

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: