Skip to Content

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.

newProject.png

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

/wp-content/uploads/2016/07/template_990504.png

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.

/wp-content/uploads/2016/07/empty_990505.png

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:

/wp-content/uploads/2016/07/structure_990509.png

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

/wp-content/uploads/2016/07/xsaccess_990510.png

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

/wp-content/uploads/2016/07/hana_990511.png

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

/wp-content/uploads/2016/07/service_990518.png

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

/wp-content/uploads/2016/07/odata_990519.png

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.

dataSources.png

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

/wp-content/uploads/2016/07/models_990521.png

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>



/wp-content/uploads/2016/07/view_990522.png

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

/wp-content/uploads/2016/07/app_990523.png

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.

hanaDataSource.png

demoHanaServer.png

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:

hanaApp.png

Please let me know if you have any questions.

To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

  1. Mauricio Pinheiro Predolim

    Hi. Thanks! Let me ask you, is it possible to apply custom UI theme using web ide local?

    EG. I have a custom theme in my backend and i need to apply in my UI5 app but the webide that i’m using is in my mac locally.

    Regards!

    MPRED.

    (0) 

Leave a Reply