Fiori für ABAP - Guided Development und Autoload
Generieren wir erst einmal die RAP Anwendung und beginnen dann mit der Anpassung einzelner Bestandteile über das Guided Development in Fiori. Dabei aktivieren wir Auto Load und schauen uns die Vorschau der App an.
Inhaltsverzeichnis
In diesem Artikel beginnen wir mit der Generierung der Anwendung und passen die ersten Abschnitte per Guided Development an.
Einleitung
Unsere Sales App ist nun in einem Zustand, wo wir mit der Generierung der Anwendung über das Business Application Studio (BAS) starten können. Dort wollen wir vor dem Deployment noch einige Anpassungen durchführen, um die letzten fehlenden Funktionen hinzuzufügen.
Generierung
Im ersten Schritt müssen wir unsere Anwendung im Business Application Studio (BAS) generieren. Die eigentliche Generierung und die einzelnen Teilschritte zeigen wir hier nicht im Detail, stattdessen stellen wir dir zwei Ressourcen zur Verfügung. Zum einen einen älteren Artikel, der den Fiori-Generator beschreibt, und zum anderen ein neues YouTube Video, in dem wir die Generierung ebenfalls Schritt für Schritt durchgehen. Da sich der Generator und die Oberflächen in der aktuellen Version leicht unterscheiden können, solltest du in der Lage sein, bei bestimmten Schritten ein wenig zu abstrahieren.
Wir generieren die Anwendung auf Basis des List Report Templates als SAP Fiori Elements Anwendung. Dabei wählen wir den Service ZBS_UI_GLOBALSALE_O4 aus, den wir zuvor im ABAP Environment erstellt haben. Dieser Service enthält bereits alle Entitäten, die wir für unsere Anwendung später benötigen. Bei der Generierung wählen wir die Responsive Table und als Entität SASale, die Navigation lassen wir in diesem Fall leer.
Da wir die Anwendung später in einem System bereitstellen wollen, nehmen wir weitere Konfigurationen für das Deployment vor. Dort definieren wir den Transportauftrag sowie den Namen der BSP-Applikation, die später im Zielsystem angelegt werden soll. Da wir hier mit einem ABAP Environment arbeiten, geben wir eine entsprechende Konfiguration und einen eindeutigen technischen Namen an. Die SAP Fiori Launchpad Konfiguration lassen wir hingegen erst einmal leer, da wir diese zum jetzigen Zeitpunkt noch nicht benötigen.
Lassen wir nun die Anwendung generieren und die Struktur im System anlegen. Sind wir damit fertig, solltest du die folgende Struktur im Business Application Studio finden.
Guided Development
Mit einem Rechtsklick auf den "webapp" Ordner erhalten wir Zugriff auf verschiedene Optionen. Wir können zum einen die Preview starten, um uns die eigentliche Vorschau der Anwendung anzeigen zu lassen, oder wir wählen "Open Guided Development" aus, genau das, was wir jetzt tun wollen.
Beim Guided Development handelt es sich um eine Art Wizard, der uns dabei hilft, bestimmte Operationen an unserer Applikation durchzuführen. Wir können darüber beispielsweise den Initial Load aktivieren. Daher werden wir diese Aktion gleich mal aktivieren.
Aufbau
In der Oberfläche findest du im oberen Bereich verschiedene Einstellungen, wie zum Beispiel die Auswahl des eigentlichen Projekts, in diesem Fall ist unser Projekt bereits vorab ausgewählt. Daneben findest du eine Option, mit der du die verschiedenen Guides gruppieren kannst, sowie eine Auswahl nach Guide-Typen. Zusätzlich gibt es dort weitere Filterkriterien und ein Suchfeld, falls du nach bestimmten Guides oder Techniken suchst, die du verwenden möchtest. Im unteren Bereich werden dir alle verfügbaren Guides angezeigt, sofern kein Filter gesetzt ist. Diese sind in unserem Fall nach dem jeweiligen Seitentyp gruppiert, wie zum Beispiel dem List Report. Dort findest du verschiedene Optionen, was im List Report alles möglich ist und wie du deine Anwendung gezielt erweitern kannst.
Die verschiedenen Guides sind eigentlich immer recht ähnlich aufgebaut. Klickst du einen Guide an, erhältst du zunächst eine Übersichtsseite mit einer kurzen Beschreibung. Dort kannst du den Guide starten. Zusätzlich gibt es meistens verschiedene Schritte, die du innerhalb dieses Wizards durchläufst. Dort werden Informationen abgefragt, für die extra Felder vorgesehen sind und in denen du Eingaben tätigen musst. Grundsätzlich bietet ein Guide hilfreiche Beschreibungen, damit du genau weißt, was du in die Felder einträgst, wie du sie nutzt und welche Auswirkungen die Änderungen haben. In den meisten Fällen kannst du den Vorgang über "Exit Guide" beenden. Dabei werden jedoch keine Änderungen übernommen. Um die Konfigurationen wirklich anzuwenden, musst du in der Regel eine Schaltfläche wie zum Beispiel "Insert Code Snippet" klicken.
Auto Load
Beginnen wir mit der ersten Anpassung unserer Anwendung. Dazu suchen wir über das Suchfeld nach "auto load" und erhalten für die List Report Page eine erste Option. Über die Auswahl "Configure auto load for a table" können wir dann den Wizard starten. Dort erhalten wir erste Informationen darüber, was der Guide eigentlich genau macht, nämlich das automatische Laden der Daten auszulösen, sobald die App gestartet wird. Über den Button "Start Guide" beginnen wir nun mit dem ersten Schritt im Wizard.
Der eigentliche Guide ist relativ übersichtlich gehalten: Wir erhalten zunächst einen Einführungstext und eine Dokumentation darüber, was der Initial Load eigentlich bewirkt. Im unteren Teil finden wir das Feld "Mode". Dieses können wir auf verschiedene Konfigurationen einstellen, wie zum Beispiel Auto, Enabled oder Disabled. Wenn wir den Modus auf Auto stellen, werden Daten automatisch geladen, sobald ein Filter in der App gesetzt wird. Wollen wir allerdings, dass das automatische Laden immer sofort beim App-Start erfolgt, setzen wir den Modus auf Enabled. Anschließend können wir über den Button "Insert Snippet" die eigentliche Aktion durchführen und das Stück Quellcode automatisch in unsere Anwendung einfügen lassen.
Zum Abschluss öffnet sich die Konfigurationsdatei als JSON. Dort sehen wir hervorgehoben die vorgenommenen Änderungen. In diesem Fall wurde die Eigenschaft "initialLoad" für die Tabelle auf "Enabled" gesetzt. Starten wir nun unsere Anwendung, werden die Daten sofort geladen.
Vorschau
Im nächsten Schritt wollen wir uns die Vorschau unserer Anwendung anschauen. Dafür gibt es die Preview-Funktion innerhalb des SAP Business Application Studio. Wir wechseln dazu zurück in die Dateiansicht. Per Rechtsklick auf den "webapp" Ordner findest du die Option "Preview Application". Hier stehen nun einige Optionen zur Verfügung, wie wir die Anwendung starten können. Wir können die Anwendung ganz normal mit den Live-Daten aus dem RAP-Service starten oder wir nutzen Mock Data. Letztere werden aus einer lokalen Datei geladen, was sehr nützlich ist, wenn wir gerade keine Daten im Backend-Service haben oder einfach nur schnell das UI testen wollen. In diesem Fall wählen wir jedoch die erste Option und starten mit den echten Daten, die wir bereits im Backend gepflegt haben.
Die Anwendung startet nun direkt in einem neuen Tab und kann von uns ganz normal getestet werden. Dabei handelt es sich um eine Umgebung, die innerhalb einer Fiori Launchpad Simulation ausgeführt wird. Das bedeutet, wir sehen oben bereits das SAP-Logo und haben die klassische Back-Navigation, um zum Launchpad-Einstieg zurückzukehren. Dank unserer vorherigen Anpassung werden die Daten der Anwendung nun geladen, ohne dass wir manuell aktualisieren müssen, sodass wir direkt mit der Arbeit beginnen können.
Fazit
Im Guided Development findest du zahlreiche Guides, um schnelle Anpassungen an deiner Anwendung vorzunehmen. Dabei stehen dir im Wizard immer die entsprechenden Hintergrundinformationen zum jeweiligen Guide zur Verfügung sowie Eingabefelder, in die du die benötigten Daten eintragen kannst. Das Guided Development bietet dir einen schnellen Einstieg in Funktionen, die du zwar auch manuell im Code anpassen könntest, die aber über den Wizard gerade für den Anfang wesentlich einfacher umzusetzen sind. Vor allem bei Listen mit wenig Daten lohnt sich der Auto Load, da dadurch das nervige Klicken auf den GO Button entfällt.
