Fiori für ABAP - Page Map und Flexible Column Layout
Für was können wir die Page Map in den Fiori Tools verwenden und wie aktivieren wir in unserer App das Flexible Column Layout? Dieser Frage gehen wir in diesem Artikel nach.
Inhaltsverzeichnis
In diesem Artikel passen wir unser App weiter an und schauen uns dazu die Page Map als weiteres Tool im Business Application Studio an.
Einleitung
Im letzten Artikel dieser Serie haben wir unsere Sales App sowie die Erweiterung der Autoload-Funktion behandelt. Dabei haben wir uns das Guided Development in SAP Fiori genauer angesehen. In diesem Artikel werden wir nun das Flexible Column Layout aktivieren und uns dazu zunächst die Page Map im Detail anschauen, ein weiteres essenzielles Fiori-Tool.
Page Map
Genau wie das Guided Development kannst du die Page Map über den "webapp" Ordner in der Anwendung starten. Klicke dazu einfach per Rechtsklick auf den Ordner und wähle den Eintrag "Show Page Map" aus, um ein eigenes Fenster zu öffnen.
Die Page Map visualisiert dabei die eigentliche App, die verschiedenen Seiten und die Navigation zwischen ihnen. Dabei kannst du weiterhin Dinge anpassen, wie zum Beispiel eine neue Seite hinzufügen oder Einzelheiten bearbeiten, wie die Elemente, die auf diesen Seiten verfügbar sind. Auf der linken Seite findest du die beiden aktuellen Seiten, den List Report und die Object Page, die wir verwenden. Auf der rechten Seite findest du verschiedene Eigenschaften unserer App, die wir anpassen können. Klickst du auf die Page Map, erhältst du weitere Optionen, je nachdem, welches Element du angeklickt hast. Im oberen Teil findest du weitere Funktionen, wie die Settings oder die Möglichkeit, Annotations aufzuräumen. Ebenfalls kannst du die Suche verwenden, um die möglichen Optionen und Elemente einzuschränken.
Klicken wir dazu einmal in der Page Map im List Report auf den Stift, um diese Seite weiter editieren zu können. Dabei navigieren wir weiter auf die nächste Ebene.
Hier findest du den groben Aufbau des eigentlichen List Reports. Dieser klassifiziert sich in verschiedene Bestandteile, wie zum Beispiel den Header, in dem weitere Aktionen verfügbar sind, die entsprechende Filter Bar und die eigentliche Tabelle, in der die Daten angezeigt werden. Hier haben wir einmal die Table Toolbar geöffnet und sehen dort auch eine Create Group und darunter die beiden Factory Actions, die wir in der Vergangenheit angelegt haben.
Grundsätzlich hast du hier die Möglichkeit, weitere Anpassungen vorzunehmen und zum Beispiel neue Buttons hinzuzufügen, um diese mit bestehenden oder neuen Actions zu verbinden. Wie wir jedoch bereits in der Einleitung zum Thema Fiori beschrieben haben, solltest du den Großteil der Annotationen und Actions, die ohnehin aus dem RAP-Framework kommen, auch direkt in der RAP-App, also im Backend, anpassen. Daher empfehlen wir, hier nur Einstellungen vorzunehmen, die nicht direkt über RAP bzw. die Annotationen möglich sind.
Flexible Column Layout
Navigieren wir nun in der Page Map wieder zurück auf unser Einstiegslevel. Dort finden wir die entsprechenden Einstellungen zu unserer Anwendung. Wenn du ein Stück nach unten scrollst, findest du die Optionen Flexible Column Layout und Flex Enabled. Mit der zweiten Option kannst du bestimmen, ob die Key User Adaptation für deine Anwendung aktiviert ist, was im Standardfall so ist, oder ob du sie deaktivierst, sodass die Key-User keine persönlichen Anpassungen an deiner Anwendung vornehmen können. Im oberen Teil findest du neben der Überschrift verschiedene Keywords, die die Einstellungen beschreiben, sowie einen Link zur offiziellen Dokumentation dieses Features. In der Dokumentation kannst du im Detail nachlesen, was es mit den einzelnen Optionen auf sich hat, welche Einstellungen es gibt und welche Anpassungen du darüber hinaus vornehmen kannst.
Aktivieren wir nun die Option für das Flexible Column Layout, können wir das Zweispalten-Layout und das Dreispalten-Layout entsprechend anpassen. Hier definieren wir, welches Element wie groß dargestellt wird, sobald die Seite initial geladen wird. Lassen wir hier erst einmal die Standardeinstellungen für "Begin-Expanded" und "Mid-Expanded" stehen.
Test
Starten wir nun die Preview unserer Anwendung und schauen uns das Laufzeitverhalten an. Dazu laden wir die Einträge im List Report und lassen uns alle Datensätze anzeigen. Wenn wir dann auf einen einzelnen Eintrag klicken, greift das Flexible Column Layout und lädt die Object Page direkt auf der Seite unserer Anwendung. Aktuell erhalten wir einen kleineren Teil für die Object Page, da wir die Einstellungen so vorgenommen haben, dass vor allem die Liste im größeren Bereich dargestellt wird (Begin-Expanded). Um die Object Page größer darzustellen, müssten wir die Einstellungen für das Two-Column Layout entsprechend anpassen, dann wäre die Object Page im Fokus und der List Report würde schmaler dargestellt.
Haben wir zum Beispiel nicht genügend Platz auf dem Screen zur Verfügung, sodass das Column Layout nicht sinnvoll laden kann oder zu wenig Platz für die Darstellung der Elemente vorhanden ist, wird das Flexible Column Layout automatisch deaktiviert und wir landen direkt auf der Object Page. In diesem Fall erhalten wir das Verhalten, das wir vor der Aktivierung hatten. Initial sehen wir den List Report, und sobald wir auf eine Zeile klicken, navigieren wir direkt auf die Object Page im Vollbildmodus. Dieses Verhalten ist also dynamisch abhängig von der Breite und der Größe des auf dem Bildschirm vorhandenen Platzes.
Fazit
Die Page Map bietet verschiedene Features an, mit denen wir unsere Anwendung in optischer Hinsicht anpassen können, ohne viel Aufwand in die Entwicklung stecken zu müssen. Auch für ABAP Entwickler ist das ein sehr praktisches Feature, da wir uns hier weniger mit manuellem Code beschäftigen müssen, sondern einfache Einstellungen direkt selbst vornehmen können.
