Über SAPUI5 und SAP Fiori
SAP Fiori ist ein Konzept mit einheitlichen Designprinzipien, wie eine Benutzeroberfläche über alle SAP-Anwendungen hinweg hinsichtlich der grafischen und funktionalen Elemente dargestellt werden sollte. In den SAP Fiori Design Guidelines sind alle grundlegenden Elemente definiert, wie beispielsweise SAPUI5 Elemente sowie Fiori Launchpad im Entwicklungsframework verwendet werden sollten.
Was ist der Unterschied zwischen SAPUI5 und SAP Fiori?
SAPUI5 stellt die Grundlage für verschiedene Produkte und Lösungen im SAP Umfeld. Im Wesentlichen handelt es sich bei SAPUI5 um ein Programmierframework und eine Sammlung von Elementen und Tools, welche für die Entwicklung von SAPUI5 Anwendungen benötigt werden. SAP Fiori ist hingegen eine User Experience Guideline für sämtliche SAPUI5 Applikationen. Das Ziel ist dabei durch die SAP Fiori Guidelines eine moderne, einheitliche und benutzerfreundliche Oberfläche zu schaffen, um so den Anwendern eine einfache und schnellere Bedienung geschäftlicher Prozesse zu ermöglichen.
SAPUI5-Framework
Innerhalb des SAPUI5-Frameworks gibt es diverse Werkzeuge und Techniken um mit wenig Aufwand SAP Fiori Applikationen entwickeln zu können.
SAPUI5 bietet eine Vielzahl an Controls. Beispielsweise folgende:
- User Eingaben, z.B. für Inputs, Dropdownelemente und Formulare
- Visualisierungen, z.B. für Texte, Labels, Tabellen, Listen und Bilder
- Aktionen, z.B. für Buttons, Menüs, Datei-Uploader und Links
SAPUI5 bietet die Möglichkeit auf verschiedene Modelle ein Data Binding realisieren zu können. Die einfachste und am besten integrierteste Variante sind die oData Models. Diese können innerhalb diverser Controls (z.B. Tabelle) auf Aggregations angewandt werden und so automatisch auf Basis des oData Services die entsprechenden Inhalte innerhalb der Tabelle anzeigen.
Mit den Konzepten des Routings und der Navigation innerhalb einer SAPUI5 App lassen sich SinglePage Anwendungen bauen, in denen eine Navigation abgebildet werden kann ohne die gesamte Seite neu laden zu müssen. Hierbei können spezifische Routen-Patterns, als auch Parameter in die URL aufgenommen werden.
Für automatisiertes Testen von SAPUI5 Applikationen sind die beiden Test-Frameworks QUnit und OPA5 direkt integriert. Mit QUnit lassen sich einfach Unit-Tests schreiben, während OPA5 für Komponenten-Tests bestens geeignet ist.
Mit SAP FIORI Elements können FIORI-Anwendungen in kürzerer Zeit und zu geringeren Kosten entwickelt werden, indem Vorlagen und Funktionen standardisierter Anwendungen genutzt werden. Der SAPUI5-Code wird automatisch basierend auf den in den CDS (Core Data Services) definierten Metadaten und Annotationen generiert.
Das Projekt UI5 Web Components bietet eine umfangreiche Sammlung von unternehmensgerechten, wiederverwendbaren UI-Elementen, die auf den Web-Components-Standards basieren. Die UI5 Web Components sind vollständig kompatibel mit allen aktuellen und zukünftigen Webentwicklungs-Frameworks wie React, Angular und Vue, was eine nahtlose Integration in jede Technologielandschaft ermöglicht.
User Experience mit SAP Fiori
SAP BTP Build Workzone (ehemals Fiori Launchpad)
Der zentrale Einstiegspunkt für SAP-Anwendungen erfolgt über die SAP Build Workzone. Hierbei stellt jede Kachel eine eigenständige Anwendung für einen spezifischen Anwendungsfall dar. Im SAP Marketplace stehen bereits zahlreiche Anwendungen zur Verfügung, die in die unternehmenseigene SAP Build Workzone integriert werden können.
User Experience Guidelines
Durch die SAP Fiori Design Guidelines erhalten alle Applikationen ein ähnlicher Look & Feel und Anwender finden sich auch bei neuen Anwendungen schneller zurecht. Durch die einzelnen Designprinzipien wird unter anderem festgelegt, wie sich eine Applikation Mobil oder auf einem Desktop verhalten soll.
Designprinzipien von SAP Fiori
Das Konzept von SAP Fiori orientiert sich an 5 festen Designprinzipien: Einfach, Rollenbasiert, Ansprechend, Responsive und Einheitlich.
Dies bedeutet, dass jede App intuitiv auf jedem Endgerät bedienbar ist und dabei einheitlich aussieht. Zusätzlich führen auf einen spezifischen Use Case zugeschnittene Applikationen mit einem einheitlichen Look & Feel dazu Aufgaben schneller erledigen zu können.
Jetzt Ihre eigene SAPUI5 Applikation entwickeln
Profitieren Sie schon von den Vorteilen von SAP Fiori?
Jetzt Kontakt aufnehmen
In nur 5 Schritten zu Ihrer neuen SAPUI5 Applikation
Schritt 1
Analyse des Anwendungsfalls
Gemeinsam beantworten wir die wichtigen Fragen zu Beginn: Was ist die grundsätzliche Kundenanforderung? Gibt es bereits von SAP definierte Schnittstellen? Lässt sich der Anwendungsfall in eine bestehende Applikation integrieren? Muss eine komplett neue Applikation implementiert werden?
Schritt 2
Erstellung eines Prototyps
Auf Basis der Anforderungsanalyse erstellen wir im Falle einer neuen Applikation mittels SAP Build ein Prototyp. Dieser dient zur detaillierteren Anforderungsdefinition und zeigt im frühen Projektstadium auf, ob man sich auf dem richtigen Weg bewegt.
Schritt 3
Konzeption der Applikation
Der abgestimmte Prototyp wird in ein Konzept überführt, potenzielle Schnittstellen identifiziert und durch Mini-PoCs getestet sowie neue Schnittstellen definiert und ausformuliert.
Schritt 4
Implementierung der Applikation
Sofern die Konzeption die Anforderung des Kunden trifft wird die eigentliche Applikation inkl. Ihrer Schnittstellen umgesetzt und anschließend deployed.
Schritt 5
Testen und Feintuning
Nach erfolgreicher Implementierung wird die Applikation nun vom Kunden getestet und gegebenenfalls feinjustiert. Ist diese Phase abgeschlossen kann die neue Applikation live gehen.
Der stetige Fortschritt der Digitalisierung fordert eine schnelle Anpassung der internen Prozesse und Gegebenheiten. Hierbei bietet sich die Implementierung von SAP Fiori Applikationen perfekt an, da diese mit geringem Aufwand zu einem schnell erzielten Mehrwert führen und in jegliche Systemlandschaften integriert werden können.
Martika Möller, Senior Consultant SAPUI5 / FioriBIG.Cube GmbH 
Unsere erfolgreichen SAPUI5 Entwicklungen
Lernen Sie eine kleine Auswahl unserer erfolgreichen SAPUI5 Applikationsentwicklungen bei unseren Kunden kennen.
Entwicklungen von Fiori-Apps basieren oftmals auf individuellen Anforderungen. Wir unterstützen Sie sowohl bei der Einrichtung der Standard Fiori Apps, als auch bei individuellen Anforderungen bezogen auf spezifischen Business Need. Beispielsweise, wenn es sich um Erweiterungen innerhalb der bestehenden SAP Environment mit gleichen Look & Feel oder um kleine Projekte in der vorhandenen SAP Systemlandschaft handelt. In folgenden Abschnitten stellen wir Ihnen eine kleine Auswahl an individuellen Kundenleistungen.
Ziel des Projektes war es, alle Replikationsjobs je Remote Source anzuzeigen. Dabei sollten die Funktionen Starten/Abbrechen von Replikationsbeladungen eingefügt werden. Im Vorschaubild wird die Ansicht der SDI Einstellungen angezeigt.
© 2021. BIG.Cube GmbH. Alle Rechte vorbehalten
In einem weiteren Projekt war das Ziel der Erstellung eines Freigabedashboards entsprechend der Kundenbedürfnisse. Im Fokus stand der Upload der Inhalte eines Freigabe-Sheets, in dem mehrere Teams zu einem bestimmten Datensatz Freigaben tätigen mussten, in das Dashboard. Die Freigabe und die damit verbundene Jobausführung erfolgt automatisch, wenn alle Teams freigegeben haben. Zudem wurde die Personalisierung des Dashboards je Anwender implementiert.
© 2021. BIG.Cube GmbH. Alle Rechte vorbehalten
In diesem Projekt bestand die Anforderung darin, den Upload-Status jeder Datei in einer Übersichts-Tabelle anzuzeigen. Bei Auftreten von Fehlern, beispielsweise falsche Spaltenanzahl, falscher Datentyp oder zu viele Zeichen in einer Spalte, sollten diese entsprechend angezeigt werden. Zudem wurde die Partitionierung großer Dateien in kleine Pakete zum Upload der Daten umgesetzt.
© 2021. BIG.Cube GmbH. Alle Rechte vorbehalten
Diese individuell entwickelte Anwendung eignet sich für alle Unternehmen, die benutzerdefinierte SAP-Tabellen (z. B. SAP BW, SAP S/4HANA) nutzen und Daten über eine benutzerfreundliche Oberfläche pflegen möchten. Die manuelle Verwaltung und Pflege solcher Tabellen ist oft zeitaufwändig, fehleranfällig und ressourcenintensiv. Unsere App optimiert diesen Prozess durch Funktionen wie Massenerstellung über CSV-Uploads, Eingabevalidierung und Updates. Dadurch werden der manuelle Aufwand und das Fehlerrisiko reduziert, was zu einer höheren Datenqualität, schnelleren Verarbeitungszeiten und einer verbesserten betrieblichen Effizienz führt. Unternehmen können sich so auf wertschöpfendere Tätigkeiten konzentrieren und gleichzeitig die Einhaltung der SAP-Standards sicherstellen.
Die Anwendung bietet zudem flexible Einsatzmöglichkeiten: Sie kann sowohl in einer BTP-Umgebung als auch in einem On-Premise-System (Fiori Frontend Server) genutzt werden.
© 2024. BIG.Cube GmbH. Alle Rechte vorbehalten
Profitieren Sie von unserer SAPUI5 & Fiori Expertise
Wir bieten Ihnen umfassende Expertise und gehen mit Ihnen gerne den gesamten Weg von der Konzeption über die Entwicklung bis hin zu Implementierung und Betrieb. Zusätzlich bieten wir folgende 3 Leistungen:
SAPUI5 Hackathon
Lernen Sie in Intensiv-Workshops die Konzepte und die Herangehensweisen zur Entwicklung einer SAPUI5 Applikation kennen. Bringen Sie einen konkreten Anwendungsfall aus Ihrem Unternehmen mit. Dieser wird am Ende des Hackathons von Ihnen eigenständig implementiert.
Entwicklung von Custom Controls
Sollte die große Auswahl an SAPUI5 Controls einem Use Case nicht genügen, bieten wir an, wiederverwendbare Custom Controls zu implementieren. Hierbei ist es möglich bestehende Controls zu erweitern, als auch komplett neue Controls zu erstellen.
Weitere Hilfe- & Beratungsleistungen
Wir bieten Leistungen wie die Beurteilung von Use Cases, Hilfestellungen wie sich ein Use Case am besten in einer SAPUI5 App implementieren lässt und führen Reviews von bestehenden SAPUI5 Applikationen durch.
FAQ's zu SAPUI5 und SAP Fiori
Es hängt ganz von der Infrastruktur bei Ihnen im Unternehmen ab. Am einfachsten ist es in eine bestehende SAP Cloud Infrastruktur eine Applikation entwickeln zu können. Hierbei bietet die SAP Business Technology Platform alle Tools und Werkzeuge an, um eine Applikation schnell deployen zu können.
Die Möglichkeiten hier sind nahezu unbegrenzt. Es können von SAP bereitgestellte Schnittstellen angebunden werden, sowie eigen gebaute Schnittstellen innerhalb von SAP Systemen. Zusätzlich lassen sich allerdings auch third party Schnittstellen anbinden.
Um sich in das Thema SAPUI5 und SAP Fiori einarbeiten zu können, benötigt es primär ein grundlegendes Verständnis der Programmierung. Kenntnisse in JavaScript, HTML und CSS erleichtert den Einstieg.
Die schnellste und einfachste Möglichkeit eine neue SAPUI5 Applikation zu entwickeln bietet die SAP Business Technology Platform mit ihrem Business Application Studio, den vordefinierten App-Templates und der direkten Möglichkeit von SAP bereitgestellte Schnittstellen anzubinden.