How to build a basic solution with SAP HANA – part 3 – “Visualization & Beyond”

This is the last part of our basic tutorial and is regarding the visualization with SAPUI5 FIORI. The result will be an application created with XML, java script, json, and SAPUI5 libraries. The view will consume an OData service and will show us the values exposed as a FIORI table, this par t is called “Visualization & Beyond“.

Prerequisites:

Step-by-Step:

In eclipse IDE, open the Java EE perspective.01


In your Project Explorer view we need to create a new project.02


Select SAPUI5 Application Development / Application Project, and click on Next.03


The name of the project will be FLIGHT_UI5. The Library is sap.m, and without an Initial View . Press Finish.

04


Inside the project/WebContent is necessary to create a new folder.

05


The new folder is named view. Press Finish.

06


We need to create a View file for our project. Inside view folder, create a new file.

07


The file is named FlightsList.view.xml, Press Finish.

08

Additional documentation about Views is available in: https://sapui5.hana.ondemand.com/#docs/guide/91f27e3e6f4d1014b6dd926db0e91070.html


Copy and paste this basic code in the view file and save it.

<mvc:View xmlns = "sap.m" xmlns:mvc = "sap.ui.core.mvc">
</mvc:View >

Inside the project/WebContent is necessary to create another folder named controller. We need to create a controller file for our view. Inside controller folder, create a new file. The file is named FlightsList.controller.js and Press Finish.

09

Additional documentation about Controller is available in: https://sapui5.hana.ondemand.com/#docs/guide/121b8e6337d147af9819129e428f1f75.html


Copy and paste this basic code in the controller file and save it.

sap.ui.define([ "sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict" ;
});

When the project was created the file index.html was generated automatically. Replace all the original code with this one in the index.html file and save it. We are adding SAPUI5 libraries and setting a Container inside our Welcome File.

<!DOCTYPE html>
<html >
<head >
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta charset = "utf-8">
<title > Basic Solution with SAPUI5 : vol 1 </title >
<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.m"
data-sap-ui-compatVersion = "edge"
data-sap-ui-preload = "async"
data-sap-ui-resourceroots = '{"flight.ui5": "./"}'>
</script >
<script >
sap.ui.getCore().attachInit( function () {
new sap.ui.core.ComponentContainer({name :
"flight.ui5" }).placeAt( "content" );
});
</script >
</head >
<body class = "sapUiBody" id = "content">
</body >
</html >

Additional documentation about index.html is available in: https://sapui5.hana.ondemand.com/#docs/guide/f7cbafc9a76140ec8fc55b51a63cf467.html


We need to create a new file in Project/WebContent , named Component.js, Press Finish.

10

Additional documentation about Component is available in: https://sapui5.hana.ondemand.com/#docs/guide/27ce0e4987cd426f8fa3e60836316428.html


Copy and paste this code in the component file and save it.

sap.ui.define([ "sap/ui/core/UIComponent"
], function (UIComponent) {
"use strict" ;
return UIComponent.extend( "flight.ui5.Component" , {
metadata : {
manifest : "json"
},
init : function () {
UIComponent.prototype.init.apply( this , arguments);
}
});
});

We need to create a new file in Project/WebContent , named manifest.json Press Finish.

11

Additional documentation about manifest is available in: https://sapui5.hana.ondemand.com/#docs/guide/74038a52dcd7404e82b38be6d5fb1458.html


Copy and paste this code in the manifest file and save it. Notice that in the “dataSources” section is added our OData service reference.

{
"_version" : "1.3.0",
"sap.app" : {
"_version" : "1.3.0",
"id" : "flight.ui5",
"type" : "application",
"i18n" : "i18n/i18n.properties",
"title" : "{{appTitle}}",
"description" : "{{appDescription}}",
"applicationVersion" : {
"version" : "1.0.0"
},
"dataSources" : {
"FlightOData" : {
"uri" :
"/XS_FLIGHT/services/FlightODataService.xsodata",
"type" : "OData",
"settings" : {
"odataVersion" : "2.0"
}
}
}
},
"sap.ui" : {
"_version" : "1.3.0",
"technology" : "UI5",
"deviceTypes" : {
"desktop" : true ,
"tablet" : true ,
"phone" : true
},
"supportedThemes" : [
"sap_bluecrystal"
]
},
"sap.ui5" : {
"_version" : "1.2.0",
"rootView" : {
"viewName" : "flight.ui5.view.FlightsList",
"type" : "XML",
"id" : "flightslist"
},
"models" : {
"i18n" : {
"type" :
"sap.ui.model.resource.ResourceModel",
"settings" : {
"bundleName" :
"flight.ui5.i18n.i18n"
}
},
"" : {
"dataSource" : "FlightOData"
}
},
"autoPrefixId" : true ,
"dependencies" : {
"minUI5Version" : "1.34",
"libs" : {
"sap.ui.core" : {
"minVersion" : "1.34.0"
},
"sap.m" : {
"minVersion" : "1.34.0"
},
"sap.ui.layout" : {
"minVersion" : "1.34.0"
}
}
},
"contentDensities" : {
"compact" : true ,
"cozy" : true
}
}
}

Inside the project/WebContent is necessary to create a new folder named i18n

12


We need to create a new file in Project/WebContent/ i18n , named i18n.properties, Press Finish.

13

Additional documentation about i18n is available in: https://sapui5.hana.ondemand.com/#docs/guide/2edc3f99883e4a068f040d9e844f14fa.html


Copy and paste this code in the i18n.properties file and save it.

# App Descriptor
appTitle= My SAPUI5 Flights List
appDescription= A simple sapui5 demo app
# Tabs
listFilter= List View
tableFilter= Table View
flightsListTitle= Flights List

We need to create a new file in root Project folder.

14


The file is named neo-app.json

15

Additional documentation about neo-app is available in: https://sapui5.hana.ondemand.com/#docs/guide/28fa7538c67e4280a0b7708de2951278.html


Copy and paste this code in the neo-app file and save it. Notice that in the “routes” section is added our OData service reference.

{
"welcomeFile" : "index.html",
"routes" : [
{
"path" : "/resources",
"target" : {
"type" : "service",
"name" : "sapui5",
"version" : "snapshot",
"entryPath" : "/resources"
},
"description" : "SAPUI5 Resources"
},
{
"path" : "/test-resources",
"target" : {
"type" : "service",
"name" : "sapui5",
"entryPath" : "/test-resources"
},
"description" : "SAPUI5 Test Resources"
},
{
"path" : "/XS_FLIGHT/services/FlightODataService.xsodata",
"target" : {
"type" : "OData",
"name" : "FlightOData"
},
"description" : "FlightService Demo Service"
}
]
}

Is necessary to change the view code to show the values exposed in the OData service. Replace all the code with this one in the FlightsList.view.xml file and save it.

<mvc:View xmlns = "sap.m"
xmlns:mvc = "sap.ui.core.mvc"
xmlns:core = "sap.ui.core"
xmlns:l = "sap.ui.layout"
xmlns:f = "sap.ui.layout.form"
controllerName = "flight.ui5.controller.FlightsList">
<App>
<pages>
 <Page title = "Flights List with SAPUI5">
 <content>
 <IconTabBar id = "idTopLevelIconTabBar">
 <items>
 <IconTabFilter id = "tableTab" text = "{i18n>tableFilter}">
 <content>
 <Table id = "table" headerText = "{i18n>flightsListTitle}" items = "{/FlightService}">
 <columns>
 <Column><header><Label text = "Flight No."></Label></header></Column>
 <Column><header><Label text = "Plane Type"></Label></header></Column>
 <Column><header><Label text = "Date"></Label></header></Column>
 <Column><header><Label text = "From"></Label></header></Column>
 <Column><header><Label text = "To"></Label></header></Column>
 <Column><header><Label text = "Price"></Label></header></Column>
 <Column><header><Label text = "Currency"></Label></header></Column>
 </columns>
 <ColumnListItem type = "Active">
 <cells>
 <Text text = "{CONNID} {CARRID}" />
 <Text text = "{PLANETYPE}" />
 <Text text = "{ORDER_DATE}" />
 <Text text = "{CITYFROM}" />
 <Text text = "{CITYTO}" />
 <Text text = "{PRICE}" />
 <Text text = "{CURRENCY}" />
 </cells>
 </ColumnListItem>
 </Table>
 </content>
 </IconTabFilter>
 </items>
 </IconTabBar>
 </content>
 </Page>
</pages>
</App>
</mvc:View>

Is necessary to change the controller code. Replace all the code with this one in the FlightsList.controller.js file and save it.

sap.ui.define([ "sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict" ;
return Controller.extend( "flight.ui5.controller.FlightsList" , {

});
});

In XS_FLIGHT project we need to create a new folder, I’ll call it UI5 .

16


Right click on FLIGHT_UI5 project /Team / Share Project

17


Select SAP HANA Repository. Press Next.

18


Select your Repository Workspace. Mark the Add project Folder as Subpackage check box. Click on Browse button.

19


Find the package named XS_FLIGHT , open it and select UI5 folder. Press OK . Press FinishIn this step we are adding our UI project to our backend project.

20


In XS_FLIGHT project Right click / Team /Activate. The activation pushes all the files (back end & front end) as integrated project in the server.

21


In XS_FLIGHT / UI5 /FLIGHT_UI5 /WebContent /index.html. Right click / Run As /HTML

22


A browser windows is opened. The authentication is required, use your SAP HANA MDC Data base user and password.

23


Your application is working, You can see a Flights Lists. This is a table that show several fields exposed with an OData service.

24

Now you are able to create a basic end to end solution with SAP HANA.

The next step will be create more complex solutions, so until then!!!

spanish-version

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s