Skip to Content
avatar image
Former Member

Drop-down control on Panel Header

I have a panel (sap.m library) with its expandable attribute set to true. It automatically generates an arrowed button next to the panel header to expand/contract the panel.

I wanted to know if there was any way of making the whole panel header clickable to expand/contract the panel and not only the arrowed button.

Thanks in advanced.

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • May 23, 2017 at 11:27 AM

    Hi Jaime,

    Yeah you can do that but only when you use panel's custom header toolbar using headerToolbar Aggregation. Checkout the below example :

    view.xml

    <Panel expandable="true" expanded="false" width="auto" id="panel">

    <headerToolbar> <Toolbar height="3rem" press="onPressToolbar" active="true" >

    <Title text="Custom Toolbar with a header text" />

    </Toolbar>

    </headerToolbar>

    <content>

    <Text text="Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat" />

    </content>

    </Panel>

    Controller.js

    onPressToolbar:function(oEvent){

    oEvent.getSource().getParent().setExpanded(!oEvent.getSource().getParent().getExpanded());

    }

    thanks

    Viplove

    Add comment
    10|10000 characters needed characters exceeded