In this tutorial we are going to build a simple HANA application that consumes OData services and display the result using UI5 table.
In the previous tutorial “A Simple HANA application for creating OData services” we have created an OData service and tested it. In this tutorial, we are going to make use of this service and display the result.
I am doing further developments in the same project which we have created for the OData services (demo_odata_services).
Since I have not added the Plugin for UI5 development yet, I am creating a simple webpage which includes the UI5 libraries. You can copy the template code from the below URL.
https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/5b9a170d9f6a4d5784e8ab2ded3d8517.html
Pre-requisites:
1. Knowledge on creating the OData service
2. Use of Table UI in the SAP UI5
Reference links;
http://www.teamabap.com/2014/07/a-simple-hana-application-with-odata.html
http://www.teamabap.com/2014/05/creating-table-in-ui5.html
Create a file index.html in the XS project.
![clip_image001[4]](http://lh3.ggpht.com/-frBepjmDjPs/U8jF9O62iTI/AAAAAAAAH6w/_qmzyq_VQpM/s1600-h/clip_image001%25255B4%25255D%25255B2%25255D.png "clip_image001[4]")
Copy the code template and modify as below.
<!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>Consuming OData service</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.ui.ux3,sap.ui.core,sap.ui.table"></script>
<!-- 2.) Create a UI5 button and place it onto the page -->
<script>
// Create a Model based on the OData Service
var oModel = new sap.ui.model.odata.ODataModel("/demo_odata_service/services.xsodata", false);
// Create a table to display the data
oTable = new sap.ui.table.Table("SFLIGHT",{tableId: "TAB_SFLIGHT", visibleRowCount: 10});
// Airplane ID
var oColumn = new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Airplane ID"}),
template: new sap.ui.commons.TextView().bindProperty("text", "CARRID"),
sortProperty: "CARRID",
filterProperty: "CARRID"
});
oTable.addColumn(oColumn);
// Connection ID
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Connection ID"}),
template: new sap.ui.commons.TextView().bindProperty("text", "CONNID"),
sortProperty: "CONNID",
filterProperty: "CONNID"
}));
oTable.addColumn(oColumn);
// Flight Date
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Flight Date"}),
template: new sap.ui.commons.TextView().bindProperty("text", "FLDATE"),
sortProperty: "FLDATE",
filterProperty: "FLDATE"
}));
oTable.addColumn(oColumn);
// Price
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Price"}),
template: new sap.ui.commons.TextView().bindProperty("text", "PRICE")
}));
oTable.addColumn(oColumn);
// Currency
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Currency"}),
template: new sap.ui.commons.TextView().bindProperty("text", "CURRENCY")
}));
oTable.addColumn(oColumn);
// Seats Maximum
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Seats Maximum"}),
template: new sap.ui.commons.TextView().bindProperty("text", "SEATSMAX")
}));
oTable.addColumn(oColumn);
// Seats occupied
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Seats Occupied"}),
template: new sap.ui.commons.TextView().bindProperty("text", "SEATSOCC")
}));
oTable.addColumn(oColumn);
// Payment sum
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Amount"}),
template: new sap.ui.commons.TextView().bindProperty("text", "PAYMENTSUM"),
sortProperty: "CONNID",
filterProperty: "CONNID"
}));
oTable.addColumn(oColumn);
// Bind the data to the model
oTable.setModel(oModel);
oTable.bindRows("/MALL");
// place the button into the HTML element defined below
oTable.placeAt("uiArea");
</script>
</head>
<body class="sapUiBody">
<!-- This is where you place the UI5 button -->
<div id="uiArea"></div>
</body>
</html>
You can get the URL for the service that you have to pass for creating model from where we tested the .xsodata in previous application.
![clip_image002[4]](http://lh3.ggpht.com/-5a8P0Na3-ps/U8jF-mng31I/AAAAAAAAH7A/Oje83fHSJnY/s1600-h/clip_image002%25255B4%25255D%25255B2%25255D.png "clip_image002[4]")
Save and activate the application. Test the file index.html
![clip_image004[4]](http://lh3.ggpht.com/-fKIuxSAZu0k/U8jGAG2SlrI/AAAAAAAAH7Q/Kt9fK1gHKhs/s1600-h/clip_image004%25255B4%25255D%25255B2%25255D.jpg "clip_image004[4]")
Currently I am not able to see the data because I do not have sufficient privilege to access these data.
You can check it on the SQL Console by executing a query as below
![clip_image006[4]](http://lh6.ggpht.com/-5Iam5uXvFqc/U8jGBr4r-0I/AAAAAAAAH7g/g473en8DpKI/s1600-h/clip_image006%25255B4%25255D%25255B2%25255D.jpg "clip_image006[4]")
Oops I should have checked it in the first place before creating the tutorial. You can use the scheme SAP_HANA_EPM_DEMO if you are not having privilege to access the SFLIGHT schema. I have privileges to select the content of schema SAP_HANA_EPM_DEMO. From Next tutorials I will be using this schema instead of SFLIGHT.
![clip_image008[4]](http://lh3.ggpht.com/-RlMOGOuXMHQ/U8jGC37nfrI/AAAAAAAAH7w/JaZSztr0Ecc/s1600-h/clip_image008%25255B4%25255D%25255B2%25255D.jpg "clip_image008[4]")
If you are not able to find a schema with a proper privilege its fine, you can create a schema on your own and create tables in them and add contents on the tables.
In the next tutorial we will see:
1. Creating a Database Schema
2. Creating a Database table
3. Inserting content in the Database table
Good one Arun
ReplyDelete