SAPUI5 & OpenUI5
Inhaltsverzeichnis
Das Wichtigste im Überblick
- SAPUI5 ist ein modernes UI-Framework auf Basis offener Webstandards für die Entwicklung benutzerfreundlicher und geräteunabhängiger SAP-Anwendungen.
- Es gibt eine Open-Source-Variante namens OpenUI5 und die SAP-eigene Version SAPUI5 mit zusätzlichen Komponenten und offiziellem Support.
- Die Architektur basiert auf dem Model-View-Controller-Prinzip und unterstützt verschiedene Datenformate wie OData, JSON und XML für flexible Datenanbindungen.
- Für die Entwicklung stehen sowohl Eclipse mit SAPUI5-Plugins als auch die cloudbasierte SAP WebIDE und SAP Business Application Studio zur Verfügung, wobei SAP letzteres bevorzugt weiterentwickelt.
Was ist SAPUI5?
SAPUI5 ist aktuell neben WebDynpro die am weitesten verbreitete SAP-Oberflächentechnologie. 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 sowohl für Desktop-Computer als auch für mobile Endgeräte optimiert.
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 (Model-View-Controller), 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.
Mit unserem SAPUI5 Coaching befähigen wir Ihr Team, Anwendungen praxisnah und sauber umzusetzen. Die Inhalte richten wir gezielt an Ihrem Kenntnisstand und Ihren konkreten Anforderungen aus.
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. Im Kern sind beide Varianten eng verwandt. Für viele Standardanwendungen sind die Unterschiede im Projektalltag gering. Relevant werden sie vor allem dann, wenn es um SAP-spezifische Integration, Support-Anforderungen oder zusätzliche Libraries geht.
Browser- und Plattform-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
UI5-Anwendungen laufen grundsätzlich im Browser des Endgeräts. Ruft ein Anwender eine App auf, werden die benötigten Ressourcen vom jeweiligen Server geladen und im Browser ausgeführt. Abhängig von der Umgebung, in der Sie OpenUI5 einsetzen, können Sie die Bibliotheken oder Anwendungen zum Beispiel auf einem SAP NetWeaver Application Server oder einer SAP Business Technology Platform ablegen.
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-Premises-Betrieb durch einen Reverse Proxy und eine Web Application Firewall geschützt werden, die in der demilitarisierten Zone angesiedelt sind.
Die Bibliothek
Die oberste Struktureinheit in UI5 ist die Bibliothek. Sie bündelt Controls (z. B. Button, Label, TextField oder Table), Typen und macht sie für Web-Anwendungen nutzbar. Zu den bekanntesten Standardbibliotheken gehört beispielsweise sap.m, die viele häufig genutzte Controls für responsive Anwendungen enthält.
Das UI-Element
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, um so eine Baumstruktur von Elementen zu erstellen.
Die Controls
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 Verwendung finden. 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 (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.
SAPUI5 IDE
Während die Benutzeroberfläche in SAPUI5 entwickelt wird, werden die benötigten OData-Services im Backend mit ABAP programmiert. Die vorgegebenen Klassen lassen sich hier erweitern, indem 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 dient der Entwicklung von Software verschiedenster Art, insbesondere für Java als integrierte Entwicklungsumgebung. Die SAP Web IDE ist allerdings eine ältere browserbasierte Entwicklungsumgebung für Web- und Fiori-Anwendungen. Das SAP Business Application Studio gilt als moderner Nachfolger und bietet eine flexiblere, stärker erweiterbare Arbeitsumgebung für aktuelle Entwicklungsanforderungen. Während die Web IDE in bestehenden Landschaften weiterhin relevant sein kann, liegt der strategische Fokus für neue Entwicklungsprojekte heute auf dem Business Application Studio.
Entwicklungswerkzeuge und Datenmodelle in SAPUI5
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 clientbezogen, d. h. die Modelldaten laden vollständig 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
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.
Welche Entwicklungsumgebung die richtige ist, hängt von der Systemlandschaft, den Sicherheitsanforderungen und den Entwicklungsprozessen im Unternehmen ab. In vielen Fällen ist heute jedoch WebIDE der naheliegende Ausgangspunkt von bestehenden Anwendern, während SAP Business Application Studio mittlerweile für neue UI5- und Fiori-Projekte bevorzugt wird.
Fazit
SAPUI5 ist das zentrale UI-Framework für moderne SAP-Anwendungen und ermöglicht die Entwicklung benutzerfreundlicher, responsiver und erweiterbarer Business-Applikationen. Es basiert auf offenen Webstandards und ist sowohl in der SAP-eigenen Version (SAPUI5) als auch als Open-Source-Variante (OpenUI5) verfügbar.
Die enge Integration in SAP-Produkte sowie die breite Unterstützung durch verschiedene Tools und Architekturen machen SAPUI5 zu einem zukunftssicheren Werkzeug für die UI-Entwicklung in der SAP-Welt.
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
- SAP UI5 – Grundlagenwissen Teil 1 (HTML)
- SAPUI5 – Grundlagenwissen Teil 2 (CSS)
- SAP UI5 – Grundlagenwissen Teil 3 (JavaScript – Vergleich mit ABAP)
Dieser Artikel erschien bereits im Februar 2016. Der Artikel wurde am 10.03.2026 erneut geprüft und mit leichten Anpassungen aktualisiert.
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. Der Fokus der Entwicklung des JavaScript Frameworks lag auf intuitiver Bedienbarkeit und mobiler Nutzung.
Wer kann mir beim Thema SAPUI5 & OpenUI5 helfen?
Wenn Sie Unterstützung zum Thema SAPUI5 & OpenUI5 benötigen, stehen Ihnen die Experten von Mission Mobile, dem auf dieses Thema spezialisierten Team der mindsquare AG, zur Verfügung. Unsere Berater helfen Ihnen, Ihre Fragen zu beantworten, das passende Tool für Ihr Unternehmen zu finden und es optimal einzusetzen. Vereinbaren Sie gern ein unverbindliches Beratungsgespräch, um Ihre spezifischen Anforderungen zu besprechen.
