I'm trying to add dynamic table in sapui5 by using sap.ui.table.Table. But in this example using HTML view, but I want to XML for my view.
What is the alternative way to place the table in XML by using this way
<!DOCTYPE html>
<html><head>
<meta name="description" content="UI5 table example with local JSON model" />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>SAPUI5 Dynamic Table</title>
<script id='sap-ui-bootstrap' type='text/javascript'
src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m,sap.ui.table'></script>
<script>
var columnData = [{
columnName: "firstName"
}, {
columnName: "lastName"
}, {
columnName: "department"
}];
var rowData = [{
firstName: "Sachin",
lastName: "Tendulkar",
department: "Cricket"
}, {
firstName: "Lionel",
lastName: "Messi",
department: "Football"
}, {
firstName: "Mohan",
lastName: "Lal",
department: "Film"
}];
var oTable = new sap.ui.table.Table({
visibleRowCount: 3
});
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
rows: rowData,
columns: columnData
});
oTable.setModel(oModel);
oTable.bindColumns("/columns", function(sId, oContext) {
var columnName = oContext.getObject().columnName;
return new sap.ui.table.Column({
label: columnName,
template: columnName,
});
});
oTable.bindRows("/rows");
page = new sap.m.Page({content:[
oTable
]});
app = new sap.m.App();
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>My XML file will look like
<mvc:View
controllerName="sap.ui.demo.toolpageapp.controller.Statistics"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Page showHeader="false">
<content>
<!-- want to place the table here -->
</content>
</Page>
You can achieve it using bindColumns() and bindRows()
XML view
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:ui="sap.ui.table"
controllerName="XXXX.Main" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Dynamic Binding" class="sapUiContentPadding">
<content>
<ui:Table id="reOrderTable"></ui:Table>
</content>
</Page>
</core:View>
Controller.js
onInit: function() {
var oModel = this.getTableData(this);
this.createDynTable(this, oModel);
}
/**
* Get Data
*/
getTableData: function(that) {
var columnData = [
{ "colId": "Amt", "colName": "Amount", "colVisibility": true, "colPosition": 0 },
{ "colId": "Qty", "colName": "Quantity", "colVisibility": true, "colPosition": 1 },
{ "colId": "Unt", "colName": "Unit", "colVisibility": true, "colPosition": 2 },
{ "colId": "OPA", "colName": "OpenPOAmount", "colVisibility": true, "colPosition": 3 },
{ "colId": "OPQ", "colName": "OpenPOQuantity", "colVisibility": true, "colPosition": 4 }
];
var rowData = [{
"Amount": "200",
"Quantity": "RF",
"Unit": "CV",
"OpenPOAmount": "5988",
"OpenPOQuantity": "YY",
"EXT_FLDS": {
"PRINTING_NUM": {
"fieldvalue": 10,
"fieldlabel": "Printing Number",
"uictrl": "sap.m.Input"
},
"COUNTRY": {
"fieldvalue": "Thailand",
"fieldlabel": "Country",
"uictrl": "sap.m.ComboBox"
}
}
},
{
"Amount": "80",
"Quantity": "UG",
"Unit": "RT",
"OpenPOAmount": "878",
"OpenPOQuantity": "RF",
"EXT_FLDS": {
"PRINTING_NUM": {
"fieldvalue": 11,
"fieldlabel": "Printing Number",
"uictrl": "sap.m.Input"
},
"COUNTRY": {
"fieldvalue": "Thailand",
"fieldlabel": "Country",
"uictrl": "sap.m.ComboBox"
}
}
},
{
"Amount": "789",
"Quantity": "GV",
"Unit": "ED",
"OpenPOAmount": "8989",
"OpenPOQuantity": "FGG",
"EXT_FLDS": {
"PRINTING_NUM": {
"fieldvalue": 12,
"fieldlabel": "Printing Number",
"uictrl": "sap.m.Input"
},
"COUNTRY": {
"fieldvalue": "Thailand",
"fieldlabel": "Country",
"uictrl": "sap.m.ComboBox"
}
}
}
];
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
rows: rowData,
columns: columnData
});
return oModel;
},
/**
* Creating Dynamic table
*/
createDynTable: function(that, oModel) {
var oTable = this.byId("reOrderTable");
oTable.setModel(oModel);
oTable.bindColumns("/columns", function(sId, oContext) {
var columnName = oContext.getObject().colName;
return new sap.ui.table.Column({
label: columnName,
template: columnName,
});
});
oTable.bindRows("/rows");
}