How to create and consume gateway service via SAPUI5 – Part 3

In this third and last part of this series, we will consume the OData service previously created, using SAPUI5, displaying the query results in a table.

We need to use the project created in eclipse in the first part of this series and consume the service created in second part. The part one and two can be found in the following links.

How to create and consume a gateway service via SAPUI5 – Part 1

How to create and consume gateway service via SAPUI5 – Part 2

Let´s change the project according with this example.

First, we need to change index.html file, including the sap.ui.table component. See example below.

<script src="resources/sap-ui-core.js"
        id="sap-ui-bootstrap"
        data-sap-ui-libs="sap.ui.commons, sap.ui.table"
        data-sap-ui-theme="sap_bluecrystal"> 
</script>

Now we need to change the controller, including the logic to create a model that will connect to Odata service. In airline.controller.js, create a new method getModel. Here we will inform the url from Odata service which we create in second part of our tutorial. Please check the url created in service and replace in your code.

getModel: function(){
// Return model based in OData Service
return new sap.ui.model.odata.ODataModel("http://Yourserver:Port/sap/opu/odata/SAP/ZHELLOODATA_SRV");
}

Replace the url by the url from your service, you can find it in the service created, see the previously blog post.

The last change will be made in view file. Here we going to do the logic to create a table that display the results from the Odata Service.

In createContent method enter the code below.

var layout = new sap.ui.commons.layout.MatrixLayout('layout');
layout.setWidth('100%');
var rPannel = new sap.ui.commons.Panel('rPannel');
var rTitle = new sap.ui.commons.Title('rTitle');
rTitle.setText('Airlines');
rPannel.setTitle(rTitle);
var oTable = new sap.ui.table.DataTable();
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Airline"
}),
template : new sap.ui.commons.TextField().bindProperty("value",
"Carrid"),
sortProperty : "Carrid"
}));
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Airline Name"
}),
template : new sap.ui.commons.TextField().bindProperty("value",
"Carrname"),
sortProperty : "Carrname"
}));
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Currency"
}),
template : new sap.ui.commons.TextField().bindProperty("value",
"Currcode"),
sortProperty : "Currcode"
}));
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Url"
}),
template : new sap.ui.commons.TextField().bindProperty("value",
"Url"),
sortProperty : "Url"
}));
oTable.setModel(oController.getModel());
oTable.bindRows("/SCARRSet");
rPannel.addContent(oTable);
layout.createRow(rPannel);
this.addContent(layout);

In the logic above we have some points of attention: The name of properties of table column is the same displayed in metadata, or the same of the columns of the DDIC table. In line 48, we have to set the name of our collection, we can find in the XML, see 3th image of this blog. You need enter the value with a ‘/’, just like you can see in this example.

Now you can save and submit the files. To do this, right click over the project name, on project explorer, then choose team submit, this procedure was demonstrated in first article. Let’s run and test, the final result is like a demonstrate in image below.

I appreciate so much to publish this blogs and want to continue publish more and more about my studies and learning.

Thank you all!