Step-By-Step process to develop UI5 Application on HANA DB

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:

1. Creation of modeling  objects ( e.g. TABLES or VIEWS)
2. Exposing modeling objects in an ODATA service
3. Consuming ODATA service in UI5 Application

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.

• Go to Modeler Perspective in HANA Studio.

    

· 

• Expand Content folder in the HANA system and Right click on the Content Folder to create a package.

    

• Right click on the package and Click on New Attribute View. Give a name for the attribute view and click ok.

    

• Double click on attribute to open its editor.

    

  

• Open Catalog folder to select a table on which the attribute view will be created.

• Drag Table from left hand pane and Drop it at the Data Foundation Section.

• Right Click on the fields or highlight the gray icon besides the fields in Details View to add them in the output.

• Click on Save and activate to commit and activate changes done in attribute view.

• Click on Data Preview to check the data of Attribute View.

• Click on Raw Data tab to view the tabular data.

2. Exposing Attribute View in an ODATA Service

• Go to HANA Development perspective

• Create new  XS Project to store the service definition for odata service.

• Give a name to the project (e.g. PlantService).

• Create two files in the project.

o  .xsapp . A blank file with name “.xsapp”

o  .xsaccess. Write following in the file

{ “exposed” : true, “authentication” : [ { “method” : “Basic” } ] }

    

   

• Create  a file with .xsodata(e.g. PlantOData.xsodata) extension which will have code for exposing attribute view into ODATA service .

 

• Write following piece of code in PlantOData.xsodata to expose the attribute view we have created before into odataservice.

       service {

//<PACKAGE NAME>::<ATTRIBUTE_VIEW NAME> as <RESULT SET NAME>

“trng::AT_PLANT_VIEW” as “PlantView”

keys generate local “ID”;

}

• Save all your changes. Right Click on PlantService folder to share, commit and activate to the HANA Repository.

      

    

    

• Once the odata service is activated, you will be able to test it on the browser.

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

• In Hana Development perspective click on File ->New->Other->SAP UI5 Application Development->Application Project to Create UI5 Project.

    

• Give a name to the UI5 Project(e.g. plantlist), select Target Device as “Desktop”, Leave the “Create an Initial View “ checkbox checked.

• Give the View Name (e.g. PlantListView). Leave Default JAVASCRIPT option selected. Click on Finish.

• You will see following files created in the project:
  • Index.html
  • PlantListView.view.js               
  • PlantListView.controller.js

•     To refer the UI5 core library installed on hana server, change the path in “index.html” as follows and add sap.ui.table library to include table element on screen:

<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>

• In the html file declare a variable to store URL for the odata service.

     var oDataUrl= http://hostname:portnumber/PlantService/PlantOData.xsodata/;

• Declare a variable to create odata model from the service.

     var oDataModel= newsap.ui.model.odata.ODataModel(oDataUrl);

• Write following code in createContent method of PlantListView.view.js to create table element on view and bind to the odata model.

       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;

           

       }

• Create .xsaccess and .xsapp file in the project same way we have created in PlantService project.

• Save all files. Right click on the project root folder to share to the workspace, commit and activate it.
• Your Ui5 application can now be tested at following URL:

     http://<hostname>:<port>/<package: if shared to a package>/plantlist/WebContent/index.html