Event for collapsing / expanding sap.ui.commons.Panel?

Question

This SAPUI5 application that I am developing uses a sap.ui.commons.Panel control that has some buttons on it. Now I have to hide those buttons whenever a user collapses the panel and show them back upon expanding. I tried using the getCollapsed() method but to no effect. What I am basically looking for is a collapse event for the panel which is not available by default.

Any helping hand out there?

Answer 1

Perhaps the only solution here is to replace the default collapse icon with a button of your own and attach the press event to it. Like:

1. Declare a `Panel` with `showCollapseIcon` set to false.

    var oPanel = new sap.ui.commons.Panel({                    
        showCollapseIcon: false
    });
2. Add your own button. I prefer a `lite` button.

    var oCollapseButton = new sap.ui.commons.Button({
        icon: '<your icon>',
        lite: true,
        press: function (e) {            
            if (!oPanel.getCollapsed()) {
                //If not collapsed
                oPanel.setCollapsed(true);
                //Code to hide panel buttons
                //(and toggle collapse button image if needed) after this
            } else {
                //If already collapsed
                oPanel.setCollapsed(false);
                //Code to show panel buttons
                //(and toggle collapse button image if needed) after this
            }
        }
    });    
    oPanel.addButton(oCollapseButton);

P.S: You might also want to add some styling and alignment to your custom collapse button. For that, you can add a CSS3 class to your button before adding it to the panel like:

    oCollapseButton.addStyleClass('<your class>');

Answer 2

Hmmm, seems like there are no event handlers for the Panel control indeed...

As a workaround, you could add your own expand/collapse toggle button in the panel tray, and upon clicking that button you could grab the getCollapsed() state and show/hide your other buttons accordingly

Answer 3

You could use the sap.m.Panel https://openui5.hana.ondemand.com/docs/api/symbols/sap.m.Panel.html#event:expand

which has an expanded property and you can just use

setExpanded(true) ; 

to expand the panel and let the control retain its state without you having to track it.

I am sure this has all changed since you asked the question and this answer is related to 1.24.2