class sap.m.Bar

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

Used as a header, sub-header and a footer of a page.

Overview

The Bar control consists of three areas to hold its content. It has the capability to center content, such as a title, while having other controls on the left and right side.

Usage

With the use of the design property, you can set the style of the Bar to appear as a header, sub-header and footer.

Note: Do not place a sap.m.Bar inside another sap.m.Bar or inside any bar-like control. Doing so causes unpredictable behavior.

Responsive Behavior

The content in the middle area is centrally positioned if there is enough space. If the right or left content overlaps the middle content, the middle content will be centered in the space between.

This control can be a drop target.

Constructor

Constructor for a new Bar.

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.Bar(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
design sap.m.BarDesign Auto

Determines the design of the bar. If set to auto, it becomes dependent on the place where the bar is placed.

Since: 1.22.

Visibility: public
enableFlexBox boolean false

If this flag is set to true, contentMiddle will be rendered as a HBox and layoutData can be used to allocate available space.

Visibility: public
titleAlignment sap.m.TitleAlignment None

Specifies the Title alignment (theme specific). If set to TitleAlignment.None, the automatic title alignment depending on the theme settings will be disabled. If set to TitleAlignment.Auto, the Title will be aligned as it is set in the theme (if not set, the default value is center); Other possible values are TitleAlignment.Start (left or right depending on LTR/RTL), and TitleAlignment.Center (centered)

Since: 1.85.

Visibility: public
translucent boolean false

Indicates whether the Bar is partially translucent. It is only applied for touch devices.

Since: 1.12.

Visibility: public

Aggregations

Default Aggregation:

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

Represents the left content area, usually containing a button or an app icon. If it is overlapped by the right content, its content will disappear and the text will show an ellipsis.

contentMiddle 0..n sap.ui.core.Control

Represents the middle content area. Controls such as label, segmented buttons or select can be placed here. The content is centrally positioned if there is enough space. If the right or left content overlaps the middle content, the middle content will be centered in the space between the left and the right content.

contentRight 0..n sap.ui.core.Control

Represents the right content area. Controls such as action buttons or search field can be placed here.


Associations

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

Association to controls / ids which label this control (see WAI-ARIA attribute aria-labelledby).


Methods Overview

Method Description
_applyContextClassFor

Sets classes according to the context of the page. Possible contexts are header, footer and subheader.

_applyTag

Sets HTML tag according to the context of the page. Possible contexts are header, footer and subheader.

addAriaLabelledBy

Adds some ariaLabelledBy into the association ariaLabelledBy.

addContentLeft

Adds some contentLeft to the aggregation contentLeft.

addContentMiddle

Adds some contentMiddle to the aggregation contentMiddle.

addContentRight

Adds some contentRight to the aggregation contentRight.

applyTagAndContextClassFor

Sets classes and HTML tag according to the context of the page. Possible contexts are header, footer and subheader.

destroyContentLeft

Destroys all the contentLeft in the aggregation contentLeft.

destroyContentMiddle

Destroys all the contentMiddle in the aggregation contentMiddle.

destroyContentRight

Destroys all the contentRight in the aggregation contentRight.

sap.m.Bar.extend

Creates a new subclass of class sap.m.Bar 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.

getAriaLabelledBy

Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy.

getContentLeft

Gets content of aggregation contentLeft.

Represents the left content area, usually containing a button or an app icon. If it is overlapped by the right content, its content will disappear and the text will show an ellipsis.

getContentMiddle

Gets content of aggregation contentMiddle.

Represents the middle content area. Controls such as label, segmented buttons or select can be placed here. The content is centrally positioned if there is enough space. If the right or left content overlaps the middle content, the middle content will be centered in the space between the left and the right content.

getContentRight

Gets content of aggregation contentRight.

Represents the right content area. Controls such as action buttons or search field can be placed here.

getContext

Gets the available Bar contexts.

getDesign

Gets current value of property design.

Determines the design of the bar. If set to auto, it becomes dependent on the place where the bar is placed.

Default value is Auto.

getEnableFlexBox

Gets current value of property enableFlexBox.

If this flag is set to true, contentMiddle will be rendered as a HBox and layoutData can be used to allocate available space.

Default value is false.

Since 1.16 replaced by <code>contentMiddle</code> aggregation. <code>contentMiddle</code> will always occupy of the 100% width when no <code>contentLeft</code> and <code>contentRight</code> are being set.
getHTMLTag

Gets the HTML tag of the root element.

sap.m.Bar.getMetadata

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

getTitleAlignment

Gets current value of property titleAlignment.

Specifies the Title alignment (theme specific). If set to TitleAlignment.None, the automatic title alignment depending on the theme settings will be disabled. If set to TitleAlignment.Auto, the Title will be aligned as it is set in the theme (if not set, the default value is center); Other possible values are TitleAlignment.Start (left or right depending on LTR/RTL), and TitleAlignment.Center (centered)

Default value is None.

getTranslucent

Gets current value of property translucent.

Indicates whether the Bar is partially translucent. It is only applied for touch devices.

Default value is false.

Since 1.18.6 This property has no effect since release 1.18.6 and should not be used. Translucent bar may overlay an input and make it difficult to edit.
indexOfContentLeft

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

indexOfContentMiddle

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

indexOfContentRight

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

insertContentLeft

Inserts a contentLeft into the aggregation contentLeft.

insertContentMiddle

Inserts a contentMiddle into the aggregation contentMiddle.

insertContentRight

Inserts a contentRight into the aggregation contentRight.

isContextSensitive

Determines whether the Bar is sensitive to the container context.

Implementation of the IBar interface.

removeAllAriaLabelledBy

Removes all the controls in the association named ariaLabelledBy.

removeAllContentLeft

Removes all the controls from the aggregation contentLeft.

Additionally, it unregisters them from the hosting UIArea.

removeAllContentMiddle

Removes all the controls from the aggregation contentMiddle.

Additionally, it unregisters them from the hosting UIArea.

removeAllContentRight

Removes all the controls from the aggregation contentRight.

Additionally, it unregisters them from the hosting UIArea.

removeAriaLabelledBy

Removes an ariaLabelledBy from the association named ariaLabelledBy.

removeContentLeft

Removes a contentLeft from the aggregation contentLeft.

removeContentMiddle

Removes a contentMiddle from the aggregation contentMiddle.

removeContentRight

Removes a contentRight from the aggregation contentRight.

setDesign

Sets a new value for property design.

Determines the design of the bar. If set to auto, it becomes dependent on the place where the bar is placed.

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

Default value is Auto.

setEnableFlexBox

Sets a new value for property enableFlexBox.

If this flag is set to true, contentMiddle will be rendered as a HBox and layoutData can be used to allocate available space.

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

Default value is false.

Since 1.16 replaced by <code>contentMiddle</code> aggregation. <code>contentMiddle</code> will always occupy of the 100% width when no <code>contentLeft</code> and <code>contentRight</code> are being set.
setHTMLTag

Sets the HTML tag of the root element.

setTitleAlignment

Sets a new value for property titleAlignment.

Specifies the Title alignment (theme specific). If set to TitleAlignment.None, the automatic title alignment depending on the theme settings will be disabled. If set to TitleAlignment.Auto, the Title will be aligned as it is set in the theme (if not set, the default value is center); Other possible values are TitleAlignment.Start (left or right depending on LTR/RTL), and TitleAlignment.Center (centered)

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

Default value is None.

setTranslucent

Sets a new value for property translucent.

Indicates whether the Bar is partially translucent. It is only applied for touch devices.

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

Default value is false.

Since 1.18.6 This property has no effect since release 1.18.6 and should not be used. Translucent bar may overlay an input and make it difficult to edit.

_applyContextClassFor

Sets classes according to the context of the page. Possible contexts are header, footer and subheader.

_applyTag

Sets HTML tag according to the context of the page. Possible contexts are header, footer and subheader.

addAriaLabelledBy

Adds some ariaLabelledBy into the association ariaLabelledBy.

Param Type DefaultValue Description
vAriaLabelledBy sap.ui.core.ID sap.ui.core.Control

The ariaLabelledBy to add; if empty, nothing is inserted

addContentLeft

Adds some contentLeft to the aggregation contentLeft.

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

The contentLeft to add; if empty, nothing is inserted

addContentMiddle

Adds some contentMiddle to the aggregation contentMiddle.

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

The contentMiddle to add; if empty, nothing is inserted

addContentRight

Adds some contentRight to the aggregation contentRight.

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

The contentRight to add; if empty, nothing is inserted

applyTagAndContextClassFor

Sets classes and HTML tag according to the context of the page. Possible contexts are header, footer and subheader.

destroyContentLeft

Destroys all the contentLeft in the aggregation contentLeft.

destroyContentMiddle

Destroys all the contentMiddle in the aggregation contentMiddle.

destroyContentRight

Destroys all the contentRight in the aggregation contentRight.

sap.m.Bar.extend

Creates a new subclass of class sap.m.Bar 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

getAriaLabelledBy

Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy.

getContentLeft

Gets content of aggregation contentLeft.

Represents the left content area, usually containing a button or an app icon. If it is overlapped by the right content, its content will disappear and the text will show an ellipsis.

getContentMiddle

Gets content of aggregation contentMiddle.

Represents the middle content area. Controls such as label, segmented buttons or select can be placed here. The content is centrally positioned if there is enough space. If the right or left content overlaps the middle content, the middle content will be centered in the space between the left and the right content.

getContentRight

Gets content of aggregation contentRight.

Represents the right content area. Controls such as action buttons or search field can be placed here.

getContext

Gets the available Bar contexts.

getDesign

Gets current value of property design.

Determines the design of the bar. If set to auto, it becomes dependent on the place where the bar is placed.

Default value is Auto.

getEnableFlexBox

Gets current value of property enableFlexBox.

If this flag is set to true, contentMiddle will be rendered as a HBox and layoutData can be used to allocate available space.

Default value is false.

Since 1.16 replaced by <code>contentMiddle</code> aggregation. <code>contentMiddle</code> will always occupy of the 100% width when no <code>contentLeft</code> and <code>contentRight</code> are being set.

getHTMLTag

Gets the HTML tag of the root element.

sap.m.Bar.getMetadata

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

getTitleAlignment

Gets current value of property titleAlignment.

Specifies the Title alignment (theme specific). If set to TitleAlignment.None, the automatic title alignment depending on the theme settings will be disabled. If set to TitleAlignment.Auto, the Title will be aligned as it is set in the theme (if not set, the default value is center); Other possible values are TitleAlignment.Start (left or right depending on LTR/RTL), and TitleAlignment.Center (centered)

Default value is None.

getTranslucent

Gets current value of property translucent.

Indicates whether the Bar is partially translucent. It is only applied for touch devices.

Default value is false.

Since 1.18.6 This property has no effect since release 1.18.6 and should not be used. Translucent bar may overlay an input and make it difficult to edit.

indexOfContentLeft

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

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

The contentLeft whose index is looked for

indexOfContentMiddle

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

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

The contentMiddle whose index is looked for

indexOfContentRight

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

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

The contentRight whose index is looked for

insertContentLeft

Inserts a contentLeft into the aggregation contentLeft.

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

The contentLeft to insert; if empty, nothing is inserted

iIndex int

The 0-based index the contentLeft should be inserted at; for a negative value of iIndex, the contentLeft is inserted at position 0; for a value greater than the current size of the aggregation, the contentLeft is inserted at the last position

insertContentMiddle

Inserts a contentMiddle into the aggregation contentMiddle.

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

The contentMiddle to insert; if empty, nothing is inserted

iIndex int

The 0-based index the contentMiddle should be inserted at; for a negative value of iIndex, the contentMiddle is inserted at position 0; for a value greater than the current size of the aggregation, the contentMiddle is inserted at the last position

insertContentRight

Inserts a contentRight into the aggregation contentRight.

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

The contentRight to insert; if empty, nothing is inserted

iIndex int

The 0-based index the contentRight should be inserted at; for a negative value of iIndex, the contentRight is inserted at position 0; for a value greater than the current size of the aggregation, the contentRight is inserted at the last position

isContextSensitive

Determines whether the Bar is sensitive to the container context.

Implementation of the IBar interface.

removeAllAriaLabelledBy

Removes all the controls in the association named ariaLabelledBy.

removeAllContentLeft

Removes all the controls from the aggregation contentLeft.

Additionally, it unregisters them from the hosting UIArea.

removeAllContentMiddle

Removes all the controls from the aggregation contentMiddle.

Additionally, it unregisters them from the hosting UIArea.

removeAllContentRight

Removes all the controls from the aggregation contentRight.

Additionally, it unregisters them from the hosting UIArea.

removeAriaLabelledBy

Removes an ariaLabelledBy from the association named ariaLabelledBy.

Param Type DefaultValue Description
vAriaLabelledBy int sap.ui.core.ID sap.ui.core.Control

The ariaLabelledBy to be removed or its index or ID

removeContentLeft

Removes a contentLeft from the aggregation contentLeft.

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

The contentLeft to remove or its index or id

removeContentMiddle

Removes a contentMiddle from the aggregation contentMiddle.

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

The contentMiddle to remove or its index or id

removeContentRight

Removes a contentRight from the aggregation contentRight.

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

The contentRight to remove or its index or id

setDesign

Sets a new value for property design.

Determines the design of the bar. If set to auto, it becomes dependent on the place where the bar is placed.

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
sDesign sap.m.BarDesign Auto

New value for property design

setEnableFlexBox

Sets a new value for property enableFlexBox.

If this flag is set to true, contentMiddle will be rendered as a HBox and layoutData can be used to allocate available space.

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

Default value is false.

Since 1.16 replaced by <code>contentMiddle</code> aggregation. <code>contentMiddle</code> will always occupy of the 100% width when no <code>contentLeft</code> and <code>contentRight</code> are being set.
Param Type DefaultValue Description
bEnableFlexBox boolean false

New value for property enableFlexBox

setHTMLTag

Sets the HTML tag of the root element.

Param Type DefaultValue Description
sTag sap.m.IBarHTMLTag

The HTML tag of the root element

setTitleAlignment

Sets a new value for property titleAlignment.

Specifies the Title alignment (theme specific). If set to TitleAlignment.None, the automatic title alignment depending on the theme settings will be disabled. If set to TitleAlignment.Auto, the Title will be aligned as it is set in the theme (if not set, the default value is center); Other possible values are TitleAlignment.Start (left or right depending on LTR/RTL), and TitleAlignment.Center (centered)

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

Default value is None.

Param Type DefaultValue Description
sTitleAlignment sap.m.TitleAlignment None

New value for property titleAlignment

setTranslucent

Sets a new value for property translucent.

Indicates whether the Bar is partially translucent. It is only applied for touch devices.

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

Default value is false.

Since 1.18.6 This property has no effect since release 1.18.6 and should not be used. Translucent bar may overlay an input and make it difficult to edit.
Param Type DefaultValue Description
bTranslucent boolean false

New value for property translucent