<!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="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.ui.table, sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots='{
"task3": "./"
}'>
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
new sap.m.Shell("ShellId",{title: "Page",
showLogout: false,
app: new sap.ui.core.ComponentContainer({
name: "task3"
})
}).placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
// Code goes here
/* Styles go here */
jQuery.sap.declare("task3.Component");
sap.ui.core.UIComponent.extend("task3.Component", {
createContent: function() {
// create root view
var oView = sap.ui.view({
id: "app",
viewName: "task3.Home",
type: "JS",
});
return oView;
}
});
sap.ui.jsview("task3.Home", {
/** 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 "task3.Home";
},
/** 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:"page1"});
var page = sap.ui.jsview("page1", "task3.page1");
this.app.addPage(page);
return this.app;
}
});
sap.ui.controller("task3.Home", {
/**
* 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("task3.page1", {
/** 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 task3.page1
*/
getControllerName: function() {
return "task3.page1";
},
/** 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 task3.page1
*/
createContent: function(oController) {
var vData = [{
assID: "EM1234",
name: "kishan",
linkText: "crave Technology Solutions",
gender: "Male",
mobile: "9934307162",
rating: 5
}, {
assID: "EM123456",
name: "Bharath S",
linkText: "crave Technology Solutions",
gender: "Male",
mobile: "9934307162",
rating: 5
}, {
assID: "EM263521",
name: "Arun M",
linkText: "crave Technology Solutions",
href: "http://www.cognizant.com",
gender: "Male",
mobile: "9786721460",
rating: 3
}, {
assID: "EM323455",
name: "Anitha",
linkText: "Cognizant Technology Solutions",
href: "http://www.cognizant.com",
gender: "Female",
mobile: "9524396759",
rating: 4
}, {
assID: "EM237652",
name: "Ganesh",
linkText: "Cognizant Technology Solutions",
href: "http://www.cognizant.com",
gender: "Male",
mobile: "9876543210",
rating: 1
}, {
assID: "EM398454",
name: "Ajai",
linkText: "Cognizant Technology Solutions",
href: "http://www.cognizant.com",
gender: "Male",
mobile: "9576113218",
rating: 4
}, {
assID: "EM348092",
name: "Pranav",
linkText: "Cognizant Technology Solutions",
href: "http://www.cognizant.com",
gender: "Male",
mobile: "9576113218",
rating: 5
}];
var oTable = new sap.ui.table.Table({
// Displayed as the heading of the table
visibleRowCount: 8, // How much rows you want to display in the table
selectionMode: sap.ui.table.SelectionMode.Single, //Use Singe or Multi
navigationMode: sap.ui.table.NavigationMode.Paginator, //Paginator or Scrollbar
fixedColumnCount: 7, // Freezes the number of columns
enableColumnReordering: true, // Allows you to drag and drop the column and reorder the position of the column
width: "1024px" // width of the table
});
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "Name"
}),
template: new sap.ui.commons.TextField().bindProperty("value", "assID"),
sortProperty: "assID",
filterProperty: "assID",
width: "125px"
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "Discription"
}),
template: new sap.ui.commons.TextField().bindProperty("value", "name"),
sortProperty: "name",
filterProperty: "name",
width: "125px"
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "MasterReading"
}),
template: new sap.ui.commons.TextField().bindProperty("value", "name"),
sortProperty: "name",
filterProperty: "name",
width: "125px"
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "Value"
}),
template: new sap.ui.commons.TextField().bindProperty("value", "name"),
sortProperty: "name",
filterProperty: "name",
width: "125px"
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "Gender"
}),
template: new sap.ui.commons.ComboBox({
items: [new sap.ui.core.ListItem({
text: "Female"
}),
new sap.ui.core.ListItem({
text: "Male"
})
]
}).bindProperty("value", "gender"),
sortProperty: "gender",
filterProperty: "gender",
width: "75px"
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "Details"
}),
template: new sap.ui.commons.TextField().bindProperty("value", "name"),
sortProperty: "name",
filterProperty: "name",
width: "125px"
}));
// oTable.addColumn(new sap.ui.table.Column({
// label: new sap.ui.commons.Label({text: "Details"}),
// template: new sap.ui.commons.Button().bindProperty("value", "name2"),
// sortProperty: "name2",
// filterProperty: "name2",
// width: "125px"
// }));
//
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "Confirmation"
}),
width: "125px",
template: new sap.ui.layout.HorizontalLayout({
content: [
new sap.ui.commons.TextView({
textAlign: sap.ui.core.TextAlign.Left,
visible: false
}),
new sap.ui.commons.Button({
text: "DETAILS",
visible: true
})
]
})
}));
var oModel = new sap.ui.model.json.JSONModel(); // created a JSON model
oModel.setData({
modelData: vData
}); // Set the data to the model using the JSON object defined already
oTable.setModel(oModel);
oTable.bindRows("/modelData"); // binding all the rows into the model
var footer = new sap.m.Bar({
contentRight: [
new sap.m.Button({
text: "Order",
type: "Emphasized"
}),
new sap.m.Button({
text: "Start",
type: "Emphasized"
}),
new sap.m.Button({
text: "Submit",
type: "Emphasized"
}),
new sap.m.Button({
text: "Approve",
type: "Emphasized"
}),
new sap.m.Button({
text: "ER",
type: "Emphasized"
}),
new sap.m.Button({
text: "Synchoniz",
type: "Emphasized"
})
]
})
page = new sap.m.Page({
title: "My Table",
content: [oTable],
footer: footer
});
return page;
}
});
sap.ui.controller("task3.page1", {
/**
* 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 inline.FIRST
*/
// 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 inline.FIRST
*/
// 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 inline.FIRST
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf inline.FIRST
*/
// onExit: function() {
//
// }
})