Johannes Behrndt
20. Juni 2022

SAPUI5 & OpenUI5

SAPUI5 ist die Bezeichnung für das neueste User Interface Development Toolkit von SAP. Das JavaScript Framework ist mit dem Fokus auf intuitive Bedienbarkeit und mobile Nutzung entwickelt worden. Dazu wurde das klassische SAP Design um moderne UI-Komponenten erweitert.

SAPUI5 ist aktuell die neben WebDynpro die am weitesten verbreitete SAP-Oberflächentechnologie und soll in Zukunft als alleinige Oberflächentechnologie etabliert werden.

Das UI Framework wird nicht nur für Fiori Applikationen eingesetzt, sondern ganz allgemein für die Entwicklung von Anwendungen auf Basis von JQuery und Webstandards wie HTML5, JavaScript und CSS3. SAPUI5 ist für die Entwicklung von Applikationen optimiert, die sowohl von Desktop-Rechnern als auch mobilen Endgeräten genutzt werden sollen.

Das standardisierte SAPUI5-Toolset beinhaltet zahlreiche vordefinierte grafische Bedienelemente zum Erstellen neuer Oberflächen für verschiedenste Prozessschritte in SAP. Anwender können sowohl Standard-Fiori-Apps individuell ergänzen als auch völlig neue Anwendungen zur Prozessautomatisierung kreieren.

In vielen Fällen ist dies notwendig, da SAP selbst kaum sämtliche seiner bislang rund 400.000 Benutzeroberflächen (SAP Dynpros) als Fiori App nachprogrammieren wird. SAPUI5 ist ideal für die Entwicklung von schlanken Business Applikationen mit einem Fokus auf Usability. Es unterstützt alle SAP Produkte und lässt sich auf diversen Servern nutzen.

Für Entwickler ist SAPUI5 leicht zu erlernen. Es bietet umfassende Möglichkeiten, Steuerungselemente und Themes anzupassen, und basiert auf offenen Standards, die die Integration von 3rd-Party JavaScript-Bibliotheken unterstützen. Es basiert auf dem MVC-Modell, das die Datenlogik vom Design trennt und Änderungen am UI vereinfacht.

SAPUI5 unterstützt über zweiseitige Datenanbindung neben dem für SAP Fiori relevanten Datenformat OData auch JSON, XML u.a.

E-Book App-Entwicklung

E-Book: App-Entwicklung

In diesem E-Book erhalten Sie eine Übersicht über die Entwicklung von Enterprise-Apps mit SAPUI5 und OData.

SAPUI5 vs. OpenUI5

SAP liefert zwei Ausführungen seines Development Toolkits aus: SAPUI5 und die Open-Source Variante OpenUI5. Das JavaScript-Framework OpenUI5 hat SAP unter einer Apache-2.0-Lizenz entwickelt, um betriebssystemunabhängige Geschäftsanwendungen zu erstellen. Sein Kernel basiert auf JavaScript, jQuery und LESS. Die Bibliothek beinhaltet die MVC-Architekturbausteine mit Optionen für verschiedene Ansichten und Modellformate. Sie wurde nach mehreren Jahren in der Produktion bei SAP Ende 2013 als Open Source veröffentlicht; Erweiterungen sind über GitHub möglich.

SAPUI5 ist quasi eine proprietäre Version von OpenUI5, die integriert ist in die eigenen Produkte (SAP HANA, SAP Business Technology Platform, SAP NetWeaver 7.4 oder höher, User Interface Add-on für SAP NetWeaver Application Server 7.3x). Anwender erhalten SAPUI5 kostenfrei zur Verfügung gestellt. Hierfür liefert SAP, anders als bei OpenUI5, auch Bugfixes. Darüber hinaus beinhaltet SAPUI5 einige zusätzliche Komponenten, die in der freien Version fehlen. Hierbei handelt es sich jedoch größtenteils um exotische UI-Komponenten – die Standardkomponenten sind in beiden Versionen vorhanden. Der Kernel ist bei beiden Versionen identisch, die somit stets den gleichen Entwicklungsstand haben.

Browser und Platform Support

Da OpenUI5 auf CSS3, HTML5 und der JavaScript-API von ECMAScript 5 (ES5) basiert, werden nur Browser mit HTML5-Fähigkeiten unterstützt. Mit iOS-, Android-, MacOS- und Windows befinden sich darunter die relevanten Plattformen. Generell unterstützt das OpenUI5-Framework nur Hauptversionen, die auch von der jeweiligen Plattform unterstützt werden.

UI5 Architektur

Auf der Client-UI-Technologie OpenUI5 entwickelte Apps laufen im Browser auf jedem Endgerät. Greift der Anwender auf eine App zu, wird eine Anfrage an den jeweiligen Server gesendet, um die Anwendung in den Browser zu laden.

Abhängig von der Umgebung, in der OpenUI5 eingesetzt wird, können die Bibliotheken oder Anwendungen zum Beispiel auf einem SAP NetWeaver Application Server oder einer SAP Business Technology Platform abgelegt werden.

Im ersten Fall ist der Betrieb eines SAP Fiori Frontend Servers als Gateway Voraussetzung. Dieser kommuniziert mit SAP über OData-Services (s.u.) und rendert die Apps. Soll eine App auch außerhalb der Unternehmensgrenzen genutzt werden, sollte der Web-Zugriff auf das SAP Gateway beim On-premise-Betrieb durch einen Reverse Proxy und eine Web Application Firewall geschützt werden, die in der demilitarisierten Zone angesiedelt ist.

Die oberste Struktureinheit wird als Bibliothek bezeichnet. Bibliotheken sind die Master-Artefakte im Erweiterungskonzept. Sie bündeln eine Reihe von Controls (z.B. Button, Label, TextField oder Table) und verwandten Typen und machen sie für Web-Anwendungen nutzbar. Es gibt vordefinierte und Standardbibliotheken, wie sap.m, mit vielen häufig verwendeten Controls.

Ein UI-Element ist der Grundbaustein der Benutzeroberflächen. Dabei handelt es sich um eine wiederverwendbare Einheit mit Eigenschaften, Ereignissen, Methoden und Beziehungen. Die wichtigsten Beziehungen sind Aggregationen zu anderen UI-Elementen, so dass eine Baumstruktur von Elementen erstellt werden kann.

Die aus Entwicklersicht wichtigsten Artefakte sind die Controls, die das Erscheinungsbild und die Benutzerinteraktion auf dem Bildschirm steuern. Dabei handelt es sich um spezielle Oberflächenelemente, die als Endknoten (Blätter) einer Baumstruktur verwendet werden können. Auf diese Weise dient ein Control als Einstiegspunkt, insbesondere für das Rendering.

Neben Controls gibt es noch weitere Nicht-Control-Elemente, die nicht als Wurzel, sondern nur als abhängiger Teil innerhalb einer solchen Baumstruktur verwendet werden können (z.B. TableRow, TableCell). Datentypen sind First-Class-Entitäten im Metamodell. Dies ermöglicht die Wiederverwendung von Typen über Bibliotheken hinweg und die Erweiterbarkeit des Typensystems.

Die Kernbibliothek (technisch gesehen ist dies die sap.ui.core library) definiert bereits einen Kernsatz von Typen, die in anderen Bibliotheken verwendet werden können.

E-Book Individualentwicklung Fiori

E-Book: Entwicklung Ihrer persönlichen Fiori App

Lernen Sie in diesem E-Book, wie Sie Ihre eigene persönliche Fiori App entwickeln.

SAPUI5 IDE

Während man die Oberfläche selbst in SAPUI5 erstellt, werden die eigentlichen OData-Services im Backend mit ABAP programmiert. Die vorgegebenen Klassen lassen hier erweitern, in dem man die entsprechenden Methoden überschreibt. Im besten Fall kommen dafür die Funktionsbausteine (FuBas) und Business Application Programming Interfaces (BAPIs) zum Einsatz.

Über das Open Data (OData) Protocol und das SAP NetWeaver Gateway kommunizieren beide Ebenen miteinander.

Für die Programmierung des GUIs stehen zwei Entwicklungsumgebungen (IDE) zur Verfügung. Eine webbasierte (WebIDE) sowie SAPUI5 Plugins für Eclipse. Eclipse wird zur Entwicklung von Software verschiedenster Art genutzt, insbesondere für Java als integrierte Entwicklungsumgebung.

SAP stellt für Fiori die sogenannten „SAPUI5 Tools“ bereit, die als Plugins den Weg in die Eclipse Versionen Mars (4.5) oder Luna (4.4) finden. Bei WebIDE wird analog zu Web Dynpro immer das Model-View-Controller-Architekturmuster angewandt. Hier stehen vier verschiedene Datenmodelle zur Verfügung: OData als Backend-Repräsentation sowie JSON, XML, Resource für den Client.

OData ist ein serverseitiges Modell und lädt nur die von der Benutzeroberfläche angeforderten Daten vom Server. JSON, XML und Resource sind Client-bezogen, d.h. die Modelldaten werden vollständig geladen und stehen auf dem Client zur Verfügung.

Operationen wie Sortieren und Filtern werden auf diesem ohne weitere Serveranfragen ausgeführt. Bei der App-Entwicklung in SAPUI5 können unterschiedliche Modelle für verschiedene Bereiche der Anwendung definiert sowie auch einzelne Controls einem Modell zugeordnet werden.

Modelle lassen sich darüber hinaus schachteln, z.B. ein für die Anwendung definiertes JSON-Modell und ein OData-Modell für ein in der Anwendung enthaltenes Table Control. Eine Web-Anwendung sollte grundsätzlich mehrere Datenformate unterstützen, also JSON, XML, Atom oder OData.

Die Art und Weise, wie die Datenbindung innerhalb der User Interface (UI) Controls definiert und implementiert wird, sollte jedoch von diesen unabhängig sein. Es ist auch möglich, eine benutzerdefinierte Modellimplementierung für Datenquellen zu erstellen, die noch nicht durch das Framework abgedeckt sind oder domänenspezifisch sind.

Features von SAPUI5 für Eclipse

  • Code Completion
  • Syntax Highlighting
  • Deployment der App auf ein ABAP-Backend-System
  • Quellcodeverwaltung über weiteres Plugin möglich

Features von SAP WebIDE

  • Syntax Highlighting
  • Code Completion
  • Templates um bspw. den Rumpf einer Master-Detail-App generieren zu lassen
  • Integrierter Git Client zur Quellcode Verwaltung
  • Layout Editor zum Erstellen von Views mittels Drag & Drop
  • Wizards zur Erweiterung von Standard Fiori Apps der SAP
  • Deployment der App auf ein ABAP-Backend-System oder direkt in die HANA Cloud Platform

Welche IDE verwendet werden sollte, hängt stark von der individuellen Situation im Unternehmen ab. Um die in WebIDE entwickelten Apps in das lokale SAP-Entwicklungssystem zu überführen, ist stets eine Verbindung mittels SAP Cloud Connector notwendig. Zudem fallen hier zusätzlich Lizenzkosten für den produktiven Einsatz an, was zunächst für Eclipse spricht.

Jedoch setzt SAP auf WebIDE zur Fiori UI-Entwicklung und entwickelt neue Features im Wesentlichen nur noch für diese Umgebung. In diesem Zuge hat sich die Full Stack-Version der WebIDE entwickelt, die weitere Möglichkeiten zur Verfügung stellt.

Websession: SAPUI5

Haben Sie noch offene Fragen zum Thema SAPUI5? In einer kostenlosen Websession besprechen wir Ihre Herausforderungen und Möglichkeiten. Nachdem Sie das Formular ausgefüllt haben rufe ich Sie an um einen passenden Termin zu vereinbaren.

Hands-on Grundlagenwissen zur Entwicklung mit SAPUI5

FAQ

Was ist SAPUI5?

Anwender können sowohl Standard-Fiori-Apps individuell ergänzen als auch völlig neue Anwendungen zur Prozessautomatisierung kreieren. In vielen Fällen ist dies notwendig, da SAP selbst kaum sämtliche seiner bislang rund 400.000 Benutzeroberflächen (SAP Dynpros) als Fiori App nachprogrammieren wird. Die App-Entwicklung geschieht mit Hilfe von SAPUI5, einem auf HTML5 basierenden OpenSource-Toolset. Mit HTML5 werden Texte und andere Inhalte elektronischer Dokumente im Internet ausgezeichnet und vernetzt.

SAPUI5 vs. OPENUI5?

SAP liefert zwei Ausführung seines Development Toolkits aus: SAPUI5 und die Open-Source Variante OpenUI5. Das JavaScript-Framework OpenUI5 hat SAP unter einer Apache-2.0-Lizenz entwickelt, um betriebs-systemunabhängige Geschäftsanwendungen zu erstellen.

Welche Features von SAPUI5 gibt es für Eclipse?

  • Code Completion
  • Syntax Highlighting
  • Deployment der App auf ein ABAP-Backend-System
  • Quellcodeverwaltung über weiteres Plugin möglich

Was ist der Unterschied zwischen SAPUI5 und Fiori?

Fiori ist ein Designkonzept, das die Benutzererfahrung von SAP Anwendungen vereinfacht und personalisiert. SAPUI5 ist die Bezeichnung für das neueste User Interface Development Toolkit von SAP. Das JavaScript Framework ist mit dem Fokus auf intuitive Bedienbarkeit und mobile Nutzung entwickelt worden.

Johannes Behrndt

Johannes Behrndt

Seit über 10 Jahren berate ich große und mittelständische Unternehmen rund um mobile Lösungen, insbesondere im SAP-Umfeld. Ich habe den Überblick über die relevanten SAP-Prozesse und kenne die neuesten Technologien für mobile Lösungen.

Sie haben Fragen? Kontaktieren Sie mich!


Weiterführende Inhalte

Unser E-Book zum Thema "App-Entwicklung mit OData & SAPUI5"
Unser E-Book zum Thema SAP Fiori

Verwandte Beiträge

Der SAP Gateway Client (Transaktion /IWFND/GW_CLIENT) für das SAP Gateway ist ein nützliches Tool, das Ihnen ermöglicht, jeden OData-Service zu testen. Auf diese Weise können Sie einen OData-Service proaktiv testen […]

weiterlesen

Die SAP Fiori Cloud ist ein moderner Ansatz zur Nutzung der SAP Fiori User Experience (UX) und bietet vorkonfigurierte Inhalte und Services für die Entwicklung, Erweiterung und den Betrieb von […]

weiterlesen

Das neue SAP Cloud SDK (Software Development Kit) macht die Entwicklung von Erweiterungen für SAP-Lösungen besonders attraktiv – mit dieser Ankündigung präsentierte SAP das neue SAP Cloud SDK im Mai […]

weiterlesen

Unsere Produkte zu SAPUI5 & OpenUI5

Mit unserer App Factory bekommen Sie eine neuartige App zum Festpreis, die Ihre Endkunden begeistern wird!

Mehr Informationen

So viele mobile App-Ideen und keine Zeit? Sie wollen eine App umsetzen, wissen aber nicht, wie? Unsere App Entwickler beraten Sie und setzen Ihre App-Ideen um. Dabei behalten Sie die volle […]

Mehr Informationen

Erfahren Sie alles über die Konzeption, Umsetzung und Nutzung von Simplifier, einer Low Code Plattform zur App-Erstellung. Testen Sie den Prototypen!

Mehr Informationen

Schreiben Sie einen Kommentar

Bitte füllen Sie alle mit * gekennzeichneten Felder aus. Ihre E-Mail Adresse wird nicht veröffentlicht.





Kontaktieren Sie uns!
Sophie Weber
Sophie Weber Kundenservice