Problem with Routing from one view to the other in SAPUI5

Question

I have been trying to route from View1 to View2. My code is the same as what is given in the SAPUI5 SDK, with some minor changes according to my project. I tried multiple solutions given on the internet but none of them worked.

View1.controller.js

onNav: function (oEvent) {
    var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
    oRouter.navTo("View2");         
    //return this.getOwnerComponent().getRouter().navTo("View2");           
},

manifest.json

"routes": [
  {
    "pattern": "",
    "name": "View1",
    "target": "View1"
  },
  {
    "pattern": "View2",
    "name": "View2",
    "target": "View2"
  }
],
"targets": {
  "View1": {
    "viewId": "View1",
    "viewName": "View1"
  },
  "View2": {
    "viewId": "View2",
    "viewName":"View2"
  }
}

The error shown is:

sap.ui.core.UIComponent.getRouterFor is not a function

fabiopagoti fabiopagoti · Accepted Answer · 2019-06-03T12:39:32

Double check if you have the following:

1) Router class declared in the routing configuration of the manifest.json file:

"routing": {
    "config": {
        "routerClass": "sap.m.routing.Router",
    },
    "routes": [
    ]

2) Router was initialize. This is almost always done inside Component.js:

init: function () {

    // call the base component's init function
    UIComponent.prototype.init.apply(this, arguments);

    // enable routing
    this.getRouter().initialize();
},

3) Check if this inside your onNav method is your controller.

For that, you can add a breakpoint inside it, open the browser console use the following call:

this.getMetadata()

Problem with Routing from one view to the other in SAPUI5

2 Answers