Class sap.ui.layout.BlockLayoutModule: sap/ui/layout/BlockLayout

extends Control

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 comes in five predefined types for background colors:

  • Layout only (default) - a layout scheme and no background colors
  • Bright - a layout scheme with bright colors
  • Accent - a layout scheme with four pre-defined color sets
  • Dashboard - a layout scheme with additional borders and no background colors
  • Mixed - a layout scheme with a mix of light and dark colors

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

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

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. 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).

Usage

When to use

  • You want to create a catalogue-like page with sections of blocks.
  • The BlockLayout is intended for developing administrative tools and applications.

When not to use

  • You want to display properties or features of one content item. Use a object page or dynamic page instead.

Responsive Behavior

  • The breakpoints of the block layout react to the width of the control itself and not to the actual screen size.
  • On small screens all blocks will wrap to a single scrollable column

Since: 1.34.
Constructor Summary
new sap.ui.layout.BlockLayout(sId?, mSettings?)Constructor for a new BlockLayout.
Events borrowed from class sap.ui.core.Control
Method Summary
sap.ui.layout.BlockLayout.extend(sClassName, oClassInfo?, FNMetaImpl?)Creates a new subclass of class sap.ui.layout.BlockLayout with name sClassName and enriches it with the information contained in oClassInfo.
sap.ui.layout.BlockLayout.getMetadata()Returns a metadata object for class sap.ui.layout.BlockLayout.
addContent(oContent)Adds some content to the aggregation content.
destroyContent()Destroys all the content in the aggregation content.
getBackground()Gets current value of property background.
getContent()Gets content of aggregation content.
indexOfContent(oContent)Checks for the provided sap.ui.layout.BlockLayoutRow in the aggregation content.
insertContent(oContent, iIndex)Inserts a content into the aggregation content.
removeAllContent()Removes all the controls from the aggregation content.
removeContent(vContent)Removes a content from the aggregation content.
Constructor Detail
new sap.ui.layout.BlockLayout(sId?, mSettings?)

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 for a general description of the syntax of the settings object.

The supported settings are:

  • Properties

    • background : sap.ui.layout.BlockBackgroundType (default: Default)

  • Aggregations

    • content : sap.ui.layout.BlockLayoutRow[] (default)

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
Method Detail
sap.ui.layout.BlockLayout.extend(sClassName, oClassInfo?, FNMetaImpl?): function

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.

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.ui.layout.BlockLayout.getMetadata(): sap.ui.base.Metadata
Returns a metadata object for class sap.ui.layout.BlockLayout.
Returns:
sap.ui.base.MetadataMetadata object describing this class
addContent(oContent): sap.ui.layout.BlockLayout
Adds some content to the aggregation content.
Parameters:
sap.ui.layout.BlockLayoutRowoContentthe content to add; if empty, nothing is inserted
Returns:
sap.ui.layout.BlockLayoutReference to this in order to allow method chaining
destroyContent(): sap.ui.layout.BlockLayout
Destroys all the content in the aggregation content.
Returns:
sap.ui.layout.BlockLayoutReference to this in order to allow method chaining

Gets current value of property background.

Determines the background used for the Layout

Default value is Default.

Returns:
sap.ui.layout.BlockBackgroundTypeValue of property background
Since:
1.42

Gets content of aggregation content.

The Rows to be included in the content of the control

Returns:
sap.ui.layout.BlockLayoutRow[]
indexOfContent(oContent): int
Checks for the provided sap.ui.layout.BlockLayoutRow in the aggregation content. and returns its index if found or -1 otherwise.
Parameters:
sap.ui.layout.BlockLayoutRowoContentThe 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.ui.layout.BlockLayout
Inserts a content into the aggregation content.
Parameters:
sap.ui.layout.BlockLayoutRowoContentthe 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.ui.layout.BlockLayoutReference to this in order to allow method chaining
removeAllContent(): sap.ui.layout.BlockLayoutRow[]

Removes all the controls from the aggregation content.

Additionally, it unregisters them from the hosting UIArea.

Returns:
sap.ui.layout.BlockLayoutRow[]An array of the removed elements (might be empty)
removeContent(vContent): sap.ui.layout.BlockLayoutRow
Removes a content from the aggregation content.
Parameters:
int|string|sap.ui.layout.BlockLayoutRowvContentThe content to remove or its index or id
Returns:
sap.ui.layout.BlockLayoutRowThe removed content or null