Here in this space, we will see to make use of UI5 table control on a MII page. Here let us focus on the UI5 table with the dummy json object data. And in the upcoming section, we will see how we can bind the data from a BLS to this table.
- Go to MII workbench, WEB, right click on folder, create a new irpt page save it with “FirstPage.irpt”.
- Add the reference to the libraries.
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.table,sap.ui.commons"
data-sap-ui-theme="sap_bluecrystal">
</script>
- In BODY element, create one div.
<div id="uiArea"></div>
- Add the script elements to define json dataobject, create table and place it on the div area.
<script></script>
- Inside script tags, define the json data object
var dataObject = [{
"EmployeeID" : "123210",
"Name" : "James Ad",
"Designation" : "SSE",
"Location" : "Delhi",
"Hierarchy" : "6"
},{
"EmployeeID" : "123218",
"Name" : "Rick Hui",
"Designation" : "Manager",
"Location" : "Mumbai",
"Hierarchy" : "2"
}];
- Create a ui5 table using sap.ui.table control.
var oTable = new sap.ui.table.Table("oTable", {
visibleRowCount: 10,
selectionBehavior: "Row"
});
- Add column to this table:
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "Employee Number",
wrapping: true
}),
template: new sap.ui.commons.TextField().bindProperty("value", "EmployeeID"),
sortProperty: "EmployeeID",
filterProperty: "EmployeeID",
width: "80px"
}));
Similarly add more columns depending upon the requirement.
- Now instantiate the json data model, set it our dataobject defined earlier. Bind the data and place it on the div.
var model = new sap.ui.model.json.JSONModel();
model.setData(dataObject);
sap.ui.getCore().setModel(model);
oTable.bindRows("/");
oTable.placeAt("uiArea");
- Save the page and test it using Chrome browser. The page will look like this:
