Developing SAP HANA XS Web Applications – TechTarget


Developing HANA applications is a task split evenly between web, database and UI/UX Developers. This article outlines some helpful and useful tools for all 3 of the tasks when companies take on the challenge of HANA web app development.

Upon release of HANA SPS05, SAP introduced a great new feature called HANA Extended Services (Also known as the XS Engine). The concept was to embed a fully featured web server within the SAP HANA appliance. Not only was it a web server, but it also provided development tools and an application server. One core difference between traditional web servers and the XS Engine, is that it has the ability to execute SQL using the exposed core API’s using Server side Javascript (XSJS). Thus making accessing and modifying your database artifacts very simple and straight forward. With the SPS08 release of HANA, the XS Engine has come a long way and with the additional features, improved stability and the core performance increased, giving us an encouraging sign of a mature product.

Although the XS Engine has seen some positive changes over the last few years, the development of native HANA applications is still largely unchanged, with the majority of the work being done using Eclipse, with the SAP HANA Studio tools installed. Another option would be to use the included Web based IDE which can accomplish many of the same development tasks as the Studio.


The HANA Studio is probably the most feature rich environment for developing HANA applications. The fact that it provides so much more than just the development perspective, the monitoring and management of the platform itself, makes it really the defacto IDE and management tool. HANA Studio also provides useful templates for different file types and also wizards making creating new applications quick and easy to get started. After discussing the development topic with some collgues and friends, Database developers tend to prefer to use the Studio for database artifact development. While front end developers tend to prefer the web based development workbench.

SAP HANA Web-based development workbench

In recent releases of HANA, the web based tools are quickly catching up to the HANA with many of features being mirrored from the studio. The browser based workbench includes multiple tools which make application development on HANA very convenient, straightforward and includes the following tools:

– IDE (powered by the … PA)

– Catalog tool for managing database artifacts

– Life Cycle management tool allows package management and transports

– Security management of artifacts

– Traces

Keep in mind that developers can use any of their favorite IDE’s to develop native HANA applications and subsequently import the files into studio, or the web based IDE. This includes database artifacts and the server-side scripting files (XSJS). I believe this will appeal to seasoned developers who are familiar with certain processes and workflows, and dont want to leave out their favorite code editors.

After developing multiple web applications, portals, mobile apps, and subsequently native HANA applications over the past few years, I have found a few additional tools which I though others may find helpful when taking on a new project (not specific to SAP HANA XS Development only but web development in general):

Application Design

Design thinking is becoming increasingly popular and is useful for ensuring your application matches the users needs with a viable solution through a series of stages with one of them being prototyping. I am a big supporter of sketch sheetsand giving users a realistic frame to work with. (Free

UI/UX Design

With users becoming more and more demanding in the enterprise space and the consumerization of software, keeping an eye on sites like and can provide some great ideas which you may be able to incorporate in your design.

After going through the design process and getting a fundamental understanding of the requirements, I often take the designs, sketches and feedback from the users and workshops and search online for inspiration, references and guidance. I wil often take these screenshots, cropping and cutting various elements and patching them together to give a very rough concept of what various elements could look like or how they should interact.

Color is an important aspect ensuring that your app looks great and also matches any corporate requirements you may have, while also being a core component and foundation for the app design. Adobe Kuhler ( is one of many online free tools for building a complimentary color schemeand provides great templates for getting started.

Another Adobe product in the form of Photoshop is one of the must haves in a UI and Web developers toolbox. Although there are free, or cheaper alternatives, the product allows users to create pixel perfect user experiences and transform mockups and sketches of buttons and borders into UI elements with ease.


Frameworks provide a great foundation to kickstart your development efforts and help to alleviate the overhead of building the myriad of components and UI elements from scratch.

SAP UI5 (& Open UI5) is a HTML5 toolkit from SAP which is included with your HANA instance. Many of the wizards use the SAP UI5 framework as a startingpoint for your applications and one of the big advantages of the framework is the OData integration. Many of the Components, like the tables and dropdown controls natively support the standard and it makes integrating your dataset a little bit easier. The VizChart control is a nice feature of the UI5 library and provides a flexible way to display your data in a graphical manner.

Twitter Bootstrap is also a solid front-end framework for developing web applications easily and using it with SAP HANA and XS Engine is very straight forward. The huge library of templates and UI components make it one of the widest used, and quickest growing frameworks in the web development world.

Development Tools

Debugging web applications is a process every developer uses to ensure that the UI renders correctly and that any logic is being executed as expected. For client side scripts and the user elements, the developer tools built into Chrome or Firefox are excellent tools. They provide an overview of HTML elements, network resources (perfect for troubleshooting AJAX calls), and scripts being executed making troubleshooting issues very efficient. For debugging your server-side code, the built in debugger provides the ability to ensure business logic and SQL statements are being executed correctly.

RestClient (Firefox), or Postman (Chrome) is a great tool for testing XSOdata/XSJS files, and provide the ability to conveniently save authentication credentials and headers making working with your service/AJAX calls a breeze.


Unit testing is an important, expected task in any enterprise software development project and your HANA apps should be no different, QUnit is a free a powerful, easy-to-use JavaScript unit testing framework which is well suited to the task. (It is also used to test the SAP UI5 framework).

Ensuring your new app looks as expected can be a challenging task, but there are a gamut of free and premium services online which can help to simply the task of browser testing ( can help.

While this is not a compressive list of all the tools in the web and HANA development worlds, they will provide HANA developers with some help in quickly and efficiently building native HANA applications.