class sap.uxap.ObjectPageSubSection

Visiblity: public
UX Guidelines:
Implements:
Available since: N/A
Module: sap/uxap/ObjectPageSubSection
Application Component: CA-UI5-CTR

Second-level information container of an sap.uxap.ObjectPageLayout.

An ObjectPageSubSection may only be used within sections in the ObjectPageLayout. Subsections are used to display primary information in the blocks aggregation (always visible) and not-so-important information in the moreBlocks aggregation. The content in the moreBlocks aggregation is initially hidden, but may be accessed with a "See more" (...) button.

As of version 1.61, applications can enable auto-expand of the subsections to fit the sections container by adding the sapUxAPObjectPageSubSectionFitContainer class to the subsection. This is useful in situations where the sub-section contains a control that has “100%” height, for example, sap.ui.table.Table with visibleRowCountMode set to Auto.

Note: This control is intended to be used only as part of the ObjectPageLayout.


Constructor

Constructor for a new ObjectPageSubSection.

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.uxap.ObjectPageSubSection(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
mode sap.uxap.ObjectPageSubSectionMode Collapsed

A mode property that will be passed to the controls in the blocks and moreBlocks aggregations. Only relevant if these aggregations use Object page blocks.

Visibility: public
showTitle boolean true

Determines whether to display the SubSection title or not.

Note: If a subsection is the only one (or the only one visible) within a section, its title is displayed instead of the section title even if this property is set to false. To hide the title of a subsection which is the only one (or the only one visible), you need to set the showTitle properties to false for both the section and its subsection.

Since: 1.77.

Visibility: public
titleUppercase boolean false

Determines whether the Subsection title is displayed in upper case.

Visibility: public

Borrowed Properties

Name Type Default Value Description
importance sap.uxap.Importance High

Determines whether the section will be hidden on low resolutions.

Since: 1.32.0.

Visibility: public
title string

Defines the title of the respective section/subsection.

Note: If a subsection is the only one (or the only one visible) within a section, its title is displayed instead of the section title. This behavior is true even if the showTitle propeprty of sap.uxap.ObjectPageSubSection is set to false.

Visibility: public
titleLevel sap.ui.core.TitleLevel Auto

Determines the ARIA level of the ObjectPageSectionBase title. The ARIA level is used by assisting technologies, such as screen readers, to create a hierarchical site map for faster navigation.

Note: Defining a titleLevel will add aria-level attribute from 1 to 6, instead of changing the ObjectPageSectionBase title HTML tag from H1 to H6.
For example: if titleLevel is TitleLevel.H1, it will result as aria-level of 1 added to the ObjectPageSectionBase title.

Since: 1.44.0.

Visibility: public
visible boolean true

Invisible ObjectPageSectionBase are not rendered

Visibility: public

Aggregations

Default Aggregation: blocks

Name Cardinality Type Description
_grid 0..1 sap.ui.core.Control

Internal grid aggregation

actions 0..n sap.ui.core.Control

Actions available for this subsection.

Although this aggregation accepts type sap.ui.core.Control, it is strongly recommended to use only simple controls, such as buttons, so that the layout of the app is preserved.

Note: Keep in mind that the controls set in the actions aggregation of ObjectPageSubSection do NOT have overflow behavior. If the available space is not enough, the controls will be displayed on more lines.

blocks (default) 0..n sap.ui.core.Control

Controls to be displayed in the subsection

Note: The SAP Fiori Design guidelines require that the ObjectPageHeader's content and the ObjectPage's subsection content are aligned vertically. When using sap.ui.layout.form.Form, sap.m.Panel, sap.m.Table and sap.m.List in the subsection content area of ObjectPage, if the content is not already aligned, you need to adjust their left text offset to achieve the vertical alignment. To do this, apply the sapUxAPObjectPageSubSectionAlignContent CSS class to them and set their width property to auto (if not set by default).

Don't use the sapUxAPObjectPageSubSectionAlignContent CSS class in the following cases:

  • In combination with ResponsiveLayout, because ResponsiveLayout applies custom paddings. To align items with sapUxAPObjectPageSubSectionAlignContent, use ColumnLayout.
  • If there are multiple controls in the same ObjectPageSubSection, because the CSS class interferes with their alignment.
Example:

 <Form class="sapUxAPObjectPageSubSectionAlignContent" width="auto"></Form> 

moreBlocks 0..n sap.ui.core.Control

Additional controls to display when the Show more / See all / (...) button is pressed

Borrowed Aggregations

Name Cardinality Type Description
customAnchorBarButton 0..1 sap.m.Button

The custom button that will provide a link to the section in the ObjectPageLayout anchor bar. This button will be used as a custom template to be into the ObjectPageLayout anchorBar area, therefore property changes happening on this button template after the first rendering won't affect the actual button copy used in the anchorBar.

If you want to change some of the button properties, you would need to bind them to a model.


Methods Overview

Method Description
_setBorrowedTitleDomId

Sets DOM ID of the Title borrowed from this SubSection

addAction

Adds some action to the aggregation actions.

addBlock

Adds some block to the aggregation blocks.

addMoreBlock

Adds some moreBlock to the aggregation moreBlocks.

destroyActions

Destroys all the actions in the aggregation actions.

destroyBlocks

Destroys all the blocks in the aggregation blocks.

destroyMoreBlocks

Destroys all the moreBlocks in the aggregation moreBlocks.

sap.uxap.ObjectPageSubSection.extend

Creates a new subclass of class sap.uxap.ObjectPageSubSection with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.uxap.ObjectPageSectionBase.extend.

getActions

Gets content of aggregation actions.

Actions available for this subsection.

Although this aggregation accepts type sap.ui.core.Control, it is strongly recommended to use only simple controls, such as buttons, so that the layout of the app is preserved.

Note: Keep in mind that the controls set in the actions aggregation of ObjectPageSubSection do NOT have overflow behavior. If the available space is not enough, the controls will be displayed on more lines.

getBlocks

Gets content of aggregation blocks.

Controls to be displayed in the subsection

Note: The SAP Fiori Design guidelines require that the ObjectPageHeader's content and the ObjectPage's subsection content are aligned vertically. When using sap.ui.layout.form.Form, sap.m.Panel, sap.m.Table and sap.m.List in the subsection content area of ObjectPage, if the content is not already aligned, you need to adjust their left text offset to achieve the vertical alignment. To do this, apply the sapUxAPObjectPageSubSectionAlignContent CSS class to them and set their width property to auto (if not set by default).

Don't use the sapUxAPObjectPageSubSectionAlignContent CSS class in the following cases:

  • In combination with ResponsiveLayout, because ResponsiveLayout applies custom paddings. To align items with sapUxAPObjectPageSubSectionAlignContent, use ColumnLayout.
  • If there are multiple controls in the same ObjectPageSubSection, because the CSS class interferes with their alignment.
Example:

 <Form class="sapUxAPObjectPageSubSectionAlignContent" width="auto"></Form> 

sap.uxap.ObjectPageSubSection.getMetadata

Returns a metadata object for class sap.uxap.ObjectPageSubSection.

getMode

Gets current value of property mode.

A mode property that will be passed to the controls in the blocks and moreBlocks aggregations. Only relevant if these aggregations use Object page blocks.

Default value is Collapsed.

getMoreBlocks

Gets content of aggregation moreBlocks.

Additional controls to display when the Show more / See all / (...) button is pressed

getShowTitle

Gets current value of property showTitle.

Determines whether to display the SubSection title or not.

Note: If a subsection is the only one (or the only one visible) within a section, its title is displayed instead of the section title even if this property is set to false. To hide the title of a subsection which is the only one (or the only one visible), you need to set the showTitle properties to false for both the section and its subsection.

Default value is true.

getTitleUppercase

Gets current value of property titleUppercase.

Determines whether the Subsection title is displayed in upper case.

Default value is false.

indexOfAction

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

indexOfBlock

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

indexOfMoreBlock

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

insertAction

Inserts a action into the aggregation actions.

insertBlock

Adds an sap.uxap.BlockBase instance to the blocks aggregation.

Note: The insertBlock method is not supported by design. If used, it works as an addBlock, adding a single block to the end of the blocks aggregation.

insertMoreBlock

Adds an sap.uxap.BlockBase instance to the moreBlocks aggregation.

Note: The insertMoreBlock method is not supported by design. If used, it works as an addMoreBlock, adding a single block to the end of the moreBlocks aggregation.

removeAction

Removes a action from the aggregation actions.

removeAllActions

Removes all the controls from the aggregation actions.

Additionally, it unregisters them from the hosting UIArea.

removeAllBlocks

Removes all the controls from the aggregation blocks.

Additionally, it unregisters them from the hosting UIArea.

removeAllMoreBlocks

Removes all the controls from the aggregation moreBlocks.

Additionally, it unregisters them from the hosting UIArea.

removeBlock

Removes a block from the aggregation blocks.

removeMoreBlock

Removes a moreBlock from the aggregation moreBlocks.

setMode

Sets a new value for property mode.

A mode property that will be passed to the controls in the blocks and moreBlocks aggregations. Only relevant if these aggregations use Object page blocks.

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

Default value is Collapsed.

setShowTitle

Sets a new value for property showTitle.

Determines whether to display the SubSection title or not.

Note: If a subsection is the only one (or the only one visible) within a section, its title is displayed instead of the section title even if this property is set to false. To hide the title of a subsection which is the only one (or the only one visible), you need to set the showTitle properties to false for both the section and its subsection.

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

Default value is true.

setTitleUppercase

Sets a new value for property titleUppercase.

Determines whether the Subsection title is displayed in upper case.

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

Default value is false.

_setBorrowedTitleDomId

Sets DOM ID of the Title borrowed from this SubSection

Param Type DefaultValue Description
sId string

the ID of the DOM Element

addAction

Adds some action to the aggregation actions.

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

The action to add; if empty, nothing is inserted

addBlock

Adds some block to the aggregation blocks.

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

The block to add; if empty, nothing is inserted

addMoreBlock

Adds some moreBlock to the aggregation moreBlocks.

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

The moreBlock to add; if empty, nothing is inserted

destroyActions

Destroys all the actions in the aggregation actions.

destroyBlocks

Destroys all the blocks in the aggregation blocks.

destroyMoreBlocks

Destroys all the moreBlocks in the aggregation moreBlocks.

sap.uxap.ObjectPageSubSection.extend

Creates a new subclass of class sap.uxap.ObjectPageSubSection with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.uxap.ObjectPageSectionBase.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

getActions

Gets content of aggregation actions.

Actions available for this subsection.

Although this aggregation accepts type sap.ui.core.Control, it is strongly recommended to use only simple controls, such as buttons, so that the layout of the app is preserved.

Note: Keep in mind that the controls set in the actions aggregation of ObjectPageSubSection do NOT have overflow behavior. If the available space is not enough, the controls will be displayed on more lines.

getBlocks

Gets content of aggregation blocks.

Controls to be displayed in the subsection

Note: The SAP Fiori Design guidelines require that the ObjectPageHeader's content and the ObjectPage's subsection content are aligned vertically. When using sap.ui.layout.form.Form, sap.m.Panel, sap.m.Table and sap.m.List in the subsection content area of ObjectPage, if the content is not already aligned, you need to adjust their left text offset to achieve the vertical alignment. To do this, apply the sapUxAPObjectPageSubSectionAlignContent CSS class to them and set their width property to auto (if not set by default).

Don't use the sapUxAPObjectPageSubSectionAlignContent CSS class in the following cases:

Example:

 <Form class="sapUxAPObjectPageSubSectionAlignContent" width="auto"></Form> 

sap.uxap.ObjectPageSubSection.getMetadata

Returns a metadata object for class sap.uxap.ObjectPageSubSection.

getMode

Gets current value of property mode.

A mode property that will be passed to the controls in the blocks and moreBlocks aggregations. Only relevant if these aggregations use Object page blocks.

Default value is Collapsed.

getMoreBlocks

Gets content of aggregation moreBlocks.

Additional controls to display when the Show more / See all / (...) button is pressed

getShowTitle

Gets current value of property showTitle.

Determines whether to display the SubSection title or not.

Note: If a subsection is the only one (or the only one visible) within a section, its title is displayed instead of the section title even if this property is set to false. To hide the title of a subsection which is the only one (or the only one visible), you need to set the showTitle properties to false for both the section and its subsection.

Default value is true.

getTitleUppercase

Gets current value of property titleUppercase.

Determines whether the Subsection title is displayed in upper case.

Default value is false.

indexOfAction

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

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

The action whose index is looked for

indexOfBlock

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

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

The block whose index is looked for

indexOfMoreBlock

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

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

The moreBlock whose index is looked for

insertAction

Inserts a action into the aggregation actions.

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

The action to insert; if empty, nothing is inserted

iIndex int

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

insertBlock

Adds an sap.uxap.BlockBase instance to the blocks aggregation.

Note: The insertBlock method is not supported by design. If used, it works as an addBlock, adding a single block to the end of the blocks aggregation.

Param Type DefaultValue Description
oObject sap.uxap.BlockBase

The sap.uxap.BlockBase instance

iIndex int

The insertion index

insertMoreBlock

Adds an sap.uxap.BlockBase instance to the moreBlocks aggregation.

Note: The insertMoreBlock method is not supported by design. If used, it works as an addMoreBlock, adding a single block to the end of the moreBlocks aggregation.

Param Type DefaultValue Description
oObject sap.uxap.BlockBase

The sap.uxap.BlockBase instance

iIndex int

The insertion index

removeAction

Removes a action from the aggregation actions.

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

The action to remove or its index or id

removeAllActions

Removes all the controls from the aggregation actions.

Additionally, it unregisters them from the hosting UIArea.

removeAllBlocks

Removes all the controls from the aggregation blocks.

Additionally, it unregisters them from the hosting UIArea.

removeAllMoreBlocks

Removes all the controls from the aggregation moreBlocks.

Additionally, it unregisters them from the hosting UIArea.

removeBlock

Removes a block from the aggregation blocks.

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

The block to remove or its index or id

removeMoreBlock

Removes a moreBlock from the aggregation moreBlocks.

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

The moreBlock to remove or its index or id

setMode

Sets a new value for property mode.

A mode property that will be passed to the controls in the blocks and moreBlocks aggregations. Only relevant if these aggregations use Object page blocks.

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

Default value is Collapsed.

Param Type DefaultValue Description
sMode sap.uxap.ObjectPageSubSectionMode Collapsed

New value for property mode

setShowTitle

Sets a new value for property showTitle.

Determines whether to display the SubSection title or not.

Note: If a subsection is the only one (or the only one visible) within a section, its title is displayed instead of the section title even if this property is set to false. To hide the title of a subsection which is the only one (or the only one visible), you need to set the showTitle properties to false for both the section and its subsection.

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

Default value is true.

Param Type DefaultValue Description
bShowTitle boolean true

New value for property showTitle

setTitleUppercase

Sets a new value for property titleUppercase.

Determines whether the Subsection title is displayed in upper case.

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
bTitleUppercase boolean false

New value for property titleUppercase