SAPUI5: Pattern-basiertes Routing und dynamische URL-Parameterverwaltung

Anleitung zur Definition sicherer Navigationsrouten in der manifest.json, zur Einrichtung eines auslösenden Event-Listeners für Seitenübergänge und zum Erfassen dynamischer URL-Parameter in der Controller-Schicht.

Wie in modernen Webanwendungen ist es auch in der SAPUI5/Fiori-Architektur wünschenswert, dass jeder Bildschirm ein eigenes, einzigartiges und teilbares URL-Schema besitzt, das den Browserverlauf (History) unterstützt. Dieser Prozess wird durch Routing-Konfigurationen in der Datei manifest.json und eine Event-Listener-Struktur auf Controller-Ebene gestaltet. In diesem Leitfaden behandeln wir den pattern-basierten Parameterübertragungsstandard, der bei Master-Detail-Ansichten oder der Datenübertragung zwischen Seiten verwendet wird.

💡 Architekturregeln für Routing & Navigation

Parameter-Isolierung: Anstatt das gesamte Objekt bei der Übertragung großer Datenpakete zwischen Seiten in die URL einzubetten, ist es eine bewährte Vorgehensweise (Best Practice) im Unternehmensumfeld, die eindeutige Schlüssel-ID (Key Object) des Objekts als URL-Parameter zu übergeben und die Daten auf der Zielseite erneut abzufragen oder an das entsprechende Modell zu binden (Binding).
Die Natur von attachPatternMatched: Die Methode attachPatternMatched, die zum Erfassen von Parametern auf der Zielseite verwendet wird, stellt eine Event-Listener-Struktur bereit, die **nur dann ausgelöst wird, wenn das URL-Muster der spezifischen Route exakt übereinstimmt**, und nicht für jede beliebige Route des Routers. Dadurch wird verhindert, dass andere Seitenübergänge in der Anwendung diesen Controller unnötig belasten.
OData-Versionssensitivität: Die Funktion createKey(), die eine string-basierte URL-Schlüsselmatrix zur Ausführung von Element-Binding-Szenarien auf der Zielseite generiert, ist eine spezifische Methode der **OData v2 Model** API. In Szenarien, die OData v4 verwenden, unterscheidet sich die Syntax für diese Schlüsselzuordnung.

💻 manifest.json-Konfiguration & Code-Referenz

0. Routing-Konfiguration (manifest.json)

Definitionen der Ziele (Targets) und Routen (Routes) für die Routing-Engine (Router) der Anwendung. Dynamische Parameter werden mit geschweiften Klammern {ParamName} angegeben.

{
  "sap.ui5": {
    "routing": {
      "config": {
        "routerClass": "sap.m.routing.Router",
        "viewType": "XML",
        "viewPath": "ui5.app.view",
        "controlId": "app",
        "controlAggregation": "pages",
        "async": true
      },
      "routes": [
        {
          "name": "RouteMain",
          "pattern": "",
          "target": ["TargetMain"]
        },
        {
          "name": "RouteDetail",
          "pattern": "Detail/{orderId}/{itemNo}",
          "target": ["TargetDetail"]
        }
      ],
      "targets": {
        "TargetMain": {
          "viewName": "Main",
          "viewLevel": 1
        },
        "TargetDetail": {
          "viewName": "Detail",
          "viewLevel": 2
        }
      }
    }
  }
}

1. Auslösende Seite - Navigation initiieren (Main.controller.js)

Wenn ein Benutzer auf eine Zeile oder eine Schaltfläche klickt, wird der Übergang zur Zielseite initiiert, indem das Router-Objekt mit dem definierten Routennamen (Name) und dem dynamischen Parameterobjekt aufgerufen wird.

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function (Controller) {
    "use strict";

    return Controller.extend("ui5.app.controller.Main", {

        onInit: function () {
            this.oRouter = this.getOwnerComponent().getRouter();
        },

        onNavigateToDetail: function (sSelectedOrderId, sItemNo) {
            // Trigger seamless navigation to 'RouteDetail' with payload parameters
            this.oRouter.navTo("RouteDetail", {
                orderId: sSelectedOrderId, // e.g., '10000234'
                itemNo: sItemNo           // e.g., '10'
            });
        }
    });
});

2. Zielseite - Parameter bei Routenübereinstimmung erfassen (Detail.controller.js)

Lesen der Parameter aus dem Event, das nur ausgelöst wird, wenn das relevante Routenmuster exakt mit der URL übereinstimmt, und Aufbau eines Element-Bindings auf dem OData v2 Model.

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function (Controller) {
    "use strict";

    return Controller.extend("ui5.app.controller.Detail", {

        onInit: function () {
            this.oRouter = this.getOwnerComponent().getRouter();
            
            // Attach pattern matched event listener - Fires ONLY when RouteDetail pattern matches the URL
            this.oRouter.getRoute("RouteDetail").attachPatternMatched(this._onDetailMatched, this);
        },

        _onDetailMatched: function (oEvent) {
            // Extract parameters dictionary from the event arguments context
            var oArgs = oEvent.getParameter("arguments");
            var sOrderId = oArgs.orderId;
            var sItemNo = oArgs.itemNo;

            console.log("Target Route Matched. Order ID: " + sOrderId + ", Item No: " + sItemNo);

            var oView = this.getView();
            var oODataModel = this.getOwnerComponent().getModel();
            
            // Best Practice: Generate entity path helper using specific OData V2 Model API
            var sElementPath = oODataModel.createKey("/OrderDetailSet", {
                OrderId: sOrderId,
                ItemNo: sItemNo
            });

            // Bind absolute backend data path directly to the view instance context
            oView.bindElement({
                path: sElementPath,
                events: {
                    change: function() { /* Handle absolute context adjustments */ },
                    dataRequested: function() { oView.setBusy(true); },
                    dataReceived: function() { oView.setBusy(false); }
                }
            });
        }
    });
});

Verpassen Sie nicht den neuen Code in der Bibliothek!

Abonnieren Sie den Newsletter, um sofort über wöchentlich aktualisierte unternehmenseigene SAPUI5/Fiori-Komponenten, Leistungstipps und Architekturentwürfe informiert zu werden.