class sap.m.OverflowToolbar

Control sample: sap.m.OverflowToolbar
Visiblity: public
UX Guidelines: Overflow Toolbar
Implements: sap.ui.core.Toolbarsap.m.IBar
Available since: N/A
Extends: sap.m.Toolbar
Module: sap/m/OverflowToolbar
Application Component: CA-UI5-CTR

A container control based on sap.m.Toolbar, that provides overflow when its content does not fit in the visible area.

Overview

The content of the OverflowToolbar moves into the overflow area from right to left when the available space is not enough in the visible area of the container. It can be accessed by the user through the overflow button that opens it in a popover.

Note: It is recommended that you use OverflowToolbar over sap.m.Toolbar, unless you want to avoid overflow in favor of shrinking.

Usage

Different behavior and priorities can be set for each control inside the OverflowToolbar, such as certain controls to appear only in the overflow area or to never move there. For more information, see sap.m.OverflowToolbarLayoutData and sap.m.OverflowToolbarPriority.

Overflow Behavior

By default, only the following controls can move to the overflow area:

Additionally, any control that implements the sap.m.IOverflowToolbarContent interface may define its behavior (most importantly overflow behavior) when placed inside OverflowToolbar.

Note: The OverflowToolbar is an adaptive container that checks the available width and hides the part of its content that doesn't fit. It is intended that simple controls, such as sap.m.Button and sap.m.Label are used as content. Embedding other adaptive container controls, such as sap.m.Breadcrumbs, results in competition for the available space - both controls calculate the available space based on the other one's size and both change their width at the same time, leading to incorrectly distributed space.

Responsive behavior

The height of the toolbar changes on desktop, tablet, and smartphones.


Constructor

Constructor for a new OverflowToolbar.

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.OverflowToolbar(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
asyncMode boolean false

Defines whether the OverflowToolbar works in async mode.

Note: When this property is set to true, the OverflowToolbar makes its layout recalculations asynchronously. This way it is not blocking the thread immediately after re-rendering or resizing. However, it may lead to flickering, when there is a change in the width of the content of the OverflowToolbar.

Since: 1.67.

Visibility: public

Borrowed Properties

Name Type Default Value Description
active boolean false

Indicates that the whole toolbar is clickable. The Press event is fired only if Active is set to true. Note: This property should be used when there are no interactive controls inside the toolbar and the toolbar itself is meant to be interactive.

Visibility: public
ariaHasPopup string

Defines the aria-haspopup attribute of the Toolbar. if the active design is true.

Guidance for choosing appropriate value:

  • We recommend that you use the sap.ui.core.aria.HasPopup enumeration.
  • If you use controls based on sap.m.Popover or sap.m.Dialog, then you must use AriaHasPopup.Dialog (both sap.m.Popover and sap.m.Dialog have role "dialog" assigned internally).
  • If you use other controls, or directly sap.ui.core.Popup, you need to check the container role/type and map the value of ariaHasPopup accordingly.


Since: 1.79.0.

Visibility: public
design sap.m.ToolbarDesign Auto

Defines the toolbar design.

Note: Design settings are theme-dependent. They also determine the default height of the toolbar.

Since: 1.16.8.

Visibility: public
enabled boolean true

Sets the enabled property of all controls defined in the content aggregation. Note: This property does not apply to the toolbar itself, but rather to its items.

Visibility: public
height sap.ui.core.CSSSize empty string

Defines the height of the control. By default, the height property depends on the used theme and the design property.

Note: It is not recommended to use this property if the sapMTBHeader-CTX class is used

Visibility: public
style sap.m.ToolbarStyle Standard

Defines the visual style of the Toolbar.

Note: The visual styles are theme-dependent.

Since: 1.54.

Visibility: public
width sap.ui.core.CSSSize

Defines the width of the control. By default, Toolbar is a block element. If the width is not explicitly set, the control will assume its natural size.

Visibility: public

Aggregations

Default Aggregation:

Name Cardinality Type Description
_overflowButton 0..1 sap.m.ToggleButton
_popover 0..1 sap.m.Popover

Borrowed Aggregations

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

The content of the toolbar.


Methods Overview

Method Description
_getVisibleAndNonOverflowContent

Returns all the controls from the sap.m.OverflowToolbar, that are not in the overflow area and their visible property is true.

_moveControlInSuitableCollection

Moves each control in the suitable collection - Popover only, movable controls and toolbar only

_removeContentFromControlsCollections

Removes Control from collections

closeOverflow

Closes the overflow area. Useful to manually close the overflow after having suppressed automatic closing with "closeOverflowOnInteraction=false".

sap.m.OverflowToolbar.extend

Creates a new subclass of class sap.m.OverflowToolbar with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.m.Toolbar.extend.

getAsyncMode

Gets current value of property asyncMode.

Defines whether the OverflowToolbar works in async mode.

Note: When this property is set to true, the OverflowToolbar makes its layout recalculations asynchronously. This way it is not blocking the thread immediately after re-rendering or resizing. However, it may lead to flickering, when there is a change in the width of the content of the OverflowToolbar.

Default value is false.

sap.m.OverflowToolbar.getMetadata

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

setAsyncMode

Sets the asyncMode property.

_getVisibleAndNonOverflowContent

Returns all the controls from the sap.m.OverflowToolbar, that are not in the overflow area and their visible property is true.

_moveControlInSuitableCollection

Moves each control in the suitable collection - Popover only, movable controls and toolbar only

Param Type DefaultValue Description
oControl undefined
sPriority undefined

_removeContentFromControlsCollections

Removes Control from collections

Param Type DefaultValue Description
oControl undefined

closeOverflow

Closes the overflow area. Useful to manually close the overflow after having suppressed automatic closing with "closeOverflowOnInteraction=false".

sap.m.OverflowToolbar.extend

Creates a new subclass of class sap.m.OverflowToolbar with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.m.Toolbar.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

getAsyncMode

Gets current value of property asyncMode.

Defines whether the OverflowToolbar works in async mode.

Note: When this property is set to true, the OverflowToolbar makes its layout recalculations asynchronously. This way it is not blocking the thread immediately after re-rendering or resizing. However, it may lead to flickering, when there is a change in the width of the content of the OverflowToolbar.

Default value is false.

sap.m.OverflowToolbar.getMetadata

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

setAsyncMode

Sets the asyncMode property.

Param Type DefaultValue Description
bValue boolean