Skip to content Skip to sidebar Skip to footer
Home / Javascript / Sapui5

Sap.m.Panel: Make Entire Header Clickable

Post a Comment
I have sap.m.Panel and I want to enable expand / collapse where the user click on the header. But this event only fires when the user clicks on the arrow. Any idea of how to solve

Solution 1:

We had the similar requirement and we made it to work with following logic: 1. Add a headerToolbar to Panel. 2. Attach click event on the headerToolbar. 3. onClickHandler check if the Panel is already expanded. If yes, collpase or expand the panel.

Below is the code. Let me know if this helps:

XML : 

        <Panel 
            expandable='true' expanded='false'>
            <headerToolbar>
                            <Toolbar id='idPanelHeader'>
                                <content>
                                    <Text text='Click Me!' />
                                </content>
                            </Toolbar>
                        </headerToolbar>
            <content>
                <Text text = 'Hey' />
            </content>
        </Panel>

Controller ( did it in OnInit):

      var oPanelHeader = this.byId('idPanelHeader');
      oPanelHeader.attachBrowserEvent("click", function() {
          this.getParent().setExpanded(!this.getParent().getExpanded());
          // this points to HeaderToolbar and this.getParent will return the Panel.
      });

Solution 2:

UI5 ≥ 1.79

Since 1.79, the entire header of sap.m.Panel is clickable by default.

UI5 1.78 and below

Add a headerToolbar and set its active property to true. On press, toggle the expanded property value with panel.setExpanded(!panel.getExpanded()):

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/m/Panel",
  "sap/m/Toolbar",
  "sap/m/Title",
  "sap/m/Text",
], (Panel, Toolbar, Title, Text) => {

  const panel = new Panel({
    expandable: true,
    headerToolbar: new Toolbar({
      active: true,
      content: new Title({ text: "Panel Header" }),
      press: () => panel.setExpanded(!panel.getExpanded()),
    }),
    content: new Text({ text: "Panel content" }),
  }).placeAt("content");

}));
<script id="sap-ui-bootstrap"
  src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core, sap.m"
  data-sap-ui-async="true"
  data-sap-ui-theme="sap_fiori_3"
  data-sap-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody"></body>

Commit: d8741f3


Post a Comment for "Sap.m.Panel: Make Entire Header Clickable"