Sap.m.panel: Make Entire Header Clickable

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 :

<Panelexpandable='true'expanded='false'><headerToolbar><Toolbarid='idPanelHeader'><content><Texttext='Click Me!' /></content></Toolbar></headerToolbar><content><Texttext = '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 = newPanel({
    expandable: true,
    headerToolbar: newToolbar({
      active: true,
      content: newTitle({ text: "Panel Header" }),
      press: () => panel.setExpanded(!panel.getExpanded()),
    }),
    content: newText({ text: "Panel content" }),
  }).placeAt("content");

}));

<scriptid="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><bodyid="content"class="sapUiBody"></body>

---

Commit: d8741f3