2013 hat SAP zum ersten Mal das neue JavaScript Framework SAPUI5 für die Entwicklung moderner, webbasierter Oberflächen vorgestellt. Was es mit SAPUI5 und mit der SAP Design-Guideline Fiori auf sich hat, erkläre ich in diesem Artikel.
SAP ist ein deutscher Softwarehersteller mit Sitz in Walldorf und beschäftigt weltweit rund 82.000 Mitarbeiter. Das Unternehmen ist der größte europäische Hersteller von Unternehmenssoftware – es erwirtschaftet mit seinen Produkten einen Umsatz von ca. 23 Mrd. €. Mit über 335.000 Kunden weltweit hat SAP einen Marktanteil von ca. 30 %, in Deutschland sind es sogar ca. 60 %.
Das bekannteste Produkt der SAP ist das SAP-ERP (Enterprise Resource Planning), ein Standardsoftwarepaket für die Steuerung von Unternehmensprozessen, z.B. in den Bereichen Finanzbuchhaltung, Controlling, Materialwirtschaft, Produktion etc.
Lange Zeit waren die SAP-GUI (Graphical User Interface) und gegebenenfalls WebDynpro die Standardoberflächen für SAP-Applikationen. Sowohl die Benutzerfreundlichkeit, als auch die Anpassungsfähigkeit auf die jeweiligen Benutzer waren jedoch nur bedingt gegeben.
Das änderte sich mit der Einführung von SAPUI5 und Fiori – mit dem modernen und flexiblen Framework UI5 hat SAP eine neues Frontend für ihre Anwendungen geschaffen.
Was ist SAPUI5?
SAPUI5 bezeichnet das neueste User Interface Development Toolkit der SAP.
Das Framework basiert auf JavaScript, CSS und HTML5 und soll den Anwendern die Nutzung der Software deutlich erleichtern. Die Bedienbarkeit wird bei Beachtung der Fiori Usability Guidelines intuitiver und die Anwendungen können sehr genau auf einen Prozess oder Teilprozess zugeschnitten werden. Des Weiteren ist das UI5-Framework responsive und daher sowohl für Mobile-, als auch für Desktop-Anwendungen geeignet. Die Apps passen sich automatisch an die zur Verfügung stehende Bildschirmgröße an und ändern die Anordnung und Funktionsweise von Bedienelementen, wie z.B. Touch-Eingaben.
Die Basis des SAPUI5 Frameworks bildet jQuery. Außerdem kommen Webstandards wie HTML5, JavaScript und CSS3 zum Einsatz. Das SAPUI5-Toolset beinhaltet über 250 vordefinierte grafische Bedienelemente zum Erstellen neuer Oberflächen für verschiedenste Prozessschritte in SAP. Gegenüber anderen Frameworks wie Angular oder React kann man somit sehr schnell Standard-Applikationen implementieren – es ist aber auch möglich eigene Elemente zu definieren.
Für Webentwickler ist SAPUI5 aufgrund der verwendeten Technologien leicht zu erlernen. Es bietet darüber hinaus umfassende Möglichkeiten, vordefinierte Steuerungselemente und Themes mit einem Theme-Designer anzupassen.
UI5 basiert außerdem auf dem MVC-Modell (Model View Controller), das die Datenlogik vom Design trennt und Änderungen am UI vereinfacht.
Neben SAPUI5 wurde auch OpenUI5 im Jahr 2013 veröffentlicht. Hierbei handelt es sich um ein Open-Source-Projekt der SAP, das über GitHub kostenlos bereitgestellt wird.
Im Gegensatz zu SAPUI5 ist OpenUI5 nicht lizenzpflichtig, es bietet allerdings auch nicht den vollen Umfang der Bibliotheken von SAPUI5 und keinen SAP-Support.
Was ist Fiori?
Eine häufig gestellte Frage betrifft die Unterscheidung von SAPUI5 und Fiori.
Während SAPUI5 das Entwicklungsframework für Webanwendungen umfasst, definiert Fiori das Design, die Verwendung der UI5-Elemente und eigene Technologien, wie z.B. das Fiori-Launchpad.
Fiori, als SAPs Design-Guideline für die Entwicklung von Anwendungen mit UI5, steht allen Entwicklern frei zur Verfügung.
Von der SAP bereitgestellte Apps werden auch als Fiori-Apps bezeichnet – die Applikationen wurden also mit UI5 als Technologie und Fiori als Design-Prinzip entwickelt.
SAP hat darüber hinaus mit SAP Fiori for iOS und SAP Fiori for Android eigene Guidelines für die Entwicklung von mobilen Applikationen mit UI5 veröffentlicht.
Mit Fiori wird ein grundsätzliches Design, mit Schwerpunkt auf die Usability der Applikationen definiert. Es umfasst neben grafischen Optionen und Anordnungen auch Definitionen zum Einsatz und Verhalten der jeweiligen Elemente.
Ziel ist es, die Applikationen intuitiv bedienbar und gleichartig zu definieren. Eine Einarbeitung der User in das Frontend wird damit deutlich verkürzt.
SAP gibt mit Fiori fünf wesentliche Merkmale für die Entwicklung vor:
- Role based / Rollenbasiert: Die Applikationen sollen auf eine bestimmte Anwendergruppe bzw. Rolle eines Benutzers zugeschnitten sein.
- Delightful / Ansprechend: Anwender sollen gerne und intuitiv mit der App arbeiten.
- Coherent / Kohärent: Die Anwendung soll eine einheitliche Bedienung und Designsprache, sowie eine gute Usability vorweisen.
- Adaptive / Flexibel: Die App soll gleichermaßen nutzbar mit unterschiedlichen Endgeräten und Bildschirmgrößen, z.B. Desktop, Tablet oder Smartphone, sein.
- Simple / Einfach: Die Anwendung soll auf das Wesentliche ausgerichtet sein.
Fiori Launchpad
Das Fiori Launchpad ist der zentrale Einstiegspunkt für die Verwendung von SAP UI5-Applikationen. User können sich über eine Login-Seite anmelden und kommen dann zu einer Übersichtsseite (Launchpad) der Apps. Diese sind als Kacheln auf dem Launchpad angeordnet und können bereits einige Informationen, z.B. KPIs, kleine Grafiken, etc. direkt darstellen.
Neben UI5-Apps kann das Launchpad z.B. auch Links, Newsfeeds und Absprünge zu anderen Systemen darstellen. Es ersetzt damit immer mehr das klassische Portal.
Fiori 1.0
SAP Fiori 1.0 wurde 2013 veröffentlicht. Seitens SAP wurden seither verschiedenste Apps unter der Design-Richtlinie Fiori 1.0 entwickelt und den SAP-Anwendern zur Verfügung gestellt.
Das Launchpad unter der Version 1.0 ist nicht viel mehr als ein Container für die Applikationen. Die Farbgebung ist mit einem SAP-Standard-Theme „Blue Crystal“ umgesetzt worden und kann mit dem Theme Designer verändert werden.
Die Anwendung ist bereits responsive entwickelt und läuft somit auf verschiedenen Geräten wie Desktop, Tablet und Smartphone gleichermaßen.
Fiori 2.0
Im Zuge einer Weiterentwicklung der Design-Guidelines wurde 2015 SAP Fiori 2.0 veröffentlicht. Die Version 2.0 ist eine neue Design- und Anwendungsgeneration und nicht kompatibel zu Fiori 1.0. Als Design Theme hat SAP die neue Farbgebung „Belize“ eingeführt, welches sich deutlich harmonischer darstellt als „Blue Crystal“.
Das Launchpad ist mit Fiori 2.0 eine dreigeteilte Anwendung (bezeichnet als „Viewport“), die eine weitaus größere Interaktion mit dem User zulässt.
Der eigentliche Arbeitsbereich ist mittig dargestellt und beinhaltet die einzelnen Applikationen.
Auf der rechten Seite kann eine Notification Area eingerichtet werden, in der Meldungen und To Dos (z.B. Chats oder Workflow-Genehmigungen) eingeblendet werden können.
Die linke Seite ist ein individualisierbarer Bereich, der als "Me Area" bezeichnet wird. Hier können persönliche Einstellungen vorgenommen und z.B. zuletzt genutzte Apps eingesehen werden.
Auch die Anpassungsmöglichkeiten mit dem Theme Designer sind wesentlich umfassender geworden. Dadurch lässt sich das Launchpad mit Fiori 2.0 deutlich schneller an die eigene Corporate Identity anpassen.
Zusammenfassung
SAP bietet seinen Kunden mit dem SAPUI5-Framework und dem Fiori Design-Guidelines ein neues Benutzererlebnis und setzt es selbst als Standard-Oberfläche für neue Produkte, z.B. S/4 Hana, ein. Neben den von SAP selbst ausgelieferten Apps lassen sich mit UI5 und dem Fiori-Konzept einfach und schnell individuelle Anwendungen erstellen, die auf die jeweiligen Kundenprozesse zugeschnitten sind.
Entwickler haben mit UI5 ein sehr umfassendes Framework an der Hand, mit denen sie Webapplikationen erstellen können. Des Weiteren stellt die SAP eine Reihe von Entwicklungs- und Prototypingtools zu Verfügung, die gut funktionieren und ständig weiterentwickelt werden.
Übrigens: Wir suchen aktuell Unterstützung im SAP-Bereich!
Du hast Lust, uns zu unterstützen? Dann schau dich in unserem Karriere-Bereich um.
Kommentare