Dockable split panel - start Docked/Closed?

Support
#1

I’m running Platform v7.2.11 and I am implementing the Main Window with Side Menu interface adding a docked Search Folders panel on the right hand side: MainWindow with Responsive Side Menu and Search Folders on right

I would like the Search Folders menu to start out “closed/docked”. It starts out open to the default pos value:

image
image1273×891 65.8 KB

I would like it to open up like this instead (with the dockable split closed):

image
image1273×891 68.7 KB

I can’t find any way to set this as the default. Is there a way?

#2

I think I’ve solved it. The solution has three parts:

In the web-app.properties file, set:

cuba.web.foldersPaneEnabled=true
cuba.web.foldersPaneVisibleByDefault=false

Set up the ExtMainScreen.xml to include:

            <split id="foldersSplit" dockMode="RIGHT" dockable="true" height="100%" maxSplitPosition="100%"
                   orientation="horizontal" pos="30%" reversePosition="true" settingsEnabled="false" >
                <workArea id="workArea" height="100%" width="100%">
                    <initialLayout margin="true" spacing="true">
                         <-- your layout here --/>
                    </initialLayout>
                </workArea>
                <foldersPane id="foldersPane" height="100%" width="100%"/>
            </split>

And then add the following to the ExtMainScreen.java:

public class ExtMainScreen extends MainScreen implements Window.HasFoldersPane {

    @Inject
    private SplitPanel foldersSplit;
    @Inject
    private FoldersPane foldersPane;
    @Inject
    private AppWorkArea workArea;

    @Subscribe
    public void onInit(InitEvent event) {

        /* Configure Search Folders pane on the right and closed by default */

        if (webConfig.getFoldersPaneEnabled()) {
            if (webConfig.getFoldersPaneVisibleByDefault()) {
                foldersSplit.setSplitPosition(webConfig.getFoldersPaneDefaultWidth(), SizeUnit.PIXELS, true);
            } else {
                foldersSplit.setSplitPosition(0, SizeUnit.PIXELS, true);
            }
            CubaHorizontalSplitPanel vSplitPanel = (CubaHorizontalSplitPanel) WebComponentsHelper.unwrap(foldersSplit);
            vSplitPanel.setDefaultPosition(webConfig.getFoldersPaneDefaultWidth() + "px");
            vSplitPanel.setMaxSplitPosition(100, Sizeable.Unit.PERCENTAGE);
            vSplitPanel.setMinSplitPosition(0, Sizeable.Unit.PERCENTAGE);
            vSplitPanel.setDockable(true);
            vSplitPanel.setDockMode(SplitPanelDockMode.RIGHT);
        } else {
            foldersPane.setEnabled(false);
            foldersPane.setVisible(false);
            foldersSplit.remove(workArea);
            int foldersSplitIndex = getWindow().indexOf(foldersSplit);
            getWindow().remove(foldersSplit);
            getWindow().add(workArea, foldersSplitIndex);
            getWindow().expand(workArea);
        }

       /* the rest of your Init code */
    }

    @Nullable
    @Override
    public FoldersPane getFoldersPane() {
        return foldersPane;
    }

   /* the rest of your Main Window class */
}

Recorded here in case it is helpful. Always open to a better solution. :slight_smile: