Question Re: UI5 Add/remove/change responsive splitter split pane in Technology Q&A

UI5 Add/remove/change responsive splitter split pane

former_member545597 — Thu, 18 Jan 2018 22:47:12 GMT

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?

Re: UI5 Add/remove/change responsive splitter split pane

former_member17337 — Fri, 19 Jan 2018 04:17:28 GMT

Hii try with below code.....give a width for SplitPane it will work

<l:SplitPane requiredParentWidth="400" id="default">

<m:Panel headerText="Minimum parent width 400" height="100%">

<m:List headerText="Products" items="{ path: '/ProductCollection' }">

<m:StandardListItem title="{Name}" counter="{Quantity}"/> </m:List> </m:Panel>

</l:SplitPane>

Re: UI5 Add/remove/change responsive splitter split pane

former_member545597 — Fri, 19 Jan 2018 22:47:49 GMT

This did not work. I gave requiredParentWidth to all my split panes and nothing changed, using % values did not work either

Re: UI5 Add/remove/change responsive splitter split pane

former_member17337 — Tue, 23 Jan 2018 11:13:03 GMT

Go through this link https://openui5.hana.ondemand.com/1.48.3/explored.html#/sample/sap.ui.layout.sample.ResponsiveSplitter/preview

Re: UI5 Add/remove/change responsive splitter split pane

former_member545597 — Thu, 25 Jan 2018 19:34:23 GMT

It seems those split panes are all the same with, it also seems like the only function of the requiredParentWidth is to display the split pane if there is enough screen width.

I am looking for a way to change the width programmatically.

Re: UI5 Add/remove/change responsive splitter split pane

former_member400953 — Wed, 30 Jan 2019 09:53:11 GMT

You can use SplitterLayoutData

Work since 1.60 SAPUI5 version

http://jsfiddle.net/y9rffmm5/3/

Example:

        <l:ResponsiveSplitter defaultPane="default" width="100%" height="100%">
            <l:PaneContainer>
                <l:SplitPane id="default" height="100%">
                  <l:layoutData><l:SplitterLayoutData resizable="true" size="25%"/></l:layoutData> 
                  <Panel headerText="header">
                    </Panel>

                     ......