class sap.m.Page

Control sample: sap.m.Page
Visiblity: public
UX Guidelines:
Implements:
Available since: N/A
Module: sap/m/Page
Application Component: CA-UI5-CTR

A container control that holds one whole screen of an application.

Overview

The sap.m.Page is a container control that holds one whole screen of an application. The page has three distinct areas that can hold content - a header, content area and a footer.

Structure

Header

The top most area of the page is occupied by the header. The standard header includes a navigation button and a title. Alternatively, you can create your own custom header, which is defined in the customHeader aggregation.

Content

The content occupies the main part of the page. Only the content area is scrollable by default. This can be prevented by setting enableScrolling to false.

Footer

The footer is optional and occupies the fixed bottom part of the page. Alternatively, the footer can be floating above the bottom part of the content. This is enabled with the floatingFooter property.

Note: All accessibility information for the different areas and their corresponding ARIA roles is set in the aggregation landmarkInfo of type sap.m.PageAccessibleLandmarkInfo

Responsive Behavior

When using the sap.m.Page in SAP Quartz theme, the breakpoints and layout paddings could be determined by the container's width. To enable this concept and add responsive paddings to an element of the Page control, you may add the following classes depending on your use case: sapUiResponsivePadding--header, sapUiResponsivePadding--subHeader, sapUiResponsivePadding--content, sapUiResponsivePadding--footer, sapUiResponsivePadding--floatingFooter.

This control can be a drop target.

Constructor

Constructor for a new Page.

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.m.Page(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
backgroundDesign sap.m.PageBackgroundDesign Standard

This property is used to set the background color of a page. When a list is placed inside a page, the value "List" should be used to display a gray background. "Standard", with the default background color, is used if not specified.

Visibility: public
contentOnlyBusy boolean false

Decides which area is covered by the local BusyIndicator when page.setBusy() is called. By default the entire page is covered, including headers and footer. When this property is set to "true", only the content area is covered (not header/sub header and footer), which is useful e.g. when there is a SearchField in the sub header and live search continuously updates the content area while the user is still able to type.

Since: 1.29.0.

Visibility: public
enableScrolling boolean true

Enable vertical scrolling of page contents. Page headers and footers are fixed and do not scroll. If set to false, there will be no vertical scrolling at all.

The Page only allows vertical scrolling because horizontal scrolling is discouraged in general for full-page content. If it still needs to be achieved, disable the Page scrolling and use a ScrollContainer as full-page content of the Page. This allows you to freely configure scrolling. It can also be used to create horizontally-scrolling sub-areas of (vertically-scrolling) Pages.

Visibility: public
floatingFooter boolean false

Decides whether the footer can float. When set to true, the footer is not fixed below the content area anymore, but rather floats over it with a slight offset from the bottom.

Visibility: public
icon sap.ui.core.URI

the icon that is rendered in the page header bar in non-iOS phone/tablet platforms. This property is theme-dependent and only has an effect in the MVI theme.

Visibility: public
navButtonText string

The text of the nav button when running in iOS (if shown) in case it deviates from the default, which is "Back". This property is mvi-theme-dependent and will not have any effect in other themes.

Visibility: public
navButtonTooltip string

The tooltip of the nav button

Since version 1.34

Visibility: public
navButtonType sap.m.ButtonType Back

This property is used to set the appearance of the NavButton. By default when showNavButton is set to true, a back button will be shown in iOS and an up button in other platforms. In case you want to show a normal button in the left header area, you can set the value to "Default".

Since: 1.12.

Visibility: public
showFooter boolean true

Whether this page shall have a footer

Since: 1.13.1.

Visibility: public
showHeader boolean true

Whether this page shall have a header. If set to true, either the control under the "customHeader" aggregation is used, or if there is no such control, a Header control is constructed from the properties "title", "showNavButton", "navButtonText" and "icon" depending on the platform.

Visibility: public
showNavButton boolean false

A nav button will be rendered on the left area of header bar if this property is set to true.

Visibility: public
showSubHeader boolean true

Whether this page shall show the subheader.

Since: 1.28.

Visibility: public
title string

The title text appearing in the page header bar.

Visibility: public
titleAlignment sap.m.TitleAlignment Auto

Specifies the Title alignment (theme specific). If set to TitleAlignment.Auto, the Title will be aligned as it is set in the theme (if not set, the default value is center); Other possible values are TitleAlignment.Start (left or right depending on LTR/RTL), and TitleAlignment.Center (centered)

Since: 1.72.

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

Defines the semantic level of the title. Using "Auto" no explicit level information is written. Used for accessibility purposes only.

Visibility: public

Aggregations

Default Aggregation: content

Name Cardinality Type Description
_internalHeader 0..1 sap.m.IBar

A header bar which is managed internally by the Page control

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

The content of this page

customHeader 0..1 sap.m.IBar

The (optional) custom header of this page. Use this aggregation only when a custom header is constructed where the default header consisting of title text + nav button is not sufficient. If this aggregation is set, the simple properties "title", "showNavButton", "NavButtonText" and "icon" are not used.

footer 0..1 sap.m.IBar

The (optional) footer of this page. It is always located at the bottom of the page

headerContent 0..n sap.ui.core.Control

Controls to be added to the right side of the page header. Usually an application would use Button controls and limit the number to one when the application needs to run on smartphones. There is no automatic overflow handling when the space is insufficient. When a customHeader is used, this aggregation will be ignored.

landmarkInfo 0..1 sap.m.PageAccessibleLandmarkInfo

Accessible landmark settings to be applied on the containers of the sap.m.Page control.

If not set, no landmarks will be written.

subHeader 0..1 sap.m.IBar

a subHeader will be rendered directly under the header


Events Overview

Event Description
navButtonPress

this event is fired when Nav Button is pressed

Since: 1.12.2.

navButtonTap

this event is fired when Nav Button is tapped

navButtonPress

this event is fired when Nav Button is pressed

Since: 1.12.2.

Param Type Description
oControlEvent sap.ui.base.Event
getSource sap.ui.base.EventProvider
getParameters object

navButtonTap

this event is fired when Nav Button is tapped

the navButtonPress event is replacing this event
Param Type Description
oControlEvent sap.ui.base.Event
getSource sap.ui.base.EventProvider
getParameters object

Methods Overview

Method Description
addContent

Adds some content to the aggregation content.

addHeaderContent

Adds some headerContent to the aggregation headerContent.

attachNavButtonPress

Attaches event handler fnFunction to the navButtonPress event of this sap.m.Page.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.m.Page itself.

this event is fired when Nav Button is pressed

attachNavButtonTap

Attaches event handler fnFunction to the navButtonTap event of this sap.m.Page.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.m.Page itself.

this event is fired when Nav Button is tapped

Since 1.12.2 the navButtonPress event is replacing this event
destroyContent

Destroys all the content in the aggregation content.

destroyCustomHeader

Destroys the customHeader in the aggregation customHeader.

destroyFooter

Destroys the footer in the aggregation footer.

destroyHeaderContent

Destroys all the headerContent in the aggregation headerContent.

destroyLandmarkInfo

Destroys the landmarkInfo in the aggregation landmarkInfo.

destroySubHeader

Destroys the subHeader in the aggregation subHeader.

detachNavButtonPress

Detaches event handler fnFunction from the navButtonPress event of this sap.m.Page.

The passed function and listener object must match the ones used for event registration.

detachNavButtonTap

Detaches event handler fnFunction from the navButtonTap event of this sap.m.Page.

The passed function and listener object must match the ones used for event registration.

Since 1.12.2 the navButtonPress event is replacing this event
sap.m.Page.extend

Creates a new subclass of class sap.m.Page 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.

fireNavButtonPress

Fires event navButtonPress to attached listeners.

fireNavButtonTap

Fires event navButtonTap to attached listeners.

Since 1.12.2 the navButtonPress event is replacing this event
getBackgroundDesign

Gets current value of property backgroundDesign.

This property is used to set the background color of a page. When a list is placed inside a page, the value "List" should be used to display a gray background. "Standard", with the default background color, is used if not specified.

Default value is Standard.

getContent

Gets content of aggregation content.

The content of this page

getContentOnlyBusy

Gets current value of property contentOnlyBusy.

Decides which area is covered by the local BusyIndicator when page.setBusy() is called. By default the entire page is covered, including headers and footer. When this property is set to "true", only the content area is covered (not header/sub header and footer), which is useful e.g. when there is a SearchField in the sub header and live search continuously updates the content area while the user is still able to type.

Default value is false.

getCustomHeader

Gets content of aggregation customHeader.

The (optional) custom header of this page. Use this aggregation only when a custom header is constructed where the default header consisting of title text + nav button is not sufficient. If this aggregation is set, the simple properties "title", "showNavButton", "NavButtonText" and "icon" are not used.

getEnableScrolling

Gets current value of property enableScrolling.

Enable vertical scrolling of page contents. Page headers and footers are fixed and do not scroll. If set to false, there will be no vertical scrolling at all.

The Page only allows vertical scrolling because horizontal scrolling is discouraged in general for full-page content. If it still needs to be achieved, disable the Page scrolling and use a ScrollContainer as full-page content of the Page. This allows you to freely configure scrolling. It can also be used to create horizontally-scrolling sub-areas of (vertically-scrolling) Pages.

Default value is true.

getFloatingFooter

Gets current value of property floatingFooter.

Decides whether the footer can float. When set to true, the footer is not fixed below the content area anymore, but rather floats over it with a slight offset from the bottom.

Default value is false.

getFooter

Gets content of aggregation footer.

The (optional) footer of this page. It is always located at the bottom of the page

getHeaderContent

Gets content of aggregation headerContent.

Controls to be added to the right side of the page header. Usually an application would use Button controls and limit the number to one when the application needs to run on smartphones. There is no automatic overflow handling when the space is insufficient. When a customHeader is used, this aggregation will be ignored.

getIcon

Gets current value of property icon.

the icon that is rendered in the page header bar in non-iOS phone/tablet platforms. This property is theme-dependent and only has an effect in the MVI theme.

Since 1.20 Deprecated since the MVI theme is removed now. This property only affected the NavButton in that theme.
getLandmarkInfo

Gets content of aggregation landmarkInfo.

Accessible landmark settings to be applied on the containers of the sap.m.Page control.

If not set, no landmarks will be written.

sap.m.Page.getMetadata

Returns a metadata object for class sap.m.Page.

getNavButtonText

Gets current value of property navButtonText.

The text of the nav button when running in iOS (if shown) in case it deviates from the default, which is "Back". This property is mvi-theme-dependent and will not have any effect in other themes.

Since 1.20 Deprecated since the MVI theme is removed now. This property only affected the NavButton in that theme.
getNavButtonTooltip

Gets current value of property navButtonTooltip.

The tooltip of the nav button

Since version 1.34

getNavButtonType

Gets current value of property navButtonType.

This property is used to set the appearance of the NavButton. By default when showNavButton is set to true, a back button will be shown in iOS and an up button in other platforms. In case you want to show a normal button in the left header area, you can set the value to "Default".

Default value is Back.

Since 1.20 Deprecated since the MVI theme is removed now. This property is only usable with a Button text in that theme.
getShowFooter

Gets current value of property showFooter.

Whether this page shall have a footer

Default value is true.

getShowHeader

Gets current value of property showHeader.

Whether this page shall have a header. If set to true, either the control under the "customHeader" aggregation is used, or if there is no such control, a Header control is constructed from the properties "title", "showNavButton", "navButtonText" and "icon" depending on the platform.

Default value is true.

getShowNavButton

Gets current value of property showNavButton.

A nav button will be rendered on the left area of header bar if this property is set to true.

Default value is false.

getShowSubHeader

Gets current value of property showSubHeader.

Whether this page shall show the subheader.

Default value is true.

getSubHeader

Gets content of aggregation subHeader.

a subHeader will be rendered directly under the header

getTitle

Gets current value of property title.

The title text appearing in the page header bar.

getTitleAlignment

Gets current value of property titleAlignment.

Specifies the Title alignment (theme specific). If set to TitleAlignment.Auto, the Title will be aligned as it is set in the theme (if not set, the default value is center); Other possible values are TitleAlignment.Start (left or right depending on LTR/RTL), and TitleAlignment.Center (centered)

Default value is Auto.

getTitleLevel

Gets current value of property titleLevel.

Defines the semantic level of the title. Using "Auto" no explicit level information is written. Used for accessibility purposes only.

Default value is Auto.

indexOfContent

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

indexOfHeaderContent

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

insertContent

Inserts a content into the aggregation content.

insertHeaderContent

Inserts a headerContent into the aggregation headerContent.

removeAllContent

Removes all the controls from the aggregation content.

Additionally, it unregisters them from the hosting UIArea.

removeAllHeaderContent

Removes all the controls from the aggregation headerContent.

Additionally, it unregisters them from the hosting UIArea.

removeContent

Removes a content from the aggregation content.

removeHeaderContent

Removes a headerContent from the aggregation headerContent.

scrollTo

Scrolls to the given position. Only available if enableScrolling is set to "true".

scrollToElement

Scrolls to an element (DOM or sap.ui.core.Element) within the page if the element is rendered.

setBackgroundDesign

Sets a new value for property backgroundDesign.

This property is used to set the background color of a page. When a list is placed inside a page, the value "List" should be used to display a gray background. "Standard", with the default background color, is used if not specified.

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

Default value is Standard.

setContentOnlyBusy

Sets a new value for property contentOnlyBusy.

Decides which area is covered by the local BusyIndicator when page.setBusy() is called. By default the entire page is covered, including headers and footer. When this property is set to "true", only the content area is covered (not header/sub header and footer), which is useful e.g. when there is a SearchField in the sub header and live search continuously updates the content area while the user is still able to type.

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

Default value is false.

setCustomHeader

Sets the aggregated customHeader.

setEnableScrolling

Sets a new value for property enableScrolling.

Enable vertical scrolling of page contents. Page headers and footers are fixed and do not scroll. If set to false, there will be no vertical scrolling at all.

The Page only allows vertical scrolling because horizontal scrolling is discouraged in general for full-page content. If it still needs to be achieved, disable the Page scrolling and use a ScrollContainer as full-page content of the Page. This allows you to freely configure scrolling. It can also be used to create horizontally-scrolling sub-areas of (vertically-scrolling) Pages.

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

Default value is true.

setFloatingFooter

Sets a new value for property floatingFooter.

Decides whether the footer can float. When set to true, the footer is not fixed below the content area anymore, but rather floats over it with a slight offset from the bottom.

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

Default value is false.

setFooter

Sets the aggregated footer.

setIcon

Sets a new value for property icon.

the icon that is rendered in the page header bar in non-iOS phone/tablet platforms. This property is theme-dependent and only has an effect in the MVI theme.

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

Since 1.20 Deprecated since the MVI theme is removed now. This property only affected the NavButton in that theme.
setLandmarkInfo

Sets the aggregated landmarkInfo.

setNavButtonText

Sets a new value for property navButtonText.

The text of the nav button when running in iOS (if shown) in case it deviates from the default, which is "Back". This property is mvi-theme-dependent and will not have any effect in other themes.

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

Since 1.20 Deprecated since the MVI theme is removed now. This property only affected the NavButton in that theme.
setNavButtonTooltip

Sets a new value for property navButtonTooltip.

The tooltip of the nav button

Since version 1.34

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

setNavButtonType

Sets a new value for property navButtonType.

This property is used to set the appearance of the NavButton. By default when showNavButton is set to true, a back button will be shown in iOS and an up button in other platforms. In case you want to show a normal button in the left header area, you can set the value to "Default".

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

Default value is Back.

Since 1.20 Deprecated since the MVI theme is removed now. This property is only usable with a Button text in that theme.
setShowFooter

Sets a new value for property showFooter.

Whether this page shall have a footer

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

Default value is true.

setShowHeader

Sets a new value for property showHeader.

Whether this page shall have a header. If set to true, either the control under the "customHeader" aggregation is used, or if there is no such control, a Header control is constructed from the properties "title", "showNavButton", "navButtonText" and "icon" depending on the platform.

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

Default value is true.

setShowNavButton

Sets a new value for property showNavButton.

A nav button will be rendered on the left area of header bar if this property is set to true.

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

Default value is false.

setShowSubHeader

Sets a new value for property showSubHeader.

Whether this page shall show the subheader.

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

Default value is true.

setSubHeader

Sets the aggregated subHeader.

setTitle

Sets a new value for property title.

The title text appearing in the page header bar.

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

setTitleAlignment

Sets a new value for property titleAlignment.

Specifies the Title alignment (theme specific). If set to TitleAlignment.Auto, the Title will be aligned as it is set in the theme (if not set, the default value is center); Other possible values are TitleAlignment.Start (left or right depending on LTR/RTL), and TitleAlignment.Center (centered)

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

Default value is Auto.

setTitleLevel

Sets a new value for property titleLevel.

Defines the semantic level of the title. Using "Auto" no explicit level information is written. Used for accessibility purposes only.

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

Default value is Auto.

addContent

Adds some content to the aggregation content.

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

The content to add; if empty, nothing is inserted

addHeaderContent

Adds some headerContent to the aggregation headerContent.

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

The headerContent to add; if empty, nothing is inserted

attachNavButtonPress

Attaches event handler fnFunction to the navButtonPress event of this sap.m.Page.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.m.Page itself.

this event is fired when Nav Button is pressed

Param Type DefaultValue Description
oData object

An application-specific payload object that will be passed to the event handler along with the event object when firing the event

fnFunction function(sap.ui.base.Event) : void

The function to be called when the event occurs

oListener object

Context object to call the event handler with. Defaults to this sap.m.Page itself

attachNavButtonTap

Attaches event handler fnFunction to the navButtonTap event of this sap.m.Page.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.m.Page itself.

this event is fired when Nav Button is tapped

Since 1.12.2 the navButtonPress event is replacing this event
Param Type DefaultValue Description
oData object

An application-specific payload object that will be passed to the event handler along with the event object when firing the event

fnFunction function(sap.ui.base.Event) : void

The function to be called when the event occurs

oListener object

Context object to call the event handler with. Defaults to this sap.m.Page itself

destroyContent

Destroys all the content in the aggregation content.

destroyCustomHeader

Destroys the customHeader in the aggregation customHeader.

destroyFooter

Destroys the footer in the aggregation footer.

destroyHeaderContent

Destroys all the headerContent in the aggregation headerContent.

destroyLandmarkInfo

Destroys the landmarkInfo in the aggregation landmarkInfo.

destroySubHeader

Destroys the subHeader in the aggregation subHeader.

detachNavButtonPress

Detaches event handler fnFunction from the navButtonPress event of this sap.m.Page.

The passed function and listener object must match the ones used for event registration.

Param Type DefaultValue Description
fnFunction function(sap.ui.base.Event) : void

The function to be called, when the event occurs

oListener object

Context object on which the given function had to be called

detachNavButtonTap

Detaches event handler fnFunction from the navButtonTap event of this sap.m.Page.

The passed function and listener object must match the ones used for event registration.

Since 1.12.2 the navButtonPress event is replacing this event
Param Type DefaultValue Description
fnFunction function(sap.ui.base.Event) : void

The function to be called, when the event occurs

oListener object

Context object on which the given function had to be called

sap.m.Page.extend

Creates a new subclass of class sap.m.Page 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

fireNavButtonPress

Fires event navButtonPress to attached listeners.

Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

fireNavButtonTap

Fires event navButtonTap to attached listeners.

Since 1.12.2 the navButtonPress event is replacing this event
Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

getBackgroundDesign

Gets current value of property backgroundDesign.

This property is used to set the background color of a page. When a list is placed inside a page, the value "List" should be used to display a gray background. "Standard", with the default background color, is used if not specified.

Default value is Standard.

getContent

Gets content of aggregation content.

The content of this page

getContentOnlyBusy

Gets current value of property contentOnlyBusy.

Decides which area is covered by the local BusyIndicator when page.setBusy() is called. By default the entire page is covered, including headers and footer. When this property is set to "true", only the content area is covered (not header/sub header and footer), which is useful e.g. when there is a SearchField in the sub header and live search continuously updates the content area while the user is still able to type.

Default value is false.

getCustomHeader

Gets content of aggregation customHeader.

The (optional) custom header of this page. Use this aggregation only when a custom header is constructed where the default header consisting of title text + nav button is not sufficient. If this aggregation is set, the simple properties "title", "showNavButton", "NavButtonText" and "icon" are not used.

getEnableScrolling

Gets current value of property enableScrolling.

Enable vertical scrolling of page contents. Page headers and footers are fixed and do not scroll. If set to false, there will be no vertical scrolling at all.

The Page only allows vertical scrolling because horizontal scrolling is discouraged in general for full-page content. If it still needs to be achieved, disable the Page scrolling and use a ScrollContainer as full-page content of the Page. This allows you to freely configure scrolling. It can also be used to create horizontally-scrolling sub-areas of (vertically-scrolling) Pages.

Default value is true.

getFloatingFooter

Gets current value of property floatingFooter.

Decides whether the footer can float. When set to true, the footer is not fixed below the content area anymore, but rather floats over it with a slight offset from the bottom.

Default value is false.

getFooter

Gets content of aggregation footer.

The (optional) footer of this page. It is always located at the bottom of the page

getHeaderContent

Gets content of aggregation headerContent.

Controls to be added to the right side of the page header. Usually an application would use Button controls and limit the number to one when the application needs to run on smartphones. There is no automatic overflow handling when the space is insufficient. When a customHeader is used, this aggregation will be ignored.

getIcon

Gets current value of property icon.

the icon that is rendered in the page header bar in non-iOS phone/tablet platforms. This property is theme-dependent and only has an effect in the MVI theme.

Since 1.20 Deprecated since the MVI theme is removed now. This property only affected the NavButton in that theme.

getLandmarkInfo

Gets content of aggregation landmarkInfo.

Accessible landmark settings to be applied on the containers of the sap.m.Page control.

If not set, no landmarks will be written.

sap.m.Page.getMetadata

Returns a metadata object for class sap.m.Page.

getNavButtonText

Gets current value of property navButtonText.

The text of the nav button when running in iOS (if shown) in case it deviates from the default, which is "Back". This property is mvi-theme-dependent and will not have any effect in other themes.

Since 1.20 Deprecated since the MVI theme is removed now. This property only affected the NavButton in that theme.

getNavButtonTooltip

Gets current value of property navButtonTooltip.

The tooltip of the nav button

Since version 1.34

getNavButtonType

Gets current value of property navButtonType.

This property is used to set the appearance of the NavButton. By default when showNavButton is set to true, a back button will be shown in iOS and an up button in other platforms. In case you want to show a normal button in the left header area, you can set the value to "Default".

Default value is Back.

Since 1.20 Deprecated since the MVI theme is removed now. This property is only usable with a Button text in that theme.

getShowFooter

Gets current value of property showFooter.

Whether this page shall have a footer

Default value is true.

getShowHeader

Gets current value of property showHeader.

Whether this page shall have a header. If set to true, either the control under the "customHeader" aggregation is used, or if there is no such control, a Header control is constructed from the properties "title", "showNavButton", "navButtonText" and "icon" depending on the platform.

Default value is true.

getShowNavButton

Gets current value of property showNavButton.

A nav button will be rendered on the left area of header bar if this property is set to true.

Default value is false.

getShowSubHeader

Gets current value of property showSubHeader.

Whether this page shall show the subheader.

Default value is true.

getSubHeader

Gets content of aggregation subHeader.

a subHeader will be rendered directly under the header

getTitle

Gets current value of property title.

The title text appearing in the page header bar.

getTitleAlignment

Gets current value of property titleAlignment.

Specifies the Title alignment (theme specific). If set to TitleAlignment.Auto, the Title will be aligned as it is set in the theme (if not set, the default value is center); Other possible values are TitleAlignment.Start (left or right depending on LTR/RTL), and TitleAlignment.Center (centered)

Default value is Auto.

getTitleLevel

Gets current value of property titleLevel.

Defines the semantic level of the title. Using "Auto" no explicit level information is written. Used for accessibility purposes only.

Default value is Auto.

indexOfContent

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

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

The content whose index is looked for

indexOfHeaderContent

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

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

The headerContent whose index is looked for

insertContent

Inserts a content into the aggregation content.

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

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

insertHeaderContent

Inserts a headerContent into the aggregation headerContent.

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

The headerContent to insert; if empty, nothing is inserted

iIndex int

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

removeAllContent

Removes all the controls from the aggregation content.

Additionally, it unregisters them from the hosting UIArea.

removeAllHeaderContent

Removes all the controls from the aggregation headerContent.

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.core.Control

The content to remove or its index or id

removeHeaderContent

Removes a headerContent from the aggregation headerContent.

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

The headerContent to remove or its index or id

scrollTo

Scrolls to the given position. Only available if enableScrolling is set to "true".

Param Type DefaultValue Description
y int

The vertical pixel position to scroll to. Scrolling down happens with positive values.

time int 0

The duration of animated scrolling in milliseconds. The value 0 results in immediate scrolling without animation.

scrollToElement

Scrolls to an element (DOM or sap.ui.core.Element) within the page if the element is rendered.

Param Type DefaultValue Description
oElement HTMLElement sap.ui.core.Element

The element to which should be scrolled.

iTime int 0

The duration of animated scrolling in milliseconds. To scroll immediately without animation, give 0 as value.

aOffset int[] [0,0]

Specifies an additional left and top offset of the target scroll position, relative to the upper left corner of the DOM element

setBackgroundDesign

Sets a new value for property backgroundDesign.

This property is used to set the background color of a page. When a list is placed inside a page, the value "List" should be used to display a gray background. "Standard", with the default background color, is used if not specified.

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

Default value is Standard.

Param Type DefaultValue Description
sBackgroundDesign sap.m.PageBackgroundDesign Standard

New value for property backgroundDesign

setContentOnlyBusy

Sets a new value for property contentOnlyBusy.

Decides which area is covered by the local BusyIndicator when page.setBusy() is called. By default the entire page is covered, including headers and footer. When this property is set to "true", only the content area is covered (not header/sub header and footer), which is useful e.g. when there is a SearchField in the sub header and live search continuously updates the content area while the user is still able to type.

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

New value for property contentOnlyBusy

setCustomHeader

Sets the aggregated customHeader.

Param Type DefaultValue Description
oCustomHeader sap.m.IBar

The customHeader to set

setEnableScrolling

Sets a new value for property enableScrolling.

Enable vertical scrolling of page contents. Page headers and footers are fixed and do not scroll. If set to false, there will be no vertical scrolling at all.

The Page only allows vertical scrolling because horizontal scrolling is discouraged in general for full-page content. If it still needs to be achieved, disable the Page scrolling and use a ScrollContainer as full-page content of the Page. This allows you to freely configure scrolling. It can also be used to create horizontally-scrolling sub-areas of (vertically-scrolling) Pages.

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
bEnableScrolling boolean true

New value for property enableScrolling

setFloatingFooter

Sets a new value for property floatingFooter.

Decides whether the footer can float. When set to true, the footer is not fixed below the content area anymore, but rather floats over it with a slight offset from the bottom.

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

New value for property floatingFooter

setFooter

Sets the aggregated footer.

Param Type DefaultValue Description
oFooter sap.m.IBar

The footer to set

setIcon

Sets a new value for property icon.

the icon that is rendered in the page header bar in non-iOS phone/tablet platforms. This property is theme-dependent and only has an effect in the MVI theme.

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

Since 1.20 Deprecated since the MVI theme is removed now. This property only affected the NavButton in that theme.
Param Type DefaultValue Description
sIcon sap.ui.core.URI

New value for property icon

setLandmarkInfo

Sets the aggregated landmarkInfo.

Param Type DefaultValue Description
oLandmarkInfo sap.m.PageAccessibleLandmarkInfo

The landmarkInfo to set

setNavButtonText

Sets a new value for property navButtonText.

The text of the nav button when running in iOS (if shown) in case it deviates from the default, which is "Back". This property is mvi-theme-dependent and will not have any effect in other themes.

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

Since 1.20 Deprecated since the MVI theme is removed now. This property only affected the NavButton in that theme.
Param Type DefaultValue Description
sNavButtonText string

New value for property navButtonText

setNavButtonTooltip

Sets a new value for property navButtonTooltip.

The tooltip of the nav button

Since version 1.34

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

Param Type DefaultValue Description
sNavButtonTooltip string

New value for property navButtonTooltip

setNavButtonType

Sets a new value for property navButtonType.

This property is used to set the appearance of the NavButton. By default when showNavButton is set to true, a back button will be shown in iOS and an up button in other platforms. In case you want to show a normal button in the left header area, you can set the value to "Default".

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

Default value is Back.

Since 1.20 Deprecated since the MVI theme is removed now. This property is only usable with a Button text in that theme.
Param Type DefaultValue Description
sNavButtonType sap.m.ButtonType Back

New value for property navButtonType

setShowFooter

Sets a new value for property showFooter.

Whether this page shall have a footer

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
bShowFooter boolean true

New value for property showFooter

setShowHeader

Sets a new value for property showHeader.

Whether this page shall have a header. If set to true, either the control under the "customHeader" aggregation is used, or if there is no such control, a Header control is constructed from the properties "title", "showNavButton", "navButtonText" and "icon" depending on the platform.

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
bShowHeader boolean true

New value for property showHeader

setShowNavButton

Sets a new value for property showNavButton.

A nav button will be rendered on the left area of header bar if this property is set to true.

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

New value for property showNavButton

setShowSubHeader

Sets a new value for property showSubHeader.

Whether this page shall show the subheader.

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
bShowSubHeader boolean true

New value for property showSubHeader

setSubHeader

Sets the aggregated subHeader.

Param Type DefaultValue Description
oSubHeader sap.m.IBar

The subHeader to set

setTitle

Sets a new value for property title.

The title text appearing in the page header bar.

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

Param Type DefaultValue Description
sTitle string

New value for property title

setTitleAlignment

Sets a new value for property titleAlignment.

Specifies the Title alignment (theme specific). If set to TitleAlignment.Auto, the Title will be aligned as it is set in the theme (if not set, the default value is center); Other possible values are TitleAlignment.Start (left or right depending on LTR/RTL), and TitleAlignment.Center (centered)

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

Default value is Auto.

Param Type DefaultValue Description
sTitleAlignment sap.m.TitleAlignment Auto

New value for property titleAlignment

setTitleLevel

Sets a new value for property titleLevel.

Defines the semantic level of the title. Using "Auto" no explicit level information is written. Used for accessibility purposes only.

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

Default value is Auto.

Param Type DefaultValue Description
sTitleLevel sap.ui.core.TitleLevel Auto

New value for property titleLevel