Class sap.m.PanelModule: sap/m/Panel
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 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
. 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
. detachExpand(fnFunction, oListener)Detaches event handler fnFunction
from the expand
event of this sap.m.Panel
. fireExpand(mArguments?)Fires event expand
to attached listeners. getHeight()Gets current value of property height
. 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
. removeContent(vContent)Removes a content from the aggregation content
. setExpandable(bExpandable)Sets the expandable property of the control. setExpanded(bExpanded)Sets the expanded property of the control. setHeaderText(sHeaderText)Sets a new value for property headerText
. setHeight(sHeight)Sets the height of the panel. setWidth(sWidth)Sets the width of the panel. addStyleClass,
allowTextSelection,
attachBrowserEvent,
attachValidateFieldGroup,
checkFieldGroupIds,
clone,
detachBrowserEvent,
detachValidateFieldGroup,
fireValidateFieldGroup,
getAccessibilityInfo,
getBusy,
getBusyIndicatorDelay,
getControlsByFieldGroupId,
getFieldGroupIds,
getIdForLabel,
getRenderer,
getVisible,
hasStyleClass,
invalidate,
isBusy,
onAfterRendering,
onBeforeRendering,
placeAt,
removeStyleClass,
rerender,
setBusy,
setBusyIndicatorDelay,
setFieldGroupIds,
setVisible,
toggleStyleClass,
triggerValidateFieldGroup $,
addCustomData,
addDependent,
addEventDelegate,
applyFocusInfo,
bindElement,
data,
destroy,
destroyCustomData,
destroyDependents,
destroyLayoutData,
destroyTooltip,
enhanceAccessibilityState,
exit,
findElements,
fireEvent,
focus,
getCustomData,
getDependents,
getDomRef,
getElementBinding,
getFocusDomRef,
getFocusInfo,
getInterface,
getLayoutData,
getMetadata,
getTooltip,
getTooltip_AsString,
getTooltip_Text,
indexOfCustomData,
indexOfDependent,
init,
insertCustomData,
insertDependent,
prop,
removeAllCustomData,
removeAllDependents,
removeCustomData,
removeDependent,
removeEventDelegate,
setLayoutData,
setTooltip,
toString,
unbindElement addAggregation,
addAssociation,
applySettings,
attachFormatError,
attachModelContextChange,
attachParseError,
attachValidationError,
attachValidationSuccess,
bindAggregation,
bindContext,
bindObject,
bindProperty,
destroyAggregation,
detachFormatError,
detachModelContextChange,
detachParseError,
detachValidationError,
detachValidationSuccess,
findAggregatedObjects,
fireFormatError,
fireModelContextChange,
fireParseError,
fireValidationError,
fireValidationSuccess,
getAggregation,
getAssociation,
getBinding,
getBindingContext,
getBindingInfo,
getBindingPath,
getEventingParent,
getId,
getModel,
getObjectBinding,
getOriginInfo,
getParent,
getProperty,
hasModel,
indexOfAggregation,
insertAggregation,
isBound,
isInvalidateSuppressed,
isTreeBinding,
propagateMessages,
removeAggregation,
removeAllAggregation,
removeAllAssociation,
removeAssociation,
setAggregation,
setAssociation,
setBindingContext,
setModel,
setProperty,
unbindAggregation,
unbindContext,
unbindObject,
unbindProperty,
validateAggregation,
validateProperty 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 |
Returns a metadata object for class sap.m.Panel.
Returns:
Adds some content to the aggregation content
.
Parameters:
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 |
Destroys all the content in the aggregation content
.
Returns:
{sap.m.Panel} | Reference to this in order to allow method chaining |
Destroys the headerToolbar in the aggregation headerToolbar
.
- Since:
- 1.16
Returns:
{sap.m.Panel} | Reference to this in order to allow method chaining |
Destroys the infoToolbar in the aggregation infoToolbar
.
- Since:
- 1.16
Returns:
{sap.m.Panel} | Reference to this in order to allow method chaining |
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 |
Fires event
expand
to attached listeners.
Expects the following event parameters:
expand
of type boolean
If 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 |
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:
Gets content of aggregation
content
.
Determines the content of the Panel. The content will be visible only when the Panel is expanded.
Returns:
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 |
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:
Gets current value of property
height
.
Determines the Panel height.
Default value is auto
.
Returns:
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:
Gets current value of property
width
.
Determines the Panel width.
Default value is 100%
.
Returns:
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:
Returns:
{int} | The index of the provided control in the aggregation if found, or -1 otherwise |
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 |
Removes all the controls from the aggregation
content
.
Additionally, it unregisters them from the hosting UIArea.
Returns:
Removes a content from the aggregation content
.
Parameters:
Returns:
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:
- Since:
- 1.30
Returns:
{sap.m.Panel} | Reference to this in order to allow method chaining |
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. |
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 |
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. |
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 |
Sets the aggregated headerToolbar
.
Parameters:
- Since:
- 1.16
Returns:
{sap.m.Panel} | Reference to this in order to allow method chaining |
Sets the height of the panel.
Parameters:
Returns:
{sap.m.Panel} | Pointer to the control instance to allow method chaining. |
Sets the aggregated infoToolbar
.
Parameters:
- Since:
- 1.16
Returns:
{sap.m.Panel} | Reference to this in order to allow method chaining |
Sets the width of the panel.
Parameters:
Returns:
{sap.m.Panel} | Pointer to the control instance to allow method chaining. |