CloudDNA Know How

SAP BTP

SAP BTP Security

SAP Integration Suite

SAP Build Apps

SAP Build Process Automation

Relevante Bücher

SAP Fiori Elements Buch

SAP Build Apps Buch

Git und SAP

SAPUI5 Einführung

SAPUI5 ist ein clientseitiges Javascript-Framework das 2011 veröffentlicht wurde. Das SAPUI5 Framework verwendet das MVC (Model-View-Controller) Designpattern um. Dabei kommte es zu einer strikten Trennung zwischen Darstellung der Daten (View), Businesslogik (Controller) und Bereitstellung der Daten (Model). Bei SAPUI5 Apps handelt es sich um sogenannte Single Page Applikationen (SPA) die sowohl in der OnPremise Welt als auch in der Cloud zum Einsatz kommen. Dabei spielt es keine Rolle von welchem Endgerät du die App startest. Der Formfaktor des Geräts wird durch das zugrundeliegende responsive Design optimal bedient.

Die 5 in SAPUI5 steht für HTML5. Das Framework basiert auf einem Mix aus HTML, JavaScript und CSS. Das bedeutet deine App läuft im Browser. Dabei werden alle modernen Browser auf Windows, MacOS, Linux, Android und iOS unterstützt. Weg vom SAP GUI hin zu modernen Benutzeroberflächen.

SAPUI5 steht zwar in Konkurrenz zu anderen Frameworks wie Angular.js, vue.js und React, hat aber den Vorteil dass SAP durch mittlerweile knapp 50 Jahre Erfahrung im Bereich der Enterprise Software die Anforderungen der Kunden besser kennt als jeder andere. Das spiegelt sich im Framework wider. Das SAPUI5 Framework zeichnet sich daher durch eine unglaubliche Vielfalt an UI-Controls aus die auf die Anforderungen von Unternehmensanwendungen optimiert sind. Für den Zugriff auf Datenquellen ist SAPUI5 für den Einsatz von OData optimiert, es kann jedoch auch mit klassischen REST-Service arbeiten.

Wir haben bereits viele Projekte ausserhalb des SAP Umfelds mit Angular.js und vue.js umgesetzt. Daher können wir die fundierte Aussage treffen, dass SAPUI5 im SAP Kontext definitiv die best und meist auch kostengünstigste Option darstellt.

Informationen zum SAPUI5 Framework findest du hier.

SAPUI5 Entwicklerwerkzeuge

Die SAPUI5 Entwicklung kann grundsätzlich in jedem Editor (IDE) erfolgen. Es bietet sich jedoch an, dass du die SAP WebIDE oder das SAP Business Application Studio für die Entwicklung verwendest. Es handelt sich dabei um Entwicklerwerkzeuge von SAP, die u.a. für die SAPUI5 Entwicklung optimiert sind und sich nahtlos in deine SAP Systemlandschaft integrieren lassen. So kannst du beispielsweise Single-Sign-On auf Basis von SAML verwenden. Grundsätzlich hast du auch die Möglichkeit lokal zu entwickeln. Dazu empfehlen wir den Einsatz von Visual Studio Code.

Was bedeutet SAPUI5 für klassische SAP Entwickler*innen

Klassische SAP Entwickler*innen werden mit SAPUI5 zu Beginn auf Kriegsfuß stehen, das Framework jedoch rasch lieben lernen. SAPUI5 hat keinerlei Bezug zur klassischen SAP Entwicklung – egal ob SAPGUI oder WebDnpro. Du wirst nicht darum herumkommen, dir JavaScript Kenntnisse anzueignen. Wie bereits beschrieben erfolgt die Entwicklung nicht in der ABAP Workbench (SE80), sondern in neuen Entwicklerwerkzeugen.

Du wirst dich auch mit GIT beschäftigen müssen. GIT ist der defacto-Standard für die Verwaltung des Sourcecodes und stellt die Grundlage für die verteilte Entwicklung in Teams dar. Wenn du alleine an einem Projekt entwickelst wirst du keine großartigen GIT-Skills benötigen, in der verteilten Entwicklung wirst du aber zwangsläufig mit Begriffen wie Branches, merge, stash usw. in Berührung kommen. Wir haben dazu einen mehrteilige Blogserie erstellt.

Für die Bereitstellung der Daten wirst du dir die Grundlagen der OData Entwicklung aneigenen müssen. Hier fühlt man sich als ABAP OO Entwickler zu Hause, da die Entwicklung im SAPGUI unter Verwendung von ABAP als Programmiersprache erfolgt.

Was musst du lernen / können:

• JavaScript / HTML / CSS
• OData
• GIT

SAP Fiori

Mit SAP Fiori ist es SAP gelungen, eine zeitgemäße User Experience zu schaffen. SAPUI5 ist die technische Grundlage die hinter Fiori steckt. Es stellt sozusagen das Fundament dar. Doch wie du es bestimmt vom Hausbau kennst kann das Bauwerk auf dem Fundament in Architektur und Aussehen sehr unterschiedlich ausfallen. Das hat auch SAP rasche erkannt. Diese Tatsache sorgt auch dafür, dass es viele Anwendungen unterschiedlich aussehen, anders zu bedienen sind und im schlechtesten Fall nicht intuitiv zu bedienen sind. SAP gibt dir mit SAP Fiori ein Werkzeug in die Hand das genau diese Problem in Angriff nimmt.

Bei SAP Fiori dreht sich alles um die SAP Fiori Design Guidelines. Darin ist festgelegt, dass du mit einer (auf SAPUI5 basierenden) SAP Fiori App folgende fünf Prinzipien einhalten solltest:

• Role-based: Deine Apps sollen auf die Rolle des Benutzer zugeschnitten sein. Die typischen SAP „Mega-Transaktionen“ die alles konnten und jeden User bedienten werden in viele kleine Apps geschnitten.
• Delightful: Sie sollen dir in der Rolle des Endbenutzer ermöglichen, deine Taätigkeiten einfacher und intelligenter / smarter durchzuführen.
• Coherent: Apps sollen immer uns ausschließlich dieselbe visuelle Designsprache verweden und im Verhalten konsistent sein. So solltest du beispielsweise Fehler immer auf dieselbe Art und Weise darstellen.
• Simple: Sie sollen einfach und intuitiv zu bedienen sein, ohne dass du dafür ein tagelanges Keyuser-Training benötigst.
• Adaptive: Deine Apps sollen sich an den Formfaktor des Endgeräts anpassen. Egal ob die Apps auf einem Smartphone, einem Tablet oder einem Laptop geöffnet wird, es sollen immer alle relevanten Informationen visuell ansprechend dargestellt werden.

Möchtest du mehr über SAP Fiori erfahren, besuche gerne unseren Blog: 

SAP Fiori Launchpad

Das SAP Fiori Launchpad ist der zentrale Einstiegspunkt für alle SAP Fiori Apps. Damit hat SAP den Weg für die rasche Implementierung und die extrem hohe Kundenakzeptanz gelegt. Stell dir vor, du hast 100 SAP Fiori Apps in Verwendung und du müstest die für jede App die zugehörige URL merken oder als Bookmark ablegen. Du würdest im totalen Chaos versinken und früher oder später bestimmt genervt aufgeben.

Mit SAP Fiori hast du eine URL über die alle Apps gestartet werden können. Auch wenn dein Unternehmen tausende Apps verwendet, siehst du beim Einstieg in das SAP Fiori Launchpad immer nur jene Apps die für deine Rolle relevant sind. Du hast aber trotzdem die Möglichkeit und Flexibilität das Launchpad anzupassen und Apps hinzuzufügen. Dazu wurden die Konzepte der SAP Fiori Launchpad Gruppen und der SAP Fiori Launchpad Kataloge eingeführt.

Deployment Optionen

Du kannst das SAP Fiori Launchpad sowohl in der OnPremise Landschaft als auch in der SAP Business Technology Platform (aka SAP Cloud Platform) bereitstellen. Die grundlegenden Konzepte der Apps, Kataloge, Gruppen und Rollen sind dabei ident. Mit dem SAP Fiori Launchpad genießt du damit die höchstmögliche Flexibilität. Zusätzlich kannst du das Launchpad auch über den SAP Fiori Client sicher auf mobilen Endgeräten bereitstellen.

Fiori Launchpad Gruppen

Mit dem SAP Fiori Launchpad hast du die Möglichkeit Apps dem Benutzer direkt auf der Startseite anzuzeigen. Das geschieht mit sogenannten Gruppen. In einer Gruppe werden ein oder mehrere Apps zusammengefasst, die inhaltlich zusammengehören. In einer Gruppe verweist du für die jeweiligen Apps immer auf einen Katalog. Eine App wird durch eine Kachel (Tile) dargestellt. Eine Gruppe kann Apps aus verschiedenen Katalogen enthalten. Gruppen werden dem Benutzer über eine Rolle zugewiesen. Dabei werden die Gruppen aller Rollen, die Benutzer zugeordnet sind, im Launchpad angezeigt. Zusätzlich kannst du steuern, ob der Entwickler die Gruppen für sich selbst anpassen darf.

Fiori Launchpad Kataloge

Mit dem SAP Fiori Launchpad hast du die Möglichkeit deine Apps zu gruppieren. Das geschieht mit Hilfe von Katalogen. In einem Katalog kannst du alle Apps die funktional oder logisch zusammengehören kapseln. Der Katalog wird dem Benutzer über eine Rolle zugewiesen. Der Katalog wird dem User im Launchpad zwar nicht unmittelbar angezeigt, der Benutzer kann jedoch über das Menü in den App Finder abspringen und dort auf seine Kataloge zugreifen. Daraus kann er direkt die enthaltenen Apps starten oder sie einer Gruppe im Launchpad hinzufügen.

Launchpad Services

Das SAP Fiori Launchpad stellt dir grundlegende Services bereit die dir in der Rolle des Entwicklers das Leben massiv vereinfachen. Diese Services sind aber auch für den Endbenutzer sehr hilfreich. Dazu zählen u.a. der Cross-Application-Navigation Service, der dir eine App-2-App Navigation also den Absprung von einer App in eine andere ermöglicht. Der Personalization Service ermöglicht dem Endbenutzer das Launchpad und die einzelnen Apps zu personalisieren. Der Notification Service ermöglicht es dir, Benachrichtigungen an den Endbennutzer zu senden – ähnlich den Push Notifications in mobilen Apps. Es gibt eine Vielzahl weiterer Services. Eine Übersicht findest du hier.

Was ist der Unterschied zwischen SAP Fiori und SAPUI5?

SAPUI5 und SAP Fiori werden häufig verwechselt. Der Unterschied ist einfach zu erklären. SAPUI5 ist das zugrundeliegende Framework dass verwendet wird um Apps zu entwickeln. SAP Fiori gibt dir ein Werkzeug und Best Practices in die Hand die dir zeigen wie du Apps entwickeln solltest um die fünf vorgestellten Prinzipen einzuhalten. In der realen Welt würde man sagen SAPUI5 ist das Baumaterial und Werkzeug und SAP Fiori ist die zugehörige Bauanleitung.

Was sind SAP Fiori Smart Controls ?

Mit den Smart Controls hat SAP eine Möglichkeit geschaffen, Formulare, Tabellen und Grafiken über OData Annotations zu steuern. Eine Annotation ist eine Zusatzinformation die im Metadatendokument des OData Service mitgeliefert wird, die jedoch keinen Einfluss auf die Verarbeitungslogik im OData Service hat. SAP setzt in SAPUI5 seit der Version 1.38 auf diese Annotations. Einer der wesentlichen Vorteile der Verwendung von Annotations ist weniger Logik im Controller der SAPUI5 Applikation. 

SAP Fiori Elements

Bei der Entwicklung von SAPUI5 bzw. SAP Fiori Apps muss man grundsätzlich fundierte JavaScript Kenntnisse mitbrigen. Es hat sich im Lauf der Zeit herausgestellt, dass viele Apps ähnlichen Mustern folgen für die entsprechenden Templates sinnvoll wären. Genau an dieser Stelle setzt SAP mit den SAP Fiori Elements an. SAP Fiori Elements basieren auf den sogenannten Smart-Controlls. Dabei wird das Verhalten der App nicht im Controller ausprogrammiert, sondern erfolgt über Annotations. Diese Annotations können sowohl vom Server kommen als auch direkt in der App als lokale Annotations bereitgestellt werden. Falls die Annotations vom Server kommen, werden diese über den OData Service ausgeliefert. D.h. dass Änderungen an der App (Sortierreihenfolge, Filter,…) direkt im Backend durchgeführt werden können.

Mit Fiori Elements hat SAP es geschafft, die Erstellung von Apps vollkommen frei von JavaScript Entwicklung zu gestalten. Entwickler können somit ohne jegliche JavaScript Skills Apps erstellen und das Verhalten der Apps aus dem OData Service heraus anpassen.

Hier gehts zum BLOG: SAP FIORI ELEMENTS

Unsere SAPUI5/Fiori SAP Standard Trainings

Wir sind unglaublich stolz darauf, dass die von uns entwickelten SAPUI5 von SAP als offizielle SAP Standard Trainings geführt werden. Das schaffen nicht viele SAP Partner! Für uns ist es ein einzigartier Beweiß, der uns zeigt, dass SAP unsere Arbeit und Herangehensweise sehr schätzt und weiß dass wir die besten Trainings in diesem Umfeld abliefern.

Unser Ziel ist es, praxisorientierte Trainings zu liefern die zu 90% Hands-On sind. Unsere Mitarbeiter und Trainer sind SAP zertifiziert und gehören im deutschsprachigen Raum zu den Besten auf diesem Gebiet.

Kurstitel: Hands-on Foundation zur Entwicklung von SAPUI5 Applikationen (HOUI5)

Sprache: Deutsch

Trainingsform: Online live Classroom oder Präsenzschulung.

Nächster Termin: 13 März 2023 – 17 März 2023

Dauer: 5 Tage

Ziel:Verstehen der Prinzipien von SAPUI5, erklärt an einem durchgängigen Beispiel aus der Praxis Implementieren von SAPUI5 Applikationen Verstehen der Konzepte und Umsetzung von komplexen SAPUI5 Applikationen (90% Hands-on) Effizientes und zielgerichtetes Arbeiten mit der offiziellen SAPUI5 Dokumentation. Möchten sie mehr über das SAP Training erfahren schauen sie auf die offizelle HOUI5 Seite gern vorbei