019: Recycling-Heroes - Fiori Creation and Deployment (Contact)

Inhaltsverzeichnis

• Einleitung
• Dev Space
• Projekt anlegen
• Anpassung
• Struktur
• Deployment
• Zusammenfassung

Einleitung

In dieser Folge schauen wir uns das Business Application Studio einmal im Detail mit den Funktionen an, die wir dann zur weiteren Arbeit benötigen. Wir erzeugen uns unsere Fiori Elements Anwendung und werden mit dem Guided Development eine Anpassung vornehmen. Sind wir dann schließlich damit fertig, werden wir das Deployment auf das ABAP Environment durchführen.

 

Dev Space

Bevor wir mit der Arbeit im Business Application Studio beginnen können, müssen wir uns zuerst einen Dev Space anlegen oder einen bestehenden wiederverwenden. Für dieses Projekt werden wir mit einem neuen Dev Space beginnen, da du sehr wahrscheinlich auch noch keinen hast. Über "Create Dev Space" legen wir einen neuen an. Im nächsten Bild kannst du dann zwischen den verschiedenen Basis-Varianten und zusätzlichen Extensions wählen, die wir dann verwenden wollen. Für den Anfang reicht uns die "SAP Fiori" Standardausprägung für die Entwicklung. Dem Dev Space müssen wir noch einen Namen geben, in diesem Fall verwenden wir den Namen des Unternehmens.

Im Anschluss wir der Dev Space angelegt und direkt für uns gestartet, dass kein ein paar Minuten dauern. Ist der Space dann im Status "Running", können wir mit einem Klick auf den Namen unsere Entwicklungsumgebung starten. Nach Bestätigung der Terms räumen wir erst einmal alle Fenster auf, um dann mit der Arbeit zu starten.

 

Projekt anlegen

Nun wollen wir unsere Fiori Elements App generieren. Dazu wechseln wir über das Menü direkt in unser Projektverzeichnis. Über "File" findest du den Punkt "Open Folder", dort wählen wir den entsprechenden Pfad aus. Unter "home" und "user" findest du "projects", dorthin wechseln wir, da im Normalfall dort jede Fiori Application angelegt wird. Nun wird einmal die Webseite neugeladen und du findest auf der linken Seite im Menü den Explorer, wo der Ordner gewählt wurde.

Als Nächstes können wir den Generator starten. Dazu findest du wieder im Menü und unter "File" den Punkt "New Project from Template", was den Wizard im Business Application Studio startet. Dort wählen wir den "SAP Fiori generator", um mit dem Projekt zu starten. Als nächsten Schritt müssen wir ein entsprechendes Template wählen, hier stehen dir die aktuell gängigen Floorplans zur Verfügung. In den meisten Fällen wird die List Report Page zum Einsatz kommen, da sehr stark nach der ALV Ausgabe kommt.

Nun geht es um die Befüllung der wesentlichen Informationen. Dazu wählen wir unsere OData Service als Quelle. Dazu verbinden wir uns gegen ein System und wählen aus den Destinations das ABAP Environment aus. Als nächstes werden alle verfügbaren OData Services ermittelt, die wir dann aus der Liste auswählen können. Du kannst auch anfangen den Namen einzugeben, dann wird die Liste eingeschränkt. Nach der Auswahl wählen die Hauptentität, mit der unsere Anwendung starten soll, würde es hier weitere Compositions geben, dann könnten wir auch eine weitere Entität zur Navigation wählen. Unter Table Type findest du verschiedene Typen für den Einstieg.

• Die Responsive Table ist der Standard. Damit werden nur die Felder angezeigt, die von der Länge her auf den Bildschirm passen.
• Die Grid Table ist so ähnlich wie eine ALV, es werden alle Felder nebeneinander angezeigt und es entsteht ein Scrollbalken. Ist nicht unbedingt Mobile freundlich, aber damit werden alle Informationen geladen und in einer Liste angezeigt.
• Hast du eine Hierarchie als Einstieg, dann kannst du damit direkt eine Tree View erzeugen.
• Die Analytical Page startet direkt mit der Ansicht, um eine Auswertung zu erzeugen bzw. anzuzeigen.

 

Nun kommen wir zu den Projekt-Attributen, hier definieren wir den Namen des Projekts, dieser wird als Oberordner angelegt und steht im Explorer zur Verfügung. Den Application Titel findest du später im Launchpad oben in der Navigation, wenn die App offen ist. Als Namespace benötigst du meist eine eindeutige Kombination. In den meisten Fällen wird hier zum Beispiel die Domain des Unternehmens verwendet. Namespace und Module Name zusammen müssen später eindeutig sein. Optional können wir noch eine Beschreibung zur App angeben. Im unteren Teil können wir noch angeben, ob wir zum Beispiel das Projekt als TypeScript definieren wollen. Weiterhin wollen wir eine Deployment Configuration erzeugen und eine Launchpad Configuration.

In der Deployment Configuration definieren wir, welche Objekte später wohin deployt werden. Möchtest du nicht nur testen, dann benötigst du diese Konfiguration auf jeden Fall. In diesem Fall wollen wir direkt auf das ABAP System als BSP Applikation deployen. Das ABAP Repository ist 15-stellig und ist das BSP Artefakt, dass wir später im System finden werden. Die Deployment Beschreibung ist optional. Als nächstes geben wir das Zielpaket an und den Transport, wohin das Deployment durchgeführt wird. Wichtig ist hier die Angabe des Transports und nicht der Aufgabe.

Damit die Kachel dann auch im Launchpad angezeigt wird, benötigen wir noch eine Konfiguration. Titel und Untertitel werden später direkt auf der Kachel angezeigt, wenn wir diese ins Launchpad einbinden. Das Semantische Objekt und die Aktion zusammen müssen ebenfalls eindeutig sein und sind später die Navigation zur eigentlichen Anwendung. Als semantisches Objekt kannst du alles eingeben, bei der Aktion verwendet man meist die eigentliche Aktion, wie "manage" oder "display", also das, was die App eigentlich mit den Daten macht.

Mit Finish wird die Generierung der Anwendung gestartet, dabei werden die Artefakte und Strukturen angelegt und nötigen Module installiert. Ist die Generierung abgeschlossen, erhalten wir die Application Information, von wo aus wir direkt weitere Aktionen durchführen können.

 

Anpassung

Starten wir zuerst einmal die Anwendung als Preview. Dazu findest du im unteren Bereich "Common Tasks" den Punkt "Preview Application". Nach einem Klick musst du noch entscheiden, wie du die Anwendung starten möchtest. Beim ersten Punkt wird die Anwendung ohne Mock-Daten gestartet und wir verwenden die Daten aus dem ABAP Environment. Die Anwendung wird in einem neuen Tab im Browser gestartet. Sollte dies bei dir nicht der Fall sein, dann prüfe, ob Popups blockiert wurden im Browser. Hier musst du die Aktion für das Business Application Studio zulassen. Führen wir nun die Anwendung über "Go" aus, dann werden unsere Daten geladen.

Dies ist auch der erste Punkt, den wir ändern wollen. Der Anwender soll sofort die Daten sehen, wenn er die Anwendung öffnet. Dazu findest du wieder in den Common Tasks den Punkt "Open Guided Development". Es öffnet sich ein neuer Punkt, wo wir über die Suche nach "Auto Load" suchen. Im Bereich der List Report Page finden wir die Option für den Auto Load. Mit einem Klick auf den Punkt kommen wir in den Guide und starten diesen auch. Im unteren Teil wählen wir die Option für Auto Load und stellen von Auto auf Enabled, um den Auto Load immer zu aktivieren. Um die Änderung ins Projekt zu bringen, müssen wir noch den Button "Insert Snippet" wählen, dann wird die Einstellung in die Konfiguration übernommen. Das sehen wir, da die entsprechende Konfigurationsdatei geöffnet wurde.

Wir können den Wizard nun schließen und zu unserer Anwendung zurückkehren. Wenn wir nun die Anwendung noch einmal aktualisieren, dann sollten die Daten direkt geladen werden und eine manuelle Auswahl des Go Buttons ist nicht mehr notwendig.

 

Struktur

Schauen wir uns einmal die Struktur der Fiori Anwendung an. Dazu wechseln wir auf der linken Seite in den Explorer und öffnen unter Projekte unseren aktuellen Projektordner. Hier findest du die Grundstruktur des Projekts.

Im unteren Teil findest du die ui5-deploy.yaml, diese Datei enthält unsere Deployment Konfiguration, die wir zuvor im Wizard definiert haben. Möchtest du hier noch Einstellungen später anpassen, wir das Paket oder den Transport, weil dieser bereits freigegeben wurde, dann machst du das hier.

Im Ordner "webapp" findest du die nötigen Dateien für deine Anwendung. Die manifest.json ist die wichtigste Datei des Projekts, hier findest du Informationen zum verwendeten Service, zur Anwendung, zum Aufbau der Seiten und Navigation und auch die Launchpad Konfiguration.

Weiterhin finden wir noch weitere Ordner, die die Annotations, wo lokale Projektannotationen abgelegt werden. Normalerweise ist die Datei recht klein und die Annotationen werden aus dem Service gezogen. Dies hat den Vorteil, dass wir das Projekt nicht noch einmal deployen müssen, wenn sich Änderungen in den Bezeichnungen ergeben oder neue Felder hinzukommen.

Wenn du Rechtsklick auf den webapp Ordner machst, findest du viele weitere Funktionen des Projekts. Hier kannst du zum Beispiel direkt den Preview zur Applikation starten oder die Application Info aufrufen. Weitere Punkte sind das Guided Development oder der Data Editor. Über die Page Map sehen wir den Aufbau der aktuellen Anwendungen und könnten so zum Beispiel noch weitere Navigationen erstellen, wenn wir noch mehr Compositionen im Projekt haben. Hier kannst du auch weitere Einstellungen vornehmen, wir zum Beispiel auf das Flexible Column Layout umstellen.

 

Deployment

Gehen wir nun zurück zur Application Info, um die Anwendung nun zu deployen. Dort findest du ebenfalls die Aufgabe "Deploy", die wir nun im nächsten Schritt ausführen. Da wir bereits alle Informationen hinterlegt haben, startet direkt das Deployment auf das ABAP Environment. Wir müssen noch einmal das Deployment mit "Y" bestätigen, nachdem wir noch einmal eine kurze Zusammenfassung erhalten haben. Grundsätzlich kann das Deployment nun je nach Größe etwas dauern. Findest du die Meldung "Deployment Successful" am Ende, dann sind wir an dieser Stelle erst einmal fertig.

Wir können nun zu Eclipse wechseln und den Fiori Ordner einmal aktualisieren. Es wurden nun vier Objekte im System zur Verfügung gestellt.

• Die BSP Applikation ist die eigentliche Fiori Anwendung mit allen Dateien, die wir auch im Business Application Studio gesehen haben.
• Das Launchpad App Descriptor Item ist die Launchpad Konfiguration, die wir im Projekt eingestellt haben.
• Zusätzlichen finden wir noch die beiden SICF-Knoten, die aktiviert wurden. Damit können wir nun auch die App aufrufen und benötigen die beiden Endpunkte dafür.

 

Zusammenfassung

Wir haben uns heute einmal das Business Application Studio und den Erstellungsprozess einer Fiori Elements Anwendung angeschaut. Dabei haben wir noch eine Anpassung an der App durchgeführt und zum Abschluss die Anwendung aufs System gebracht. Beim nächsten Mal werden wir die Anwendung ins Launchpad einbinden und Pages und Spaces konfigurieren.

Bis dahin erst einmal danke fürs Zuschauen ... und bis zum nächsten Mal.

 

YouTube
Video