Raymond Does
Jun 13, 2013 5:00:00 PM

SAPUI5: The Future of SAP User Interfaces

Once upon a time choosing a User Interface for a SAP application was easy. Mainly because there was no choice. You simply needed to write an ABAP/4 program and the SAP GUI created a dull grey-blue screen on your monitor. In the meantime, outside of the SAP world several initiatives to run applications on different platforms and operating systems were created. Everything needed to be different; examples include Java, Flash, .Net and especially web technology. In this blog post I'll tell you a little more about SAPUI5.


New technologies and innovative insights created better user interfaces, but also increased the number of choices which were released increasingly close after one another. SAP had to stay up to date and, therefore, released products such as ITS, BSP, WDJ, WDA, Islands, NWBC, FPM.

SAP UI products are not really "open" and have this in common. Naturally they used standards but outside of the SAP world, nobody had ever heard of them and they were totally useless.


What are the characteristics of a good UI framework?

What specifications should a UI framework satisfy? Ideally, a UI framework works independent from a platform and underlying operating system. Examples of a platform are a desktop PC, mobile devices such as tablets, but also newsstands or set-top box. It is a standardized, open technology so you're not dependent on one supplier and the product is easily adaptable and expandable. Preferably it works according to an "Interaction Design Pattern" so that the necessary structure can be added to the software and the various components can be separated within the UI framework. Efficiency and productivity are, of course, also of importance. This can be achieved by, for example, using tools that can visually develop and style application screens. This could be the final application screens, or mock-up screens that are later elaborated on by the developer.

SAPUI5 features and tools

SAP’s latest UI framework SAPUI5 possessing the above mentioned characteristics. It uses open source and open standards such as JQuery, HTML5, JavaScript, CSS, OData, Open Ajax, D3, LESS and others. Due to the fact that it is open and uses existing and commonly used libraries, communities outside of the SAP world also have extensive knowledge and experience that can be used to develop SAPUI5 applications. SAPUI5 is a ‘pure javascript framework’. This means that the developer programs the data model, logic and the screen layout in javascript. The complete design can be adapted using HTML and CSS. SAP has previously added several CSS themes to the framework, among which is the 'blue crystal' theme that SAP uses for its own Fiori applications. SAP will soon release the UI Theme Designer for SAPUI5 so that the theme can be easily adapted. Additionally, SAP will soon release the App Designer tool, which will allow a designer or developer to quickly build visual SAPUI5 applications.

Read our SAPUI5 Tips & Tricks here:

sap user interfaces resized 600

SAP Fiori application built using the SAPUI5 framework


What platform does SAPUI5 use?

It all sounds very nice, but what SAP platforms does SAPUI5 use and how does the integration with a SAP backend work? The UI framework will work with NetWeaver ABAP, -Java and -Portal platform, HANA Cloud and the SAP Mobile Platform. It will, nevertheless, also work on open source platforms such as Apache Tomcat or PhoneGap. Integration with backend works based on, amongst others OData. By providing SAP functionalities using OData non-SAP developers can easily communicate with SAP. This is because the interface has been defined according to standards and the messages are easy to read because they have been formatted in JSON or XML.


Positioning SAPUI5 within the SAP UI portfolio

How does SAPUI5 compare to other UI SAP products? SAP recommends you build new applications in WebDynpro ABAP/Floor Plan Manager or SAPUI5. SAP no longer recommends building applications in WebDynpro Java or SAP GUI. How should I choose between WDA and SAPUI5? There are differences. WDA is recommended for heavy desktop applications, as the UX is limited in its adaptability compared to SAPUI5. This limited UI customizability is not without reason. The developer designs the user interface in WebDynpro, which is then converted to metadata. The metadata is then subsequently converted into code that displays the application on the screen. The idea behind this is to relieve the developer of worry regarding platform-specific requirements. The idea is great, but it does create a significant overhead, a closed framework, inflexibility concerning the look and feel and a final result that required little of the designer. SAPUI5 on the other hand, is a lightweight framework that has a "consumer grade" user experience, according to SAP. It is a framework that is designed for applications that can operate anywhere and on any device, are equipped with state of the art UX, responsive design and are designed for desktop, web, mobile and the cloud from scratch. Did the UX designer want a Skeuomorph design last years and does he now want a flat and adaptive design offered by the cloud on his tablet? If so, try WebDynpro.

The advantages of stateless SAPUI5

SAPUI5 applications are stateless, just as the web is stateless at its core. This means that no data is stored between user interactions. Each request is independent of prior requests. The counterpart is stateful, in which the mutual dependencies are stored in a session. WebDynpro is stateful and uses sessions. This leads to additional complexity at the server side because sessions between the various servers have to be replicated. In the case of large server farms with many concurrent users, this leads to a significant overhead. Besides this, sessions expire and it’s annoying. For example, imagine a user goes to lunch and not shut down the application. Additionally, sessions are often unfairly exploited by developers who add too much complex data. The result of this is large amounts of data traffic between the requests and more complexity. A stateless application design results in less complexity and scalability clustered server or cloud environments. Consequently, my advice is to use SAPUI5 for new applications, whenever this is possible.

Should the NW developer be attached to HTML5?

Should all ABAP users and NW Java developers start to learn HTML5, JavaScript and CSS now? From a professional perspective, I would say yes. But you don’t need to. You can also separate front-end development and back-end development. What knowledge do you need to be able to use SAPUI5? Javascript. Javascript is by far the most important to be able to use SAPUI5. CSS comes in second and HTML last.

You could, of course, also opt for an alternative UI framework such as Sencha, Dojo or even create yout own using a combination of libraries such as jQuery, Handlebars, Ember etc. Developers often choose SAPUI5 so that they can focus on a mature framework that consists of good and popular open source libraries and know that SAP will used this for her new applications. Due to this developers can use knowledge from both the SAP community and the various open source communities.


Is SAPUI5 the perfect UI framework?

There is, however, also a downside. A license is required to use SAPUI5 in a production environment. This condition makes the acceptance of the framework harder. This isn’t so bothersome to SAP customers, but if SAP wants the framework to appeal to developers from outside the SAP world they will have to make the framework available as an open source. Only then it will be accepted on a large scale.

I hope that SAPUI5 will become freely available. Non-SAP developers will embrace the framework, especially in combination with backends that can communicate via OData. So SAP I urge you to make SAPUI5 available free to all developers.

After reading this blog, you should understand SAPUI5 to be able to simplify SAP screens. Another SAP solution you can use is SAP Screen Personas (which it free!). The big advantage is that the number of clicks in SAP can be reduced drastically. Take a look at the SAP screens at ProRail after Screen Personas was applied to them.

Verschillen SAP Screen Personas ProRail

Author:  Raymond Does

SAP Cloud & Apps