class sap.tnt.ToolHeader

Control sample: sap.tnt.ToolHeader
Visiblity: public
UX Guidelines: Tool Header
Implements: sap.tnt.IToolHeader
Available since: N/A
Module: sap/tnt/ToolHeader
Application Component: CA-UI5-CTR

The ToolHeader control is a horizontal container that is most commonly used to display buttons, labels, and other various input controls.

Overview

The ToolHeader control is based on sap.m.OverflowToolbar. It contains clearly structured menus of commands that are available across the various apps within the same tool layout.

Usage

Fiori 3 theme specifics

In Fiori 3 Default theme the ToolHeader is with dark design unlike most of the other controls. This defines the usage of limited controls inside it, which will result in good design combination.
The ToolHeader stylizes the contained controls with the Shell color parameters, to match the dark design requirement. However, that's not a dark theme.

Only the following controls are supported:

Control name Supported Not supported
sap.m.Text Single line text, text truncation Wrapping
sap.m.Title Single line text, text truncation. Consider using title headings of H4, H5, H6. Wrapping
sap.m.Label Single line text, text truncation Wrapping
sap.m.ObjectStatus Labels, semantic colors Indication colors
sap.ui.core.Icon sap.ui.core.IconColor enumeration for both icons and backgrounds. Interaction state colors
sap.m.Button Buttons in their Back, Default, Transparent and Up types. All four types are over-styled to look as transparent buttons. -
sap.m.MenuButton Emphasized button type. Should be used for triggering Mega menu. If there is no Mega menu, use Title (H6) instead.
Default (over-styled as Transparent) and Transparent types are used for standard menu representation.
-
sap.m.Select Default and IconOnly types. IconOnly looks like a button while Default looks is like an input. Semantic states
sap.m.SearchField Support for the regular state of the control. -
sap.m.IconTabHeader All background design variations (all are transparent). Text tab filters or text and count tab filters in Inline mode only. Semantic colors, icons and separators.
sap.f.Avatar/sap.m.Avatar Support for default (Accent 6) color. Image avatar. -
sap.m.Image Primarily used for displaying the company logo. Interaction states


Constructor

Constructor for a new ToolHeader.

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.

This class does not have its own settings, but all settings applicable to the base type sap.m.OverflowToolbar can be used.

new sap.tnt.ToolHeader(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


Methods Overview

Method Description
sap.tnt.ToolHeader.extend

Creates a new subclass of class sap.tnt.ToolHeader 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.OverflowToolbar.extend.

sap.tnt.ToolHeader.getMetadata

Returns a metadata object for class sap.tnt.ToolHeader.

sap.tnt.ToolHeader.extend

Creates a new subclass of class sap.tnt.ToolHeader 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.OverflowToolbar.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

sap.tnt.ToolHeader.getMetadata

Returns a metadata object for class sap.tnt.ToolHeader.