Class sap.m.IconTabBarModule: sap/m/IconTabBar

extends Control

The IconTabBar represents a collection of tabs with associated content.

Overview

The IconTabBar can be used for navigation within an object, or as a filter. Different types of IconTabBar are used based on the contents.

  • Filter - There is only one main content for all tabs. The main content can be filtered, based on the selected tab.
  • Normal tab bar - The contents of each tab are independent from each other.
  • Combination of the above - There can be both filtered and independent contents.

Structure

The IconTabBar can hold two types of entities sap.m.IconTabFilter and sap.m.IconTabSeparator

The IconTabBarFilter holds all information on an item - text, icon and count.

The IconTabBarSeparator holds an icon that can be used to show a process that runs from item to item.

Usage

Text only

Uses text labels as tabs with optional counter

  • Used when there are no suitable icons for all items.
  • Used when longer labels are needed.
  • If headerMode property is set to Inline the text and the count are displayed in one line.
  • UpperCase is disabled.
  • Use title case.

Icon Tabs

Round tabs with optional counter and label

  • Used when there are unique icons for all items.
  • Only shorter labels are possible.
  • Provide labels for all icons or for none. Do not mix these.

Tabs as filters

Tabs with filtered content from the same set of items

  • Provide an "All" tab to show all items without filtering.
  • Use counters to show the number of items in each filter.

Tabs as process steps

Tabs show a single step in a process

  • Use an arrow (e.g. triple-chevron) as a separator to connect the steps.
  • Use counters to show the number of items in each filter.

Responsive Behavior

  • Text-only tabs are never truncated.
  • Use the expandable property to specify whether users can collapse the tab container (default = true).
  • On desktop, tabs can be dragged and dropped (property enableTabReordering).
  • If you have a large number of tabs, you can scroll through them with the arrows. Additionally all tabs are available in an overflow button (property showOverflowSelectList).
Constructor Summary
new sap.m.IconTabBar(sId?, mSettings?)Constructor for a new IconTabBar.
Event Summary
expand(oControlEvent)Indicates that the tab will expand or collapse.
select(oControlEvent)Fires when an item is selected.
Events borrowed from class sap.ui.core.Control
Method Summary
sap.m.IconTabBar.extend(sClassName, oClassInfo?, FNMetaImpl?)Creates a new subclass of class sap.m.IconTabBar with name sClassName and enriches it with the information contained in oClassInfo.
sap.m.IconTabBar.getMetadata()Returns a metadata object for class sap.m.IconTabBar.
addContent(oContent)Adds some content to the aggregation content.
addItem(oItem)Adds some item to the aggregation items.
attachExpand(oData?, fnFunction, oListener?)Attaches event handler fnFunction to the expand event of this sap.m.IconTabBar.
attachSelect(oData?, fnFunction, oListener?)Attaches event handler fnFunction to the select event of this sap.m.IconTabBar.
bindAggregation(sAggregationName, oBindingInfo)Forwards aggregations with the name of items to the internal list.
destroyContent()Destroys all the content in the aggregation content.
destroyItems()Destroys all the items in the aggregation items.
detachExpand(fnFunction, oListener)Detaches event handler fnFunction from the expand event of this sap.m.IconTabBar.
detachSelect(fnFunction, oListener)Detaches event handler fnFunction from the select event of this sap.m.IconTabBar.
fireExpand(mParameters?)Fires event expand to attached listeners.
fireSelect(mParameters?)Fires event select to attached listeners.
getApplyContentPadding()Gets current value of property applyContentPadding.
getBackgroundDesign()Gets current value of property backgroundDesign.
getContent()Gets content of aggregation content.
getEnableTabReordering()Gets current value of property enableTabReordering.
getExpandable()Gets current value of property expandable.
getExpanded()Gets current value of property expanded.
getHeaderBackgroundDesign()Gets current value of property headerBackgroundDesign.
getHeaderMode()Gets current value of property headerMode.
getItems()Gets content of aggregation items.
getSelectedKey()Reflector for the internal header's selectedKey property.
getShowOverflowSelectList()Gets current value of property showOverflowSelectList.
getStretchContentHeight()Gets current value of property stretchContentHeight.
getUpperCase()Gets current value of property upperCase.
indexOfContent(oContent)Checks for the provided sap.ui.core.Control in the aggregation content.
indexOfItem(oItem)Checks for the provided sap.m.IconTab in the aggregation items.
insertContent(oContent, iIndex)Inserts a content into the aggregation content.
insertItem(oItem, iIndex)Inserts a item into the aggregation items.
removeAllContent()Removes all the controls from the aggregation content.
removeAllItems()Removes all the controls from the aggregation items.
removeContent(vContent)Removes a content from the aggregation content.
removeItem(vItem)Removes a item from the aggregation items.
setApplyContentPadding(bApplyContentPadding)Sets a new value for property applyContentPadding.
setBackgroundDesign(sBackgroundDesign)Sets a new value for property backgroundDesign.
setEnableTabReordering(value)Sets the enableTabReordering property.
setExpandable(bExpandable)Sets the tabs as collapsible and expandable without re-rendering the control.
setExpanded(bExpanded)Sets the tab content as expanded.
setHeaderBackgroundDesign(headerBackgroundDesign)Sets the header background design.
setHeaderMode(mode)Sets the header mode.
setSelectedKey(sValue)Reflector for the internal header's selectedKey property.
setShowOverflowSelectList(value)Sets the showOverflowSelectList property.
setStretchContentHeight(bStretchContentHeight)Sets a new value for property stretchContentHeight.
setUpperCase(bUpperCase)Sets a new value for property upperCase.
getShowSelection()Gets current value of property showSelection.
setShowSelection(bShowSelection)Sets a new value for property showSelection.
Constructor Detail
new sap.m.IconTabBar(sId?, mSettings?)

Constructor for a new IconTabBar.

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:

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
expand(oControlEvent)
Indicates that the tab will expand or collapse.
Parameters:
sap.ui.base.EventoControlEvent
sap.ui.base.EventProvideroControlEvent.getSource
objectoControlEvent.getParameters
booleanoControlEvent.getParameters.expandIf the tab will expand, this is true.
booleanoControlEvent.getParameters.collapseIf the tab will collapse, this is true.
Since:
1.15.0
select(oControlEvent)
Fires when an item is selected.
Parameters:
sap.ui.base.EventoControlEvent
sap.ui.base.EventProvideroControlEvent.getSource
objectoControlEvent.getParameters
sap.m.IconTabFilteroControlEvent.getParameters.itemThe selected item
stringoControlEvent.getParameters.keyThe key of the selected item
sap.m.IconTabFilteroControlEvent.getParameters.selectedItemThe selected item
stringoControlEvent.getParameters.selectedKeyThe key of the selected item
Method Detail
sap.m.IconTabBar.extend(sClassName, oClassInfo?, FNMetaImpl?): function

Creates a new subclass of class sap.m.IconTabBar 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.IconTabBar.getMetadata(): sap.ui.base.Metadata
Returns a metadata object for class sap.m.IconTabBar.
Returns:
sap.ui.base.MetadataMetadata object describing this class
addContent(oContent): sap.m.IconTabBar
Adds some content to the aggregation content.
Parameters:
sap.ui.core.ControloContentthe content to add; if empty, nothing is inserted
Returns:
sap.m.IconTabBarReference to this in order to allow method chaining
addItem(oItem): sap.m.IconTabBar
Adds some item to the aggregation items.
Parameters:
sap.m.IconTaboItemthe item to add; if empty, nothing is inserted
Returns:
sap.m.IconTabBarReference to this in order to allow method chaining
attachExpand(oData?, fnFunction, oListener?): sap.m.IconTabBar

Attaches event handler fnFunction to the expand event of this sap.m.IconTabBar.

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

Indicates that the tab will expand or collapse.

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.IconTabBar itself
Returns:
sap.m.IconTabBarReference to this in order to allow method chaining
Since:
1.15.0
attachSelect(oData?, fnFunction, oListener?): sap.m.IconTabBar

Attaches event handler fnFunction to the select event of this sap.m.IconTabBar.

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

Fires when an item is selected.

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.IconTabBar itself
Returns:
sap.m.IconTabBarReference to this in order to allow method chaining
bindAggregation(sAggregationName, oBindingInfo): sap.m.IconTabBar
Forwards aggregations with the name of items to the internal list.
Parameters:
stringsAggregationNameThe name for the binding
objectoBindingInfoThe configuration parameters for the binding
Returns:
sap.m.IconTabBarthis pointer for chaining
destroyContent(): sap.m.IconTabBar
Destroys all the content in the aggregation content.
Returns:
sap.m.IconTabBarReference to this in order to allow method chaining
destroyItems(): sap.m.IconTabBar
Destroys all the items in the aggregation items.
Returns:
sap.m.IconTabBarReference to this in order to allow method chaining
detachExpand(fnFunction, oListener): sap.m.IconTabBar

Detaches event handler fnFunction from the expand event of this sap.m.IconTabBar.

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.IconTabBarReference to this in order to allow method chaining
Since:
1.15.0
detachSelect(fnFunction, oListener): sap.m.IconTabBar

Detaches event handler fnFunction from the select event of this sap.m.IconTabBar.

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.IconTabBarReference to this in order to allow method chaining
fireExpand(mParameters?): sap.m.IconTabBar
Fires event expand to attached listeners.
Parameters:
objectmParameters?Parameters to pass along with the event
booleanmParameters.expand?If the tab will expand, this is true.
booleanmParameters.collapse?If the tab will collapse, this is true.
Returns:
sap.m.IconTabBarReference to this in order to allow method chaining
Since:
1.15.0
fireSelect(mParameters?): sap.m.IconTabBar
Fires event select to attached listeners.
Parameters:
objectmParameters?Parameters to pass along with the event
sap.m.IconTabFiltermParameters.item?The selected item
stringmParameters.key?The key of the selected item
sap.m.IconTabFiltermParameters.selectedItem?The selected item
stringmParameters.selectedKey?The key of the selected item
Returns:
sap.m.IconTabBarReference to this in order to allow method chaining
getApplyContentPadding(): boolean

Gets current value of property applyContentPadding.

Determines whether the IconTabBar content fits to the full area. The paddings are removed if it's set to false.

Default value is true.

Returns:
booleanValue of property applyContentPadding
Since:
1.26
getBackgroundDesign(): sap.m.BackgroundDesign

Gets current value of property backgroundDesign.

Specifies the background color of the IconTabBar.

Depending on the theme, you can change the state of the background color to "Solid", "Translucent", or "Transparent". Default is "Solid".

Default value is Solid.

Returns:
sap.m.BackgroundDesignValue of property backgroundDesign
Since:
1.26
getContent(): sap.ui.core.Control[]

Gets content of aggregation content.

Represents the contents displayed below the IconTabBar. If there are multiple contents, they are rendered after each other. The developer has to manage to display the right one or use the content aggregation inside the IconTabFilter (which will be displayed instead if it is set).

Returns:
sap.ui.core.Control[]
getEnableTabReordering(): boolean

Gets current value of property enableTabReordering.

Specifies whether tab reordering is enabled. Relevant only for desktop devices.

Default value is false.

Returns:
booleanValue of property enableTabReordering
Since:
1.46
getExpandable(): boolean

Gets current value of property expandable.

Defines if the tabs are collapsible and expandable.

Default value is true.

Returns:
booleanValue of property expandable
Since:
1.15.0
getExpanded(): boolean

Gets current value of property expanded.

Indicates if the actual tab content is expanded or not.

Default value is true.

Returns:
booleanValue of property expanded
Since:
1.15.0
getHeaderBackgroundDesign(): sap.m.BackgroundDesign

Gets current value of property headerBackgroundDesign.

Specifies the background color of the header.

Depending on the theme, you can change the state of the background color to "Solid", "Translucent", or "Transparent". Default is "Solid".

Default value is Solid.

Returns:
sap.m.BackgroundDesignValue of property headerBackgroundDesign
Since:
1.44
getHeaderMode(): sap.m.IconTabHeaderMode

Gets current value of property headerMode.

Specifies the header mode. Note: The Inline mode works only if no icons are set.

Default value is Standard.

Returns:
sap.m.IconTabHeaderModeValue of property headerMode
Since:
1.40
getItems(): sap.m.IconTab[]

Gets content of aggregation items.

The items displayed in the IconTabBar.

Returns:
sap.m.IconTab[]
getSelectedKey(): string
Reflector for the internal header's selectedKey property.
Returns:
stringThe current property value
getShowOverflowSelectList(): boolean

Gets current value of property showOverflowSelectList.

Specifies if the overflow select list is displayed.

The overflow select list represents a list, where all tab filters are displayed, so the user can select specific tab filter easier.

Default value is false.

Returns:
booleanValue of property showOverflowSelectList
Since:
1.42
getStretchContentHeight(): boolean

Gets current value of property stretchContentHeight.

Determines whether the IconTabBar height is stretched to the maximum possible height of its parent container. As a prerequisite, the height of the parent container must be defined as a fixed value.

Default value is false.

Returns:
booleanValue of property stretchContentHeight
Since:
1.26
getUpperCase(): boolean

Gets current value of property upperCase.

Determines whether the text of the icon tab filter (not the count) is displayed in uppercase.

Default value is false.

Returns:
booleanValue of property upperCase
Since:
1.22
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
indexOfItem(oItem): int
Checks for the provided sap.m.IconTab in the aggregation items. and returns its index if found or -1 otherwise.
Parameters:
sap.m.IconTaboItemThe item 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.IconTabBar
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.IconTabBarReference to this in order to allow method chaining
insertItem(oItem, iIndex): sap.m.IconTabBar
Inserts a item into the aggregation items.
Parameters:
sap.m.IconTaboItemthe item to insert; if empty, nothing is inserted
intiIndexthe 0-based index the item should be inserted at; for a negative value of iIndex, the item is inserted at position 0; for a value greater than the current size of the aggregation, the item is inserted at the last position
Returns:
sap.m.IconTabBarReference to this in order to allow method chaining
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)
removeAllItems(): sap.m.IconTab[]

Removes all the controls from the aggregation items.

Additionally, it unregisters them from the hosting UIArea.

Returns:
sap.m.IconTab[]An array of the removed elements (might be empty)
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
removeItem(vItem): sap.m.IconTab
Removes a item from the aggregation items.
Parameters:
int|string|sap.m.IconTabvItemThe item to remove or its index or id
Returns:
sap.m.IconTabThe removed item or null
setApplyContentPadding(bApplyContentPadding): sap.m.IconTabBar

Sets a new value for property applyContentPadding.

Determines whether the IconTabBar content fits to the full area. The paddings are removed if it's set to false.

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

Default value is true.

Parameters:
booleanbApplyContentPaddingNew value for property applyContentPadding
Returns:
sap.m.IconTabBarReference to this in order to allow method chaining
Since:
1.26
setBackgroundDesign(sBackgroundDesign): sap.m.IconTabBar

Sets a new value for property backgroundDesign.

Specifies the background color of the IconTabBar.

Depending on the theme, you can change the state of the background color to "Solid", "Translucent", or "Transparent". Default is "Solid".

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

Default value is Solid.

Parameters:
sap.m.BackgroundDesignsBackgroundDesignNew value for property backgroundDesign
Returns:
sap.m.IconTabBarReference to this in order to allow method chaining
Since:
1.26
setEnableTabReordering(value): sap.m.IconTabBar
Sets the enableTabReordering property.
Parameters:
booleanvalueNew value for enableTabReordering
Returns:
sap.m.IconTabBarthis pointer for chaining
setExpandable(bExpandable): sap.m.IconTabBar
Sets the tabs as collapsible and expandable without re-rendering the control.
Parameters:
booleanbExpandablenew parameter value
Returns:
sap.m.IconTabBarthis pointer for chaining
setExpanded(bExpanded): sap.m.IconTabBar
Sets the tab content as expanded.
Parameters:
booleanbExpandednew parameter value
Returns:
sap.m.IconTabBarthis pointer for chaining
setHeaderBackgroundDesign(headerBackgroundDesign): sap.m.IconTabBar
Sets the header background design.
Parameters:
sap.m.BackgroundDesignheaderBackgroundDesignNew parameter value
Returns:
sap.m.IconTabBarthis pointer for chaining
setHeaderMode(mode): sap.m.IconTabBar
Sets the header mode.
Parameters:
sap.m.IconTabHeaderModemodenew parameter value
Returns:
sap.m.IconTabBarthis pointer for chaining
setSelectedKey(sValue): sap.m.IconTabBar
Reflector for the internal header's selectedKey property.
Parameters:
stringsValuethe new value
Returns:
sap.m.IconTabBarthis pointer for chaining
setShowOverflowSelectList(value): sap.m.IconTabBar
Sets the showOverflowSelectList property.
Parameters:
booleanvalueNew value for showOverflowSelectList
Returns:
sap.m.IconTabBarthis pointer for chaining
setStretchContentHeight(bStretchContentHeight): sap.m.IconTabBar

Sets a new value for property stretchContentHeight.

Determines whether the IconTabBar height is stretched to the maximum possible height of its parent container. As a prerequisite, the height of the parent container must be defined as a fixed value.

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

Default value is false.

Parameters:
booleanbStretchContentHeightNew value for property stretchContentHeight
Returns:
sap.m.IconTabBarReference to this in order to allow method chaining
Since:
1.26
setUpperCase(bUpperCase): sap.m.IconTabBar

Sets a new value for property upperCase.

Determines whether the text of the icon tab filter (not the count) is displayed in uppercase.

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

Default value is false.

Parameters:
booleanbUpperCaseNew value for property upperCase
Returns:
sap.m.IconTabBarReference to this in order to allow method chaining
Since:
1.22
getShowSelection(): boolean

Gets current value of property showSelection.

Defines whether the current selection should be visualized.

Default value is true.

Returns:
booleanValue of property showSelection
Deprecated API:
As of 1.15.0. Regarding to changes of this control this property is not needed anymore.
setShowSelection(bShowSelection): sap.m.IconTabBar

Sets a new value for property showSelection.

Defines whether the current selection should be visualized.

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

Default value is true.

Parameters:
booleanbShowSelectionNew value for property showSelection
Returns:
sap.m.IconTabBarReference to this in order to allow method chaining
Deprecated API:
As of 1.15.0. Regarding to changes of this control this property is not needed anymore.