Consume an OData Service from SAPUI5 in SAP HANA Studio

I am going to demonstrate you a simple step by step procedure for displaying a table using UI5 in SAP HANA. The output table looks like below, also I would like to apologies for the schema name used by me. I have used my schema name as MAYUR since it was created by default:

Step 1: Create XS Project in Project Explorer. 

Step 2: Create a Schema file TestSchema.hdbschema. Add:

schema_name="MAYUR";

Step 3: Create “data” folder and create a table file: POitem.hdbtable. Add:

table.schemaName = "MAYUR";

table.tableType = COLUMNSTORE; 

table.description = "EPM Purchase Order Item";

table.columns = [

       {name = "PurchaseOrderId"; sqlType = NVARCHAR; nullable = false; length = 10; comment = "Purchase Order ID"; },

       {name = "PurchaseOrderItem"; sqlType = NVARCHAR; nullable = false; length = 10; comment = "Purchase Order Item"; },

       {name = "ProductId"; sqlType = NVARCHAR; nullable = false; length = 10; comment = "Product ID"; },

       {name = "NoteId"; sqlType = NVARCHAR; nullable = true; length = 10; comment = "PO Note Text ID"; },

       {name = "Currency"; sqlType = NVARCHAR; nullable = false; length = 5; comment = "Currency Code"; },    

       {name = "GrossAmount"; sqlType = DECIMAL; nullable = false; precision = 15; scale = 2; defaultValue = "0"; comment = "Gross Amount"; },      

       {name = "NetAmount"; sqlType = DECIMAL; nullable = false; precision = 15; scale = 2; defaultValue = "0"; comment = "Net Amount"; }, 

       {name = "TaxAmount"; sqlType = DECIMAL; nullable = false; precision = 15; scale = 2; defaultValue = "0"; comment = "Tax Amount"; },

       {name = "Quantity"; sqlType = DECIMAL; nullable = false; precision = 13; scale = 3; defaultValue = "0"; comment = "Quantity"; },   

       {name = "QuantityUnit"; sqlType = NVARCHAR; nullable = false; length = 3; comment = "Quantity Unit"; } ];

table.primaryKey.pkcolumns = ["PurchaseOrderId","PurchaseOrderItem"];

Creating and importing the data file (flat file):

Add the following data in excel and save it as .csv file:

300000000,10,HT-1000,,EUR,1137.64,956,181.64,1,EA

300000001,20,HT-1091,,EUR,61.88,52,9.88,2,EA

300000002,30,HT-6100,,EUR,1116.22,938,178.22,2,EA

300000003,40,HT-1000,,EUR,2275.28,1912,363.28,2,EA

300000004,50,HT-1091,,EUR,92.82,78,14.82,3,EA

300000005,60,HT-6100,,EUR,1116.22,938,178.22,2,EA

300000006,70,HT-1000,,EUR,2275.28,1912,363.28,2,EA

Activate project, In Project Explorer Right clickàImportàData from local file.

Browse the text file in your system. Select Target Table as Existing radio button and search for your table in your Schema.

Select one to one mapping and finish, we have inserted data records in our created table:

Step 4: Create role as TestRole.hdbrole. Add:

role MAYUR.sessionc.data::TestRole

{ 

          catalog schema "MAYUR": SELECT; 

          application privilege: MAYUR.Test::Basic; 

} 

The files are in the data folder as:

Step 5: Create .xsaccess file and add:

{

          "exposed": true       

}

Step 6: Create .xsapp file and add:

  {}

Step 7: Create .xsprivilege and add:

    {

      "privileges": 

              [  {"name":"Basic","description":"Basic usage privilege"}, 

                    {"name":"Admin","description":"Administration privilege"} 

              ] 

    } 

Step 8: Create a TestXS.xsodata file and add:

    service namespace "MAYUR.sessionc" 

    {

    "MAYUR"."MAYUR.sessionc.data::POitem"

               as "TestXS" ; 

    }  

"MAYUR.sessionc" = It is the location of xsodata file as per SAP HANA Repositories tab:

"MAYUR"."MAYUR.sessionc.data::POitem" = Simply drag and drop the table from the schema in SAP HANA System for the syntax to appear. 

TestXS will act as alias for our table name. Create a UI folder in your project. Activate the Project. 

You can test for the OData with the URL link in browser. 

Example: http://XX.XXX.XXX.XXX:XXXX/MAYUR/sessionc/TestXS.xsodata

Step 9: Now Right clickàProj Explorer and create a SAPUI5 Application ProjectàTeam share Proj and select the UI folder in your XS Project:

Step 10: In your .view.js file add the following inside function(oController):

sap.ui.jsview("po_ui.PO_UI", {

        /** Specifies the Controller belonging to this View.

        * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.

        * @memberOf po_ui.PO_UI

        */

        getControllerName : function() {

                return "po_ui.PO_UI";

        },

        /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

        * Since the Controller is given to this method, its event handlers can be attached right away.

        * @memberOf po_ui.PO_UI

        */

        createContent : function(oController) {

var oModel = new sap.ui.model.odata.ODataModel("/MAYUR/sessionc/TestXS.xsodata/",false);

             

             

              oTable = new sap.ui.table.Table("Test",{visibleRowCount:10}); 

              oTable.setTitle("Purchase Order Items"); 

              var PurchaseOrderId = new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "PurchaseOrderId"}),                 

                                  template: new sap.ui.commons.TextView().bindProperty("text", "PurchaseOrderId")  , 

                                   width: "100%"}); 

              oTable.addColumn(PurchaseOrderId); 

             

              var PurchaseOrderItem = new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "PurchaseOrderItem"}),                 

            template: new sap.ui.commons.TextView().bindProperty("text", "PurchaseOrderItem")  , 

             width: "100%"}); 

oTable.addColumn(PurchaseOrderItem);

             

var ProductId = new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "ProductId"}),                 

    template: new sap.ui.commons.TextView().bindProperty("text", "ProductId")  , 

     width: "100%"}); 

oTable.addColumn(ProductId);

var NoteId = new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "NoteId"}),                 

    template: new sap.ui.commons.TextView().bindProperty("text", "NoteId")  , 

     width: "100%"}); 

oTable.addColumn(NoteId);

var Currency = new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Currency"}),                 

    template: new sap.ui.commons.TextView().bindProperty("text", "Currency")  , 

     width: "100%"}); 

oTable.addColumn(Currency);

var GrossAmount = new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "GrossAmount"}),                 

    template: new sap.ui.commons.TextView().bindProperty("text", "GrossAmount")  , 

     width: "100%"}); 

oTable.addColumn(GrossAmount);

var NetAmount = new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "NetAmount"}),                 

    template: new sap.ui.commons.TextView().bindProperty("text", "NetAmount")  , 

     width: "100%"}); 

oTable.addColumn(NetAmount);

var TaxAmount = new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "TaxAmount"}),                 

    template: new sap.ui.commons.TextView().bindProperty("text", "TaxAmount")  , 

     width: "100%"}); 

oTable.addColumn(TaxAmount);

var Quantity = new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Quantity"}),                 

    template: new sap.ui.commons.TextView().bindProperty("text", "Quantity")  , 

     width: "100%"}); 

oTable.addColumn(Quantity);

var QuantityUnit = new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "QuantityUnit"}),                 

    template: new sap.ui.commons.TextView().bindProperty("text", "QuantityUnit")  , 

     width: "100%"}); 

oTable.addColumn(QuantityUnit);

              oTable.setModel(oModel); 

              oTable.bindRows("/TestXS"); 

              return oTable;

       }

});

Step 11: Replace the index.html file with the below code: 

<!DOCTYPE HTML>

<html>

       <head>

              <meta http-equiv="X-UA-Compatible" content="IE=edge">

           <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

             

              <script src="/sap/ui5/1/resources/sap-ui-core.js"

                           id="sap-ui-bootstrap"

                           data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.ui.ux3"

                           data-sap-ui-theme="sap_bluecrystal">

              </script>

              <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

              <script>

                           sap.ui.localResources("po_ui");

                           var view = sap.ui.view({id:"idPO_UI1", viewName:"po_ui.PO_UI", type:sap.ui.core.mvc.ViewType.JS});

                           view.placeAt("content");

              </script>

       </head>

       <body class="sapUiBody" role="application">

              <div id="content"></div>

       </body>

</html>

That is we are replacing the two script lines as below:

<script src="/resources/sap-ui-core.js"

with:

<script src="/sap/ui5/1/resources/sap-ui-core.js"

And:

data-sap-ui-libs="sap.ui.commons"

with:

data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.ui.ux3"

Step 12: Test for the UI5 application in Web Browser: 

http://XX.XXX.XXX.XXX:XXXX/MAYUR/sessionc/UI/PO_UI/WebContent/index.html

Note: If you are getting No data in the table display try adding proxy to the OData url:

var oModel = new sap.ui.model.odata.ODataModel("proxy/http://XX.XXX.XXX.XXX:XXXX/MAYUR/Test/TestXS.xsodata/",false);  

And also try with OData.read command as below if you are still not getting the table populated:

OData.read("/http://XX.XXX.XXX.XXX:XXXX/MAYUR/Test/TestXS.xsodata/",sucessfn,errorfn);