Skip to Content
0

Drop-down control on Panel Header

May 23, 2017 at 09:01 AM

26

avatar image

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.

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

VIPLOVE KHUSHALANI May 23, 2017 at 11:27 AM
0

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

Share
10 |10000 characters needed characters left characters exceeded