Search code examples
sapui5

What is the meaning of 'controlAggregation' in the SAPUI5 routing configuration?

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>
Solution

  • 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 enter image description here

    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:

    1. viewName : Category ,
    2. controlId(the container of view) : splitApp
    3. 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.