SAPUI5 routing - Control with ID idAppControl could not be found

Question

first at all, I´m aware that there were similiar asked questions, but none of the answers could solve my problem.

Short look into my code:

My Component.js looks like this

routes: [
            {
                pattern: "",                //home page
                name: util.Constants.Tile,
                view: util.Constants.Tile,
                viewId: util.Constants.Tile,
                targetAggregation: "pages"
                //targetControl: "idAppControl"
            },
            {
                pattern: "firstExample",
                name: util.Constants.FirstExample,
                view: util.Constants.FirstExample,
                viewId: util.Constants.FirstExample,
                targetAggregation: "pages",
                targetControl : "idAppControl",
                subroutes : [
                    {
                        pattern: "firstExample",
                        name: util.Constants.ExampleMaster,
                        view: util.Constants.ExampleMaster,
                        targetAggregation: "masterPages",
                        targetControl: "idSplitContainerControl",
                    },
                    {
                        pattern: "firstExample/:typeMaster:",
                        name: util.Constants.ExampleSecondMaster,
                        view: util.Constants.ExampleSecondMaster,
                        targetAggregation: "masterPages",
                        targetControl: "idSplitContainerControl",
                        subroutes : [
                            {
                                pattern : "firstExample/:typeDetail:",
                                name : util.Constants.ExampleDetail,
                                view : util.Constants.ExampleDetail,
                                targetAggregation : "detailPages"
                            }
                        ]
                    }
                ]
            },

Short explanation: It´s a page with a normal app view (no master view) and a following SplitContainer with two master and one detail view. Whenever I want to call the detail view

onSelect : function (e) {
    var routeTo = e.getSource().getTitle();

    this.router.navTo(util.Constants.ExampleDetail, { typeDetail : routeTo } );

},

it says

2015-03-30 14:50:06 Control with ID idAppControl could not be found - sap-ui-core-dbg.js:15213

Any idea? Thanks for your help in advance!

---

Links to the similiar topics:

• https://stackoverflow.com/questions/29003071/ui5-cant-find-a-control-via-its-id#=
• SAPUI5 routing throws error "Control (ID of an App control) does not has an aggregation called pages"

Answer 1

it's difficult to debug the routing code of someone else, so here is my working router for a multi page application. The first one is a simple page with tiles and the second one is a Master/Detail view.

routes : [
    {
        pattern : "",
        name: "launchpad",
        view: "Launchpad",
        targetControl: "masterView"
    },
    {
        pattern : "split",
        name: "app",
        view: "App",
        targetControl: "masterView",
        subroutes : [
            {
                pattern : "master",
                name : "main",
                // placed in master masterPages aggregation of splitapp
                view : "Master",
                targetAggregation : "masterPages",
                targetControl : "idAppControl",
                // places detail in detailPages aggreg. of the splitapp
                subroutes : [
                    {
                        // product context is expected
                        // and which tab should be selected (supplier/category)
                        pattern : "{product}/:tab:",
                        name : "product",
                        view : "Detail",
                        targetAggregation :  "detailPages"
                    }
                ]
            }
        ]
    },
    // catchall routes, to show not found message, when route is not valid
    {
        name : "catchallMaster",
        view : "Master",
        targetAggregation : "masterPages",
        targetControl : "idAppControl",
        subroutes : [
            {
                pattern : ":all*:",
                name : "catchallDetail",
                view : "NotFound"
            }
        ]
    }
]
}
// custom routing is performed in MyRouter.js
},

Note that the targetControl is set for both routes. masterView is part of the MasterApp that is loaded first.

<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true"
    xmlns="sap.m">
    <App
        id="masterView">
    </App>
</mvc:View>

idAppControl is part of the App.view.xml with <SplitApp id="idAppControl" />. I based my application on the example in the developer guidelines just like you.

Component.js has this:

createContent: function() {
    var viewData = {
        component:this
    };
    return sap.ui.view({
        viewName: "sap.ui.demo.app.view.MasterApp",
        type: sap.ui.core.mvc.ViewType.XML,
        viewData: viewData
    });
}

App.view:

<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true"
    xmlns="sap.m">
    <SplitApp id="idAppControl" />
</mvc:View>

Config:

routing: {
    config: {
        // custom router class
        routerClass : sap.ui.demo.app.MyRouter,
        // xml views
        viewType : "XML",
        // absolute path to views
        viewPath : "sap.ui.demo.app.view",
        // unless stated otherwise, router places view in detail part
        targetAggregation : "pages",
        // don't clear the detail pages before views are added
        clearTarget : false
    },
}

When looking at your router, I would say you have problems with the order of the pages. And as general advise, I would like to say that navTo takes the parameter "name" of the routes, not view or pattern. Took me some time to learn that.

Kind regards,

Michael