SAP Fiori Stammdatenpflege

Wie man Applikationen baut, die SAP Fiori und SAP BI verbinden

Lasst uns über SAP Fiori sprechen: Wie nutzen wir es für unsere Kunden und was haben wir bisher damit getan?

SAP Fiori bietet uns bei Inspiricon großartige Möglichkeiten. Warum? Weil an unserem Standort in Cluj, Rumänien, die Kernkompetenzen SAP BI und Plattformentwicklung sind – zwei sehr unterschiedliche Bereiche und Technologien. Dank Fiori und SAP HANA haben wir es geschafft, eine Brücke zwischen diesen Geschäftsbereichen zu bauen. Unser Cross Technology Team ist für die Entwicklung der SAP Fiori Applikationen zuständig.

Wir haben bereits einige Projekte erfolgreich abgeschlossen. Und vor allem haben wir die Inspiricon Toolbox geschaffen. Das ist eine Sammlung von Applikationen, die auf der neuen, von SAP empfohlenen Architektur basieren (lest hier mehr über die Inspiricon Toolbox).

Mit der Toolbox möchten wir bestimmte Geschäftstätigkeiten von SAP abdecken, DSO Funktionalitäten ausbauen, Funktionen eines Input-bereiten Query aufrufen (basierend auf einem Planungs-Infocube) sowie den BEx Analyzer nachbilden. Basierend auf diesen Aussagen haben wir die Geschäftsziele definiert und bis dato drei Applikationen erstellt:

  1. Manage Users
  2. Time Tracker
  3. BEx Query Analyzer

Heute präsentieren wir die erste Applikation: Manage Users – Stammdatenpflege leicht gemacht

Diese Applikation ermöglicht CRUD Operationen auf einem Data Store Object (DSO) aus BW auszuführen. Das „Motto” der Applikation lautet: „Als User dieser Applikation möchte ich folgendes tun können

  • einen Überblick über alle User haben,
  • einen User anlegen, updaten, löschen
  • sowie die Userliste zu filtern und zu durchsuchen.“

Schritt für Schritt nähern wir uns einer neuen Applikation

Grundsätzlich mussten wir zuerst einen OData Service kreieren und diesen Service dann mit der SAP Fiori Applikation verbinden. Eine Fiori Applikation basiert auf den SAPUI5 Rahmenbedingungen und den SAP Fiori Design Richtlinien (lest mehr über SAP Fiori Applikationen in unserem Blog). Die Architektur baut auf dem MVC Modell auf. Wir nutzen die sap.m Bibliothek, da unsere Applikationen responsive sein sollen – über alle Devices hinweg: Desktop, Tablet und Smartphones.
Im nächsten Schritt haben wir die Funktionalitäten aufgesplittet und die Architektur erstellt.

Als erstes haben wir über die Anzahl der benötigten Views entschieden, welche Funktionalität zu welchem View gehören soll und welche Komponente zur Funktionalität passt. Was benötigen wir?:

  1. Einen Überblick über alle User; in Bezug auf SAPUI5 ist das eine Liste oder eine Tabelle,
  2. Einen neuen User anlegen, d.h. wir fügen einen neuen View hinzu oder fügen ein Popup dort ein, wo Userdaten eingegeben werden,
  3. Update eines Users, dies entspricht dem Szenario einen neuen User anzulegen.

Struktur und Komponenten erwachen zum Leben

Nachdem wir ein Set von Mock-Ups erstellt haben und unsere Alternativen verglichen haben, wurden die folgende Struktur und Komponenten implementiert:

  1. Überblick: eine Tabellenkomponente, sap.m.Table, ist verbunden mit dem Tabellendatenmodell das automatisch upgedatet wird, sobald eine Änderung im Modell gemacht wird, z. B. das Löschen oder Updaten eines Users (FIG.1 und FIG.2):
    FIG.1: Löschen und Updaten von Usern (Desktop)

    FIG.1: Löschen und Updaten von Usern (Desktop)

    FIG.2: Löschen und Updaten von Usern (Mobile)

    FIG.2: Löschen und Updaten von Usern (Mobile)

  2. Neuen User hinzufügen: für diese Funktionalität haben wir einen neuen View zu unserer App hinzugefügt. Dazu brauchten wir die Route-Komponente, sap.m.routing.Router, und mussten ein Route-Steuerungsprogramm implementieren. Die Hauptkomponente in diesem View ist das „Submit-Formular“, sap.ui.layout.form.SimpleForm (FIG.3 und FIG.4):
    FIG.3: Neuen User hinzufügen (Desktop)

    FIG.3: Neuen User hinzufügen (Desktop)

    FIG.4: Neuen User hinzufügen (Mobile)

    FIG.4: Neuen User hinzufügen (Mobile)

  3. Update User: dies ist ebenfalls ein neuer View, mit einem einfachen Formular (FIG.5, FIG.6 und FIG.7):
    FIG.5: Update User (Desktop)

    FIG.5: Update User (Desktop)

    FIG.6: Update User (Mobile)

    FIG.6: Update User (Mobile)

    FIG.7: Update User

    FIG.7: Update User

  4. Einen User löschen: um einen User zu löschen, benötigten wir nur ein Auswahlprogramm in der Tabelle, einen „Lösch“-Button sowie eine Komponente, die über den Erfolg / Misserfolg des Löschens informiert (sap.m MessageToast).
  5. Filter: wir nutzen sap.m.IconTabBar, das uns gleichzeitig das Filtern erlaubt wenn ein Icon angeklickt wird.
  6. Suche: dies ist eine Komponente, die bereits in der Tabelle vorhanden ist und die wir nur noch mit dem Tabellenmodell verbinden mussten.

Ein sehr wichtiger Aspekt des UI-Entwicklungsprozesses ist der Umgang mit Datenanbindung. Glücklicherweise bietet SAPUI5 eine fertige out-of-the-box Komponente wie „sap.ui.model.odata.ODataModel”, das nur die URL des OData Service benötigt und alle CRUD Abläufe sowie Such- und Filterfunktionen übernimmt.

So entstand die Inspiricon Toolbox und ihre erste Applikation: Manage Users.

Und nun, wie geht es weiter?

Wir ihr seht haben wir heute erst eine Applikation vorgestellt – dabei gibt es ja insgesamt drei in unserem Launchpad! Nächstes Mal geht es dann um den Time Tracker – Zeiterfassung im Betrieb. Also bleibt dran :).

Wir verbinden SAP BI-Anwendungen mit SAP Fiori: Die Inspiricon-Toolbox. Weitere Details findet ihr auch in unserem Flyer.

Ihr möchtet weitere Informationen zur Infrastruktur und der Landschaft von SAP Fiori Applikationen erfahren? Kontaktiere uns jetzt!

 

Autorin dieses Beitrags
Ana-Maria Pop Team Lead Cross Technology
Tel.: +49 (0) 7031 714 660 0
E-Mail: cluj@inspiricon.de