SAP Web IDE local development with SAP HANA On Premise

In this post I will show how to develop a basic SAP UI5 app locally using OData service located in a SAP HANA On Premise server. I will also show how to take the app to the same SAP HANA server. My OS is windows, but you can easy make analogous steps if you are woking in MacOSx.

Getting SAP Web IDE

First, you will need a SAP Web IDE local installation.

You can download it from this site.

It is really easy to install this new version. You only have to extract the downloaded zip file and execute the orion server.

Details are in this page.

After you have a SAP Web IDE local installation, you better create a user account in your local server in order you can make SAP UI5 applications.

The SAP Web IDE project

To make a new project you can follow the File > New > Project from Template route.

In this case, I will use SAPUI5 Application with the SAPUI5 Innovation (Recommended) version.

For this project I choose tileMetrics as the project name and demo.project as the namespace. Also, I will work with XML views and this first view will be named Main.

This is what you have when you run the app for this first time.

On the root directory (tileMetrics in my case) I will create another folder: webservice.

In this folder I’m going to create the .xsodata file for de OData webservice: demo.xsodata

service  {
   "MDMUSER"."V_METRICS"
   as "DemoNumber"
   key  ("CONCEPT");
}

MDMUSER.V_METRICS is a view that runs queries on tables to get numbers like the total count of rows, the total count when a column is null, etc.

For now, this is our site structure:

We also need the .xsaccess and .xsapp file next to .project.json and neo.app.json.

For now, we need to define a project in SAP HANA wih the same structure than this SAP Web IDE project.

Destination file

Depending of your extraction route of the zip file that you downloaded first, you have a similar route like this: C:\SAPWebIDE\eclipse\config_master\service.destinations\destinations.

This route exists only after you create a user for SAP Web IDE.

In that directory, you will crete a file with no extension with the connection information to you SAP HANA server.

In my case, this is the content:

Description=Webservices demonstration
Name=demo
Type=HTTP
URL=http://XX.XX.X.XX:XXXX
ProxyType=Internet
Authentication=BasicAuthentication
WebIDEEnabled=true
WebIDESystem=demo
WebIDEUsage=odata_gen

Back to the SAP Web IDE project

We need to configure this OData service.

With the right click on the root directory, you follow the route: New > OData Service

This image shows you which are the parameters that you need to set and finish the configuration:

Then you need to relate this OData service with you project. So, inside webapp directory you will find manifest.json. In that file you will have a dataSources section, that reflects the configuration that you have already done.

In manifest.json you can also find models section. We need to add the dataSource in this models section.

Till now, the app still showing nothing, but this is about to change now.

You need to modify the Main view to paint a tile with the numbers that we’re extracting from the webservice.

Inside the content tag of the Main view, write something like this:

<TileContainer tiles="{demo>/DemoNumber}" id="demoContainer" allowAdd="false" editable="false">
                <StandardTile number="{demo>TOTAL}" title="{demo>CONCEPT}" numberUnit="rows" info="SAP" icon="sap-icon://sys-monitor"/>
            </TileContainer>

If you run the app, now you will see this:

You can try changing the window size and see what happens.

Moving to SAP HANA server

In order to move this simple app to the SAP HANA server, we need to add a new dataSource in the manifest.json file and change the model.

Now you can export tileMetics directory and put it in you SAP HANA project.

I always modify the SAP UI5 CORE resources directory parameter to: https://openui5.hana.ondemand.com/resources/sap-ui-core.js in the index.html file.

SAP UI5 app on SAP HANA server On Premise:

Please let me know if you have any questions.