5

Is there anyway that I can get current route name? There is a getRoute function but I have to pass the route name by myself. If there is a way to get the name of all routes from router object in controllers also it can be helpful for me. For example something like:

this.getRouter().getRoutes()

There is a function getViews but I couldn't find a same one for routes.

matbtt
  • 4,230
  • 19
  • 26

3 Answers3

8

Not as simple as it seems, though it's still possible w/o any 3rd party solutions.

Let's assume that the routes (in manifest.json) are:

"routes": [
            {
                "pattern": "",
                "name": "Main",
                "view": "main",
                "targetAggregation": "pages"
            },
            {
                "pattern": "create",
                "name": "Create",
                "view": "myView",
                "targetAggregation": "pages"
            },
            {
                "pattern": "edit/{id}",
                "name": "Edit",
                "view": "myView",
                "targetAggregation": "pages"
            },
            {
                "pattern": "view/{id}",
                "name": "View",
                "view": "myView",
                "targetAggregation": "pages"
            }
        ]

So in this case you would like to get the current name: Create, Edit or View.

note 1: In my case there's one view/controller ("myView") for handling three different types of displays, but it doesn't matter - you can have separate views/controllers as well. (see note 2 for more details).

So here's what you have to do in order to retrieve those route names:

Step 1: Create a global model in you manifest.json

"models": {
        "applicationModel": {
            "type": "sap.ui.model.json.JSONModel",
            "settings": {},
        },
    }

Step 2:

In the given controller (myView), use the routers attachRouteMatched method in the built-in onInit method:

onInit: function(){
    var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
                oRouter.attachRouteMatched(this.routeMatched, this);
}

note 2: If you have a multi-page application, set the event handler in your root controller or component.js. These two are always loaded, no matter which subpage you are on.

Step 3:

In the same controller, mostly directly under the onInit method, create the callback method (in my case it's called routeMatched):

routeMatched: function(oEvent){
            var oParameters = oEvent.getParameters(),
            var sRouteName = oParameters.name; // Yay! Our route name!
            var oModel = this.getView().getModel("applicationModel");
            oModel.setProperty("/routeName", sRouteName);
}

Step 4

Now wherever you have access to your model, you simply call it's new property: routeName. 

this.getView().getModel("applicationModel").getProperty("/routeName");
Khaos
  • 164
  • 7
FreeFend
  • 162
  • 2
  • 8
6

As of UI5 version 1.75

Since UI5 v1.75, it has become easier to retrieve the current route.

getCurrentRoute: function(router = this.getOwnerComponent().getRouter()) {
  const currentHash = router.getHashChanger().getHash();
  const { name } = router.getRouteInfoByHash(currentHash); // API available since 1.75
  return router.getRoute(name);
},

API reference: sap.ui.core.routing.Router#getRouteInfoByHash

As of UI5 version 1.46.1

  1. In Component.js:

    return UIComponent.extend("...", {
  metadata: {
    manifest: "json",
    properties: {
      "currentRouteName": {} // default type == "string"
    }
  },

  init: function() {
    UIComponent.prototype.init.apply(this, arguments);
    this.getRouter() // beforeRouteMatched event available since 1.46.1
      .attachBeforeRouteMatched(this.onBeforeRouteMatched, this)
      .initialize();
  },

  onBeforeRouteMatched: function(event) {
    this.setCurrentRouteName(event.getParameter("name"));
  },

  getCurrentRoute: function() {
    return this.getRouter().getRoute(this.getCurrentRouteName());
  },

  // ...
});

  2. Anywhere in the controller (even in onInit):

    const currentRoute = this.getOwnerComponent().getCurrentRoute();
Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170
2

I've simply extended the default router: https://gist.github.com/ffleige/1f080e5c0769085569188302b2e12040

To use it, replace the default router class in your manifest.json

"routing": {
  "config": {
    "routerClass": "my.app.MyRouter",

Use the extend Router in your controllers like this

// get id of current route
var routeId = UIComponent.getRouterFor(this).getCurrentRouteId();
// get current route object 
var route = UIComponent.getRouterFor(this).getCurrentRoute();

This solution does not violent the access to private members and is tested with openui5 1.44.

Frank Fleige
  • 21
  • 3