From HANA on premise to a custom UI5 App on HCP

[former_member207606]

Here I want to show an E2E integration scenario starting from a HANA on premise installation resulting in a UI5 App on HANA Cloud platform.

In this guide I want highlight the necessary steps to establish the E2E connectivty - I neglect the topic of security and can not recommend to follow this guide for a productive scenario.

 

Prerequisites:

 

• Up and running HANA instance (I use SP11 but SP5 should do)

As just announced on TechEd you can get a free "Express" edition in case you don't have a HANA handy. I haven't tested it yet but it should be suitable for this example http://www.sap.com/sap-hana-express

• Completed setup of HANA Studio with connection to your HANA


• A HCP account (you can get a free one on hanatrial.ondmand.com)

 

 

We will perform the following steps:

 

1. Import the standard SFlight Data model into HANA


2. Create a new Delivery Unit (DU) and package on HANA


3. Create an Attribute View


4. Create an OData Service consuming this view


5. Set up our HCP Cockpit and activate the necessary services


6. Download and Install SAP HANA Cloud Connector (CC)


7. Set up CC to make the HANA OData Service available in HCP / WebIDE


8. Using WebIDE to create a UI5 App based on an OData service

 

 

 

1) Download and install SFlight data model

 

First we download the model from here: http://www.sdn.sap.com/irj/scn/index?rid=/library/uuid/c0c49112-c9ab-2f10-d591-9d40e658f7ce&override...

 

Then we follow this guide to import the downloaded model into our Hana DB: http://scn.sap.com/docs/DOC-41576

 

 

2) Create a Delivery Unit and Package on HANA

In this example I work as user SYSTEM

[Optional]

A Delivery Unit can be used to transport our development to a different HANA system. If you just want to run this as a POC you can skip the [o] marked chapters.

 

Set the content provider: [o]

Double click on your system (here MV1) in the Administration Console perspective.

Go to Configuration -> indexserver.ini -> Repository -> content_vendor

Enter a vendor initial of your choice. Here: com.sap

To create a new DU we go to the HANA Modeler view and create a new DU

 



 



Make sure that we do have a repository defined. If this is still missing we wont be able to create new packages.

 

Right click on your HANA Instance and create a new Workspace or on you Default Repository and import a workspace (a new Directory will do)

 

 

In the Repository View we right click on the Default model and create a new Repository package with a name of your choice.

We call it here sFlightOdata.



 



 

We name it sFlightOdata - make sure to select the correct HANA System.

[o] - Then we bind the new package to the previously created DU (NEXT) or finish to skip the step.

3) Create a simple Attribute View

 

We use an inner join between the two tables SAIRPORT and SPFLI on the ID.

We limit the view to the following attributes (Select the bubble next to the attribute):

Drag&Drop attributes from the CATALOG table (AIRPORTFROM),

Do the same for the attributes ID, NAME, AIRPROM,CITYFROM, FLTIME, DISTANCE

Select ID as Key and activate the view.

In case we can't activate the view we need to check if the access rights are set correctly. Here we need to make sure that User _SYS_REPO has SELECT rights to the data model SFLIGHT.

When you right clickt-> Data Preview on the created view you should see the following (Drag & Drop Available Objects in Label Axis, switch to Grid view)

4) Create an OData service based on the Attribute View

Now we switch to the "Repository view" and create two files:

.xaccess

Holds information about access controls. Here we just go for the minimum:

 

     {

         "exposed" : true,

     }

.xsapp

Tells the XS engine that we have an executable application in this package - It stays empty in this example.

 

Then we create a new file connection.xsodata - which is the actual definition of the OData service and uses the Attribute View as data source.

 

Enter:

     service {

            "sFlightOdata/CONNECTION.attributeview" as "Connections" keys generate local "ID";

     }

Save & Activate

 

Now you should be able to access the OData service via your browser:

5) Set up our HCP Cockpit and activate the necessary services

Before we actually set up the connectivity we log in to the HCP Cockpit and double check if the following services are activated.

In case you haven't done yet - create a free test account via hanatrial.ondemand.com

6) Set up the HANA Cloud Connector

In this setup we install the CC on a Windows system located in the same network as the HANA Server.

 

Go to: https://tools.hana.ondemand.com/#cloud and download  the Cloud Connector (CC) for your OS.

Here we use the Windows x86_64 version 2.8.1.1 msi installer.

We also need to install the

• Microsoft Visual C++ 2010 SP1 Redistributable Package (x64) - The  download might be triggered from the installer.


• A compatible Java VM which is also available on the same download page

 

We run the setup with the default values. Make sure that port 8443 is not blocked by a firewall or change the port according to you needs. We point the installer to the correct directory of the JVM which is usu usually detected automatically.

 

After the setup we can proceed by logging in to the CC management cockpit via your browser and finish the setup. The url is https://<YourServer>:8443 - we ignore the warning about the security certificate. If necessary, the self signed certificate can be imported into the browser which will resolve the error message.

 

We log in with the default credentials: Administrator/manage and select Master installation in the next screen. Then we change the default password and start with the configuration:

 

We need to make sure to use lower case letters for the account name. Depending on the internal network there might be the need for providing a proxy server to allow communication with the internet.

When the settings were correct - the CC connects to the HCP tenant and we expect to see the following screen:

In case the connections still fails, please check your HCP account if the Cloud Connector service was activated

 

When checking the status of the CC in the HCP cockpit - we expect to see the following (click on the SAP HANA Cloud Connector Service -> Go to service)

So far, no backend connections were defined and this is what we gonna do now:

 

We go back to the CC Administrator Interface:

And switch to Access Control -> Add-> SAP HANA -> http

 

As the internal host we use the host name of our XS Engine an the port is usually composed in the pattern of 80xx where xx represents your instance number.

Here we map the internal host to a virtual host name used within HCP.

We us no principal type.

 

After adding the host we also add a new resource to this host (our OData service)

The "state" is expected to show green by now:

7) Make OData Service available in HCP /WebIDE

We switch back to the HCP Admin Cockpit:

Here we add a new destination (the Destination we just made available via CC) to be consumed by our UI5 App.

Connectivit-> Cloud Connector - shows the available backend systems. We expect to find our virtual host.

Connectivity -> Destinations -> New Destination

We provide a Name (free text), protocol (we stick to http), URL (our virutal host from bevore), Proxy Type (OnPremise for CC connections) and Basic Authentication with the Username for our HANA Backend System (I use SYSTEM - which is not recommended)

Now we also need to add "Additional Properties" to the destination configuration: Hana_ONP is the name providedin the Name field.

9) Using WebIDE to create a UI5 App based on an OData service

Now we switch to WebIDE to develop the SAP UI5 App consuming the OData Service

 

(Services->WebIDE-> open SAP Web IDE)

 

Here we select Create a new Project - File-> New Project from Template

We use a Worklist application.

 

We name our child and select to enable mobile device funcitonality (which we may need later)

We now should be able to find our connection under "Service URL"

• If you can't find the connection please go back to the step where to connection was defined and double check if the "Additional properties" are set.

We enter the URL to our Odata serice (the packagename+ servicename) and click "test"

We wourl expect to find the EntitySet "Connections" and click "next"

 

We add the required information as shown below and click finish.

We are taken back to the editor view where we need to make one adjustment to the manifest.json

At the node "sap.ui5": "models":

We need to add:

"settings": {

"__comment" : "This was requiered for the XSODATA Service not to break at a $batch request",

"useBatch": false

},

As we are dealing with a very simple Odata Service on the backend, we can not allow the UI5 app to perform $batch requests. You can ignore the __comment.

Now we run the App from WebIDE (play button) and we expect the app to look similar to this:

 

In case we see this instead:



We need to go back and double check if we have added "useBatch": false  at the correct position.

 

 

 

This is it! The UI5 app still deserves some neatening up, but for an integration scenario this will do.

 

Stay tuned in the next post we will look at the same integration with an ERP system - using HANA OData provisioning. This way you spare an extra Netweaver Gateway on premise.