SAPUI5 is a recent offering from SAP that powers SAP Fiori applications. It is a client UI technology that is based on JavaScript, CSS and HTML5, enabling you to build and adapt client applications. Depending on what device the application runs (mobile, tablet or desktop PC), you can use different libraries.
The SAPUI5 runtime is a client-side HTML5 rendering library that consist of rich set of standard and expansion controls. It is also referred as a light weight programming model for desktop and mobile applications that is based on JavaScript and supporting RIA like client-side features. It is based on the extensibility concept pertaining to custom controls.

Role of servers
Servers have a major role to play when you deploy your applications; they store the SAPUI5 libraries and connects to a database. Depending on the environment in which the SAPUI5 is deployed, the libraries or your applications are stored on a SAP NetWeaver application server or a SAP HANA cloud platform.

SAPUI5 Architecture (Courtesy: SAP)

How it works?

When you access an SUPUI5 application from your device (a mobile or a tablet), a request is sent to the respective server to load the application into the browser, letting the view to access the relevant libraries. Generally, the model is also instantiated (creates an instance of an object) and the business data gets fetched from the database.

Usage of Model View Controller (MVC)

SAPUI5 uses the MVC concept to accomplish the following goals:

  • Support development in distributed teams with varied source locations
  • Recommend file structure, naming and usage patterns
  • Add capability of UI declaration (as compared to a programmatic construction)

Some of the notable features of this new SAPUI5 to enable you to easily create and extend state-of-the-art user interfaces are as follows:

  • Supports CSS3, allowing you to adapt themes as per your company’s branding in an effective fashion.
  • Uses the open source jQuery library as a foundation.
  • Supports RIA like client-side features based on JavaScript.
  • Completely supports SAP product standards.
  • Complies with OpenAjax and can be used alongside standard JavaScript libraries.
  • Produced in a release independent code line to enable short shipment cycles.

Hence, based on the MVC concept, SAPUI5 applications enable you to create sophisticated UI5 projects and can be delivered in different platforms such as:

  • SAP HANA Cloud Platform
  • SAP HANA Platform
  • User Interface Add-on for SAP NetWeaver

Let’s briefly look at an overview of each platform:

SAP HANA Cloud Platform

SAP HANA Cloud platform is based on open standards, providing rich access to a feature-rich and user friendly environment in the cloud. The platform includes a comprehensive set of services for integration, enterprise mobility, collaboration and analytics.

Using SAP HANA cloud platform, customers and partners can rapidly build, deploy and manage cloud based enterprise applications that compliment and extend your SAP or non-SAP solutions, whether they are deployed on premises or on cloud.

Creating Simple SAPUI5 Applications

The simplest way to work with SAPUI5 is to include a set of JavaScript libraries into your HTML page and then use all the controls provided by these libraries to construct one or more control trees, and finally include them into your HTML page. This framework also supports the JavaScript Object Notation (JSON) that lets you initialize controls, minimizing your typing efforts.

For creating mobile apps, SAPUI5 provides an additional library called sap.m that is optimized for mobile devices.

SAP HANA platform

SAP HANA platform is a platform that can be deployed on-premises, unlike the SAP HANA cloud platform that can be deployed on the cloud.

In order to start working on SAP HANA platform, you need to first install and configure the SAP HANA Studio Eclipse workbench, which comprises of a series of steps. Once you have successfully installed, you can right away create simple applications using SAPUI5. The procedure for creating the apps is similar to the one as enlisted in the earlier SAP HANA Cloud Platform.

SAP User Interface Add-On

SAP User Interface Add-On for SAP NetWeaver is an application that you can use swiftly to offer new user interaction and technology without disturbing the underlying business applications. One the major advantages that this product offers for its existing customers is it helps to enhance their existing SAP UI landscapes independent of application releases and devoid of major investments – no upgrade of existing systems.

The objective is to integrate the existing UI functionality, while utilizing the cutting edge SAP’s UI technology and functionality to deliver crucial UI improvements to customers and end users irrespective of the application lifecycle and the version of the SAP NetWeaver platform that is being used.

For developing an application in SAPUI5, the following tools are required

  • Eclipse – as editor
  • SAPUI5 Plugin installed in Eclipse
  • Tomcat Apache (Server)


This blog provided an overview of SAPUI5 technology, the benefits it offers, platforms it can be deployed and the tools that you require to develop applications in SAPUI5. With SAPUI5 technology that leverages the MVC concept, you can create sophisticated and user friendly applications without any additional investment.

Request a Demo

If you would like to request a demo for SAPUI5, please click on the link above. Alternatively, if you would like to discuss with an Innovapptive solution expert, you can reach out to us by emailing us at sales@innovapptive.com or you can reach a sales representative at (713) 275-1804.