How to config router for sap.ui.layout.ResponsiveSplitter?

Question

My configuration:

// App.view.xml
<l:ResponsiveSplitter>
  <l:PaneContainer id="idAppControl">
  </l:PaneContainer>
</l:ResponsiveSplitter>

// Master/Detail.view.xml
<l:SplitPane>
    <Panel headerText="some text"></Panel>
</l:SplitPane>

// manifest.json
"routing": {
  "config": {
    "routerClass": "sap.m.routing.Router",
    "viewType": "XML",
    "viewPath": "mynamespace.view",
    "controlId": "idAppControl",
    "bypassed": {
      "target": [
        "master",
        "notFound"
      ]
    },
    "async": true
  },
  "routes": [
    {
      "pattern": "/:?query:",
      "name": "master",
      "target": [
        "master"
      ]
    },
    {
      "pattern": "ControlSet/{objectId}",
      "name": "entity",
      "target": [
        "master",
        "object"
      ]
    }
  ],
  "targets": {
    "master": {
      "viewName": "Master",
      "viewId": "master",
      "controlAggregation": "panes"
    },
    "object": {
      "viewName": "Detail",
      "viewId": "detail",
      "controlAggregation": "panes"
    },
    "notFound": {
      "viewName": "NotFound",
      "viewId": "notFound",
      "controlAggregation": "panes"
    }
  }
}

The aggregation relationship of ResponsiveSplitter is:

ResponsiveSplitter -> rootPaneContainer(Aggregations) -> PaneContainer -> panes(Aggregations) -> SplitPane

ResponsiveSplitter -> PaneContainer (one to one relationship)

PaneContainer -> SplitPane (one to many relationship)

But I get an error:

Error: "Element sap.ui.layout.SplitPane#__pane0" is not valid for aggregation "content" of Element sap.ui.core.mvc.XMLView#application-Monitor-display-component---master

@Erch, it's still not working. in the [sample](https://sapui5.hana.ondemand.com/#/sample/sap.ui.layout.sample.ResponsiveSplitter/code) code, the first `PaneContainer` contains one SplitPane and one PaneContainer — Tina Chen, Aug 21 '18 at 06:59
but it contains a second controll wich is another container, thats what i ment, but i tried it myself just now and y i was wrong — Erch, Aug 21 '18 at 07:02
ok i just recreated your problem, it seems it has to do with the routing, it kind of messes with the structure, is there a reason you want to load the Panes via routing? — Erch, Aug 21 '18 at 07:08
I want to add a master list page + a detail page in ResponsiveSplitter, and use router to manage list switch. But it seems `panes` can not be `controlAggregation` ? You mean making SplitPane as fragments or subview？ — Tina Chen, Aug 21 '18 at 07:14
for what you are trying a to accomplish there is a more... fitting... layout called Flexible Column Layout. The Responsive Splitter is not made for master-detail relationships. I advise you to read up the controlls you are going to use in the fiori designguidelines, it will save you this kind of problems : ) — Erch, Aug 21 '18 at 07:16
This one? [FlexibleColumnLayoutWithTwoColumnStart](https://sapui5.hana.ondemand.com/#/sample/sap.f.sample.FlexibleColumnLayoutWithTwoColumnStart/preview) Thanks for your advice, I will try it. — Tina Chen, Aug 21 '18 at 07:19
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/178423/discussion-between-erch-and-tina-chen). — Erch, Aug 21 '18 at 07:20
can u share the view definition ? imho you are missing the 'controlId' in your target definition — Ji aSH, Aug 27 '18 at 09:21

score 0 · Accepted Answer · answered Nov 21 '18 at 01:18

Thanks to @Erch's suggestions, I use FlexibleColumnLayout instead, route config:

"routing": {
  "config": {
    "routerClass": "sap.f.routing.Router",
    "viewType": "XML",
    "viewPath": "monitor.view",
    "controlId": "fcl",
    "transition": "slide",
    "bypassed": {
    },
    "async": true
  },
  "routes": [
    {
      "pattern": ":layout:",
      "name": "master",
      "target": [
        "master",
        "detail"
      ]
    },
    {
      "pattern": "detail/{objectId}/{layout}",
      "name": "detail",
      "target": [
        "master",
        "detail"
      ]
    }
  ],
  "targets": {
    "master": {
      "viewName": "Master",
      "controlAggregation": "beginColumnPages"
    },
    "detail": {
      "viewName": "Detail",
      "controlAggregation": "midColumnPages"
    }
  }
}

How to config router for sap.ui.layout.ResponsiveSplitter?

1 Answers1