Bei S/4HANA setzt SAP auf eine völlig neue Benutzererfahrung. Schon mehr als zehn Prozent der Benutzeroberfläche sind als Fiori-Apps realisiert, Tendenz stark steigend. Fiori-Apps sind kleine Webanwendungen, die in JavaScript, HTML5 und CSS3 geschrieben sind. Doch mit dem neuen Programmiermodell für SAP Fiori können Sie auch als ABAP-Programmierer vieles auf dem Backend erreichen, ohne sich allzu tief in die Frontend-Technologien einzuarbeiten.
In diesem Artikel beschreibe ich, aus welchen Bestandteilen das neue ABAP-Programmiermodell für SAP Fiori besteht. In späteren Artikeln zeige ich Ihnen die einzelnen Bestandteile dann etwas genauer.
Architektur von SAP-Fiori
Fiori-Apps sind kleine Webanwendungen, die von jedem beliebigen modernen Web-Browser dargestellt werden können. Der Browser ersetzt also das klassische SAP GUI für die Präsentationsschicht. Der zentrale Einstiegspunkt, über den der Benutzer auf seine Fiori-Apps zugreifen kann, ist das Fiori-Launchpad. Dies ist eine Webanwendung, die alle Fiori-Apps für den Benutzer in Form von Starterkacheln darstellt, die in Gruppen organisiert sind.
Der Code für die Fiori-Apps besteht im Wesentlichen aus JavaScript, den das Fiori-Launchpad per HTTP(S) vom Frontend-Server lädt. Der Frontend-Server ist ein NetWeaver Application Server ABAP mit einer beliebigen von SAP unterstützten Datenbank. Er übernimmt die Rolle eines Webservers, der den Code für die Fiori-Apps vorhält. Der JavaScript Code der Apps wird von dort geladen und im Browser des Endanwenders ausgeführt. Dort generiert er die graphische Benutzeroberfläche in Form von HTML-Code, der vom Browser dann dargestellt wird.
Um betriebswirtschaftliche Daten des Backend-Servers zu lesen, anzulegen oder zu ändern, schicken die Fiori-Apps Anfragen an den Frontend-Server, der diese Anfragen dann per RFC an das Backend weiterleitet. Die Fiori-Apps und der Frontend-Server kommunizieren mit dem OData-Protokoll, das ebenfalls auf HTTP(S) basiert. Der Frontend-Server übernimmt also auch eine zweite Rolle als OData-Gateway.
Auf dem Backend-Server findet dann die eigentliche Verarbeitung der Anfragen per ABAP auf dem ABAP-Server oder per SQL auf der HANA-Datenbank statt.
Das ABAP Programmiermodell für SAP Fiori
Um Daten für eine Fiori-App bereitzustellen, definieren Sie zunächst eine Core Data Services (CDS) View im ABAP Repository. Eine CDS-View definiert, aus welchen Datenbanktabellen die Daten stammen und versieht diese Daten mit zusätzlichen Informationen, den sogenannten Metadaten, für die unterschiedlichen Verwender der View. Auf dem ABAP-Server wird basierend auf diesen Zusatzinformationen Code generiert:
- Ein Business Object Processing Framework (BOPF) Objekt, das Daten in den Datenbanktabellen anlegen, ändern und löschen kann
- Eine OData-Service-Implementierung, die vom Frontend per RFC aufgerufen kann
Der RFC-Aufruf wird vom Gateway auf dem Backend entgegengenommen. Dieses Gateway ist in der Softwarekomponente GW_FND implementiert, das seit der Version 7.4 mit jedem NetWeaver Application Server ABAP ausgeliefert wird. Das Backend-Gateway leitet die Anfrage an die Service Adaption Definition Language (SADL) weiter, die für lesende Zugriffe die CDS-View und für ändernde Zugriffe das BOPF-Objekt nutzt.
Am Frontend-Server tragen Sie den OData-Service des Backend-Servers in den Service-Katalog ein. Dadurch wird im Internet Connection Framework (ICF) des Frontend-Servers eine URL angelegt, über die die Fiori-App den Service per HTTP(S) ansprechen kann.
Danach können Sie mit der WebIDE die Fiori-App anlegen. Dabei haben Sie die Wahl zwischen verschiedenen Vorlagen. Am einfachsten verwenden Sie die List-Report-Vorlage. Das Aussehen und Verhalten einer so erstellten Fiori-App kann sehr einfach über Metadaten in der CDS-View gesteuert werden. Somit müssen Sie keinen JavaScript-Code erstellen, sondern Sie können alles auf dem Backend-Server erledigen.
Zum Schluss übertragen Sie die Fiori-App auf den Frontendserver und konfigurieren das Fiori-Launchpad, damit die App gestartet werden kann.
Hier nochmals die vier Schritte im Überblick
- Erstellen Sie CDS-Views, die die Daten bereitstellen und versehen Sie die Views mit Annotationen für die Generierung von BOPF-Objekten und OData-Service-Implementierungen sowie für die Konfiguration einer Fiori List-Report-Anwendung.
- Registrieren Sie den generierten OData-Service im Servicekatalog des Frontend-Servers.
- Legen SIe die Fiori-App in der WebIDE an und verwenden dabei die List-Report-Vorlage.
- Übertragen Sie die Fiori-App aus der WebIDE auf den Frontend-Server und konfigurieren Sie das Fiori-Launchpad, um die App starten zu können.