Über SAPUI5 und SAP Fiori

SAP Fiori ist ein Konzept mit einheit­­lichen Design­prinzipien, wie eine Benutzer­­oberfläche über alle SAP-­Anwendungen hinweg hin­sicht­lich der grafischen und funktionalen Elemente dar­­gestellt werden sollte. In den SAP Fiori Design Guide­lines sind alle grund­­legen­den Elemente definiert, wie beispiels­­weise SAPUI5 Elemente sowie Fiori Launchpad im Entwicklungs­­framework ver­wendet werden sollten.

Was ist der Unter­schied zwi­schen SAPUI5 und SAP Fiori?

SAPUI5 stellt die Grund­lage für ver­­schiedene Produkte und Lösungen im SAP Umfeld. Im Wesent­­lichen handelt es sich bei SAPUI5 um ein Programmier­­framework und eine Sammlung von Elementen und Tools, welche für die Ent­­wicklung von SAPUI5 Anwendungen benötigt werden. SAP Fiori ist hingegen eine User Experience Guide­line für sämt­­liche SAPUI5 App­­likationen. Das Ziel ist dabei durch die SAP Fiori Guide­­lines eine moderne, ein­­heitliche und benutzer­­freundliche Ober­­fläche zu schaffen, um so den Anwendern eine einfache und schnellere Bedienung ge­schäft­­­licher Prozesse zu e­r­möglichen.

SAPUI5-Framework

Innerhalb des SAPUI5-­­Frameworks gibt es diverse Werk­zeuge und Techniken um mit wenig Aufwand SAP Fiori App­­likationen entwickeln zu können.
  • SAPUI5 Controls
  • Data Binding
  • Routing
  • Test-Frameworks
SAPUI5 bietet eine Viel­­zahl an Controls. Beispiels­­weise folgende:
  • User Eingaben, z.B. für Inputs, Drop­down­elemente und Formulare
  • Visua­lisierungen, 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öglich­keit auf ver­schiedene Mo­delle ein Data Binding rea­­li­sieren zu können. Die ein­­fach­ste und am besten inte­grierteste Variante sind die oData Models. Diese können innerhalb diverser Controls (z.B. Tabelle) auf Agg­regations angewandt werden und so auto­matisch auf Basis des oData Services die ent­sprechenden Inhalte innerhalb der Tabelle anzeigen.
Mit den Konzepten des Routings und der Navi­gation innerhalb einer SAPUI5 App lassen sich Single­Page Anwendun­gen bauen, in denen eine Naviga­tion abge­bildet werden kann ohne die ge­samte Seite neu laden zu müssen. Hierbei können spezi­fische Routen-­Patterns, als auch Para­meter in die URL auf­genommen werden.
Für automatisiertes Testen von SAPUI5 App­likationen sind die beiden Test-­Frameworks QUnit und OPA5 di­rekt integriert. Mit QUnit lassen sich einfach Unit-­Tests schreiben, während OPA5 für Komponen­­ten-­Tests bestens geeignet ist.

User Experience mit SAP Fiori

Das SAP Fiori Launchpad

Der zentrale Einstiegs­punkt für SAP Anwendun­gen findet über das SAP Fiori Launch­pad statt. Hier re­präsentiert jede einzelne Kachel eine eigen­stän­dige Anwen­dung für einen spezifischen Use Case. Inner­halb des SAP Market­place stehen bereits zahl­­reiche App­likationen zur Ver­fügung, welche in das eigene SAP Fiori Launch­­pad integriert werden können.

User Expe­rience Guide­lines

Durch die SAP Fiori Design Guide­lines erhalten alle Applikationen ein ähnlicher Look & Feel und Anwender finden sich auch bei neuen An­wendungen schneller zurecht. Durch die einzelnen Design­prinzipien wird unter anderem fest­ge­legt, wie sich eine App­likation Mobil oder auf einem Desktop verhalten soll.

Design­prinzi­pien von SAP Fiori

Das Konzept von SAP Fiori orientiert sich an 5 festen Design­prinzipien: Ein­fach, Rollen­­basiert, An­sprechend, Respon­­sive und Ein­heit­lich. Dies bedeutet, dass jede App intuitiv auf jedem End­gerät bedien­bar ist und dabei einheitlich aussieht. Zusätz­lich führen auf einen spezi­fischen Use Case zu­geschnittene App­likationen mit einem ein­­heit­lichen Look & Feel dazu Auf­gaben schneller erledi­gen 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 beantwor­ten wir die wichtigen Fragen zu Beginn: Was ist die grund­sätz­liche Kunden­­an­for­derung? Gibt es bereits von SAP definierte Schnitt­­stel­len? Lässt sich der An­wen­dungs­­fall in eine be­stehende App­likation integrieren? Muss eine komplett neue App­likation implemen­tiert werden?

Schritt 2

Erstellung eines Prototyps

Auf Basis der Anforderung­s­analyse er­stel­len wir im Falle einer neuen App­­likation mit­tels SAP Build ein Prototyp. Dieser dient zur detail­lier­teren Anforderungs­­definition und zeigt im frühen Projekt­stadium auf, ob man sich auf dem rich­tigen Weg bewegt.

Schritt 3

Konzeption der Applikation

Der ab­gestimmte Proto­typ wird in ein Kon­zept überführt, poten­zielle Schnitt­stellen identi­­fiziert und durch Mini-­PoCs getestet sowie neue Schnitt­­stellen definiert und aus­formuliert.

Schritt 4

Implementierung der Applikation

Sofern die Konzep­tion die Anfor­derung des Kunden trifft wird die eigent­liche App­likation inkl. Ihrer Schnitt­stellen umgesetzt und an­schließend deployed.

Schritt 5

Testen und Feintuning

Nach erfolg­reicher Implemen­tierung wird die App­likation nun vom Kunden getestet und gegebenen­falls fein­justiert. Ist diese Phase ab­geschlossen kann die neue App­likation live gehen.

Unsere erfolgreichen SAPUI5 Entwicklungen

Lernen Sie eine kleine Auswahl unserer erfolg­reichen SAPUI5 App­likations­­ent­wick­lungen bei unseren Kunden kennen.
  • Kunden­leistungen
  • SDI Jobsteu­erung
  • Freiga­bedash­board
  • Generi­sches Upload­tool
Entwick­lungen von Fiori-­Apps basieren oft­mals auf indi­vi­duellen An­for­de­rungen. Wir unter­­stützen Sie sowohl bei der Ein­richtung der Stan­dard Fiori Apps, als auch bei indi­viduellen An­for­derungen bezogen auf spezi­fischen Busi­ness Need. Beispiels­weise, wenn es sich um Er­weiterun­gen innerhalb der bestehenden SAP Environ­ment mit gleichen Look & Feel oder um kleine Projekte in der vor­handenen SAP Sys­tem­landschaft handelt. In folgenden Ab­schnitten stellen wir Ihnen eine kleine Auswahl an indi­viduellen Kunden­leistungen.

Ziel des Projektes war es, alle Repli­ka­tions­j­obs je Remote Source an­zuzeigen. Dabei sollten die Funktionen Starten/­Abbrechen von Re­pli­kations­­bela­dungen eingefügt werden. Im Vor­schaubild wird die Ansicht der SDI Ein­stellungen angezeigt.

© 2021. BIG.Cube GmbH. Alle Rechte vorbehalten

In einem weiteren Projekt war das Ziel der Er­stellung eines Freigabe­dashboards ent­spre­chend der Kunden­bedürfnisse. Im Fokus stand der Upload der Inhalte eines Freigabe-­Sheets, in dem mehrere Teams zu einem be­stimmten Daten­­satz Frei­gaben tätigen mussten, in das Dashboard. Die Freigabe und die damit ver­bundene Job­ausführung erfolgt automatisch, wenn alle Teams frei­gegeben haben. Zudem wurde die Per­sonalisierung des Dashboard je Anwender implemen­tiert.

Kundenprojekt zeigt ein Dashboard, welches entsprechend der Kundenbedürfnisse erstellt wurde.

© 2021. BIG.Cube GmbH. Alle Rechte vorbehalten

 

In diesem Projekt bestand die An­forde­rung darin, den Up­load-­Status jeder Datei in einer Über­sichts-­Tabelle anzuzeigen. Bei Auf­treten von Fehlern, beispiels­weise falsche Spalten­anzahl, falscher Datentyp oder zu viele Zeichen in einer Spalte, sollten diese ent­sprechend an­gezeigt werden. Zudem wurde die Parti­tio­nierung großer Dateien in kleine Pakete zum Up­load der Daten um­gesetzt.

© 2021. 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-­­­Work­shops die Kon­­zepte und die Heran­­gehens­­weisen zur Ent­­wicklung einer SAPUI5 App­­likation kennen. Bringen Sie einen kon­­kreten An­­wendungs­­­fall aus Ihrem Unter­­nehmen mit. Dieser wird am Ende des Ha­cka­thons von Ihnen eigen­­ständig im­plemen­tiert.

Entwicklung von Custom Controls

Sollte die große Aus­wahl an SAP­UI5 Con­trols einem Use Case nicht genü­gen, bie­ten wir an, wieder­­ver­­wend­­­bare Cus­tom Con­trols zu implemen­­tieren. Hier­bei ist es möglich be­­stehen­de Con­trols zu er­­weitern, als auch kom­plett neue Con­trols zu er­stellen.

Weitere Hilfe- & Beratungsleistungen

Wir bieten Leis­tun­gen wie die Beur­­tei­lung von Use Cases, Hilfe­­stellun­gen wie sich ein Use Case am bes­ten in einer SAP­UI5 App imple­men­tieren lässt und füh­ren Reviews von be­­stehen­den SAPUI5 App­­lika­tionen durch.

FAQ's zu SAPUI5 und SAP Fiori

Es hängt ganz von der Infra­struktur bei Ihnen im Unter­nehmen ab. Am ein­fachsten ist es in eine be­stehende SAP Cloud Infra­struktur eine App­likation entwickeln zu kön­nen. Hierbei bietet die SAP Busi­ness Techno­logy Platform alle Tools und Werk­zeuge an, um eine App­likation schnell deployen zu können.
Die Möglichkeiten hier sind nahezu un­be­grenzt. Es können von SAP bereit­ge­stellte Schnitt­stellen an­ge­bunden wer­den, sowie eigen gebaute Schnitt­stellen inner­halb von SAP Sys­temen. Zu­sätz­lich las­sen sich aller­dings auch third party Schnitt­stellen anbinden.
Um sich in das Thema SAP­UI5 und SAP Fiori ein­arbeiten zu können, benötigt es pri­mär ein grund­legendes Ver­ständnis der Pro­gram­mierung. Kennt­nisse in JavaScript, HTML und CSS erleich­tert den Einstieg.
Die schnellste und einfachste Möglich­keit eine neue SAP­UI5 App­likation zu ent­wickeln bietet die SAP Busi­ness Techno­logy Plat­form mit ihrem Busi­ness App­lication Studio, den vor­defi­nierten App-­Tem­plates und der di­rekten Möglich­keit von SAP bereit­ge­stellte Schnitt­stellen anzubinden.