Class sap.m.ToolbarModule: sap/m/Toolbar

extends Control
known direct subclasses: AnchorBar, OverflowToolbar

Horizontal container most commonly used to display buttons, labels, selects and various other input controls.

Overview

By default, the Toolbar items are shrinkable if they have percent-based width (for example, sap.m.Input and sap.m.Slider) or implement the sap.ui.core.IShrinkable interface (for example, sap.m.Text and sap.m.Label). This behavior can be overridden by providing sap.m.ToolbarLayoutData for the Toolbar items.

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

Usage

You can add a visual separator between the preceding and succeeding sap.m.Toolbar item with the use of the sap.m.ToolbarSeparator. The separator is theme dependent and can be a padding, a margin or a line.

To add horizontal space between the Toolbar items, use the sap.m.ToolbarSpacer. You can define the width of the horizontal space or make it flexible to cover the remaining space between the Toolbar items (for example, to to push an item to the edge of the Toolbar.

Note:sap.m.ToolbarLayoutData should not be used together with sap.m.ToolbarSpacer.


Since: 1.16.
Constructor Summary
new sap.m.Toolbar(sId?, mSettings?)Constructor for a new Toolbar.
Event Summary
press(oControlEvent)Fired when the user clicks on the toolbar, if the Active property is set to "true".
Events borrowed from class sap.ui.core.Control
Method Summary
sap.m.Toolbar.extend(sClassName, oClassInfo?, FNMetaImpl?)Creates a new subclass of class sap.m.Toolbar with name sClassName and enriches it with the information contained in oClassInfo.
sap.m.Toolbar.getMetadata()Returns a metadata object for class sap.m.Toolbar.
_applyContextClassFor()Sets classes according to the context of the page.
_applyTag()Sets HTML tag according to the context of the page.
addAriaLabelledBy(vAriaLabelledBy)Adds some ariaLabelledBy into the association ariaLabelledBy.
addContent(oContent)Adds some content to the aggregation content.
applyTagAndContextClassFor()Sets classes and HTML tag according to the context of the page.
attachPress(oData?, fnFunction, oListener?)Attaches event handler fnFunction to the press event of this sap.m.Toolbar.
destroyContent()Destroys all the content in the aggregation content.
detachPress(fnFunction, oListener)Detaches event handler fnFunction from the press event of this sap.m.Toolbar.
firePress(mParameters?)Fires event press to attached listeners.
getActive()Gets current value of property active.
getAriaLabelledBy()Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy.
getContent()Gets content of aggregation content.
getDesign()Gets current value of property design.
getEnabled()Gets current value of property enabled.
getHeight()Gets current value of property height.
getHTMLTag()Gets the HTML tag of the root domref
getStyle()Gets current value of property style.
getTitleControl()Returns the first sap.m.Title control instance inside the toolbar for the accessibility
getTitleId()Returns the first sap.m.Title control id inside the toolbar for the accessibility
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.
isContextSensitive()Returns if the bar is sensitive to the container context.
removeAllAriaLabelledBy()Removes all the controls in the association named ariaLabelledBy.
removeAllContent()Removes all the controls from the aggregation content.
removeAriaLabelledBy(vAriaLabelledBy)Removes an ariaLabelledBy from the association named ariaLabelledBy.
removeContent(vContent)Removes a content from the aggregation content.
setActive(bActive)Sets a new value for property active.
setDesign(sDesign)Sets a new value for property design.
setEnabled(bEnabled)Sets a new value for property enabled.
setHeight(sHeight)Sets a new value for property height.
setHTMLTag(sTag)Sets the HTML tag of the root domref
setStyle(sStyle)Sets a new value for property style.
setWidth(sWidth)Sets a new value for property width.
Constructor Detail
new sap.m.Toolbar(sId?, mSettings?)

Constructor for a new Toolbar.

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

    • width : sap.ui.core.CSSSize
    • active : boolean (default: false)
    • enabled : boolean (default: true)
    • height : sap.ui.core.CSSSize (default: )
    • design : sap.m.ToolbarDesign (default: Auto)
    • style : sap.m.ToolbarStyle (default: Standard)

  • Aggregations

    • content : sap.ui.core.Control[] (default)

  • Associations

  • Events

    • press : 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:
stringsId?ID for the new control, generated automatically if no ID is given
objectmSettings?Initial settings for the new control
Event Detail
press(oControlEvent)
Fired when the user clicks on the toolbar, if the Active property is set to "true".
Parameters:
sap.ui.base.EventoControlEvent
sap.ui.base.EventProvideroControlEvent.getSource
objectoControlEvent.getParameters
sap.ui.core.ControloControlEvent.getParameters.srcControlThe toolbar item that was pressed
Method Detail
sap.m.Toolbar.extend(sClassName, oClassInfo?, FNMetaImpl?): function

Creates a new subclass of class sap.m.Toolbar 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:
stringsClassNameName of the class being created
objectoClassInfo?Object literal with information about the class
functionFNMetaImpl?Constructor function for the metadata object; if not given, it defaults to sap.ui.core.ElementMetadata
Returns:
functionCreated class / constructor function
sap.m.Toolbar.getMetadata(): sap.ui.base.Metadata
Returns a metadata object for class sap.m.Toolbar.
Returns:
sap.ui.base.MetadataMetadata object describing this class
_applyContextClassFor(): sap.m.IBar
Sets classes according to the context of the page. Possible contexts are header, footer and subheader.
Returns:
sap.m.IBarthis for chaining
_applyTag(): sap.m.IBar
Sets HTML tag according to the context of the page. Possible contexts are header, footer and subheader.
Returns:
sap.m.IBarthis for chaining
addAriaLabelledBy(vAriaLabelledBy): sap.m.Toolbar
Adds some ariaLabelledBy into the association ariaLabelledBy.
Parameters:
sap.ui.core.ID|sap.ui.core.ControlvAriaLabelledByThe ariaLabelledBy to add; if empty, nothing is inserted
Returns:
sap.m.ToolbarReference to this in order to allow method chaining
addContent(oContent): sap.m.Toolbar
Adds some content to the aggregation content.
Parameters:
sap.ui.core.ControloContentThe content to add; if empty, nothing is inserted
Returns:
sap.m.ToolbarReference to this in order to allow method chaining
applyTagAndContextClassFor(): sap.m.IBar
Sets classes and HTML tag according to the context of the page. Possible contexts are header, footer, subheader
Returns:
sap.m.IBarthis for chaining
attachPress(oData?, fnFunction, oListener?): sap.m.Toolbar

Attaches event handler fnFunction to the press event of this sap.m.Toolbar.

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.Toolbar itself.

Fired when the user clicks on the toolbar, if the Active property is set to "true".

Parameters:
objectoData?An application-specific payload object that will be passed to the event handler along with the event object when firing the event
functionfnFunctionThe function to be called when the event occurs
objectoListener?Context object to call the event handler with. Defaults to this sap.m.Toolbar itself
Returns:
sap.m.ToolbarReference to this in order to allow method chaining
destroyContent(): sap.m.Toolbar
Destroys all the content in the aggregation content.
Returns:
sap.m.ToolbarReference to this in order to allow method chaining
detachPress(fnFunction, oListener): sap.m.Toolbar

Detaches event handler fnFunction from the press event of this sap.m.Toolbar.

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

Parameters:
functionfnFunctionThe function to be called, when the event occurs
objectoListenerContext object on which the given function had to be called
Returns:
sap.m.ToolbarReference to this in order to allow method chaining
firePress(mParameters?): sap.m.Toolbar
Fires event press to attached listeners.
Parameters:
objectmParameters?Parameters to pass along with the event
sap.ui.core.ControlmParameters.srcControl?The toolbar item that was pressed
Returns:
sap.m.ToolbarReference to this in order to allow method chaining
getActive(): boolean

Gets current value of property active.

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.

Default value is false.

Returns:
booleanValue of property active
getAriaLabelledBy(): sap.ui.core.ID[]
Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy.
Returns:
sap.ui.core.ID[]
getContent(): sap.ui.core.Control[]

Gets content of aggregation content.

The content of the toolbar.

Returns:
sap.ui.core.Control[]
getDesign(): sap.m.ToolbarDesign

Gets current value of property design.

Defines the toolbar design.

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

Default value is Auto.

Returns:
sap.m.ToolbarDesignValue of property design
Since:
1.16.8
getEnabled(): boolean

Gets current value of property enabled.

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.

Default value is true.

Returns:
booleanValue of property enabled
getHeight(): sap.ui.core.CSSSize

Gets current value of property height.

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

Default value is empty string.

Returns:
sap.ui.core.CSSSizeValue of property height
getHTMLTag(): string
Gets the HTML tag of the root domref
Returns:
stringthe HTML-tag
getStyle(): sap.m.ToolbarStyle

Gets current value of property style.

Defines the visual style of the Toolbar.

Note: The visual styles are theme-dependent.

Default value is Standard.

Returns:
sap.m.ToolbarStyleValue of property style
Since:
1.54
getTitleControl(): sap.m.Title|undefined
Returns the first sap.m.Title control instance inside the toolbar for the accessibility
Returns:
sap.m.Title|undefinedThe sap.m.Title instance or undefined
Since:
1.44
getTitleId(): String
Returns the first sap.m.Title control id inside the toolbar for the accessibility
Returns:
StringThe sap.m.Title ID
Since:
1.28
getWidth(): sap.ui.core.CSSSize

Gets current value of property width.

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.

Returns:
sap.ui.core.CSSSizeValue 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.ControloContentThe content whose index is looked for
Returns:
intThe index of the provided control in the aggregation if found, or -1 otherwise
insertContent(oContent, iIndex): sap.m.Toolbar
Inserts a content into the aggregation content.
Parameters:
sap.ui.core.ControloContentThe content to insert; if empty, nothing is inserted
intiIndexThe 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.ToolbarReference to this in order to allow method chaining
isContextSensitive(): boolean
Returns if the bar is sensitive to the container context. Implementation of the IBar interface
Returns:
booleanisContextSensitive
removeAllAriaLabelledBy(): sap.ui.core.ID[]
Removes all the controls in the association named ariaLabelledBy.
Returns:
sap.ui.core.ID[]An array of the removed elements (might be empty)
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)
removeAriaLabelledBy(vAriaLabelledBy): sap.ui.core.ID
Removes an ariaLabelledBy from the association named ariaLabelledBy.
Parameters:
int|sap.ui.core.ID|sap.ui.core.ControlvAriaLabelledByThe ariaLabelledBy to be removed or its index or ID
Returns:
sap.ui.core.IDThe removed ariaLabelledBy or null
removeContent(vContent): sap.ui.core.Control
Removes a content from the aggregation content.
Parameters:
int|string|sap.ui.core.ControlvContentThe content to remove or its index or id
Returns:
sap.ui.core.ControlThe removed content or null
setActive(bActive): sap.m.Toolbar

Sets a new value for property active.

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.

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

Default value is false.

Parameters:
booleanbActiveNew value for property active
Returns:
sap.m.ToolbarReference to this in order to allow method chaining
setDesign(sDesign): sap.m.Toolbar

Sets a new value for property design.

Defines the toolbar design.

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

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

Default value is Auto.

Parameters:
sap.m.ToolbarDesignsDesignNew value for property design
Returns:
sap.m.ToolbarReference to this in order to allow method chaining
Since:
1.16.8
setEnabled(bEnabled): sap.m.Toolbar

Sets a new value for property enabled.

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.

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

Default value is true.

Parameters:
booleanbEnabledNew value for property enabled
Returns:
sap.m.ToolbarReference to this in order to allow method chaining
setHeight(sHeight): sap.m.Toolbar

Sets a new value for property height.

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

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

Default value is empty string.

Parameters:
sap.ui.core.CSSSizesHeightNew value for property height
Returns:
sap.m.ToolbarReference to this in order to allow method chaining
setHTMLTag(sTag): sap.m.IBar
Sets the HTML tag of the root domref
Parameters:
stringsTag
Returns:
sap.m.IBarthis for chaining
setStyle(sStyle): sap.m.Toolbar

Sets a new value for property style.

Defines the visual style of the Toolbar.

Note: The visual styles are theme-dependent.

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

Default value is Standard.

Parameters:
sap.m.ToolbarStylesStyleNew value for property style
Returns:
sap.m.ToolbarReference to this in order to allow method chaining
Since:
1.54
setWidth(sWidth): sap.m.Toolbar

Sets a new value for property width.

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.

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

Parameters:
sap.ui.core.CSSSizesWidthNew value for property width
Returns:
sap.m.ToolbarReference to this in order to allow method chaining