Change default Expand/Collapse Icon in sap.m.Panel

[Former Member]

Hi there,

I'm trying to build up a panel with a custom Expand/Collapse Icon. The panel is used to add New "instruments" so I'd like to have as icon the sap-icon add.

I've been looking arround for a solution but I only found how to do so using sap.ui.commons.panel as it has a method called addButton...

Thanks in advance,

Alex.

PD: Here you have an image to clarify what I'm talking about.

[former_member182862 · Accepted solution]

Hi Alex

I think the best way is to extend the sap.m.Panel like this

Example

-D

[former_member182372 · Accepted solution]

lovely!

[Former Member · Accepted solution]

Thanks!

[former_member182372]

//SearchPanel - sap.m.Panel

jQuery.sap.require("sap.ui.core.IconPool");

this.byId("SearchPanel").oIconCollapsed.destroy();

var sCollapsedIconURI = sap.ui.core.IconPool.getIconURI("search");

var thatPanel = this.byId("SearchPanel");

var oIconCollapsed = sap.ui.core.IconPool.createControlByURI({

   id : thatPanel.getId() + "-CollapsedImg",

   src : sCollapsedIconURI
}).addStyleClass("sapMPanelExpandableIcon").attachPress(function(oEvent) {

   thatPanel.setExpanded(!thatPanel.getExpanded());

});

oIconCollapsed.setDecorative(false);

this.byId("SearchPanel").oIconCollapsed = oIconCollapsed;

[kai2015]

For customizing:

Here is a example on how to customize a Panel:

You need to get the original Code, locate the prototype methods, where the icon is defined and redefine those methods in your custom Panel.

(Also you need to customize PanelRenderer)

[kai2015]

I would create for that a toolbar with an popup dialog or a new view for the creating form.