Add new route to extension app in SAP UI5

This small tutorial shows you how to add a new route with a new target to an extension app in SAP UI5. It is done with eclipse, not WebIDE, so there might be some technical and hierarchical differences.

So let’s assume we extend our SAP UI5 application as described in SAPUI5 SDK – Demo Kit and we have our new view (NewView.view.xml) and controller (NewView.controller.js) ready.

For our extension app we have the Component.js with the following code:

jQuery.sap.declare("yz.ext.Component");
sap.ui.component.load({
  name: "yz",
  url: jQuery.sap.getModulePath("yz.ext") + "/../templateApp"
});
yz.Component.extend("yz.ext.Component", {
  metadata: {
     customizing: {
       "sap.ui.viewExtensions": { /* ... */ },
       "sap.ui.controllerExtensions": { /* ... */ }
     }
  }
});

Now we would assume that adding routes and targets in the metadata (on the same level than customizing) will do the trick, because this is done in the original app in manifest.json:

routing: {
   routes: [
     {
          "pattern": "newRoute",
          "name": "newRoute",
          "target": "newTarget"
      }
    ],
    targets: {
        "newTarget": {
                 "viewName": "NewView",
                 "viewPath": "yz.ext.view"
         },
     }
  }

From experience, it won’t, because it overwrites all routes and targets from the original application.

So we have to do it programmatically in our extension app.

First, we add the target. Therefore we need the Targets instance (of type sap.m.routing.Targets) where we have the addTarget() method:

this.getRouter().getTargets().addTarget("newTarget",{viewName:"NewView",viewPath:"yz.ext.view"});

But this is not enough. In my test case, the UI5 runtime could not find the control in which the views and targets should be placed. So we need to specify the rootView attribute to the view in the original application. And we don’t want to write things like “__xmlview0” (as these IDs are genereated dynamically) but we rather want to write it dynamically:

this.getRouter().getTargets().addTarget("newTarget",{viewName:"NewView",viewPath:"yz.ext.view",rootView:this.getAggregation("rootControl").getId()});

The this context is the Component, where you add your routes and targets. Let’s see in a few moments where exactly we put our code.

The second thing we have to do is adding the Route. We can do this directly on the router object:

this.getRouter().addRoute({name:"newRoute",pattern:"newRoute",target:"newTarget"});

Now the question: Where do we put these two lines of code? As already mentioned, we put it in the component file. So in addition to the metadata object (for our view replacements and so on) defined in Component.js of the extension app, we overwrite the init() method of the original component. Among other things like calling the init() method of the factory class UIComponent we can add our routes. The important thing is: Add the routes and targets before initializing the router! Otherwise people won’t get to your new route, when they bookmark it (e.g. APPLICATION/index.html#/newRoute).

yz.Component.extend("yz.ext.Component", {
  metadata: { /* ... */ },
init: function() {
     sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
     this.getRouter().getTargets().addTarget("newTarget",{viewName:"NewView",viewPath:"yz.ext.view",rootView:this.getAggregation("rootControl").getId()});
     this.getRouter().addRoute({name:"newRoute",pattern:"newRoute",target:"newTarget"});
     this.getRouter.initialize();
     /* all other method calls from original init() method*/
}
});

Of course, don’t forget to copy all other method calls from the orginal init() method of the Component into your new init() method of the Component.js of the extension app.

For me, this was the only way to get a new route to my extension app. If there are better ways, I’d be happy to hear from you!