Ist SAPUI5® wirklich der große Wurf?

Ende der 90er, am Höhepunkt der ersten dot.com Blase, wurde SAP scharf ob ihrer nicht vorhandenen Webfähigkeiten kritisiert. Seitdem ist viel passiert und viele verschiedene Webtechnologien sind gekommen und auch wieder gegangen. Ich hatte immer das Gefühl, das SAP stets auf der Suche nach der richtigen Technologie, dem richtigen Vorgehen war.

 

Bei dieser Suche gab es für mich gab es drei Meilensteine. Der Internet Transaktion Server (ITS), der es ermöglicht hat jede beliebige SAP GUI Transaktion im Web darzustellen. Die Usability war natürlich grausam, aber noch heute ist es die schnellste und einfachste Methode bestehende Applikationen im Web verfügbar zu machen. Die meisten Kunden verwenden es zum Glück nur für selten genutzte Applikationen.

 

Business Server Pages (BSP). Entstanden als Freizeitprojekt einiger Walldorfer Entwickler, legte diese Technologie die Grundlage für den Web Application Server wie wir ihn heute kennen. Und viele andere SAP Webtechnologien rendern zu guter Letzt mittels BSP deren User Interface.

 

Für mich ist SAPUI5 jetzt der dritte große Meilenstein. Was bringt mich dazu, das zu glauben? Um das zu begründen sollten wir zuerst schauen, was SAP aus den vergangenen User Interfaces gelernt hat. Mit BSP war SAP am Puls der Zeit. Man hatte eine ähnliche Technolgie wie Microsoft mit ASP (Application Server Pages) und Java mit JSP (Java Server Pages). Bei den Technologien und Ansätzen, die sich daraus entwickelt haben, sind vor allem Webdynpro und WebUI zu nennen. Dies sind keine Webrendering Technologien, sondern Konzepte und Frameworks, die Entwicklern die Programmierung von strukturierten Anwendungen erleichtern sollten. Leider hat SAP damals immer mehr sein eigenes Süppchen begonnen zu kochen, sodass man sich von den großen Strömungen entfernt hat. Insbesondere im Bereich der Usability und der Nutzbarkeit in verschiedensten Browsern und auf unterschiedlichsten Endgeräten, wurde der Anschluss verpasst.

 

Dann kam HTML5 und damit nicht nur eine neue Webtechnologie (mit HTML wie man es aus den Neunzigern kennt, hat HTML5 herzlich wenig zu tun) sondern auch ein neues Designparadigma, wie man am Besten für unterschiedlichste Endgeräte entwickeln sollte.

 

Es hat wohl ein Umdenken innerhalb der SAP stattgefunden, denn jetzt hat SAP plötzlich bekommen, alles richtig zu machen. Anstelle der Entwicklung einer ähnlichen Technologie setzt SAP nun genau auf HTML5 auf. Somit profitiert SAP sofort von allen Weiterentwicklungen des weltweiten Standards HTML5. Und SAPUI5 ist ja keine eigenständige Technologie, sondern eine zusätzliche API, die die Darstellung von Geschäftsprozessen und Daten im Web vereinfachen und verbessern soll.  Davon hat SAP sogar eine Open Source Version (OpenUI5) veröffentlicht.

 

Die richtige UI Strategie zu haben reicht aber nicht aus um festzustellen, ob diese sich auch durchsetzen wird. Denn oft waren die besten Produkte nicht die, die sich dann am Ende durchgesetzt haben. Was lässt mich also glauben, das SAPUI5 sich jetzt hier durchsetzen wird?

 

Es sind die vielen neuen Produkte, der SAP, die jetzt bereits auf diese Technologie setzen. SAP Fiori verwendet UI5 als Technologie um Prozesse aus den bestehenden Systemen einfach und übersichtlich web fähig zu machen. Es gibt schon über 400 verschiedene Apps der SAP und es ist kein Ende in Sicht.

 

SAP Cloud Systeme. Egal ob es die HANA Cloud Platform ist, auf welcher Entwickler mit SAPUI5 neue Applikationen bauen können, auch viele Cloud Standardlösungen der SAP (zB Cloud for Customer) setzen bereits auf der UI5 Technologie auf.

 

Das sind schon viele Zeichen, die die Wichtigkeit dieser UI Strategie erahnen lassen. Aber das größte Argument kommt noch. S4 HANA, DIE Zukunft der SAP, das System, das das erfolgreichste und am weitesten verbreitete Produkt der SAP Familie ablösen soll, das in die Fußstapfen von R/3 (Entschuldigung: SAP ERP) treten soll. Dieses Produkt setzt komplett auf SAPUI5 als Oberflächentechnologie.

 

Und damit ist für mich klar. Das ist keine weitere zusätzliche Oberfläche, die in bestimmten Szenarien und einigen Lösungen zum Einsatz kommt, sondern das wird alle anderen Oberflächen ablösen oder zu Nischenanwendungen degradieren. Und das finde ich gut. Es ist eine großartige Technologie, sie ist wunderbar mit Non-SAP Technologien kombinierbar. Egal ob es einmal sehr fancy sein soll, oder bestimmte Technologien in SAP Prozesse integriert werden können (zum Beispiel Image Recognition), als Entwickler kann man aus einem unendlichen Pool an Lösungen auswählen.

 

 

 

 

 

SAP® Overview Page – Example – List Card

Introduction

An overview page is a new type of SAP Fiori App since SAPUI5 1.32 which provides a quick overview of user important data at one screen.

SAP Overview Pages display the data in the form of Cards.

A card is a smart component that uses UI annotation and a single entity set from an OData service to display the data. As of today (SAPUI5 1.32) there are four card types available (List, Table, Stack, Analytic) and in this blog post I will give a description how to set up a List Card.

 

List Cards

There are two types of List Cards – Condensed and Extended.

  • Condensed List Cards – display up to 3 data items in one row.
  • Extended List Cards – display up to 6 data items in one row.

Each type can use two types of flavor – Standard and Bar.

  • Standard Flavor – design without bar = items are numbers and texts
  • Bar Flavor – design with bar = items are combination of numbers, texts + one bar

That means there are four possibilities how to display the List Cards. Take a look at following picture for better understanding of the List Cards concept.

Condensed List Card with Standard Flavor – Top 5 Invoices

Condensed List Card with Bar Flavor – Last Items In Storage

Extended List Card with Standard Flavor – Top 5 Long Working Employees

Extended List Card with Bar Flavor – Top 5 Reordered Products

overviewPage16

 

Prerequisities

I assume you already have an access to  (and are already a little bit familiar with) SAP WEB IDE on SAP HANA Cloud Platform Cockpit (HCP). If not, first of all I would refer you to this tutorial.

As a data source I am going to use Northwind OData service which is available for public and provides some simple data. To use this service we need to set it up in HCP Destinations.

Name: Northwind
Type: HTTP
Description: Northwind OData Service
URL: http://services.odata.org
Proxy Type: Internet
Authentication: NoAuthentication
Additional Properties
WebIDEEnabled true
WebIDESystem Northwind_Data
WebIDEUsage odata_gen

SAP WEB IDE Part

Thanks to SAP WEB IDE wizards the creation of Overview Page project is pretty straightforward. We need to create a new project from Overview Page Application Template, write name of our project, select data source – Service URL – Northwind OData Service (since our destination already contains the services.odata.org domain, we can type „V3/Northwind/Northwind.svc/“ only as the URL Part).

After project creation we can add some cards to our Overview Page. There is also a wizard for this in SAP WEB IDE – simply right click on your created project and find New -> Card. There are some customization settings in the third step – all of them are later editable from Manifest.json file.

The only tricky part about Overview Page is the creation of annotation files and Manifest. json settings (Card customization settings).

The Overview Page project in SAP WEB IDE is executed as SAP Fiori Component on Sandbox.

Condensed List Card with Standard Flavor

overviewPage19

Annotation File for Top 5 Invoices Example

  • Attribute Namespace in tag Schema must match Datasource Alias we enter during Overview Page creation
  • Attribute Target in tag Annotations must match EntityType of EntitySet we are going to use – check metadata.xml
  • Attribute Qualifier is used in Card customization settings – Manifest.json
  • We use 3 tags Record to display 3 items in one row
  • Each Record has attribute path to determine which value from Odata service are we going to display

Download XML File

Card customization settings – Manifest.json

  • last part of „annotationPath“ must match the attribute Qualifier from annotation file
  • „entitySet“ must match OData entity – check metadata.xml

Download JSON File

The other types of list cards can be created in simmilar way.

Condensed List Card with Bar Flavor

overviewPage20

Downolad Annotation File Example

Download Manifest.json Settings

Extended List Card with Standard Flavor

overviewPage18

Downolad Annotation File Example

Download Manifest.json Settings

Extended List Card with Bar Flavor

overviewPage21

Downolad Annotation File Example

Download Manifest.json Settings

 

Useful links

My Overview Page – Git Hub Project

SAP WEB IDE Tutorial

SAP Overview Page Official page

SAP Overview Page Official Video

help.sap.com about Cards

SAPUI5 Docu about Cards