Introduction
The tutorial will demonstrate how to build application on HANA DB using UI5.
Integration of UI5 application with HANA DB happens in 3 step process:
The document gives step-by-step process starting from creation of modelling object in HANA modeler, then exposing it into odata service and finally consume in UI5 application.
For the tutorial we will create an attribute view in HANA model from ECC table(T001W), expose the view in odata service and display the data from the attribute view in the UI5 application.
1. Creation of ATTRIBUTE View:
For this tutorial I am assuming we already have sourced tables from ECC to HANA systems.
·
2. Exposing Attribute View in an ODATA Service
o .xsapp . A blank file with name “.xsapp”
o .xsaccess. Write following in the file
{ "exposed" : true, "authentication" : [ { "method" : "Basic" } ] }
service {
//<PACKAGE NAME>::<ATTRIBUTE_VIEW NAME> as <RESULT SET NAME>
"trng::AT_PLANT_VIEW" as "PlantView"
keys generate local "ID";
}
o Pass $metadata as query string to view the metadata for odataservice.
http://<HOST>:<PORT>/PlantService/PlantOData.xsodata/$metadata
o You can view the data from attribute view by passing resultset name given in the odata service definition file(e.g. PlantView) in the URL.
http://<HOST>:<PORT>/PlantService/PlantOData.xsodata/PlantView
3. Consuming ODATA service in UI5 Project
<script src="/sap/ui5/1/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.ui.table"
data-sap-ui-theme="sap_goldreflection">
</script>
var oDataUrl= http://hostname:portnumber/PlantService/PlantOData.xsodata/;
var oDataModel= newsap.ui.model.odata.ODataModel(oDataUrl);
createContent : function(oController) {
varoPlantTable = newsap.ui.table.Table({
visibleRowCount: 10,
threshold:100,
width : "500px",
});
//Define the columns and the control templates to be used
oPlantTable.addColumn( newsap.ui.table.Column({
label: newsap.ui.commons.Label({text: "Plant"}),
template: newsap.ui.commons.TextView().bindProperty("text", "WERKS"),
sortProperty: "WERKS",
filterProperty: "WERKS",
width: "40px"
}));
oPlantTable.addColumn(newsap.ui.table.Column({
label: newsap.ui.commons.Label({text: "Name"}),
template: newsap.ui.commons.TextView().bindProperty("text", "NAME1"),
sortProperty: "NAME1",
filterProperty: "NAME1",
width: "120px"
}));
oPlantTable.addColumn(newsap.ui.table.Column({
label: newsap.ui.commons.Label({text: "Street"}),
template: newsap.ui.commons.TextView().bindProperty("text", "STRAS"),
sortProperty: "STRAS",
filterProperty: "STRAS",
width: "120px"
}));
oPlantTable.addColumn(newsap.ui.table.Column({
label: newsap.ui.commons.Label({text: "City"}),
template: newsap.ui.commons.TextView().bindProperty("text", "ORT01"),
sortProperty: "ORT01",
filterProperty: "ORT01",
width: "80px"
}));
oPlantTable.setModel(oDataModel);
oPlantTable.bindRows("/PlantView");
returnoPlantTable;
}
http://<hostname>:<port>/<package: if shared to a package>/plantlist/WebContent/index.html
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
37 | |
10 | |
7 | |
5 | |
5 | |
4 | |
4 | |
3 | |
3 | |
3 |