Benjamin Salmen
8. Juli 2021

Routing in SAPUI5-Apps – So navigieren Sie zwischen Views

SAPUI5

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.

SAP Fiori im HCM

E-Book: Fiori im HCM

Welche Services und Apps bietet SAP Fiori an? Wir stellen Ihnen die wichtigsten HCM Services und ihre Funktionen vor.

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”);

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!



Das könnte Sie auch interessieren

In diesem Beitrag zu unserer aktuellen Serie Best Practices und Entwicklungsansätze mit SAPUI5 möchte ich Ihnen das Konzept näher bringen, wie Sie eine auf JavaScript basierende App grundlegend aufbauen. Durch eine Aufteilung nach dem Konzept „Model View Controller“ erhalten Sie […]

weiterlesen

Sie wollen Ihre Fiori-Applikationen als native App auf ein Smartphone oder Tablet bringen? Dank der Mobile Services in der SAP Cloud Plattform geht das mit nur wenigen Klicks! Hier erfahren Sie Schritt für Schritt, wie Sie dafür vorgehen müssen.

weiterlesen

Sollten Sie bereits das ein oder andere SAPUI5-Projekt umgesetzt haben, ist Ihnen bestimmt schon aufgefallen, dass sich einige Abschnitte wiederholen. Das ist auch gut so, denn durch Kapselung dieser Elemente können Sie einiges an Entwicklungszeit sparen. Dazu nutzen Sie View-Fragmente. […]

weiterlesen

Mehr von unseren Partnern


Schreiben Sie einen Kommentar

Bitte füllen Sie alle mit * gekennzeichneten Felder aus. Ihre E-Mail Adresse wird nicht veröffentlicht.





Angebot anfordern
Preisliste herunterladen
Expert Session
Support