Skip to Content
0
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

Hello,

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 !

sap.ui.define([
    'sap/ui/core/UIComponent',
    'sap/ui/model/json/JSONModel'
], 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);
            this.getRouter().initialize();
            this._registerRoutes();
            this._registerTargets();
        },

        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) {
                routerHandler.addRoute(this.ROUTES[i]);
            }
        },

        _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
    }
},