Search code examples
routesnavigationsapui5splitter

Is it possible to have 2 NavContainers in a splitted panel in UI5?


Is it possible to have two NavContainers in a splitted panel?

I tried it like shown below but nothing from the child views is showing up, only the splitted panel with both sides empty. The error log does not say anything.
When I put the first NavContainer as first element inside the content tag of the page element the view of this first container gets rendered. (see the commented line in the view definition)

<mvc:View
        controllerName="my.controller.parent"
        xmlns="sap.m"
        ..
        id="splittedContainers" xmlns:m="sap.m">
    <Page id="myPage" class="sapUiSizeCompact sapUiTinyMargin" title="myTitle">
        <!-- Putting the NavContainer here seems to work -->**
        <content class="sapUiSizeCompact sapUiTinyMargin">
            <Panel class="sapUiSizeCompact sapUiTinyMargin">
                <content>
                    <l:Splitter orientation="Horizontal">
                        <l:contentAreas>
                            <Panel width="100%">
                                <layoutData>
                                    <l:SplitterLayoutData size="auto" />
                                </layoutData>
                                <NavContainer id="childNav1">
                                    <pages>
                                    </pages>
                                </NavContainer>             
                            </Panel>
                            <Panel>
                                <layoutData>
                                    <l:SplitterLayoutData size="300px" />
                                </layoutData>
                                <NavContainer id="childNav2">
                                    <pages>
                                    </pages>
                                </NavContainer>             
                            </Panel>
                        </l:contentAreas>
                    </l:Splitter>

                </content>
            </Panel>
        </content>
    </Page>
</mvc:View>

manifest.json:

..
        "routes": {
          "rBoth": {
            "pattern": "both",
            "target": "parentTarget"
          },
          "rChild1": {
            "pattern": "both/first",
            "target": "tChild1"
          },
          "rChild2": {
            "pattern": "both/second",
            "target": "tChild2"
          }
..

..
    "targets": {
        "parentTarget": {
          "viewPath": "my.view",
          "viewName": "SplitParentView",
          "parent": "firstLvlTarget",
          "controlId": "pageContainer",
          "controlAggregation": "pages",
          "transition": "flip",
          "viewLevel": 2
        },
        "tChild1": {
            "viewPath": "my.view.childs",
            "viewName": "ChildView1",
            "parent": "parentTarget",
            "controlId": "childNav1",
            "controlAggregation": "pages",
            "transition": "flip",
            "viewLevel": 3
        },
        "tChild2": {
          "viewPath": "my.view.childs",
          "viewName": "ChildView2",
          "parent": "parentTarget",
          "controlId": "childNav2",
          "controlAggregation": "pages",
          "transition": "flip",
          "viewLevel": 3
        },
..

Solution

  • What are you trying to achieve by this? Most screen are wider than they are high, so the FlexibleColumnLayout helps in most situations.

    The NavContainer has a pages-Aggregation.

    These can be of type sap.m.Page, sap.ui.core.View, sap.m.Carousel or any other control with fullscreen/page semantics."

    I assume that Panels can't be suitable parents for these kind of controls.

    If you just want horizontal splits, you might use the ObjectPage with Sections and Subsections