Skip to Content
Oct 26, 2018 at 12:00 PM

Is it possible to set the Routing in the Component.JS ?

169 Views Last edit Oct 26, 2018 at 12:05 PM 2 rev


I have been trying lately to achieve something similar with the following code snippet. I want to remove the routes and the targets from the manifest file because it is getting quite crowded.

Basically what I want is in the init function is to create a new object of type Router(), attach to that new object the routes, targets and configuration. And afterwards set the whole thing to the Component.

I get the feeling that the this.getRouter().intialize() reads the config from the manifest... and creates the Routing in the background and I want to handle those steps myself.

Have any of you tried this ?

Is it possible ?

Any help will be appreciated.

Much thanks in advance !

], function(UIComponent, JSONModel) {
    'use strict';
    return UIComponent.extend('ns.Sample.Component', {

        ROUTES: [{
            "pattern": "",
            "name": "test",
            "target": "test"

        TARGETS: {
            "test": {
                "controlId": "app",
                "controlAggregation": "content",
                "viewName": "Test",
                "viewPath": "ns.Sample.views.test"

        init: function() {
            UIComponent.prototype.init.apply(this, arguments);

        createContent: function() {
            return sap.ui.view({
                viewName: "ns.Sample.views.App",
                type: "XML"

        _registerRoutes: function() {
            var routerHandler = this.getRouter();
            for (var i in this.ROUTES) {

        _registerTargets: function() {
            var targetHandler = this.getRouter().getTargets();
            for (var name in this.TARGETS) {
                targetHandler.addTarget(name, this.TARGETS[name]);

At the moment I've got only the following solution to have a metadata property in the Component.js with the config and everything written there.

metadata: {
    "routing": {
        "config": {
            "routerClass": "sap.f.routing.Router",
            "viewType": "XML",
            "transition": "slide",
            "async": true,
            "bypass": {
                "target": "notFound"
        "routes": ROUTES,
        "targets": TARGETS