class sap.ui.layout.BlockLayout

Control sample: sap.ui.layout.BlockLayout
Visiblity: public
UX Guidelines: Block Layout
Implements:
Available since: N/A
Module: sap/ui/layout/BlockLayout
Application Component: CA-UI5-CTR

The BlockLayout is used to display several objects in a section-based manner.

Overview

The BlockLayout uses horizontal and vertical subdivisions, and full-width banners to display a set of elements. By placing pictorial and textual elements side-by-side in different blocks, you can establish a visual connection between blocks and between similar elements.

Structure

The BlockLayout contains BlockLayout cells. Every cell consists of a title and content. The title can be text or a link.

Special full-width sections of the BlockLayout allow horizontal scrolling through a set of blocks.

The BlockLayout comes in five predefined types for background colors:

Background colors are attached directly to the blocks of the layout.

Note: With version 1.48 colors can be set for each individual cell. There are 11 pre-defined color sets, each with 4 different shades for the Belize theme and 6 different shades for the Fiori 3 theme. The main colors of the sets can be changed in Theme Designer. To change the background of a particular cell, set backgroundColorSet (main color) and backgroundColorShade (shade).

Note: Usage of disabled, emphasized or subtle links as titles is not recommended. Dark background designs, for example Accent, are not fully supported with regards to Accessibility when used with links as titles.

Usage

When to use

When not to use

Responsive Behavior


Constructor

Constructor for a new BlockLayout.

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.ui.layout.BlockLayout(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
background sap.ui.layout.BlockBackgroundType Default

Determines the background used for the Layout

Since: 1.42.

Visibility: public
keepFontSize boolean false

Keeps the font-size of the contents as is, independent from the screen size.

Since: 1.52.

Visibility: public

Aggregations

Default Aggregation: content

Name Cardinality Type Description
content (default) 0..n sap.ui.layout.BlockLayoutRow

The Rows to be included in the content of the control


Methods Overview

Method Description
addContent

Adds some content to the aggregation content.

destroyContent

Destroys all the content in the aggregation content.

sap.ui.layout.BlockLayout.extend

Creates a new subclass of class sap.ui.layout.BlockLayout 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.

getBackground

Gets current value of property background.

Determines the background used for the Layout

Default value is "Default".

getContent

Gets content of aggregation content.

The Rows to be included in the content of the control

getKeepFontSize

Gets current value of property keepFontSize.

Keeps the font-size of the contents as is, independent from the screen size.

Default value is false.

sap.ui.layout.BlockLayout.getMetadata

Returns a metadata object for class sap.ui.layout.BlockLayout.

indexOfContent

Checks for the provided sap.ui.layout.BlockLayoutRow in the aggregation content. and returns its index if found or -1 otherwise.

insertContent

Inserts a content into the aggregation content.

removeAllContent

Removes all the controls from the aggregation content.

Additionally, it unregisters them from the hosting UIArea.

removeContent

Removes a content from the aggregation content.

setBackground

Sets a new value for property background.

Determines the background used for the Layout

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

Default value is "Default".

setKeepFontSize

Sets a new value for property keepFontSize.

Keeps the font-size of the contents as is, independent from the screen size.

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

Default value is false.

addContent

Adds some content to the aggregation content.

Param Type DefaultValue Description
oContent sap.ui.layout.BlockLayoutRow

The content to add; if empty, nothing is inserted

destroyContent

Destroys all the content in the aggregation content.

sap.ui.layout.BlockLayout.extend

Creates a new subclass of class sap.ui.layout.BlockLayout 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

getBackground

Gets current value of property background.

Determines the background used for the Layout

Default value is "Default".

getContent

Gets content of aggregation content.

The Rows to be included in the content of the control

getKeepFontSize

Gets current value of property keepFontSize.

Keeps the font-size of the contents as is, independent from the screen size.

Default value is false.

sap.ui.layout.BlockLayout.getMetadata

Returns a metadata object for class sap.ui.layout.BlockLayout.

indexOfContent

Checks for the provided sap.ui.layout.BlockLayoutRow in the aggregation content. and returns its index if found or -1 otherwise.

Param Type DefaultValue Description
oContent sap.ui.layout.BlockLayoutRow

The content whose index is looked for

insertContent

Inserts a content into the aggregation content.

Param Type DefaultValue Description
oContent sap.ui.layout.BlockLayoutRow

The content to insert; if empty, nothing is inserted

iIndex int

The 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

removeAllContent

Removes all the controls from the aggregation content.

Additionally, it unregisters them from the hosting UIArea.

removeContent

Removes a content from the aggregation content.

Param Type DefaultValue Description
vContent int string sap.ui.layout.BlockLayoutRow

The content to remove or its index or id

setBackground

Sets a new value for property background.

Determines the background used for the Layout

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

Default value is "Default".

Param Type DefaultValue Description
sBackground sap.ui.layout.BlockBackgroundType "Default"

New value for property background

setKeepFontSize

Sets a new value for property keepFontSize.

Keeps the font-size of the contents as is, independent from the screen size.

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

Default value is false.

Param Type DefaultValue Description
bKeepFontSize boolean false

New value for property keepFontSize