Fiori für ABAP - Navigation
In RAP haben wir unterschiedliche Entitäten mit Navigationen und Object Pages definiert, doch in unserer Fiori Elements sind diese nicht vorhanden? Schauen wir uns das Verhalten und die Lösung an.
Inhaltsverzeichnis
In diesem Artikel schauen wir uns die Generierung von Navigationen und Objektseiten einmal im Detail an und was es mit dem Generierungsprozess auf sich hat.
Einleitung
Unsere Sales App besteht aus verschiedenen Bestandteilen und Entitäten. Auf der Object Page haben wir drei zusätzliche Entitäten eingebunden: die Informationen, die Verkäufer und die verkauften Positionen. All diese Informationen sind als eigenständige Entitäten modelliert und verfügen im Standard über eine eigene Object Page. Wenn wir uns die Objekte in unserer RAP-Applikation im Preview anschauen, stellen wir fest, dass im hinteren Bereich der Tabellenzeilen eine Navigation angezeigt wird. Diese Navigation deutet darauf hin, dass wir direkt auf die jeweilige Object Page der untergeordneten Entitäten navigieren können.
Schauen wir uns im Gegenzug die generierte Anwendung in Fiori Elements an. Im Preview aus dem Business Application Studio sehen wir, dass an der Tabelle das Navigationsattribut fehlt. Im Grunde können wir diesen Datensatz daher nicht anklicken und keine Navigation auf die Object Page ausführen.
Hintergrund
Im Preview-Modus unseres Services, der RAP-Applikation, können wir alle Navigationen automatisch verwenden und müssen hier nichts weiter nachmodellieren. Dies dient vor allem Testzwecken und ist sehr komfortabel. Es bringt jedoch auch Nachteile mit sich, wenn wir beispielsweise eine Navigation ausschalten wollen, ist und bleibt diese im Preview standardmäßig aktiv. Wechseln wir anschließend in das Business Application Studio, um unsere eigentliche Hauptanwendung zu generieren, definieren wir dort den UI-Status. Bei der Ausführung des Fiori Elements Generators wählen wir im Schritt der Hauptentität die eigentliche List Report View aus. Standardmäßig wird dabei automatisch die Object Page generiert.
In diesem Schritt hatten wir zudem die Möglichkeit, eine Navigationsentität zu definieren. Das bedeutet, es wird eine Navigation zu einer entsprechenden Object Page aufgebaut. Wir hatten dieses Feld bei der initialen Generierung leer gelassen, um zunächst andere Dinge testen zu können. Grundsätzlich lässt sich an dieser Stelle eine Navigationsentität definieren. Da wir jedoch drei zusätzliche Entitäten in unserer Anwendung haben, müssten wir theoretisch ohnehin manuell nacharbeiten.
Navigation
In diesem Kapitel schauen wir uns den Aufbau der Navigation an. Wir gehen die verschiedenen Schritte durch, die notwendig sind, um die Navigation zu aktivieren und die Object Page einzubinden.
Page Map
Für die Erweiterung unserer Anwendung möchten wir eine neue Object Page hinzufügen und nutzen hierfür das Tool Page Map innerhalb der SAP Fiori Tools. Allerdings besteht aktuell die Herausforderung, dass der Button zum Hinzufügen von neuen Entitäten und Seiten deaktiviert ist.
Damit wir den Button wieder aktivieren können, müssen wir zuerst in der Metadata Extension ZBS_C_SASALE die UI-Annotation für den Create-Button anpassen. Ursprünglich wollten wir die standardmäßige Create-Action im OData-Service unterbinden, um ausschließlich unsere eigenen Factory Actions zu verwenden. Es hat sich jedoch herausgestellt, dass eine aktive Create-Berechtigung auf Ebene der Metadaten eine Voraussetzung für die Verwendung der Page Map ist, um neue Seiten und Entitäten hinzufügen zu können.
//@UI.createHidden: true
@UI.lineItem: [{criticality: 'DataCriticality'}]
annotate view ZBS_C_SASALE with
Sobald wir diese Anpassungen abgeschlossen haben, müssen wir im nächsten Schritt die Metadaten des Services in unserem Projekt aktualisieren. Dazu klickst du mit der rechten Maustaste auf die manifest.json und wählst den "Service Manager" aus.
Dieser öffnet den Manager zur Verwaltung der vorhandenen Services. Über das Stift-Icon editierst du den entsprechenden Service und wählst anschließend den Button "Refresh & Save" aus. Dieser Vorgang lädt den Service sowie die Metadaten neu, aktualisiert die lokalen Annotationen und speichert den Eintrag im Projekt. Damit sollten neue Änderungen für Git sichtbar werden.
Startest du die Page Map neu sollte nun der Button für das Hinzufügen wieder aktiv sein.
Neue Seite
Klicke nun auf das Hinzufügen (Plus-Button) der Object Page. Es erscheint ein entsprechendes Popup, das uns zum Hinzufügen einer neuen Seite führt. Dort wählen wir das Template Object Page aus, da wir eine neue Detailseite anlegen wollen. Als Datenquelle wählen wir die Assoziation _SASold aus, um die entsprechende Beziehung herzustellen. Danach kannst du über den Add-Button die Aktion abschließen.
Nach der Generierung wird die neue Object Page unterhalb der bestehenden Object Page in der Hierarchie angezeigt. Zudem wird eine entsprechende Navigation zwischen den beiden Seiten erstellt, die die Beziehung widerspiegelt.
manifest.json
Im letzten Artikel hatten wir uns die Datei "manifest.json" einmal im Detail angeschaut und die Wichtigkeit der einzelnen Bestandteile geprüft. Die nun durchgeführte Aktion über die Page Map hat hier wesentliche Änderungen hervorgerufen. Dabei wurden verschiedene Bestandteile der Manifest-Datei angepasst bzw. neue Bestandteile generiert:
- Neue "Routes" - Es wurde eine neue Route für die übergeordnete Object Page mit den entsprechenden Targets angelegt. Damit ist die strukturelle Erreichbarkeit der neuen Seite innerhalb der App-Navigation sichergestellt.
- Anpassung der Navigation - Für die Object Page der Verkäufe wurde eine neue Navigation definiert und zwar zu unserer neuen Object Page für die verkauften Materialien.
- Neues "Target" - Es wurde ein neues Target für die Object Page mit einer eindeutigen ID, einer passenden Beschreibung sowie den erforderlichen Navigationsattributen für die korrekte Darstellung generiert.
Hinweis: Eine manuelle Anpassung der Datei ist ebenfalls möglich. Du musst nicht zwingend über die Page Map gehen, sondern kannst die Änderungen auch händisch vornehmen. Dies ist jedoch mit deutlich mehr Aufwand verbunden, da du genau wissen musst, an welcher Stelle im Routing und in den Targets du welche Änderung einfügen musst.
Test
Nach Abschluss der Anpassung können wir unsere Anwendung aufrufen. Dazu starten wir die Anwendung in der Preview und wählen einen Datensatz aus, um auf die Object Page zu gelangen. Hier sehen wir nun die entsprechenden Materialien, wobei die Navigation zur zweiten Object Page bereits aktiv ist. Klicken wir auf ein Material, wird die Object Page als dritte Spalte geladen. Das liegt vor allem daran, dass wir aktuell mit einem Flexible Column Layout arbeiten. Würden wir stattdessen eine separate Navigation nutzen, würden wir nun im Vollbild auf die zweite Seite navigieren.
Staging
Nachdem wir die Änderungen vorgenommen haben, findest du im Source Control Tab eine Übersicht der modifizierten Dateien. Mit einem Klick kannst du dorthin navigieren und siehst alle Dateien, die sich durch unsere Anpassungen verändert haben. Hier kannst du im Detail prüfen, welche Änderungen vorgenommen wurden oder bei Bedarf bestimmte Dateien direkt auf den Originalzustand zurücksetzen (Discard Changes). In unserem Fall müssen wir alle Änderungen in unser GitHub Repository committen, damit der aktuellste Stand wieder verfügbar ist, das ist besonders wichtig, wenn andere Kollegen ebenfalls damit arbeiten möchten. Dazu gibst du eine Commit-Message ein und drückst den Commit-Button, um den lokalen Commit durchzuführen.
Durch diesen lokalen Commit sind jedoch noch keine Änderungen in unserem GitHub Repository angekommen. Dazu müssen wir den blauen Button "Sync Changes" drücken, damit die Änderungen an das zentrale Git-Repository übertragen werden. Je nach Authentifizierungsmethode musst du dich eventuell noch einmal gegenüber GitHub authentifizieren, um zu bestätigen, dass du über die entsprechenden Entwicklerberechtigungen verfügst. Nach Abschluss des Push-Vorgangs sind die Änderungen im Repository vorhanden und für alle Teammitglieder sichtbar.
Vollständiges Beispiel
Die gespeicherten Ressourcen zu unserer Anwendung findest du in unserem GitHub Repository. Damit kannst du in Zukunft alle Anpassungen an der Fiori App mit nachvollziehen oder die Ressourcen für ein Deployment nutzen. Die aktuellen Änderungen findest du in diesem Commit wieder.
Fazit
Bei einer hohen Anzahl von Entitäten werden nicht immer alle Navigationen und Object Pages direkt bei der Initialisierung und Generierung des Projekts angelegt. Daher ist es wichtig, über die Page Map nachträglich die zusätzlichen Object Pages und Navigationen anzulegen. Ansonsten wirst du nach dem Deployment feststellen, dass nur ein Teil der Navigation funktioniert, obwohl in der lokalen RAP Preview scheinbar alles korrekt war.
