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

[former_member415930]

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

[saurabh_vakil · Accepted solution]

The app descriptor (manifest.json) is the place where you should be defining all your routing configuration, no matter how large it is as this is the standard way. I don't think there is really any point having only the routing configuration written in the Component.js and the remaining app configuration within the manifest.json. Even if you separate the routing configuration and place it in the component, it might not work as you expect it to.

[junwu]

ok, have fun....

[junwu]

I don't see the point.....

crowded in manifest.json???

[former_member415930]

I don't see the point of you commenting, if you don't provide an answer or any constructive argument to this topic no matter if it is pro or against what I am trying to achieve.

And, yes crowded, I have too many routes, targets and models declared in the manifest file and I want them to be loaded from separate files. I am not writting an entire book in the manifest file.