Skip to Content
Author's profile photo Brenton OCallaghan

Unleashing Lightning: Building the oData and UI layers

For the Keynote at SAP TechEd/d-code 2014 Las Vegas, we built out a quarter trillion row model in a single scale-up HANA system. John has put together a great high level overview of the solution in his blog Unleashing Lightening with SAP HANA or you can watch the video.

John kicked off the in-depth explanation of how the solution was structured which you can see in more detail at Unleashing Lightening: Building a quarter trillion rows in SAP HANA

In this blog I’m going to briefly talk about the front-end of the demo. I will firstly briefly cover the oData layer and then touch on the technologies used to build the web UI.

The oData layer

The oData layer of the solution was pretty simple. Firstly we put together a stored procedure which took care of the query logic which John covers in more detail in his blog. We then wrapped that SQL Script in a HANA calculation view. The purpose of this was to allow ourselves to call this stored procedure via an oData service while passing in query parameters (in this case our search terms).

The oData service, once we had the calculation view, was pretty easy to define using SAP HANA’s XS engine (.xsodata file):

service {
  "" as "Historical"
  keys generate local "ID"
  parameters via entity;
  "" as "Predictive"
  keys generate local "ID"
  parameters via entity;

In the above example, we are creating a new oData service based on the calculation view CV_WIKI3 and CV_WIKIPREDICT which are stored in the package “wiki” and the subpackage “data”. We expose these services under the names Historical and Predictive and generate an ID column automatically based on the results returned from the view. Finally we allow any available parameters of the calculation view to be passed in via the oData service.

Once the oData service above is active we can now explore it by loading the $metadata – for example the metadata can be found for my service at:$metadata

The metadata gives the structure of the parameters that are required to be passed into the calc view:

Screen Shot 2014-11-08 at 22.04.28.png

In this case my parameters are imaginatively called “CalcViewParameters” and it has two fields, TITLE1 and TITLE2. So now we can construct our query URL which is formed as follows:'ABC',TITLE2='DEF')/Results?$format=json

The above URL will call our oData service, pass in the TITLE1 and TITLE2 parameters and return the results in the result set “Results”.

OK so now that we have our data we can move onto the UI.

The UI

The UI for the solution was pretty simple and used standard web technologies.

Screen Shot 2014-11-08 at 22.14.39.png

The main surround of the UI was built using Bootstrap a superb framework for developing responsive user interfaces. The form at the top that we used to specify the search criteria, the type of query and the predictive variables were created using standard HTML form elements combined with none other than openui5.

Finally the data visualisations showing the results were created using sapui5 which provides some amazing out of the box data visualisation functions which I can highly recommend. In this case the chart was of the type sap.viz.ui5.Column.

I won’t go through the code of the UI in detail but I can recommend that anybody interested in getting started with a UI like this – please check out OpenUI5 or the sapui5 hosted SDK which has great tutorials and getting started guides.

For anybody trying this out for themselves, if you have any questions or comments I’d be more than happy to help so please do post below.

That’s it from me for the front-end of Unleashing Lightning with SAP HANA. I encourage you all to try it out – it really is a lot of fun!!

Happy coding,


Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.