<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="UTF-8">
<title>Table Selection</title>
<script
id="sap-ui-bootstrap"
src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots='{
"sap.ui.demo.tble": "./"
}'>
</script>
<style>
.labelStyle{
font-size: 0.975rem;
font-weight: bold;
margin-top: 10%;
}
.hBoxStyle{
margin-left:35%;
}
.inputStyle{
margin-left:5%;
}
</style>
<script>
new sap.m.Shell("ShellId",{title: "Table",
showLogout: false,
app: new sap.ui.core.ComponentContainer({
name: "sap.ui.demo.tble"
})
}).placeAt("content");
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
// Code goes here
/* Styles go here */
jQuery.sap.declare("sap.ui.demo.tble.Component");
sap.ui.core.UIComponent.extend("sap.ui.demo.tble.Component", {
createContent : function () {
// create root view
var oView = sap.ui.view({
id : "app",
viewName : "sap.ui.demo.tble.oTblHome",
type : "JS",
});
var dataObject = [
{Product: "Power Projector 4713", Weight: "33"}];
var model = new sap.ui.model.json.JSONModel();
model.setData({
modelData: {
productsData : []
}
});
oView.setModel(model);
oView.getModel().setProperty("/modelData/productsData", dataObject);
return oView;
}
});
sap.ui.jsview("sap.ui.demo.tble.oTblHome", {
/** 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 routingdemo.App
*/
getControllerName : function() {
return "sap.ui.demo.tble.oTblHome";
},
/** 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 routingdemo.App
*/
createContent : function(oController) {
this.setDisplayBlock(true);
this.app = new sap.m.App("mainApp",{initialPage:"FirstPage"});
var page = sap.ui.jsview("FirstPage", "sap.ui.demo.tble.oTblFirst");
this.app.addPage(page);
return this.app;
}
});
sap.ui.controller("sap.ui.demo.tble.oTblHome", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf zui5_sample.Home
*/
// onInit: function() {
//
// },
/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf zui5_sample.Home
*/
// onBeforeRendering: function() {
//
// },
/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf zui5_sample.Home
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf zui5_sample.Home
*/
// onExit: function() {
//
// }
});
sap.ui.jsview("sap.ui.demo.tble.oTblFirst", {
/** 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 routingdemo.App
*/
getControllerName : function() {
return "sap.ui.demo.tble.oTblFirst";
},
/** 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 routingdemo.App
*/
createContent : function(oController) {
var controller = this.oController;
var page = new sap.m.Page({
title:"First Page",
enableScrolling: true
});
var table = new sap.m.Table({
headerText :"Products List",
id:"ProductsTable",
mode:"SingleSelectMaster",
selectionChange : function (evt) {
controller.onPress(evt);
},
columns: [
new sap.m.Column({
header: new sap.m.Label({text: "Product"}),
demandPopin: true
}),
new sap.m.Column({
header: new sap.m.Label({text: "Weight"}),
demandPopin: true
})
],
items: {
path: "/modelData/productsData",
sorter: new sap.ui.model.Sorter("Product", true),
template: new sap.m.ColumnListItem({type:"Active",
cells: [
new sap.m.Text({
text: "{Product}"
}),
new sap.m.Text({
text: "{Weight}"
})
]
})
}
});
page.addContent(table);
return page;
}
});
sap.ui.controller("sap.ui.demo.tble.oTblFirst", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf table_v01.Main
*/
onInit: function() {
},
onPress: function(oEvent){
var oBindingPath = this.getView().getModel().getProperty(oEvent.getSource().getBinding("items").getContexts()[oEvent.getSource().indexOfItem(oEvent.getParameters().listItem)].sPath);
var oSelectedTitle = oBindingPath.Product;
var oSelectedInfo = oBindingPath.Weight;
var app = sap.ui.getCore().byId("mainApp");
var page = app.getPage("SecondPage");
if(page === null )
{
var page = new sap.ui.jsview("SecondPage", "sap.ui.demo.tble.oTblSecond");
app.addPage(page);
}
app.to(page,"slide",{oTitle:oSelectedTitle,oInfo:oSelectedInfo});
}
});
sap.ui.jsview("sap.ui.demo.tble.oTblSecond", {
/** 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 routingdemo.App
*/
getControllerName : function() {
return "sap.ui.demo.tble.oTblSecond";
},
/** 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 routingdemo.App
*/
createContent : function(oController) {
var oFirstTitle;
var oFirstInfo;
var controller = this.oController;
var page = new sap.m.Page({
title:"Second Page",
showNavButton : true,
navButtonPress: controller.onPress,
enableScrolling: true
});
this.addEventDelegate({
onBeforeShow: function(event) {
var params = event.data;
var oFirstTitle = params.oTitle;
var oFirstInfo = params.oInfo;
sap.ui.getCore().byId("oLabel").setText(oFirstTitle);
sap.ui.getCore().byId("oInput").setValue(oFirstInfo);
}
}, this);
var oProductText = new sap.m.Label("oLabel").addStyleClass("labelStyle");
var oWeightInput = new sap.m.Input("oInput").addStyleClass("inputStyle");
var oHBox = new sap.m.HBox({items:[oProductText,oWeightInput]}).addStyleClass("hBoxStyle");
page.addContent(oHBox);
return page;
}
});
sap.ui.controller("sap.ui.demo.tble.oTblSecond", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf table_v01.Main
*/
onInit: function() {
},
onPress: function(oEvent){
sap.ui.getCore().byId("ProductsTable").removeSelections();
var app = sap.ui.getCore().byId("mainApp");
app.back();
}
});