Navigation Events

SAPUI5 Route Events

One of the common problems in SAPUI5 is all about routes. Today will look into 2 different route events of SAPUI5.

Before we start, we need to understand how navigation events happen in SAPUI5. Let’s take an example below:

Navigation events in SAPUI5 are handled by Router classes. Some known router classes are sap.ui.core.routing and sap.m.routing.

Router classes will find patterns maintained in the manifest.json and try to match those patterns into routes.

Routes now contain which exact files are to be rendered or displayed on the screen, these files are called targets.

The router will then pass the pattern and display information to the view for the creation and caching.

Events on Route

There are two commonly used events on route matching, these are attachRouteMatched and attachMatched.


This event is triggered for any pattern that matches the routing configuration from manifest.json.

You would ask,

why on earth I would listen to all route events? isn’t that’s too much?

As an example, this is good for creating analytics for your application. You can add an event handler and log the usage of pages of your app and send them to the back-end as a report.

// ... Excerpt from SAPUI5 SDK - Step 17: Listen to Matched Events of Any Route
return BaseController.extend('com.test.controller.App', {
  onInit: function() {
    this.getRouter().attachRouteMatched(function(oEvent) {
      var sRouteName = oEvent.getParameter('name')
      // do something, i.e. send usage statistics to back end
      // in order to improve our app and the user experience (Build-Measure-Learn cycle)
        'User accessed route ' +
          sRouteName +
          ', timestamp = ' +
          new Date().getTime()


Now, what if you want to listen to a specific route instead? For example, you only want to handle events for your home view, this is where attachedMatched is used.

// ... Excerpt from SAPUI5 SDK - Step 7: Navigate to Routes with Mandatory Parameters
onInit: function() {
    var oRouter = this.getRouter();
    oRouter.getRoute("employee").attachMatched(this._onRouteMatched, this);

_onRouteMatched : function (oEvent) {
    var oArgs, oView;
    oArgs = oEvent.getParameter("arguments");
    oView = this.getView();

oEvent from above will contain the route event parameters.

Router Event Parameter
Router Event Parameter

Event Parameters

You have the following details from the attachedMatched event:

Parameter Remarks Example
name Name of the route that matched Home
arguments Parameters of the URL hash “?query”: {“EndDate”: “2019-11-21”, “StartDate”: “2019-11-08”}
config Configuration of the route from manifest.json “config”: {“routerClass”: “sap.m.routing.Router”, “viewType”: “XML”, “async”: true }


In conclusion, it is very important to know when to use attachRouteMatched and attachMatched. Utilizing which route event handler will significantly improve your application as well.

Remember that attachRouteMatched will be triggered for any route pattern, which will cause overhead on route checking if not handled properly.

If you like this post, don’t forget to drop a comment, like or share. Also, there’s a subscription button you can use for more SAPUI5 tutorials.

Leave a Comment