Class sap.f.DynamicPageModule: sap/f/DynamicPage

extends Control

A layout control, representing a web page, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer.

Overview

The control consist of several components:

  • DynamicPageTitle - consists of a heading on the left side, content in the middle, and actions on the right. The displayed content changes based on the current mode of the DynamicPageHeader.
  • DynamicPageHeader - a generic container, which can contain a single layout control and does not care about the content alignment and responsiveness. The header works in two modes - expanded and snapped and its behavior can be adjusted with the help of different properties.
  • Content area - a generic container, which can have a single UI5 layout control and does not care about the content alignment and responsiveness.
  • Footer - positioned at the bottom with a small offset and used for additional actions, the footer floats above the content. It can be any sap.m.IBar control.

Usage

Use the DynamicPage if you need to have a title, that is always visible and a header, that has configurable Expanding/Snapping functionality. If you don't need the Expanding/Snapping functionality it is better to use the sap.m.Page as a lighter control.

    Notes:
  • If you're displaying a sap.m.FlexBox with non-adaptive content (doesn't stretch to fill the available space), it is recommended to set the fitContainer property of the FlexBox to false.
  • If you are displaying a sap.ui.table.Table, keep in mind that it is non-adaptive and may cause unpredicted behavior for the DynamicPage on smaller screen sizes, such as mobile.
  • Snapping of the DynamicPageTitle is not supported in the following case: When the DynamicPage has a scroll bar, the control usually scrolls to the snapping point - the point, where the DynamicPageHeader is scrolled out completely. However, when there is a scroll bar, but not enough content to reach the snapping point, the snapping is not possible using scrolling.

Responsive Behavior

The responsive behavior of the DynamicPage depends on the behavior of the content that is displayed.


Since: 1.42.
Constructor Summary
new sap.f.DynamicPage(sId?, mSettings?)Constructor for a new DynamicPage.
Events borrowed from class sap.ui.core.Control
Method Summary
sap.f.DynamicPage.extend(sClassName, oClassInfo?, FNMetaImpl?)Creates a new subclass of class sap.f.DynamicPage with name sClassName and enriches it with the information contained in oClassInfo.
sap.f.DynamicPage.getMetadata()Returns a metadata object for class sap.f.DynamicPage.
destroyContent()Destroys the content in the aggregation content.
destroyFooter()Destroys the footer in the aggregation footer.
destroyHeader()Destroys the header in the aggregation header.
destroyTitle()Destroys the title in the aggregation title.
getContent()Gets content of aggregation content.
getFitContent()Gets current value of property fitContent.
getFooter()Gets content of aggregation footer.
getHeader()Gets content of aggregation header.
getHeaderExpanded()Gets current value of property headerExpanded.
getShowFooter()Gets current value of property showFooter.
getTitle()Gets content of aggregation title.
getToggleHeaderOnTitleClick()Gets current value of property toggleHeaderOnTitleClick.
setContent(oContent)Sets the aggregated content.
setFitContent(bFitContent)Sets a new value for property fitContent.
setFooter(oFooter)Sets the aggregated footer.
setHeader(oHeader)Sets the aggregated header.
setHeaderExpanded(bHeaderExpanded)Sets a new value for property headerExpanded.
setPreserveHeaderStateOnScroll(bPreserveHeaderStateOnScroll)Sets a new value for property preserveHeaderStateOnScroll.
setShowFooter(bShowFooter)Sets a new value for property showFooter.
setTitle(oTitle)Sets the aggregated title.
setToggleHeaderOnTitleClick(bToggleHeaderOnTitleClick)Sets a new value for property toggleHeaderOnTitleClick.
Constructor Detail
new sap.f.DynamicPage(sId?, mSettings?)

Constructor for a new DynamicPage.

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

Creates a new subclass of class sap.f.DynamicPage 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.f.DynamicPage.getMetadata(): sap.ui.base.Metadata
Returns a metadata object for class sap.f.DynamicPage.
Returns:
sap.ui.base.MetadataMetadata object describing this class
destroyContent(): sap.f.DynamicPage
Destroys the content in the aggregation content.
Returns:
sap.f.DynamicPageReference to this in order to allow method chaining
destroyFooter(): sap.f.DynamicPage
Destroys the footer in the aggregation footer.
Returns:
sap.f.DynamicPageReference to this in order to allow method chaining
destroyHeader(): sap.f.DynamicPage
Destroys the header in the aggregation header.
Returns:
sap.f.DynamicPageReference to this in order to allow method chaining
destroyTitle(): sap.f.DynamicPage
Destroys the title in the aggregation title.
Returns:
sap.f.DynamicPageReference to this in order to allow method chaining
getContent(): sap.ui.core.Control

Gets content of aggregation content.

DynamicPage content.

Returns:
sap.ui.core.Control
getFitContent(): boolean

Gets current value of property fitContent.

Optimizes DynamicPage responsiveness on small screens and behavior when expanding/collapsing the DynamicPageHeader.

Note: It is recommended to use this property when displaying content of adaptive controls that stretch to fill the available space, such as sap.ui.table.Table and sap.ui.table.AnalyticalTable.

Default value is false.

Returns:
booleanValue of property fitContent
getFooter(): sap.m.IBar

Gets content of aggregation footer.

DynamicPage floating footer.

Returns:
sap.m.IBar

Gets content of aggregation header.

DynamicPage header.

Returns:
sap.f.DynamicPageHeader
getHeaderExpanded(): boolean

Gets current value of property headerExpanded.

Determines whether the header is expanded.

The header can be also expanded/collapsed by user interaction, which requires the property to be internally mutated by the control to reflect the changed state.

Note: As of version 1.48, you can initialize the control in collapsed header state by setting this property to false.

Default value is true.

Returns:
booleanValue of property headerExpanded
getPreserveHeaderStateOnScroll(): boolean

Gets current value of property preserveHeaderStateOnScroll.

Preserves the current header state when scrolling. For example, if the user expands the header by clicking on the title and then scrolls down the page, the header will remain expanded.

Note: Based on internal rules, the value of the property is not always taken into account - for example, when the control is rendered on tablet or mobile and the control`s title and header are with height larger than the given threshold.

Default value is false.

Returns:
booleanValue of property preserveHeaderStateOnScroll
getShowFooter(): boolean

Gets current value of property showFooter.

Determines whether the footer is visible.

Default value is false.

Returns:
booleanValue of property showFooter

Gets content of aggregation title.

DynamicPage title.

Returns:
sap.f.DynamicPageTitle
getToggleHeaderOnTitleClick(): boolean

Gets current value of property toggleHeaderOnTitleClick.

Determines whether the the user can switch between the expanded/collapsed states of the DynamicPageHeader by clicking on the DynamicPageTitle. If set to false, the DynamicPageTitle is not clickable and the application must provide other means for expanding/collapsing the DynamicPageHeader, if necessary.

Default value is true.

Returns:
booleanValue of property toggleHeaderOnTitleClick
setContent(oContent): sap.f.DynamicPage
Sets the aggregated content.
Parameters:
sap.ui.core.ControloContentThe content to set
Returns:
sap.f.DynamicPageReference to this in order to allow method chaining
setFitContent(bFitContent): sap.f.DynamicPage

Sets a new value for property fitContent.

Optimizes DynamicPage responsiveness on small screens and behavior when expanding/collapsing the DynamicPageHeader.

Note: It is recommended to use this property when displaying content of adaptive controls that stretch to fill the available space, such as sap.ui.table.Table and sap.ui.table.AnalyticalTable.

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

Default value is false.

Parameters:
booleanbFitContentNew value for property fitContent
Returns:
sap.f.DynamicPageReference to this in order to allow method chaining
setFooter(oFooter): sap.f.DynamicPage
Sets the aggregated footer.
Parameters:
sap.m.IBaroFooterThe footer to set
Returns:
sap.f.DynamicPageReference to this in order to allow method chaining
setHeader(oHeader): sap.f.DynamicPage
Sets the aggregated header.
Parameters:
sap.f.DynamicPageHeaderoHeaderThe header to set
Returns:
sap.f.DynamicPageReference to this in order to allow method chaining
setHeaderExpanded(bHeaderExpanded): sap.f.DynamicPage

Sets a new value for property headerExpanded.

Determines whether the header is expanded.

The header can be also expanded/collapsed by user interaction, which requires the property to be internally mutated by the control to reflect the changed state.

Note: As of version 1.48, you can initialize the control in collapsed header state by setting this property 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:
booleanbHeaderExpandedNew value for property headerExpanded
Returns:
sap.f.DynamicPageReference to this in order to allow method chaining
setPreserveHeaderStateOnScroll(bPreserveHeaderStateOnScroll): sap.f.DynamicPage

Sets a new value for property preserveHeaderStateOnScroll.

Preserves the current header state when scrolling. For example, if the user expands the header by clicking on the title and then scrolls down the page, the header will remain expanded.

Note: Based on internal rules, the value of the property is not always taken into account - for example, when the control is rendered on tablet or mobile and the control`s title and header are with height larger than the given threshold.

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

Default value is false.

Parameters:
booleanbPreserveHeaderStateOnScrollNew value for property preserveHeaderStateOnScroll
Returns:
sap.f.DynamicPageReference to this in order to allow method chaining
setShowFooter(bShowFooter): sap.f.DynamicPage

Sets a new value for property showFooter.

Determines whether the footer is visible.

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

Default value is false.

Parameters:
booleanbShowFooterNew value for property showFooter
Returns:
sap.f.DynamicPageReference to this in order to allow method chaining
setTitle(oTitle): sap.f.DynamicPage
Sets the aggregated title.
Parameters:
sap.f.DynamicPageTitleoTitleThe title to set
Returns:
sap.f.DynamicPageReference to this in order to allow method chaining
setToggleHeaderOnTitleClick(bToggleHeaderOnTitleClick): sap.f.DynamicPage

Sets a new value for property toggleHeaderOnTitleClick.

Determines whether the the user can switch between the expanded/collapsed states of the DynamicPageHeader by clicking on the DynamicPageTitle. If set to false, the DynamicPageTitle is not clickable and the application must provide other means for expanding/collapsing the DynamicPageHeader, if necessary.

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

Default value is true.

Parameters:
booleanbToggleHeaderOnTitleClickNew value for property toggleHeaderOnTitleClick
Returns:
sap.f.DynamicPageReference to this in order to allow method chaining