Show TOC

Method and Events for NavigationLocate this document in the navigation structure

SAPUI5 provides a method and events for navigation.

Method navTo

Use this method to navigate to the given route and fill the hash with the corresponding data. The listener callbacks of controllers listening to this route are provided with data. The method uses the following parameters:

  • name of the route parameter

  • route parameters

  • replace to define whether the hash should be replaced (no new browser history entry) or set (browser history entry)

sap.ui.require([
	"sap/ui/core/UIComponent", ...
], function(UIComponent, ...) {
	sap.ui.controller("MyApp.View2", {
		anyEvent: function() {
			sap.ui.core.UIComponent.getRouterFor(this).navTo("product", {
				id: "5",
				productId: "3"
			});
		}
	});
});

When changing the hash, all listeners to this hash are informed.

Events
Figure 1: Navigation events

Events attachRouteMatched and attachMatched

These events are fired when a hash matches a route or a pattern. The attachRouteMatched event is fired if a pattern of any route in the routing configuration is matched. The attachMatched event is fired for a specific route.

If you want to only react to specific routes, check if the name parameter matches the route that you want to listen to. The events have the following parameters:

  • name of the route that has been matched

  • arguments that are part of the route, mainly the parameters of the hash

  • config of the route

sap.ui.controller("MyApp.View1", {
    onInit: function() {
        var oRouter = sap.ui.core.routing.Router.getRouter("appRouter");
        oRouter.attachRouteMatched(function(oEvent) {
            if (oEvent.getParameter("name") !== "view1") {
                return:
            }
            this._selectItemWithId(oEvent.getParameter("arguments").id);
        }, this);
    },
    
    _selectItemWithId : function(id) {
        //implementation
    }
}

display event on target

This event is fired on the target instance when this target is added and displayed on the UI. The event has the following parameters:

  • view instance

  • control in which the target view is displayed

  • config of the view

  • data of the object passed when calling the display method

created event on view

This event is fired on the view instance which can be fetched by calling the getViews() method on a router instance every time a new view has been created by navigation. The event has the following parameters:

  • view instance

  • viewOptions containing additional options

Related Information