Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com
SAP HANA

A Simple HANA Application consuming OData service

 

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]

 

 

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]

 

 

Save and activate the application. Test the file index.html

 

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]

 

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]

 

 

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

 

About Arun

1 Comments:

Powered by Blogger.