A container control which has a header and content.
The panel is a container for grouping and displaying information. It can be collapsed to save space on the screen.
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
.
accessibleRole
property from the default Form
to Region
or Complementary
.
auto
, the height of the content area is automatically adjusted to match the height of its content.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 |
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 |
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". |
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. |
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. |
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. |
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 |
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. |
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. |
Event | Description |
---|---|
expand |
Indicates that the panel will expand or collapse. |
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. |
Method | Description |
---|---|
addContent |
Adds some content to the aggregation content. |
attachExpand |
Attaches event handler When called, the context of the event handler (its 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 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
|
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 Default value is |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
indexOfContent |
Checks for the provided |
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 When called with a value of Default value is |
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 Default value is |
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 Default value is |
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 Default value is |
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 Default value is |
setHeaderToolbar |
Sets the aggregated headerToolbar. |
setHeight |
Sets a new value for property height. Determines the Panel height. When called with a value of Default value is |
setInfoToolbar |
Sets the aggregated infoToolbar. |
setWidth |
Sets a new value for property width. Determines the Panel width. When called with a value of Default value is |
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 |
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 |
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 |
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 |
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. |
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
.
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
.
Gets content of aggregation content.
Determines the content of the Panel. The content will be visible only when the Panel is expanded.
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
.
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
.
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
.
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
.
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.
Gets current value of property height.
Determines the Panel height.
Default value is "auto"
.
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.
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 |
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 |
Removes all the controls from the aggregation content.
Additionally, it unregisters them from the hosting UIArea.
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 |
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 |
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 |
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 |
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 |
Sets the expanded property of the control.
Param | Type | DefaultValue | Description |
---|---|---|---|
bExpanded | boolean |
Defines whether control is expanded or not. |
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 |
Sets the aggregated headerToolbar.
Param | Type | DefaultValue | Description |
---|---|---|---|
oHeaderToolbar | sap.m.Toolbar |
The headerToolbar to set |
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 |
Sets the aggregated infoToolbar.
Param | Type | DefaultValue | Description |
---|---|---|---|
oInfoToolbar | sap.m.Toolbar |
The infoToolbar to set |
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 |