Let's follow up this discussion at the Neptune Community

(this forum will be kept in read-only mode)
Solved

SAPUI5 panel expandable/collpasible at header level not only icon

Hello,


For people who like the SAPUI5 panel control but are a bit frustrated that as of now in standard in this library, a click on the icon only allow to have it expanded or not, the below code can be applied for each panel element (here "oPanel") to extend the feature to all the panel header :


oPanel.attachBrowserEvent("click",

    function attachPanelHeaderClick(oEvent) {

        handlePanelHeaderClick(oEvent, this)

    });


and the below function can be declared once :


function handlePanelHeaderClick(oEvent, oElement) {

    if (oEvent.toElement.id.indexOf(oElement.sId) > -1

    && oEvent.toElement.id.indexOf("-header") > -1) {

        if (oElement.getExpanded() === true) {

            oElement.setExpanded(false)

        } else {

            oElement.setExpanded(true)

        }

    }

}


Example of CSS change to get the mouse cursor when hovering the panel header :


    #oPanel .sapMPanelWrappingDiv:hover .sapMPanelHdr 

    {

         cursor: pointer;

    }


Best regards.



PEB



1 person has this problem

Merci beaucoup for your contribution, Pierre ! :)

You're welcome Julian ! I hope the SAPUI5 library will evolve in a upcoming release to avoid to add this piece of code. On mobile devices, without this code implemented, I need to click twice sometimes on the arrow icon if I'm not precise enough and I don't have particularly big fingers ;-)

Login or Signup to post a comment