<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Table Columns</title>
<!-- 1.) Load SAPUI5 (from a remote server), select theme and control library -->
<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.ui.commons,sap.m,sap.ui.layout,sap.ui.table" data-sap-ui-xx-bindingSyntax="complex"></script>
<style>
#oButton {
background-color: transparent;
}
</style>
<!-- 2.) Create a UI5 Table and place it onto the page -->
<script>
var oToolBar = new sap.ui.commons.Toolbar({
rightItems: [new sap.ui.commons.Button("oButton", {
text: {
path: '/Visible',
formatter: function formatButton(value) {
return value ? 'Show' : 'Hide';
}
},
icon: {
path: '/Visible',
formatter: function formatButton(src) {
return src ? 'sap-icon://open-command-field' : 'sap-icon://close-command-field';
}
},
press: function(oEvent) {
jQuery.sap.delayedCall(400, null, function() {
var oModel = sap.ui.getCore().getModel();
oModel.setProperty('/Visible', !oModel.getProperty('/Visible'));
oModel.setProperty('/Invisible', !oModel.getProperty('/Invisible'));
});
}
})]
});
//Create an instance of the table control
var oTable2 = new sap.ui.table.Table("oTable", {
visibleRowCount: 5,
selectionMode: sap.ui.table.SelectionMode.Single
});
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "Customer"
}),
template: new sap.ui.commons.TextField().bindProperty("value", "Customer"),
sortProperty: "Customer",
filterProperty: "Customer"
}));
oTable2.addColumn(new sap.ui.table.Column({
visible: "{/Visible}",
label: new sap.ui.commons.Label({
text: "Country"
}),
template: new sap.ui.commons.TextField().bindProperty("value", "Country"),
sortProperty: "Country",
filterProperty: "Country"
}));
oTable2.addColumn(new sap.ui.table.Column({
visible: "{/Visible}",
label: new sap.ui.commons.Label({
text: "Name"
}),
template: new sap.ui.commons.TextField().bindProperty("value", "Name"),
sortProperty: "Name",
filterProperty: "Name"
}));
oTable2.addColumn(new sap.ui.table.Column({
visible: "{/Visible}",
label: new sap.ui.commons.Label({
text: "Address"
}),
template: new sap.ui.commons.TextField().bindProperty("value", "Address"),
sortProperty: "Address",
filterProperty: "Address"
}));
oTable2.addColumn(new sap.ui.table.Column({
visible: "{/Visible}",
label: new sap.ui.commons.Label({
text: "Technology"
}),
template: new sap.ui.commons.TextField().bindProperty("value", "Technology"),
sortProperty: "Technology",
filterProperty: "Technology"
}));
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "City"
}),
template: new sap.ui.commons.TextField().bindProperty("value", "City"),
sortProperty: "City",
filterProperty: "City"
}));
oTable2.addColumn(new sap.ui.table.Column({
visible: "{/Invisible}",
label: new sap.ui.commons.Label({
text: "State"
}),
template: new sap.ui.commons.TextField().bindProperty("value", "State"),
sortProperty: "State",
filterProperty: "State"
}));
oTable2.addColumn(new sap.ui.table.Column({
visible: "{/Invisible}",
label: new sap.ui.commons.Label({
text: "Rating"
}),
template: new sap.ui.commons.TextField().bindProperty("value", "Rating"),
sortProperty: "Rating",
filterProperty: "Rating"
}));
oTable2.addColumn(new sap.ui.table.Column({
visible: "{/Invisible}",
label: new sap.ui.commons.Label({
text: "Month"
}),
template: new sap.ui.commons.TextField().bindProperty("value", "Month"),
sortProperty: "Month",
filterProperty: "Month"
}));
oTable2.addColumn(new sap.ui.table.Column({
visible: "{/Invisible}",
label: new sap.ui.commons.Label({
text: "Day"
}),
template: new sap.ui.commons.TextField().bindProperty("value", "Day"),
sortProperty: "Day",
filterProperty: "Day"
}));
var aData = [{
Customer: "1",
Country: "IN",
Name: "Rahul Khanna",
Address: "22950",
Technology: "SAP",
City: "Bangalore",
State: "KA",
Rating: "5",
Month: "June",
Day: "21"
}, {
Customer: "2",
Country: "IN",
Name: "Debasis Mohanty",
Address: "22953",
Technology: "Java",
City: "Hyderabad",
State: "TS",
Rating: "3",
Month: "Feb",
Day: "2"
}, {
Customer: "3",
Country: "ES",
Name: "Maggie Grant",
Address: "22954",
Technology: "Oracle",
City: "Chennai",
State: "TN",
Rating: "4",
Month: "Jan",
Day: "17"
}, {
Customer: "4",
Country: "FR",
Name: "Andy Chun",
Address: "22958",
Technology: ".NET",
City: "Lucknow",
State: "UP",
Rating: "2",
Month: "Dec",
Day: "22"
}, {
Customer: "5",
Country: "FR",
Name: "Robert Anderson",
Address: "22959",
Technology: "Salesforce",
City: "Pune",
State: "MH",
Rating: "4",
Month: "Aug",
Day: "5"
}, {
Customer: "6",
Country: "IN",
Name: "Swetha Singh",
Address: "23968",
Technology: "IT",
City: "Noida",
State: "DL",
Rating: "5",
Month: "March",
Day: "19"
}];
//Create a model and bind the table rows to this model
var model = new sap.ui.model.json.JSONModel();
model.setData(aData);
sap.ui.getCore().setModel(model);
sap.ui.getCore().setModel(
new sap.ui.model.json.JSONModel({
visible: true
}),
'visibleModel'
);
sap.ui.getCore().getModel().setProperty("/Visible", true);
sap.ui.getCore().getModel().setProperty("/Invisible", false);
oTable2.bindRows("/");
var oVLayout = new sap.ui.layout.VerticalLayout({
content: [oToolBar, oTable2]
});
oVLayout.placeAt("uiArea");
</script>
</head>
<body class="sapUiBody">
<!-- This is where you place the UI5 Table -->
<div id="uiArea"></div>
</body>
</html>
// Code goes here
/* Styles go here */