Class sap.m.PanelModule: sap/m/Panel

extends Control

The Panel control is a container for controls which has a header and content. The header is always visible while the content can be collapsed if the Panel is expandable.


Since: 1.16.
Constructor Summary
new sap.m.Panel(sId?, mSettings?)Constructor for a new Panel.
Event Summary
expand(oControlEvent)Indicates that the panel will expand or collapse
Events borrowed from class sap.ui.core.Control
Method Summary
sap.m.Panel.extend(sClassName, oClassInfo?, FNMetaImpl?)Creates a new subclass of class sap.m.Panel with name sClassName and enriches it with the information contained in oClassInfo.
sap.m.Panel.getMetadata()Returns a metadata object for class sap.m.Panel.
addContent(oContent)Adds some content to the aggregation content.
attachExpand(oData?, fnFunction, oListener?)Attaches event handler fnFunction to the expand event of this sap.m.Panel.
destroyContent()Destroys all the content in the aggregation content.
destroyHeaderToolbar()Destroys the headerToolbar in the aggregation headerToolbar.
destroyInfoToolbar()Destroys the infoToolbar in the aggregation infoToolbar.
detachExpand(fnFunction, oListener)Detaches event handler fnFunction from the expand event of this sap.m.Panel.
fireExpand(mArguments?)Fires event expand to attached listeners.
getBackgroundDesign()Gets current value of property backgroundDesign.
getContent()Gets content of aggregation content.
getExpandable()Gets current value of property expandable.
getExpandAnimation()Gets current value of property expandAnimation.
getExpanded()Gets current value of property expanded.
getHeaderText()Gets current value of property headerText.
getHeaderToolbar()Gets content of aggregation headerToolbar.
getHeight()Gets current value of property height.
getInfoToolbar()Gets content of aggregation infoToolbar.
getWidth()Gets current value of property width.
indexOfContent(oContent)Checks for the provided sap.ui.core.Control in the aggregation content.
insertContent(oContent, iIndex)Inserts a content into the aggregation content.
removeAllContent()Removes all the controls from the aggregation content.
removeContent(vContent)Removes a content from the aggregation content.
setBackgroundDesign(sBackgroundDesign)Sets a new value for property backgroundDesign.
setExpandable(bExpandable)Sets the expandable property of the control.
setExpandAnimation(bExpandAnimation)Sets a new value for property expandAnimation.
setExpanded(bExpanded)Sets the expanded property of the control.
setHeaderText(sHeaderText)Sets a new value for property headerText.
setHeaderToolbar(oHeaderToolbar)Sets the aggregated headerToolbar.
setHeight(sHeight)Sets the height of the panel.
setInfoToolbar(oInfoToolbar)Sets the aggregated infoToolbar.
setWidth(sWidth)Sets the width of the panel.
Constructor Detail
new sap.m.Panel(sId?, mSettings?)
Constructor for a new Panel.

Accepts an object literal mSettings that defines initial property values, aggregated and associated objects as well as event handlers. See sap.ui.base.ManagedObject for a general description of the syntax of the settings object.

The supported settings are:

  • Properties
  • Aggregations
  • Events
    • expand : fnListenerFunction or [fnListenerFunction, oListenerObject] or [oData, fnListenerFunction, oListenerObject]

In addition, all settings applicable to the base type sap.ui.core.Control can be used as well.

Parameters:
{string}sId? id for the new control, generated automatically if no id is given
{object}mSettings? initial settings for the new control
Event Detail
expand(oControlEvent)
Indicates that the panel will expand or collapse
Parameters:
{sap.ui.base.Event}oControlEvent
{sap.ui.base.EventProvider}oControlEvent.getSource
{object}oControlEvent.getParameters
{boolean}oControlEvent.getParameters.expand If the panel will expand, this is true. If the panel will collapse, this is false.
Since:
1.22
Method Detail
sap.m.Panel.extend(sClassName, oClassInfo?, FNMetaImpl?): function
Creates a new subclass of class sap.m.Panel with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.ui.core.Control.extend.

Parameters:
{string}sClassName Name of the class being created
{object}oClassInfo? Object literal with information about the class
{function}FNMetaImpl? Constructor function for the metadata object; if not given, it defaults to sap.ui.core.ElementMetadata
Returns:
{function} Created class / constructor function
sap.m.Panel.getMetadata(): sap.ui.base.Metadata
Returns a metadata object for class sap.m.Panel.
Returns:
{sap.ui.base.Metadata} Metadata object describing this class
addContent(oContent): sap.m.Panel
Adds some content to the aggregation content.
Parameters:
{sap.ui.core.Control}oContent the content to add; if empty, nothing is inserted
Returns:
{sap.m.Panel} Reference to this in order to allow method chaining
attachExpand(oData?, fnFunction, oListener?): sap.m.Panel
Attaches event handler fnFunction to the expand event of this sap.m.Panel.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.m.Panel itself.

Indicates that the panel will expand or collapse

Parameters:
{object}oData? An application-specific payload object that will be passed to the event handler along with the event object when firing the event
{function}fnFunction The function to be called when the event occurs
{object}oListener? Context object to call the event handler with. Defaults to this sap.m.Panel itself
Since:
1.22
Returns:
{sap.m.Panel} Reference to this in order to allow method chaining
destroyContent(): sap.m.Panel
Destroys all the content in the aggregation content.
Returns:
{sap.m.Panel} Reference to this in order to allow method chaining
destroyHeaderToolbar(): sap.m.Panel
Destroys the headerToolbar in the aggregation headerToolbar.
Since:
1.16
Returns:
{sap.m.Panel} Reference to this in order to allow method chaining
destroyInfoToolbar(): sap.m.Panel
Destroys the infoToolbar in the aggregation infoToolbar.
Since:
1.16
Returns:
{sap.m.Panel} Reference to this in order to allow method chaining
detachExpand(fnFunction, oListener): sap.m.Panel
Detaches event handler fnFunction from the expand event of this sap.m.Panel.

The passed function and listener object must match the ones used for event registration.

Parameters:
{function}fnFunction The function to be called, when the event occurs
{object}oListener Context object on which the given function had to be called
Since:
1.22
Returns:
{sap.m.Panel} Reference to this in order to allow method chaining
fireExpand(mArguments?): sap.m.Panel
Fires event expand to attached listeners.

Expects the following event parameters:

  • expand of type booleanIf the panel will expand, this is true. If the panel will collapse, this is false.
Parameters:
{Map}mArguments? The arguments to pass along with the event
Since:
1.22
Returns:
{sap.m.Panel} Reference to this in order to allow method chaining
getBackgroundDesign(): sap.m.BackgroundDesign
Gets current value of property backgroundDesign.

This property is used to set the background color of the Panel. Depending on the theme you can change the state of the background from "Solid" over "Translucent" to "Transparent".

Default value is Translucent.

Since:
1.30
Returns:
{sap.m.BackgroundDesign} Value of property backgroundDesign
getContent(): sap.ui.core.Control[]
Gets content of aggregation content.

Determines the content of the Panel. The content will be visible only when the Panel is expanded.

Returns:
{sap.ui.core.Control[]}
getExpandable(): boolean
Gets current value of property expandable.

Specifies whether the control is expandable. This allows for collapsing or expanding the infoToolbar (if available) and content of the Panel. Note: If expandable is set to false, the Panel will always be rendered expanded.

Default value is false.

Since:
1.22
Returns:
{boolean} Value of property expandable
getExpandAnimation(): boolean
Gets current value of property expandAnimation.

Indicates whether the transition between the expanded and the collapsed state of the control is animated. By default the animation is enabled.

Default value is true.

Since:
1.26
Returns:
{boolean} Value of property expandAnimation
getExpanded(): boolean
Gets current value of property expanded.

Indicates whether the Panel is expanded or not. If expanded is set to true, then both the infoToolbar (if available) and the content are rendered. If expanded is set to false, then only the headerText or headerToolbar is rendered.

Default value is false.

Since:
1.22
Returns:
{boolean} Value of property expanded
getHeaderText(): string
Gets current value of property headerText.

This property is used to set the header text of the Panel. The "headerText" is visible in both expanded and collapsed state. Note: This property is overwritten by the "headerToolbar" aggregation.

Default value is .

Returns:
{string} Value of property headerText
getHeaderToolbar(): sap.m.Toolbar
Gets content of aggregation headerToolbar.

This aggregation allows the use of a custom Toolbar as header for the Panel. The "headerToolbar" is visible in both expanded and collapsed state. Use it when you want to add extra controls for user interactions in the header. Note: This aggregation overwrites "headerText" property.

Since:
1.16
Returns:
{sap.m.Toolbar}
getHeight(): sap.ui.core.CSSSize
Gets current value of property height.

Determines the Panel height.

Default value is auto.

Returns:
{sap.ui.core.CSSSize} Value of property height
getInfoToolbar(): sap.m.Toolbar
Gets content of aggregation infoToolbar.

This aggregation allows the use of a custom Toolbar as information bar for the Panel. The "infoToolbar" is placed below the header and is visible only in expanded state. Use it when you want to show extra information to the user.

Since:
1.16
Returns:
{sap.m.Toolbar}
getWidth(): sap.ui.core.CSSSize
Gets current value of property width.

Determines the Panel width.

Default value is 100%.

Returns:
{sap.ui.core.CSSSize} Value of property width
indexOfContent(oContent): int
Checks for the provided sap.ui.core.Control in the aggregation content. and returns its index if found or -1 otherwise.
Parameters:
{sap.ui.core.Control}oContent The content whose index is looked for
Returns:
{int} The index of the provided control in the aggregation if found, or -1 otherwise
insertContent(oContent, iIndex): sap.m.Panel
Inserts a content into the aggregation content.
Parameters:
{sap.ui.core.Control}oContent the content to insert; if empty, nothing is inserted
{int}iIndex the 0-based index the content should be inserted at; for a negative value of iIndex, the content is inserted at position 0; for a value greater than the current size of the aggregation, the content is inserted at the last position
Returns:
{sap.m.Panel} Reference to this in order to allow method chaining
removeAllContent(): sap.ui.core.Control[]
Removes all the controls from the aggregation content.

Additionally, it unregisters them from the hosting UIArea.

Returns:
{sap.ui.core.Control[]} An array of the removed elements (might be empty)
removeContent(vContent): sap.ui.core.Control
Removes a content from the aggregation content.
Parameters:
{int|string|sap.ui.core.Control}vContent The contentto remove or its index or id
Returns:
{sap.ui.core.Control} The removed content or null
setBackgroundDesign(sBackgroundDesign): sap.m.Panel
Sets a new value for property backgroundDesign.

This property is used to set the background color of the Panel. Depending on the theme you can change the state of the background from "Solid" over "Translucent" to "Transparent".

When called with a value of null or undefined, the default value of the property will be restored.

Default value is Translucent.

Parameters:
{sap.m.BackgroundDesign}sBackgroundDesign New value for property backgroundDesign
Since:
1.30
Returns:
{sap.m.Panel} Reference to this in order to allow method chaining
setExpandable(bExpandable): sap.m.Panel
Sets the expandable property of the control.
Parameters:
{boolean}bExpandable Defines whether the control is expandable or not.
Returns:
{sap.m.Panel} Pointer to the control instance to allow method chaining.
setExpandAnimation(bExpandAnimation): sap.m.Panel
Sets a new value for property expandAnimation.

Indicates whether the transition between the expanded and the collapsed state of the control is animated. By default the animation is enabled.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is true.

Parameters:
{boolean}bExpandAnimation New value for property expandAnimation
Since:
1.26
Returns:
{sap.m.Panel} Reference to this in order to allow method chaining
setExpanded(bExpanded): sap.m.Panel
Sets the expanded property of the control.
Parameters:
{boolean}bExpanded Defines whether control is expanded or not.
Returns:
{sap.m.Panel} Pointer to the control instance to allow method chaining.
setHeaderText(sHeaderText): sap.m.Panel
Sets a new value for property headerText.

This property is used to set the header text of the Panel. The "headerText" is visible in both expanded and collapsed state. Note: This property is overwritten by the "headerToolbar" aggregation.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is .

Parameters:
{string}sHeaderText New value for property headerText
Returns:
{sap.m.Panel} Reference to this in order to allow method chaining
setHeaderToolbar(oHeaderToolbar): sap.m.Panel
Sets the aggregated headerToolbar.
Parameters:
{sap.m.Toolbar}oHeaderToolbar The headerToolbar to set
Since:
1.16
Returns:
{sap.m.Panel} Reference to this in order to allow method chaining
setHeight(sHeight): sap.m.Panel
Sets the height of the panel.
Parameters:
{sap.ui.core.CSSSize}sHeight The height of the panel as CSS size.
Returns:
{sap.m.Panel} Pointer to the control instance to allow method chaining.
setInfoToolbar(oInfoToolbar): sap.m.Panel
Sets the aggregated infoToolbar.
Parameters:
{sap.m.Toolbar}oInfoToolbar The infoToolbar to set
Since:
1.16
Returns:
{sap.m.Panel} Reference to this in order to allow method chaining
setWidth(sWidth): sap.m.Panel
Sets the width of the panel.
Parameters:
{sap.ui.core.CSSSize}sWidth The width of the Panel as CSS size.
Returns:
{sap.m.Panel} Pointer to the control instance to allow method chaining.