Now you will use the created service in the index.html
file.
You will replace the existing code with the following, which is quite a bit but should be easily readable and understandable as we are adding a table to a page.
Make sure you replace <MESSAGE_ID>
below with the name of your table with corresponding message type table, like T_IOT_15B1E994B520C8D65A42
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8"/>
<title>My Sensor Data</title>
<script id='sap-ui-bootstrap'
src='/sap/ui5/1/resources/sap-ui-core.js'
data-sap-ui-theme='sap_goldreflection'
data-sap-ui-libs='sap.ui.core,sap.ui.commons,sap.ui.table'>
</script>
<script language="JavaScript">
var oModel = new sap.ui.model.odata.ODataModel("/codejam/iotmmsxs/services/iotservice.xsodata/", false);
var arrayHeaders = new Array();
oTable = new sap.ui.table.Table("test",{tableId: "tableID", visibleRowCount: 10});
//Bring the table onto the UI
oTable.placeAt("sensor_table");
//Table Column Definitions
var oMeta = oModel.getServiceMetadata();
var oControl;
for ( var i = 0; i < oMeta.dataServices.schema[0].entityType[0].property.length; i++) {
var property = oMeta.dataServices.schema[0].entityType[0].property[i];
oControl = new sap.ui.commons.TextField().bindProperty("value",property.name);
oTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text: property.name}), template: oControl, sortProperty: property.name, filterProperty: property.name, filterOperator: sap.ui.model.FilterOperator.EQ, flexible: true, width: "125px" }));
}
oTable.setModel(oModel);
var sort1 = new sap.ui.model.Sorter("C_TIMESTAMP");
//Replace <MESSAGE_ID> below with the name of your table with corresponding message type table, like T_IOT_15B1E994B520C8D65A42
oTable.bindRows("/<MESSAGE_ID>",sort1);
</script>
</head>
<body>
<div id="sensor_table"/>
</body>
</html>