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:

targetControl defines the control that will serve the views as aggregation of for example "content". which control should serve your views? take the id of this control and put it into targetControl: "id_of_your_control" — Manuel Richarz
Thanks for the answer. I have a SplitContainer (XML) with the ID 'idSplitContainerControl'. In the SplitApp mode this ID should serve my views. It works fine if I comment out the second subroutes with the detail view. I figured out that the DetailView (controller and view) isn´t even loaded even though it correctly routes to the right url. — Felix Bockemuehl
maybe because your subroute has the same pattern as the main route. i think with a normal router the second pattern will not match because of the greedy option. but i am not sure that this is the same case for subroutes. you can try it by enable the greedy option in your router. stackoverflow.com/questions/28948375/… — Manuel Richarz
Actually it´s not the same pattern, I add the name of the list element that is clicked after the "firstExample/". I tried the greedy option, what happened was that the router automatically jumped from the first to the second Master view, but still showed the same failure message as before. Thanks again for your help! :) — Felix Bockemuehl

Michael K. Michael K. · Accepted Answer · 2015-03-31T07:57:19

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

SAPUI5 routing - Control with ID idAppControl could not be found

1 Answers