Routing in SAPUI5-Apps – So navigieren Sie zwischen Views
Wenn Sie eine Anwendung mit mehreren Views nutzen möchten und sich fragen, wie Sie von Ihrer Ausgangsview zur nächsten kommen, dann sind Sie hier richtig! In diesem Beitrag zeige ich Ihnen, wie das Routing in SAPUI5-Apps funktioniert, was es mit Targets und Routen auf sich hat und warum ein Router nicht nur für guten WLAN-Empfang wichtig ist.
Die Voraussetzungen
Bevor wir uns mit Routing selbst auseinander setzen können, müssen wir einige Voraussetzungen erfüllen. Zunächst brauchen Sie mindestens zwei Views, zwischen denen Sie navigieren wollen. Diese sollten Sie bereits in unserem View-Ordner angelegt haben. Anschließend müssen Sie zu diesen Views jeweils ein Target anlegen, zu denen Sie widerum Routen anlegen. Diese können Sie mittels eines Routers aufrufen.
Targets & Routen
Targets und Routen pflegen Sie in der manifest.json-Datei. Diese finden Sie im webapp-Ordner. Beim Öffnen der Datei können Sie in der WebIDE den Descriptor Editor nutzen. Dieser erleichtert Ihnen die Arbeit etwas, da er Ihnen eine grafische Oberfläche zum Pflegen der Routingeinstellungen bietet. Die für Sie wichtigen Einstellungen finden Sie im Reiter „Routing“.
Targets
In der unteren Hälfte der Anzeige finden Sie die Target Einstellungen. Hier sollte es für jede View mindestens ein Target geben. Der WebIDE Wizzard legt diese üblicherweise bereits automatisch an. Sollte das nicht der Fall sein, können Sie durch Klicken auf „Plus“ ein Target hinzufügen. Die für hier zentralen Felder sind:
- View Name = Der Name der View
- View Type = XML
- Transition = Hier können Sie eine Übergangsanimation auswählen
- Clear Control Aggregation = false
Und schon haben wir unser Target angelegt. Sie können etwas mit den Transition Animation herumspielen und den für Ihre App passenden Übergang wählen. Wichtig ist an dieser Stelle, dass die Bewegung für Anwender*Innen nachvollziehbar und intuitiv ist.
Routen
In der oberen Hälfte der Anzeige können Sie anschließend die Routen definieren. Hier klicken sie wieder den „Plus“-Button, um eine Route hinzuzufügen. Einer Route müssen wir folgende Attribute übergeben:
- Name = Name der Route, mit dem Sie sie später aufrufen.
- Pattern = Das Navigationspattern. Hier können Sie auch Parameter definieren, die Sie später beim Routing befüllen. Ein leeres Pattern ist nur einmal zulässig. Sie können hier einen beliebigen Festwert vergeben.
- Targets = Das Target zu dem Sie navigieren möchten. Für bestimmte Funktionen wie Master-Detail-Ansichten können hier auch mehrere Targets übergeben werden.
Haben Sie diese Attribute befüllt, können Sie die Route mit Hilfe des Routers aufrufen.
Das Routing
Das Routen zwischen zwei Views rufen Sie im Controller, beispielsweise in einer Buttonhandler-Funktion, auf. Dazu „holen“ Sie sich zunächst das Router-Objekt. Anschließend können Sie auf ihm die Funktion „navTo“ aufrufen. Hier geben Sie den Routen-Namen ein und schon sind Sie in der anderen View. Von hier aus können Sie wieder mittels einer Route und dem Router zurück navigieren oder Sie nutzen die History-Funktion des Browsers. Jede Route hat ihre eigene URL und ist ein eigener Seitenaufruf.
Das konkrete Coding, um den Router zu „holen“ und mit seiner Hilfe auf die Route „Test123“ zu navigieren, lautet:
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo(“Test123”);
SAP Fiori HCM - Quickstart
Innerhalb von nur 2 Wochen können Sie mit uns in die mobile Welt starten. Wir setzen in 5 Schritten Ihre erste HCM-App produktiv.
Fazit
Zwischen zwei SAPUI5-Views zu navigieren ist also gar nicht so schwierig – Man muss nur wissen, wie’s geht.
In einem weiteren Blogbeitrag zu diesem Thema möchte ich Ihnen noch erweiterte Routing-Funktionen zeigen. Beispielsweise können Parameter beim View-Wechsel übergeben werden. Es ist auch möglich, zwei Views gleichzeitig in Form einer Master Detail Ansicht anzuzeigen.
Haben Sie noch Fragen zum Routing in Fiori-Apps oder zu anderen Fiori-Themen, bei denen ich Ihnen helfen kann? Schreiben Sie mir gerne. Ich freue mich auf Ihre Fragen!
