SAPUI5
In diesem Fachartikel erfahren Sie, was hinter SAPUI5 steckt, wie das Framework funktioniert und welche Vorteile es bietet. UI5 ist ein zentrales UI-Development Toolkit, das von SAP für moderne Geschäftsapplikationen – insbesondere für die Umsetzung der Fiori Benutzeroberflächen.
Solution Architect bei FIS
Was ist UI5?
UI5 (die allgemeine Kurzform) ist das aktuelle User Interface Development Toolkit zur Entwicklung von Anwendungen nach modernen Webstandards (HTML5, JavaScript, CSS).
Vereinfacht gesagt handelt es sich um ein JavaScript-basiertes Framework, das Bibliotheken mit zahlreichen vordefinierten UI-Elementen (Buttons, Tabellen, Eingabefelder etc.) sowie Entwicklungswerkzeuge umfasst. UI5 dient zur Entwicklung intuitiver und optisch ansprechender Benutzeroberflächen, ohne “bei Null” beginnen zu müssen. Das gilt sowohl für Anwendungen auf mobilen Geräten als auch auf Desktop-Systemen.
SAPUI5 wird insbesondere für die Entwicklung von SAP Fiori Apps eingesetzt, eines modernen, rollenbasierten SAP-UI, also User Interface, mit einfachem Bedienkonzept. Doch auch abseits von Fiori kommt das UI5-Framework zum Einsatz: Entwickler nutzen es für individuelle Webanwendungen auf Basis von jQuery und offenen Standards wie HTML5 und JavaScript.
SAP stellt für UI5 ein umfangreiches SDK (Software Development Kit) mit Dokumentationen, Beispielen und Tutorials bereit, in dem Entwickler alle benötigten Informationen zu den UI5-Komponenten und Programmiermodellen finden. Dies erleichtert den Einstieg und die Beantwortung von Fragen während der Entwicklung enorm. Insgesamt hat sich SAPUI5 seit seiner Einführung 2013 als weit verbreitete SAP-Oberflächentechnologie etabliert und ist heute ein zentraler Baustein der SAP-Strategie für ein modernes User Interface.
Wie funktioniert SAPUI5?
SAPUI5-Anwendungen folgen einem Client-seitigen Architekturmodell: Die App (bestehend aus HTML5/JS/CSS-Code) wird vom Server auf den Webbrowser des Nutzers heruntergeladen und läuft dort vollständig ab.
Beim Aufruf lädt der Browser die UI5-Bibliotheken und den Anwendungscode vom Server – je nach Szenario liegen diese z. B. auf einem SAP NetWeaver Server, in der SAP Business Technology Platform oder auf einem Firmen-Webserver. Im Browser werden dann die definierten Views gerendert (z. B. als HTML5-Inhalte) und ein Model wird initialisiert, um Geschäftsdaten aus dem Backend bereitzustellen.
Der Datenaustausch zwischen der UI5-App im Browser und dem Backend erfolgt dabei typischerweise über OData Services (dem SAP-Standard für RESTful Services) oder vergleichbaren Protokollen. Diese Architektur macht SAPUI5-Apps sehr effizient und schnell, da nach dem Initialisieren der Anwendung nur noch Daten (z. B. im JSON- oder XML-Format) ausgetauscht werden, nicht aber komplette HTML-Seiten.
SAPUI5 unterstüzt verschiedene Datenformate und Services out-of-the-box.
Neben dem für SAP typischen OData-Standard können beispielsweise auch JSON-Dateien, XML-Datendienste und andere Formate als Datenquelle angebunden werden. Durch die eingebaute zweiseitige Datenbindung werden Änderungen entweder sofort ans Backend gesendet oder lokal gehalten, je nach Model-Typ (OData für serverseitige, JSON/XML für clientseitige Datenhaltung).
Was ist der Unterschied zwischen SAPUI5 und SAP Fiori?
Die Begriffe SAPUI5 und SAP Fiori werden oft in einem Atemzug genannt, bezeichnen aber unterschiedliche Dinge. SAP Fiori beschreibt das Oberflächen-Design und die Benutzerführung, während SAPUI5 das Framework ist, mit dem diese Oberflächen technisch umgesetzt werden. Fiori definiert das „Was“, SAPUI5 liefert das „Wie“.
SAP Fiori
Fiori ist genauer gesagt das Designkonzept und die Benutzeroberflächen-Strategie von SAP, die ab 2013 eingeführt wurde, um die SAP-Anwendungen in Unternehmen einheitlicher, einfacher und personalisierter zu gestalten. SAP Fiori umfasst Design-Richtlinien (z. B. wie Oberflächen aussehen und sich verhalten sollen) und über 1.000 Standard-Apps, die diese Designprinzipien umsetzen. Man kann Fiori also als die neue Generation der SAP-Oberflächen verstehen, die auf hohe Usability und Cross-Device-Nutzung abzielt.
SAPUI5
UI5 hingegen ist die technische Grundlage, mit der diese Fiori-Oberflächen realisiert werden. Es handelt sich, wie oben beschrieben, um das Development Toolkit von SAP, das Entwickler verwenden, um Fiori-Apps zu entwickeln. Vereinfacht gesagt: Fiori gibt vor wie eine moderne SAP-App aussehen und sich anfühlen soll, und SAPUI5 liefert die technischen Mittel, um diese App umzusetzen. SAPUI5 ist somit die Voraussetzung für SAP-Fiori-Anwendungen.
In der Praxis bedeutet das, dass alle Fiori-Apps (sowohl die von SAP bereitgestellten Standard-Apps als auch eigene Entwicklungen) mit SAPUI5 gebaut sind.
Gamechanger Cloud-ERP: Effizienz trifft Innovation
Inhalte des Whitepapers
Was ist der Unterschied zwischen SAPUI5 und OpenUI5?
SAP stellt sein UI-Toolkit in zwei Varianten zur Verfügung: SAPUI5 und OpenUI5.
OpenUI5 ist die Open-Source-Variante des SAPUI5-Frameworks. Technisch gesehen basieren beide auf dem gleichen Kern (Kernel) und haben den gleichen Entwicklungsstand – OpenUI5 wurde Ende 2013 unter der Apache-2.0 Open-Source-Lizenz freigegeben. Mit OpenUI5 können Entwickler betriebsystemunabhängige Geschäftsanwendungen erstellen, genau wie mit SAPUI5.
Eine Gegenüberstellung von SAPUI5 und OpenUI5:
|
Kriterium |
SAPUI5 (SAP-intern) |
OpenUI5 (Open Source) |
|---|---|---|
|
Verfügbarkeit |
Nur für SAP-Kunden (im SAP-System oder via Download) |
Für alle frei verfügbar (z.B. über GitHub/CDN) |
|
Lizenzierung |
Proprietär (Lizenz über SAP-Software, z.B. S/4HANA) |
Apache 2.0 Open Source Lizenz |
|
Funktionsumfang |
Alle Kernfunktionen + einige UI Komponenten (SAP-spezifisch) |
Alle Kernfunktionen des Frameworks (kein SAP-Zusatz) |
|
Support & Updates |
Durch SAP (inkl. Wartung, Patches, Bugfixes) |
Durch Community / SAP (gleicher Kernstand, aber Community-Erweiterungen) |
|
Zweck |
Für produktive SAP-Lösungen mit vollem SAP-Support |
Für offene Entwicklung, Tests, Contributions, nicht SAP-gebundene Nutzung |
Der wesentliche Unterschied zwischen SAPUI5 und OpenUI5 liegt in der Lizenz und im Lieferumfang: OpenUI5 ist als Open-Source-Variante frei zugänglich, beispielsweise über GitHub, während SAPUI5 nur SAP-Kunden im Rahmen von SAP-Produkten wie der SAP Business Technology Platform zur Verfügung steht. Zwar basieren beide Varianten auf dem gleichen technischen Kern und enthalten sämtliche Kernfunktionen sowie die gängigen UI-Komponenten, doch SAPUI5 bietet zusätzlich einige proprietäre Controls, die in der Open-Source-Version fehlen – meist handelt es sich dabei um spezielle, für Standardanwendungen nicht zwingend notwendige Bedienelemente.
Beide Development Toolkits ermöglichen die Entwicklung moderner, browserbasierter User-Interfaces auf Basis von HTML5, JavaScript und CSS3. Wer unabhängig von SAP-Produkten entwickeln möchte, kann mit OpenUI5 starten – das Grundgerüst an Funktionen ist identisch. Für SAP-Kunden empfiehlt sich der Einsatz von SAPUI5, das bereits in vielen Produkten integriert ist.
Welche Vorteile bietet SAPUI5?
Die Einführung von Fiori brachte gegenüber früheren SAP-Oberflächen (wie der klassischen SAP GUI) eine Reihe von Vorteilen mit sich. Die wichtigsten Pluspunkte im Überblick:
SAPUI5-Anwendungen orientieren sich an den Fiori Design Guidelines und modernen UX-Prinzipien. Das sorgt für intuitive Bedienbarkeit, einheitliche Benutzeroberflächen und kurze Einarbeitungszeiten bei Anwendern – auch ohne lange Schulungen.
Mit SAPUI5 erstellte Webanwendungen passen sich automatisch an unterschiedliche Bildschirmgrößen und Endgeräte an und garantieren eine konsistente Bedienung auf allen Geräten – vom Desktop-Computer bis zum Smartphone. Eine Oberfläche für alle Geräte.
SAPUI5 ermöglicht die flexible Anpassung von Content, Layouts und Logiken – ideal zur Abbildung individueller Unternehmensprozesse. Die klassische SAP GUI wird dadurch ersetzt.
Das Framework basiert auf offenen Webstandards (HTML5, JavaScript, CSS3) und unterstützt die Anbindung an OData Services, REST-APIs und andere Datenquellen. Auch Drittanbieter-Komponenten lassen sich leicht integrieren.
Wiederverwendbare UI-Elemente und vorgefertigte Komponenten-Bundle beschleunigen die Anwendungsentwicklung. Geringerer Schulungs- und Supportaufwand durch intuitive Bedienkonzepte senken die Betriebskosten für Unternehmen.
SAPUI5 ist das strategische UI-Framework von SAP – insbesondere für SAP S/4HANA und Fiori. Mit der Open Source Variante OpenUI5 bleibt es offen und flexibel. SAP investiert fortlaufend in die Weiterentwicklung.
Wie entwickelt man SAPUI5-Anwendungen?
Die Entwicklung einer SAPUI5-App erfordert Kenntnisse in Web-Technologien (insbesondere JavaScript) und ein grundlegendes Verständnis des SAPUI5-Frameworks (Aufbau einer UI5-App, MVC-Pattern, OData-Anbindung etc.). Ein Vorteil ist, dass SAPUI5 für Entwickler mit Web-Erfahrung leicht zu erlernen ist – die Konzepte entsprechen gängigen Web-Patterns, und SAP liefert viele Vorlagen und Tools mit. Hier sind die wichtigsten Punkte für den Einstieg in die UI5-Entwicklung:
Development Toolkit (Business Application Studio & Visual Studio Code)
Für die Anwendungsentwicklung mit SAPUI5 empfiehlt SAP das cloud-basierte Business Application Studio (BAS) auf der SAP Business Technology Platform. Die Umgebung enthält alle nötigen Tools für die UI5-Entwicklung und ist direkt mit SAP-Systemen integrierbar. Alternativ kann lokal mit Visual Studio Code und dem SAP Fiori Tools-Plugin gearbeitet werden. Beide Varianten unterstützen Projektvorlagen, Debugging, Code-Vervollständigung und Deployment.
Projektanlage und Framework
Neue SAPUI5-Anwendungen werden in der Regel mit Vorlagen im Business Application Studio oder über den Easy-UI5 Generator erstellt. Die Struktur basiert auf dem MVC-Framework (Model-View-Controller) mit View-Dateien (XML/HTML), Controllern (JavaScript) und Modellen für die Datenintegration. Das MVC-Modell ermöglicht die Trennung von Datenlogik und Design. Entwickler greifen auf vordefinierte UI Komponenten wie sap.m zurück oder erweitern das Framework durch eigene Elemente.
Datenanbindung
In SAP-Szenarien werden OData Services häufig zur Integration von Geschäftsdaten genutzt – bereitgestellt z. B. über SAP Gateway. Im Frontend wird das OData-Modell eingebunden, im Backend (oft in ABAP) die Logik definiert. Neben OData sind auch JSON, REST oder XML als Datenquellen nutzbar – die Nutzung eines SAP-Backends ist optional.
Hilfsmittel und Dokumentation
Das offizielle SAPUI5 SDK enthält umfassende Dokumentation, das UI5 Demo Kit mit API-Referenz, Beispielanwendungen und Best Practices und bietet Entwicklern im Bereich der SAP-Frontend-Entwicklung wertvolle Unterstützung. Zusätzliche Inhalte und Erfahrungen lassen sich über die SAP Community oder Partner-Blogs abrufen – ideal für den Einstieg und zur schnellen Lösung typischer Fragen.
Fazit
Abschließend lässt sich festhalten, dass SAPUI5 ein UI-Framework ist, das im SAP-Ökosystem eine zentrale Rolle spielt. Es ist damit ein unverzichtbares Werkzeug im Bereich der digitalen Transformation von SAP-Systemen. Für Entscheider bedeutet das: Wer heute auf SAPUI5 (und Fiori) setzt, investiert in eine moderne Benutzererfahrung und in Technologien, die von SAP aktiv weiterentwickelt und unterstützt werden.
FAQ – Häufig gestellte Fragen
Verwandte Themen
