I really don't get what the property controlAggregation below does for routing a SAPUI5 application. There is not element with that id. I cant find any reference to 'pages' anywhere in the demo app found here: SAPUI5 routing demo
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "sap.ui.demo.nav.view",
"controlId": "app",
"controlAggregation": "pages", // what does this do?
"transition": "slide",
"bypassed": {
"target": "notFound"
}
The views are defined as below- no mention of 'pages'
<mvc:View
controllerName="sap.ui.demo.nav.controller.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true">
<App id="app"/>
</mvc:View>
And
<mvc:View
controllerName="sap.ui.demo.nav.controller.Home"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Page title="{i18n>homePageTitle}" class="sapUiResponsiveContentPadding">
<content>
<Button id="displayNotFoundBtn" text="{i18n>DisplayNotFound}" press="onDisplayNotFound" class="sapUiTinyMarginEnd"/>
</content>
</Page>
</mvc:View>
SAP UI5 Framework offers a special and efficient concept for Navigation between its Views. Routing is hash based navigation where we can bookmark the current page and also when we want to bind the specific context to specific sapui5 control it can be either view or Control it can be done by parameter routing.
An aggregation is a way for one control (called a parent) to reference another subordinate control (called a child). Just like any family unit, the parent and child do things together. This also means that, when the parent control is no longer necessary and is destroyed, the child control is removed as well.
For each route, you define the pattern that can be used in the app implementation. With targets, you define where a view is loaded and where the view is shown on the UI. By referring to one or multiple targets in a route's definition, you can load and show the views once the route's pattern matches the current hash.
controlAggregation is the target aggregation to which the view is added.
like in this case target is an sap.m.App whose id is app.
app has an aggregation named as pages.
For detail see routing configuration.
UPDATED IN DETAIL:
Assume controlId is the your container for pages and the container's content is going to be changed for each different routes.
Here container's content is nothing but the pages aggregation of app.
While we use routing, you just need a configuration of the routes and there targets. Let's take one example
So when you navigateTo category/{id}
, sapui5 finds out what is the target for that pattern in the routes. Here it is category
.
Next it finds the viewName
for this target(Here it is category) inside the targets
object(see after routes array there is a targets object containing catagory,products...).
So SapUI5 got the view to render. But where to render this view?
The answer is - it will find the controlAggregation (inside category) mentioned for that viewName. In this example, it is there called masterPages
. now it will find what is the controlId
in the config
. It is splitApp
. So Finally it got to know all the required information. i.e:
viewName : Category
,controlId(the container of view) : splitApp
controlAggregation : masterPage
Now sapui5 will render Category
view inside the masterPage
aggregation of splitApp
.
But Note ----** In your case if controlAggegation is not mentioned in the targets
object, It is mentioned in the config
. That means for all the views there is a common controlAggregation that is pages.
So In this case sapui5 will render your views inside the pages
aggregation of app
.
I think you understand the flow now.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With