class sap.m.Panel

Control sample: sap.m.Panel
Visiblity: public
UX Guidelines: Panel
Implements:
Available since: N/A
Module: sap/m/Panel
Application Component: CA-UI5-CTR

A container control which has a header and content.

Overview

The panel is a container for grouping and displaying information. It can be collapsed to save space on the screen.

Guidelines:

Structure

A panel consists of a title bar with a header text or header toolbar, an info toolbar (optional), and a content area. Using the headerToolbar aggregation, you can add a toolbar with any toolbar content (i.e. custom buttons, spacers, titles) inside the title bar.

There are two types of panels: fixed and expandable. Expendable panels are enabled by the expandable property. Furthermore you can define an expand animation with the property expandAnimation.

Usage

When to use:

Responsive Behavior

This control can be a drag source.
This control can be a drop target.

Constructor

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#constructor for a general description of the syntax of the settings object.

new sap.m.Panel(sId?, mSettings?)
Param Type Default Value Description
sId? string

ID for the new control, generated automatically if no ID is given

mSettings? object

Initial settings for the new control


Properties

Name Type Default Value Description
accessibleRole sap.m.PanelAccessibleRole Form

This property is used to set the accessible aria role of the Panel. Depending on the usage you can change the role from the default Form to Region or Complementary.

Since: 1.46.

Visibility: public
backgroundDesign sap.m.BackgroundDesign Translucent

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".

Since: 1.30.

Visibility: public
expandAnimation boolean true

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

Since: 1.26.

Visibility: public
expandable boolean false

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.

Since: 1.22.

Visibility: public
expanded boolean false

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.

Since: 1.22.

Visibility: public
headerText string empty string

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.

Visibility: public
height sap.ui.core.CSSSize auto

Determines the Panel height.

Visibility: public
width sap.ui.core.CSSSize 100%

Determines the Panel width.

Visibility: public

Aggregations

Default Aggregation: content

Name Cardinality Type Description
content (default) 0..n sap.ui.core.Control

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

headerToolbar 0..1 sap.m.Toolbar

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.

infoToolbar 0..1 sap.m.Toolbar

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.


Events Overview

Event Description
expand

Indicates that the panel will expand or collapse.

Since: 1.22.

expand

Indicates that the panel will expand or collapse.

Since: 1.22.

Param Type Description
oControlEvent sap.ui.base.Event
getSource sap.ui.base.EventProvider
getParameters object
expand boolean

If the panel will expand, this is true. If the panel will collapse, this is false.

triggeredByInteraction boolean

Identifies whether the event is triggered by an user interaction or by calling setExpanded.

Since: 1.50.


Methods Overview

Method Description
addContent

Adds some content to the aggregation content.

attachExpand

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.

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

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.

sap.m.Panel.extend

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.

fireExpand

Fires event expand to attached listeners.

getAccessibleRole

Gets current value of property accessibleRole.

This property is used to set the accessible aria role of the Panel. Depending on the usage you can change the role from the default Form to Region or Complementary.

Default value is Form.

getBackgroundDesign

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.

getContent

Gets content of aggregation content.

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

getExpandable

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.

getExpandAnimation

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.

getExpanded

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.

getHeaderText

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 empty string.

getHeaderToolbar

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.

getHeight

Gets current value of property height.

Determines the Panel height.

Default value is "auto".

getInfoToolbar

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.

sap.m.Panel.getMetadata

Returns a metadata object for class sap.m.Panel.

getWidth

Gets current value of property width.

Determines the Panel width.

Default value is "100%".

indexOfContent

Checks for the provided sap.ui.core.Control in the aggregation content. and returns its index if found or -1 otherwise.

insertContent

Inserts a content into the aggregation content.

removeAllContent

Removes all the controls from the aggregation content.

Additionally, it unregisters them from the hosting UIArea.

removeContent

Removes a content from the aggregation content.

setAccessibleRole

Sets a new value for property accessibleRole.

This property is used to set the accessible aria role of the Panel. Depending on the usage you can change the role from the default Form to Region or Complementary.

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

Default value is Form.

setBackgroundDesign

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.

setExpandable

Sets a new value for 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.

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

Default value is false.

setExpandAnimation

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.

setExpanded

Sets the expanded property of the control.

setHeaderText

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 empty string.

setHeaderToolbar

Sets the aggregated headerToolbar.

setHeight

Sets a new value for property height.

Determines the Panel height.

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

Default value is "auto".

setInfoToolbar

Sets the aggregated infoToolbar.

setWidth

Sets a new value for property width.

Determines the Panel width.

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

Default value is "100%".

addContent

Adds some content to the aggregation content.

Param Type DefaultValue Description
oContent sap.ui.core.Control

The content to add; if empty, nothing is inserted

attachExpand

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.

Param Type DefaultValue Description
oData object

An application-specific payload object that will be passed to the event handler along with the event object when firing the event

fnFunction function(sap.ui.base.Event) : void

The function to be called when the event occurs

oListener object

Context object to call the event handler with. Defaults to this sap.m.Panel itself

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

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.

Param Type DefaultValue Description
fnFunction function(sap.ui.base.Event) : void

The function to be called, when the event occurs

oListener object

Context object on which the given function had to be called

sap.m.Panel.extend

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.

Param Type DefaultValue Description
sClassName string

Name of the class being created

oClassInfo object

Object literal with information about the class

FNMetaImpl function

Constructor function for the metadata object; if not given, it defaults to the metadata implementation used by this class

fireExpand

Fires event expand to attached listeners.

Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

expand boolean

If the panel will expand, this is true. If the panel will collapse, this is false.

triggeredByInteraction boolean

Identifies whether the event is triggered by an user interaction or by calling setExpanded.

getAccessibleRole

Gets current value of property accessibleRole.

This property is used to set the accessible aria role of the Panel. Depending on the usage you can change the role from the default Form to Region or Complementary.

Default value is Form.

getBackgroundDesign

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.

getContent

Gets content of aggregation content.

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

getExpandable

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.

getExpandAnimation

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.

getExpanded

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.

getHeaderText

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 empty string.

getHeaderToolbar

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.

getHeight

Gets current value of property height.

Determines the Panel height.

Default value is "auto".

getInfoToolbar

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.

sap.m.Panel.getMetadata

Returns a metadata object for class sap.m.Panel.

getWidth

Gets current value of property width.

Determines the Panel width.

Default value is "100%".

indexOfContent

Checks for the provided sap.ui.core.Control in the aggregation content. and returns its index if found or -1 otherwise.

Param Type DefaultValue Description
oContent sap.ui.core.Control

The content whose index is looked for

insertContent

Inserts a content into the aggregation content.

Param Type DefaultValue Description
oContent sap.ui.core.Control

The content to insert; if empty, nothing is inserted

iIndex int

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

removeAllContent

Removes all the controls from the aggregation content.

Additionally, it unregisters them from the hosting UIArea.

removeContent

Removes a content from the aggregation content.

Param Type DefaultValue Description
vContent int string sap.ui.core.Control

The content to remove or its index or id

setAccessibleRole

Sets a new value for property accessibleRole.

This property is used to set the accessible aria role of the Panel. Depending on the usage you can change the role from the default Form to Region or Complementary.

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

Default value is Form.

Param Type DefaultValue Description
sAccessibleRole sap.m.PanelAccessibleRole Form

New value for property accessibleRole

setBackgroundDesign

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.

Param Type DefaultValue Description
sBackgroundDesign sap.m.BackgroundDesign Translucent

New value for property backgroundDesign

setExpandable

Sets a new value for 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.

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

Default value is false.

Param Type DefaultValue Description
bExpandable boolean false

New value for property expandable

setExpandAnimation

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.

Param Type DefaultValue Description
bExpandAnimation boolean true

New value for property expandAnimation

setExpanded

Sets the expanded property of the control.

Param Type DefaultValue Description
bExpanded boolean

Defines whether control is expanded or not.

setHeaderText

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 empty string.

Param Type DefaultValue Description
sHeaderText string ""

New value for property headerText

setHeaderToolbar

Sets the aggregated headerToolbar.

Param Type DefaultValue Description
oHeaderToolbar sap.m.Toolbar

The headerToolbar to set

setHeight

Sets a new value for property height.

Determines the Panel height.

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

Default value is "auto".

Param Type DefaultValue Description
sHeight sap.ui.core.CSSSize "auto"

New value for property height

setInfoToolbar

Sets the aggregated infoToolbar.

Param Type DefaultValue Description
oInfoToolbar sap.m.Toolbar

The infoToolbar to set

setWidth

Sets a new value for property width.

Determines the Panel width.

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

Default value is "100%".

Param Type DefaultValue Description
sWidth sap.ui.core.CSSSize "100%"

New value for property width