Im Bereich der Benutzeroberflächen hat sich die SAP-Welt in den letzten Jahren durch den Einzug von SAP Fiori stark verändert. Neue Technologien, mobile Endgeräte, das Medium des Webbrowsers und Aspekte wie Webdesign und User Experience erfordern ein Umdenken und ein anderes Skill-Set - sowohl in der Konzeptphase als auch bei der Entwicklung. Wir sind diese Schritte von Anfang an mitgegangen und können daher auf eine langjährige Erfahrung im Webbereich bauen, durchaus auch abseits der SAP-Piste. 

Insbesondere die Umsetzung von Scanner-Transaktionen ist für uns als Logistikexperte eine häufige und wiederkehrende Aufgabe, die ihre ganz eigenen Herausforderungen mit sich bringt: begrenzte Bildschirmgröße, Bedienung mit Handschuhen (bspw. im Kühlhaus), Integration mit Scannern, die am Gabelstapler angebracht sind, usw. Wir meistern diese Herausforderungen mit maßgeschneiderten Lösungen und unter Einsatz der neuesten Technologien. Mit Ihnen zusammen finden wir die passende Lösung für Ihren Use Case!  

Die Designlinie: SAP Fiori

Fiori ist die Designlinie von SAP und daher prinzipiell vergleichbar mit den großen Designlinien von Apple (Flat Design) und Google (Material Design). Allerdings ist im SAP-Kontext die Ausgangslage eine ganz andere: Einerseits liegt der Fokus auf Konsistenz über alle Technologien und Endgeräte hinweg, was in der Vergangenheit ein großes Problem darstellte; andererseits ist die Designspezifikation sehr detailliert und recht strikt.  

Was Sie von Fiori Apps erwarten können, ist in den Fiori Design-Guidelines festgehalten: angefangen bei „General Patterns“ (vgl. Abb. 1) bis hin zu ganzen Seitenlayouts, die „Floorplans“ genannt werden. 

Abbildung 1: Beispiel aus den Guidelines, wie Buttons zu platzieren sind 

Wir haben die Design-Guidelines verinnerlicht und entwickeln daher nur Apps, die den Guidelines entsprechen. Darüber hinaus wissen wir aber auch, wann wir von den Guidelines abweichen können, um Ihnen die bestmögliche User Experience zu bieten. 

Das Konzept: Wireframing 

In der Konzeptionsphase wie auch bei der Anforderungsanalyse nutzen wir dedizierte Wireframing-Tools (Wireframe = Drahtgerüst), um mit Ihnen zusammen maßgeschneiderte Apps zu entwerfen. Der Fokus liegt hier nicht auf Pixelgenauigkeit, korrekter Farbdarstellung oder dgl., sondern vielmehr auf einem übersichtlichen und konsistenten Layout, der gewünschten Funktionalität und vernünftigen Workflows, die Ihren Mitarbeitenden die Arbeit erleichtern.  

Abbildung 2: Beispiel eines Wireframes 

Mit Hilfe von Wireframes erhalten Sie die Möglichkeit, bereits in der Konzeptionsphase Neuentwicklungen mit zukünftigen Benutzern zu verproben und können somit so früh wie möglich Feedback in die Programmieranforderung einfließen lassen. Darüber hinaus geht die Erstellung von Wireframes bereits mit einer logischen und technischen Prüfung einher, so dass sich kostenintensive Fehlentwicklungen und langwierige Iterationen vermeiden lassen. 

Die Entwicklung: Elements, UI5 und UI5 Web-Components mit React 

Die entstandenen Wireframes bilden den Ausgangspunkt für die Frontend-Entwicklung. Je nach Komplexitätsgrad und Kontext nutzen wir: 

• Fiori Elements 
• SAPUI5 
• SAPUI5-Web-Components in Kombination mit React 

Fiori Elements empfehlen und nutzen wir hauptsächlich in einfachen Fällen: wenn die UI eine Datenbanktabelle bzw. -view abbildet. In solchen Fällen hält Elements sein Versprechen von schnelleren Entwicklungszeiten. Allerdings stößt man – je nach Anforderung – relativ früh an die Grenzen des Frameworks, so dass vermeintlich einfache Anpassungen lange Entwicklungszeiten nach sich ziehen. 

Darüber hinaus haben wir tiefgreifende Erfahrungen mit Erweiterungen von Standard-SAP-Apps; sowohl auf Grundlage von Custom Fields and Logic als auch dem Adaptation Project. Lassen Sie sich von uns beraten, welche Apps sich mit welcher Technologie erweitern lassen. 

SAPUI5 steht für die klassische App-Entwicklung im SAP-Umfeld. Angefangen von einfachen Transaktionen über spezielle Erweiterungen für Elements-Apps bis hin zu Standalone-Apps, die auch ohne Launchpad genutzt werden können: UI5 ist ein stabiles und mächtiges Framework, mit dem sich die allermeisten Anforderungen sauber umsetzen lassen. 

Neben dem klassischen UI5 setzen wir auch auf die neueste SAP-Technologie, die sprechenderweise in Zukunft die Grundlage für UI5 bilden wird: UI5-Web-Components. Die UI5-Web-Components implementieren die Fiori-Design-Guidelines und somit dasselbe Look & Feel wie UI5, sind aber gleichzeitig in jede Technologie integrierbar. Wir setzen auf die Kombination mit React (einem hochmodernen Frontend-Framework von Facebook), um komponentenorientiert und mit hohem Flexibilitätsgrad auch komplexe oder sehr spezielle Applikationen zu realisieren. Vorteile gegenüber dem klassischen UI5: 

• Hochoptimiertes Design für Scanner-Transaktionen realisierbar 

• Nutzung vorhandener User Interfaces (die ganze Welt von npm.js steht hier offen: die größte Softwarebibliothek der Welt) 
• Ultra-performant dank Virtual DOM 

Auf Entwicklerseite sind die Vorteile noch größer: Der Fokus auf Komponenten, die damit einhergehende hohe Wiederverwendbarkeit einmal erstellter Komponenten, die Typsicherheit dank TypeScript sowie ein exzellentes Tooling (bspw. Storybook) steigern die Produktivität und helfen Fehler zu vermeiden. Somit lassen sich auch sehr spezielle, große oder höchst komplexe Applikationen realisieren, die verständlich und wartbar bleiben. 

Lassen Sie uns gemeinsam maßgeschneiderte Apps entwerfen, um Ihren Mitarbeitenden effiziente und mächtige Werkzeuge in die Hand zu legen. Profitieren Sie von unserem bewährten Vorgehen und unserer langjährigen Frontend-Erfahrung!