UI5 Add/remove/change responsive splitter split pane

Question

I am trying to modify the split panes in my view.

My view looks like this:

<mvc:View 
    controllerName="svm.controller.Controller" 
    xmlns:l="sap.ui.layout" 
    xmlns:mvc="sap.ui.core.mvc" 
    xmlns:core="sap.ui.core"
    xmlns="sap.m">
    <l:ResponsiveSplitter defaultPane="default" width="100%" height="100%">
        <l:PaneContainer>
            <l:SplitPane id="default" height="100%">
                <Panel headerText="header">
                </Panel>
            </l:SplitPane>
            <l:SplitPane height="100%">
                <Panel headerText="header2">
                </Panel>
            </l:SplitPane>
        </l:PaneContainer>
    <l:ResponsiveSplitter>
</mvc:View>

The first thing I want to do is change how wide the panes start. It is easy to modify the size of the panel but the pane does not change to be the same width as its panel. Setting the pane to width="20%" and width="80%" does nothing to move where the splitters start.

I also want one of my panes to not be there when the application starts and to basically be added and removed on a toggle, complete with it's panel and everything inside.

Is there a way to do these things in javascript or preferably in xml?

Answer 1

This is not done easily. You have to use SplitterLayoutData (which is experimental)

add the following lines to the onInit()-function of your controller:

        var oSplitterLayoutData= new SplitterLayoutData({size: "30%"});
        var oPane= this.byId("default");
        oPane.setLayoutData(oSplitterLayoutData);

or in the Panel in the XML-View:

    <mvc:View
        controllerName="sap.ui.demo.basicTemplate.controller.App"
            xmlns:l="sap.ui.layout"
            xmlns:mvc="sap.ui.core.mvc"
            xmlns:core="sap.ui.core"
            xmlns="sap.m">
        <l:ResponsiveSplitter defaultPane="default" width="100%" height="100%">
        <l:PaneContainer>
            <l:SplitPane id="default" height="100%">
                <Panel headerText="header">
                    <layoutData><l:SplitterLayoutData size="30%" /></layoutData>
                </Panel>
            </l:SplitPane>
            <l:SplitPane height="100%">
                <Panel headerText="header2">
                </Panel>
            </l:SplitPane>
        </l:PaneContainer>
        </l:ResponsiveSplitter>
    </mvc:View>