- Wir gestalten Software
- State Of The Art Lösungen für Ihr Business
Web Entwicklung
für die SAP BTP
mit ngx-fundamentals
des
Die SAP Business Technology Platform nimmt im gesamten SAP Universum eine immer exponiertere Stellung ein. Fast jedes Produkt aus der Produktfamilie des größten europäischen Softwareherstellers lässt sich mittels BTP (fast) beliebig erweitern und so die notwendige Kundenindividualität herstellen, ohne das Kernprodukt über Gebühr modifizieren zu müssen. Der Vorteil für die SAP liegt auf der Hand: Produktupdates und Wartung lassen sich bei stark standardisierten Produkten sehr viel einfacher gestalten als bei Applikationen, die tausende Zeilen kundenindividuellen Code enthalten.
Die BTP ist inzwischen eine sehr ausgereifte und umfangreiche Umgebung. SAP stellt immer mehr Möglichkeiten bereit, neben den hauseigenen, oftmals proprietären Werkzeugen, offene Standards und Open Source Technologien zu verwenden.
Wir haben uns in diesem Beitrag auf den Frontend-Teil einer BTP-App fokussiert, also die Möglichkeit, elegante Web-Anwendungen zu realisieren, mit Open Source Werkzeugen der SAP.
Möglichkeit 1: SAP Frontend = SAP UI5 (in der Regel mit Fiori)
SAPUI5 ist ein JavaScript-Framework und eine UI-Bibliothek, die Entwicklern hilft, plattformübergreifende, unternehmenstaugliche Webanwendungen effizient zu erstellen.
Vorteile:
- Enthält eine riesige Bibliothek an UI-Komponenten
- Nahtlose Integration mit SAP-Backends wie SAP Gateway, OData-Services, CDS-Views, etc
- Unterstützt zwei-Wege-Databinding
- Integriertes Theming im SAP Fiori Design
Nachteile:
- Hoher Ressourcenverbrauch
- Langsam
- Stark mit SAP-Technologien verbunden; außerhalb des SAP-Ökosystems nicht präsent
- Schlecht kombinierbar mit modernen Frontend-Frameworks wie Angular, React oder Vue
- SAPUI5-Entwicklung folgt einem konservativen Release-Zyklus und ist technologisch immer einen Schritt zurück
Möglichkeit 2: SAP UI5 Web Components
Einen ersten Schritt zur Unterstützung moderner Java Script Frameworks machten die SAP UI5 Web Components, einem Set von Kontrollelementen, die mit praktisch allen großen Web Frameworks zusammenarbeiten und so das SAP typische Look & Feel in eine beliebige Web Anwendung bringen.
Vorteile:
- Leichtgewichtig und schnell, basierend auf modernen Web Standards
- Framework-agnostisch (Angular, Vue, React)
- Open Source
Nachteile:
- Limitierte Features
- Fehlendes Ökosystem
- Keine Automatismen für das Datenhandling
Möglichkeit 3: SAP Fundamentals Library
Der neueste Abkömmling der SAP Welt sind die SAP Fundamentals.
„Die Fundamental Library entstand aus der Notwendigkeit, ein konsistentes Erscheinungsbild von SAP Fiori für alle Produkte und Anwendungen sicherzustellen, ohne diese von Grund auf neu erstellen zu müssen.“
https://sap.github.io/fundamental/#fl-libraries
Variante 1: Fundamental Library Styles
Fundamental Styles vereinfachen die Erstellung konsistenter SAP-Fiori-Apps in jeder webbasierten Technologie (Angular, Vue, React usw.).
Vorteile:
- Unterstützt moderne Frameworks wie React, Angular, Vue, aber auch reines HTML/CSS
- Bietet mehr Flexibilität als SAPUI5 bei der Wahl der Entwicklungsumgebung
- Besteht primär aus CSS/SCSS, HTML-Komponenten oder Wrappern – kein schweres JavaScript-Framework
- Schnellere Ladezeiten und bessere Performance für einfache bis mittlere Anwendungen
- Ermöglicht Fiori-konformes Design, ohne das komplette SAPUI5-Framework einsetzen zu müssen
- Ideal für Nicht-SAP-Webanwendungen, die Fiori-Styling benötigen
Nachteile:
- Kein vollständiges UI-Framework
- Muss mit zusätzlichem JavaScript-Framework (z. B. Angular, React) kombiniert werden
- Kein offizieller SAP-Support für Geschäftsanwendungen
- Wird von SAP gepflegt, aber nicht produktiv für komplexe Fiori-Apps empfohlen.
- Keine Garantie auf langfristige Wartung oder Kompatibilität mit SAP Backend-Systemen
- Keine native Unterstützung für OData, CDS-Annotations, Smart Controls oder Fiori Elements
- Entwickler müssen SAP-spezifische Logik selbst implementieren
- Mäßige Dokumentation und Community
Variante 2: Fundamental NGX-Bibliothek
Die Fundamental NGX-Bibliothek basiert auf dem Angular-Framework von Google verleiht ihren Komponenten ein modernes Aussehen. Sie bietet vorgefertigte und sofort einsatzbereite Komponenten, die den Programmieraufwand für den Entwickler drastisch reduzieren. Für den Angular Entwickler in Kürze: ngx-fundamentals ist die SAP Aternative zur Angular Material Design Bibliothek von Google. Nur eben in Fiori Style.
Vorteile:
- Direkt in Angular integriert: Bietet eine Reihe von UI-Komponenten, die perfekt in Angular-Projekten funktionieren
- SAP Fiori Design System: Verwendet die gleichen Designprinzipien wie SAP Fiori
- Modularer Aufbau: Entwickler können nur die benötigten Komponenten importieren, was die Anwendungsgröße reduziert und die Performance steigert
- Keine Abhängigkeit von SAPUI5: Im Gegensatz zu SAPUI5 muss nicht das gesamte Framework geladen werden
- Integration von Angular-Features wie Zwei-Wege-Datenbinding, Dependency Injection und Routing
Nachteile:
- Ausschließlich für Angular verfügbar
- Begrenzte Komponentenvielfalt
- Keine direkte SAP-Backend-Integration (z. B. OData, CDS, Fiori Elements)
- Kleine Community im Vergleich zu anderen gängigen Angular-Komponenten-Bibliotheken
- Weniger „out-of-the-box“-Funktionalitäten
Wissenswert:
SAP verwendet für seine neuesten CX Produkte ebenfalls die NGX-Bibliothek, d.h. auch die neuen CX Frontends (Sales Cloud V2, Service Cloud V2 etc.) verwenden im Frontend nunmehr Angular und nicht (mehr) SAP UI5 !
Aus diesem Grund haben wir mit den ngx fundamentals einmal in einem kleinen Demoprojekt aufgesetzt
Unsere Anwendung
Eine alte, native Anwendung soll in eine neue Web-Anwendung überführt und ergonomisch verbessert werden. Also viel die Wahl auf eine Angular Anwendung, die mittels ngx-fundamentals umgesetzt wurde.
Konkret geht es um eine Claim-Anwendung, in der unser Team seine Stunden erfasst. Das heißt, jeder Mitarbeiter muss seine Tätigkeiten pflegen und auf das jeweilige Projekt buchen, für das er tätig war.
Dies geschieht bisher in einer funktionierenden, aber nicht sehr ergonomischen Anwendung. Darüber musste für die Verwendung der App der native Client auf jedem Rechner installiert sein.
Das Ergebnis
Der untenstehende Kalender ist nun der neue Ort für die Tätigkeitserfassung.
Benefits:
- Drag-Drop aus der Projektliste auf den Tag vereinfacht das Claiming
- Monatsstatistik zeigt den aktuellen Stand
- Fehlstunden (Also Soll-Ist ist auf einen Blick ersichtlich). Kein Nachhaken mehr notwendig.
- Keine native Anwendungsinstallation mehr
- Verbesserte Performance
Umsetzung mittels ngx-fundamentals
Da wir sehr viele unserer Projekte mit Angular realisieren, lag die Verwendung der ngx-fundamentals nahe. Also schnell ein neues Projekt aufgesetzt, ngx-fundamentals nachinstalliert und los ging es. (Wir setzen hier den Umgang mit Angular voraus).
Setup
> ng new claim-btp
> cd claim-btp
> npm install @fundamental-ngx/core @angular/cdk
Bereits nach wenigen Tagen entstand so ein lauffähiges UI, welches nun auch im produktiven Einsatz ist. Das zugehörige Backend ist derzeit noch die Altanwendung, an um ein paar wenige Webservices erweitert wurde.
Den Möglichkeiten der Backendentwicklung auf der BTP widmen wir später noch einen eigenen Beitrag.
Wichtig: Vor der Installation der ngx fundamentals sollten die notwendigen Versionsabhängigkeiten von node und Angular geprüft werden. Ansonsten kann zu unschönen Seiteneffekten kommen.
Fazit
Während früher SAP Entwicklung immer gleich OpenUI5 / Fiori bedeutete, so ist man heute tatsächlich sehr frei in der der Entscheidung über die eingesetzte Technologie – egal ob Vue, React oder Angular oder eben doch OpenUI5. Alles erscheint im gleichen Look & Feel, alle Technologien sind nutzbar.
Sowohl mit den Web Components als auch mit den Fundamentals ist offensichtlich, dass SAP das eigene Fiori Design um jeden Preis im Kosmos behalten möchte. Rein technisch ist die Fundamentals Bibliothek ausgereift und gut dokumentiert. Probleme wie z.B. die Datumslokalisierung sind noch etwas holzig. Eine besser integrierte Lokalisierung wäre hier sehr zu wünschen.
Der Wermutstropfen ist die – noch – fehlende Unterstützung der Community. Fundamentals ist zwar Open Source, aber es findet sich relativ wenig zu diesem Thema in offenen Foren. So gestaltet sich die Unterstützung bei Problemen häufig schwierig. Die klassische Googlesuche läuft dann ins Leere.
