SAPUI5 routing - Control with ID idAppControl could not be found
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
Felix Bockemuehl
Updated on June 04, 2022Comments
-
Felix Bockemuehl about 2 years
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:
-
Felix Bockemuehl about 9 yearsThanks for the answer and sorry for the late reply! Do I understand correctly that you use the normal "app view" (name: app) and set a SplitContainer on top of it? And how do you call the detail view in the second subroute? Because no matter how many master views I have, they all work fine, only the detail view in the subroute throws the error message.
-
Felix Bockemuehl about 9 yearsI deleted everything from the project that wasn´t necessary and tried to keep only the very basic stuff, maybe that makes it a bit easier to look over dl.dropboxusercontent.com/u/37336669/template%20new.zip It´s probably a very simple and stupid mistake I make but I honestly do not get what!
-
Michael K. about 9 yearsYou don't need the
rootView: "view.App"`` in the Component.js when you have a createContent function in there. In the config you usetargetAggregation : "detailPages"`, I added my config above. I have no idea what UI5 does with the targetAggregation, which is a pretty odd term in itself. But mine is always plural. detailPages, masterPages, pages. I can't get your app running, are you using Node or is it stand-alone for you? -
Felix Bockemuehl about 9 yearsOh sorry, I didn´t include the sapui5 resource pack and just linked the sap-ui-core.js hosted on netweaver.ondemand, thought that would´ve been enough... anyway, I found my mistake. You were right with your config, I included a targetControl into it which caused the "control with ID idAppControl could not be found" error. A pretty stupid and avoidable mistake! Thanks a lot for your help! :)
-
Michael K. almost 9 yearsI uploaded it. You can find the files here github.com/michaelklopf/ui5_launchpad_prototype, but I didn't test it again, therefore I'm not sure it will work with current UI5 releases.
