The XS OData service also allows you to build applications to display the data. You could do this with SAP Web IDE or any number of tools. To keep things simple, you will modify the index.html
file that was added to your project when you did the Create Application step.
Replace the existing file contents with the HTML/JavaScript contents below to add a table to the page. There is more than one way to do this so feel free to explore and discover!
<!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("/CODEJAMMER/johndoe/myiot/mydata.xsodata/", false);
var arrayHeaders = new Array();
var ROW_COUNT = 40;
oTable = new sap.ui.table.Table("test",{tableId: "tableID", visibleRowCount: ROW_COUNT});
//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("ID");
oTable.bindRows("/DATA",sort1);
</script>
</head>
<body>
<div id="sensor_table"> </div>
</body>
</html>
The web view is shown here. Note that since this pages uses the SAPUI5 JavaScript framework, this is now a responsive web app and if you were to open this on your tablet or smartphone you would see a similar view but it would fit better to the screen of your device.
