class sap.f.FlexibleColumnLayout

Visiblity: public
UX Guidelines: Flexible Column Layout
Implements: sap.ui.core.IPlaceholderSupport
Available since: N/A
Module: sap/f/FlexibleColumnLayout
Application Component: CA-UI5-CTR

Implements the master-detail-detail paradigm by displaying up to three pages in separate columns.

Overview

The control is logically similar to sap.m.SplitContainer with the difference that it capable of handling three columns (referred to as Begin, Mid and End) rather than two (Master, Detail). The width of the three columns is variable.

There are several possible layouts that can be changed either with the control's API, or by the user with the help of layout arrows.

Internally the control makes use of three instances of sap.m.NavContainer, thus forming the three columns.

Usage

Use this control for applications that need to display several logical levels of related information side by side (e.g. list of items, item, sub-item, etc.). The control is flexible in a sense that the application can focus the user's attention on one particular column by making it larger or even fullscreen.

The columns are accessible with the beginColumnPages, midColumnPages and endColumnPages aggregations.

The relative sizes and the visibility of the three columns are determined based on the value of the layout property.

Changes to the layout due to user interaction are communicated to the app with the stateChange event.

Responsive Behavior

The control automatically displays the maximum possible number of columns based on the device size and current layout. The app does not need to take into consideration the current device/screen size, but only to add content to the columns and change the value of the layout property.

For detailed information, see LayoutType enumeration.


Constructor

Constructor for a new sap.f.FlexibleColumnLayout.

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.f.FlexibleColumnLayout(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
autoFocus boolean true

Determines whether the initial focus is set automatically on first rendering and after navigating to a new page.

For more information, see sap.m.NavContainer#autoFocus.

Since: 1.76.

Visibility: public
backgroundDesign sap.m.BackgroundDesign Transparent

Specifies the background color of the content. The visualization of the different options depends on the used theme.

Since: 1.54.

Visibility: public
defaultTransitionNameBeginColumn string slide

Determines the type of the transition/animation to apply for the Begin column when to() is called without defining the transition to use. The default is slide, other options are fade, flip, show, and the names of any registered custom transitions.

Visibility: public
defaultTransitionNameEndColumn string slide

Determines the type of the transition/animation to apply for the End column when to() is called without defining the transition to use. The default is slide, other options are fade, flip, show, and the names of any registered custom transitions.

Visibility: public
defaultTransitionNameMidColumn string slide

Determines the type of the transition/animation to apply for the Mid column when to() is called without defining the transition to use. The default is slide, other options are fade, flip, show, and the names of any registered custom transitions.

Visibility: public
layout sap.f.LayoutType OneColumn

Determines the layout of the control - number of visible columns and their relative sizes.

For more details, see Types of Layout in the documentation.

Visibility: public
restoreFocusOnBackNavigation boolean false

Determines whether the focus is restored to the last known when navigating back to a prevously opened column, for example, upon closing of the end column and being transfered back to the mid column.

Since: 1.77.

Visibility: public

Aggregations

Default Aggregation:

Name Cardinality Type Description
_beginColumnBackArrow 0..1 sap.m.Button
_beginColumnNav 0..1 sap.m.NavContainer
_endColumnForwardArrow 0..1 sap.m.Button
_endColumnNav 0..1 sap.m.NavContainer
_midColumnBackArrow 0..1 sap.m.Button
_midColumnForwardArrow 0..1 sap.m.Button
_midColumnNav 0..1 sap.m.NavContainer
beginColumnPages 0..n sap.ui.core.Control

The content entities between which the FlexibleColumnLayout navigates in the Begin column.

These should be any control with page semantics. These aggregated controls will receive navigation events like BeforeShow, they are documented in the pseudo interface sap.m.NavContainerChild.

endColumnPages 0..n sap.ui.core.Control

The content entities between which the FlexibleColumnLayout navigates in the End column.

These should be any control with page semantics. These aggregated controls will receive navigation events like BeforeShow, they are documented in the pseudo interface sap.m.NavContainerChild.

landmarkInfo 0..1 sap.f.FlexibleColumnLayoutAccessibleLandmarkInfo

Accessible landmark settings to be applied on the containers of the sap.f.FlexibleColumnLayout control.

If not set, no landmarks will be written.

Since: 1.95.

midColumnPages 0..n sap.ui.core.Control

The content entities between which the FlexibleColumnLayout navigates in the Mid column.

These should be any control with page semantics. These aggregated controls will receive navigation events like BeforeShow, they are documented in the pseudo interface sap.m.NavContainerChild.


Associations

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

Sets the initial Begin column page, which is displayed on application launch.

initialEndColumnPage 0..1 sap.ui.core.Control

Sets the initial End column page, which is displayed on application launch.

initialMidColumnPage 0..1 sap.ui.core.Control

Sets the initial Mid column page, which is displayed on application launch.


Events Overview

Event Description
afterBeginColumnNavigate

Fires when navigation between two pages in the Begin column has completed.

NOTE: In case of animated transitions this event is fired with some delay after the navigate event.

afterEndColumnNavigate

Fires when navigation between two pages in the End column has completed.

NOTE: In case of animated transitions this event is fired with some delay after the navigate event.

afterMidColumnNavigate

Fires when navigation between two pages in the Mid column has completed.

NOTE: In case of animated transitions this event is fired with some delay after the navigate event.

beginColumnNavigate

Fires when navigation between two pages in the Begin column has been triggered. The transition (if any) to the new page has not started yet. This event can be aborted by the application with preventDefault(), which means that there will be no navigation.

Listeners may prevent the default action of this event by calling the preventDefault method on the event object.

columnResize

Fired when resize of each column has completed.

Since: 1.76.

endColumnNavigate

Fires when navigation between two pages in the End column has been triggered. The transition (if any) to the new page has not started yet. This event can be aborted by the application with preventDefault(), which means that there will be no navigation.

Listeners may prevent the default action of this event by calling the preventDefault method on the event object.

midColumnNavigate

Fires when navigation between two pages in the Mid column has been triggered. The transition (if any) to the new page has not started yet. This event can be aborted by the application with preventDefault(), which means that there will be no navigation.

Listeners may prevent the default action of this event by calling the preventDefault method on the event object.

stateChange

Fired when there is a change in the layout property or in the maximum number of columns that can be displayed at once.

    The interactions that may lead to a state change are:
  • the property layout was changed indirectly by the user clicking a layout arrow
  • the user resized the browser beyond a breakpoint, thus changing the maximum number of columns that can be displayed at once.


Note: The event is suppressed while the control has zero width and will be fired the first time it gets a non-zero width

afterBeginColumnNavigate

Fires when navigation between two pages in the Begin column has completed.

NOTE: In case of animated transitions this event is fired with some delay after the navigate event.

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

The page, which had been displayed before navigation.

fromId string

The ID of the page, which had been displayed before navigation.

to sap.ui.core.Control

The page, which is now displayed after navigation.

toId string

The ID of the page, which is now displayed after navigation.

firstTime boolean

Whether the "to" page (more precisely: a control with the ID of the page, which has been navigated to) has not been displayed/navigated to before.

isTo boolean

Determines whether was a forward navigation, triggered by to().

isBack boolean

Determines whether this was a back navigation, triggered by back().

isBackToTop boolean

Determines whether this was a navigation to the root page, triggered by backToTop().

isBackToPage boolean

Determines whether this was a navigation to a specific page, triggered by backToPage().

direction string

Determines how the navigation was triggered, possible values are "to", "back", "backToPage", and "backToTop".

afterEndColumnNavigate

Fires when navigation between two pages in the End column has completed.

NOTE: In case of animated transitions this event is fired with some delay after the navigate event.

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

The page, which had been displayed before navigation.

fromId string

The ID of the page, which had been displayed before navigation.

to sap.ui.core.Control

The page, which is now displayed after navigation.

toId string

The ID of the page, which is now displayed after navigation.

firstTime boolean

Whether the "to" page (more precisely: a control with the ID of the page, which has been navigated to) has not been displayed/navigated to before.

isTo boolean

Determines whether was a forward navigation, triggered by to().

isBack boolean

Determines whether this was a back navigation, triggered by back().

isBackToTop boolean

Determines whether this was a navigation to the root page, triggered by backToTop().

isBackToPage boolean

Determines whether this was a navigation to a specific page, triggered by backToPage().

direction string

Determines how the navigation was triggered, possible values are "to", "back", "backToPage", and "backToTop".

afterMidColumnNavigate

Fires when navigation between two pages in the Mid column has completed.

NOTE: In case of animated transitions this event is fired with some delay after the navigate event.

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

The page, which had been displayed before navigation.

fromId string

The ID of the page, which had been displayed before navigation.

to sap.ui.core.Control

The page, which is now displayed after navigation.

toId string

The ID of the page, which is now displayed after navigation.

firstTime boolean

Whether the "to" page (more precisely: a control with the ID of the page, which has been navigated to) has not been displayed/navigated to before.

isTo boolean

Determines whether was a forward navigation, triggered by to().

isBack boolean

Determines whether this was a back navigation, triggered by back().

isBackToTop boolean

Determines whether this was a navigation to the root page, triggered by backToTop().

isBackToPage boolean

Determines whether this was a navigation to a specific page, triggered by backToPage().

direction string

Determines how the navigation was triggered, possible values are "to", "back", "backToPage", and "backToTop".

beginColumnNavigate

Fires when navigation between two pages in the Begin column has been triggered. The transition (if any) to the new page has not started yet. This event can be aborted by the application with preventDefault(), which means that there will be no navigation.

Listeners may prevent the default action of this event by calling the preventDefault method on the event object.

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

The page, which was displayed before the current navigation.

fromId string

The ID of the page, which was displayed before the current navigation.

to sap.ui.core.Control

The page, which will be displayed after the current navigation.

toId string

The ID of the page, which will be displayed after the current navigation.

firstTime boolean

Determines whether the "to" page (more precisely: a control with the ID of the page, which is currently being navigated to) has not been displayed/navigated to before.

isTo boolean

Determines whether this is a forward navigation, triggered by to().

isBack boolean

Determines whether this is a back navigation, triggered by back().

isBackToTop boolean

Determines whether this is a navigation to the root page, triggered by backToTop().

isBackToPage boolean

Determines whether this was a navigation to a specific page, triggered by backToPage().

direction string

Determines how the navigation was triggered, possible values are "to", "back", "backToPage", and "backToTop".

columnResize

Fired when resize of each column has completed.

Since: 1.76.

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

Determines whether beginColumn resize has completed.

midColumn boolean

Determines whether midColumn resize has completed.

endColumn boolean

Determines whether endColumn resize has completed.

endColumnNavigate

Fires when navigation between two pages in the End column has been triggered. The transition (if any) to the new page has not started yet. This event can be aborted by the application with preventDefault(), which means that there will be no navigation.

Listeners may prevent the default action of this event by calling the preventDefault method on the event object.

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

The page, which was displayed before the current navigation.

fromId string

The ID of the page, which was displayed before the current navigation.

to sap.ui.core.Control

The page, which will be displayed after the current navigation.

toId string

The ID of the page, which will be displayed after the current navigation.

firstTime boolean

Determines whether the "to" page (more precisely: a control with the ID of the page, which is currently being navigated to) has not been displayed/navigated to before.

isTo boolean

Determines whether this is a forward navigation, triggered by to().

isBack boolean

Determines whether this is a back navigation, triggered by back().

isBackToTop boolean

Determines whether this is a navigation to the root page, triggered by backToTop().

isBackToPage boolean

Determines whether this was a navigation to a specific page, triggered by backToPage().

direction string

Determines how the navigation was triggered, possible values are "to", "back", "backToPage", and "backToTop".

midColumnNavigate

Fires when navigation between two pages in the Mid column has been triggered. The transition (if any) to the new page has not started yet. This event can be aborted by the application with preventDefault(), which means that there will be no navigation.

Listeners may prevent the default action of this event by calling the preventDefault method on the event object.

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

The page, which was displayed before the current navigation.

fromId string

The ID of the page, which was displayed before the current navigation.

to sap.ui.core.Control

The page, which will be displayed after the current navigation.

toId string

The ID of the page, which will be displayed after the current navigation.

firstTime boolean

Determines whether the "to" page (more precisely: a control with the ID of the page, which is currently being navigated to) has not been displayed/navigated to before.

isTo boolean

Determines whether this is a forward navigation, triggered by to().

isBack boolean

Determines whether this is a back navigation, triggered by back().

isBackToTop boolean

Determines whether this is a navigation to the root page, triggered by backToTop().

isBackToPage boolean

Determines whether this was a navigation to a specific page, triggered by backToPage().

direction string

Determines how the navigation was triggered, possible values are "to", "back", "backToPage", and "backToTop".

stateChange

Fired when there is a change in the layout property or in the maximum number of columns that can be displayed at once.



Note: The event is suppressed while the control has zero width and will be fired the first time it gets a non-zero width

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

The value of the layout property

maxColumnsCount int

The maximum number of columns that can be displayed at once based on the available screen size and control settings.

    Possible values are:
  • 3 for browser size of 1280px or more
  • 2 for browser size between 960px and 1280px
  • 1 for browser size less than 960px

isNavigationArrow boolean

Indicates whether the layout changed as a result of the user clicking a layout arrow

isResize boolean

Indicates whether the maximum number of columns that can be displayed at once changed


Methods Overview

Method Description
_getColumnWidthDistributionForLayout

Returns a string, representing the relative percentage sizes of the columns for the given layout in the format "begin/mid/end" (f.e. "33/67/0")

_getLayoutHistory

Returns the layout history object

addBeginColumnPage

Adds some beginColumnPage to the aggregation beginColumnPages.

addEndColumnPage

Adds some endColumnPage to the aggregation endColumnPages.

addMidColumnPage

Adds some midColumnPage to the aggregation midColumnPages.

attachAfterBeginColumnNavigate

Attaches event handler fnFunction to the afterBeginColumnNavigate event of this sap.f.FlexibleColumnLayout.

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.f.FlexibleColumnLayout itself.

Fires when navigation between two pages in the Begin column has completed.

NOTE: In case of animated transitions this event is fired with some delay after the navigate event.

attachAfterEndColumnNavigate

Attaches event handler fnFunction to the afterEndColumnNavigate event of this sap.f.FlexibleColumnLayout.

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.f.FlexibleColumnLayout itself.

Fires when navigation between two pages in the End column has completed.

NOTE: In case of animated transitions this event is fired with some delay after the navigate event.

attachAfterMidColumnNavigate

Attaches event handler fnFunction to the afterMidColumnNavigate event of this sap.f.FlexibleColumnLayout.

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.f.FlexibleColumnLayout itself.

Fires when navigation between two pages in the Mid column has completed.

NOTE: In case of animated transitions this event is fired with some delay after the navigate event.

attachBeginColumnNavigate

Attaches event handler fnFunction to the beginColumnNavigate event of this sap.f.FlexibleColumnLayout.

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.f.FlexibleColumnLayout itself.

Fires when navigation between two pages in the Begin column has been triggered. The transition (if any) to the new page has not started yet. This event can be aborted by the application with preventDefault(), which means that there will be no navigation.

attachColumnResize

Attaches event handler fnFunction to the columnResize event of this sap.f.FlexibleColumnLayout.

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.f.FlexibleColumnLayout itself.

Fired when resize of each column has completed.

attachEndColumnNavigate

Attaches event handler fnFunction to the endColumnNavigate event of this sap.f.FlexibleColumnLayout.

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.f.FlexibleColumnLayout itself.

Fires when navigation between two pages in the End column has been triggered. The transition (if any) to the new page has not started yet. This event can be aborted by the application with preventDefault(), which means that there will be no navigation.

attachMidColumnNavigate

Attaches event handler fnFunction to the midColumnNavigate event of this sap.f.FlexibleColumnLayout.

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.f.FlexibleColumnLayout itself.

Fires when navigation between two pages in the Mid column has been triggered. The transition (if any) to the new page has not started yet. This event can be aborted by the application with preventDefault(), which means that there will be no navigation.

attachStateChange

Attaches event handler fnFunction to the stateChange event of this sap.f.FlexibleColumnLayout.

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.f.FlexibleColumnLayout itself.

Fired when there is a change in the layout property or in the maximum number of columns that can be displayed at once.

    The interactions that may lead to a state change are:
  • the property layout was changed indirectly by the user clicking a layout arrow
  • the user resized the browser beyond a breakpoint, thus changing the maximum number of columns that can be displayed at once.


Note: The event is suppressed while the control has zero width and will be fired the first time it gets a non-zero width

backToPage

Navigates back to a page in the FlexibleColumnLayout. Columns are scanned for the page in the following order: Begin, Mid, End.

Calling this navigation method, first triggers the (cancelable) navigate event on the SplitContainer, then the BeforeHide pseudo event on the source page, BeforeFirstShow (if applicable), and BeforeShow on the target page. Later, after the transition has completed, the AfterShow pseudo event is triggered on the target page and AfterHide - on the page, which has been left. The given backData object is available in the BeforeFirstShow, BeforeShow, and AfterShow event objects as data property. The original "data" object from the "to" navigation is also available in these event objects.

backToTopBeginColumn

Navigates back to the initial/top level of Begin column (this is the element aggregated as "initialPage", or the first added element). NOTE: If already on the initial page, nothing happens. The transition effect which had been used to get to the current page is inverted and used for this navigation.

backToTopEndColumn

Navigates back to the initial/top level of End column (this is the element aggregated as "initialPage", or the first added element). NOTE: If already on the initial page, nothing happens. The transition effect which had been used to get to the current page is inverted and used for this navigation.

backToTopMidColumn

Navigates back to the initial/top level of Mid column (this is the element aggregated as "initialPage", or the first added element). NOTE: If already on the initial page, nothing happens. The transition effect which had been used to get to the current page is inverted and used for this navigation.

destroyBeginColumnPages

Destroys all the beginColumnPages in the aggregation beginColumnPages.

destroyEndColumnPages

Destroys all the endColumnPages in the aggregation endColumnPages.

destroyLandmarkInfo

Destroys the landmarkInfo in the aggregation landmarkInfo.

destroyMidColumnPages

Destroys all the midColumnPages in the aggregation midColumnPages.

detachAfterBeginColumnNavigate

Detaches event handler fnFunction from the afterBeginColumnNavigate event of this sap.f.FlexibleColumnLayout.

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

detachAfterEndColumnNavigate

Detaches event handler fnFunction from the afterEndColumnNavigate event of this sap.f.FlexibleColumnLayout.

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

detachAfterMidColumnNavigate

Detaches event handler fnFunction from the afterMidColumnNavigate event of this sap.f.FlexibleColumnLayout.

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

detachBeginColumnNavigate

Detaches event handler fnFunction from the beginColumnNavigate event of this sap.f.FlexibleColumnLayout.

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

detachColumnResize

Detaches event handler fnFunction from the columnResize event of this sap.f.FlexibleColumnLayout.

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

detachEndColumnNavigate

Detaches event handler fnFunction from the endColumnNavigate event of this sap.f.FlexibleColumnLayout.

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

detachMidColumnNavigate

Detaches event handler fnFunction from the midColumnNavigate event of this sap.f.FlexibleColumnLayout.

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

detachStateChange

Detaches event handler fnFunction from the stateChange event of this sap.f.FlexibleColumnLayout.

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

sap.f.FlexibleColumnLayout.extend

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

fireAfterBeginColumnNavigate

Fires event afterBeginColumnNavigate to attached listeners.

fireAfterEndColumnNavigate

Fires event afterEndColumnNavigate to attached listeners.

fireAfterMidColumnNavigate

Fires event afterMidColumnNavigate to attached listeners.

fireBeginColumnNavigate

Fires event beginColumnNavigate to attached listeners.

Listeners may prevent the default action of this event by calling the preventDefault method on the event object. The return value of this method indicates whether the default action should be executed.

fireColumnResize

Fires event columnResize to attached listeners.

fireEndColumnNavigate

Fires event endColumnNavigate to attached listeners.

Listeners may prevent the default action of this event by calling the preventDefault method on the event object. The return value of this method indicates whether the default action should be executed.

fireMidColumnNavigate

Fires event midColumnNavigate to attached listeners.

Listeners may prevent the default action of this event by calling the preventDefault method on the event object. The return value of this method indicates whether the default action should be executed.

fireStateChange

Fires event stateChange to attached listeners.

getAutoFocus

Gets current value of property autoFocus.

Determines whether the initial focus is set automatically on first rendering and after navigating to a new page.

For more information, see sap.m.NavContainer#autoFocus.

Default value is true.

getBackgroundDesign

Gets current value of property backgroundDesign.

Specifies the background color of the content. The visualization of the different options depends on the used theme.

Default value is Transparent.

getBeginColumnPages

Gets content of aggregation beginColumnPages.

The content entities between which the FlexibleColumnLayout navigates in the Begin column.

These should be any control with page semantics. These aggregated controls will receive navigation events like BeforeShow, they are documented in the pseudo interface sap.m.NavContainerChild.

getCurrentBeginColumnPage

Returns the currently displayed Begin column page.

getCurrentEndColumnPage

Returns the currently displayed End column page.

getCurrentMidColumnPage

Returns the currently displayed Mid column page.

getDefaultTransitionNameBeginColumn

Gets current value of property defaultTransitionNameBeginColumn.

Determines the type of the transition/animation to apply for the Begin column when to() is called without defining the transition to use. The default is slide, other options are fade, flip, show, and the names of any registered custom transitions.

Default value is "slide".

getDefaultTransitionNameEndColumn

Gets current value of property defaultTransitionNameEndColumn.

Determines the type of the transition/animation to apply for the End column when to() is called without defining the transition to use. The default is slide, other options are fade, flip, show, and the names of any registered custom transitions.

Default value is "slide".

getDefaultTransitionNameMidColumn

Gets current value of property defaultTransitionNameMidColumn.

Determines the type of the transition/animation to apply for the Mid column when to() is called without defining the transition to use. The default is slide, other options are fade, flip, show, and the names of any registered custom transitions.

Default value is "slide".

getEndColumnPages

Gets content of aggregation endColumnPages.

The content entities between which the FlexibleColumnLayout navigates in the End column.

These should be any control with page semantics. These aggregated controls will receive navigation events like BeforeShow, they are documented in the pseudo interface sap.m.NavContainerChild.

getInitialBeginColumnPage

ID of the element which is the current target of the association initialBeginColumnPage, or null.

getInitialEndColumnPage

ID of the element which is the current target of the association initialEndColumnPage, or null.

getInitialMidColumnPage

ID of the element which is the current target of the association initialMidColumnPage, or null.

getLandmarkInfo

Gets content of aggregation landmarkInfo.

Accessible landmark settings to be applied on the containers of the sap.f.FlexibleColumnLayout control.

If not set, no landmarks will be written.

getLayout

Gets current value of property layout.

Determines the layout of the control - number of visible columns and their relative sizes.

For more details, see Types of Layout in the documentation.

Default value is OneColumn.

getMaxColumnsCount

Returns the maximum number of columns that can be displayed at once based on the control width

sap.f.FlexibleColumnLayout.getMetadata

Returns a metadata object for class sap.f.FlexibleColumnLayout.

getMidColumnPages

Gets content of aggregation midColumnPages.

The content entities between which the FlexibleColumnLayout navigates in the Mid column.

These should be any control with page semantics. These aggregated controls will receive navigation events like BeforeShow, they are documented in the pseudo interface sap.m.NavContainerChild.

getRestoreFocusOnBackNavigation

Gets current value of property restoreFocusOnBackNavigation.

Determines whether the focus is restored to the last known when navigating back to a prevously opened column, for example, upon closing of the end column and being transfered back to the mid column.

Default value is false.

hidePlaceholder

Hides the placeholder on the corresponding column for the provided aggregation name.

indexOfBeginColumnPage

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

indexOfEndColumnPage

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

indexOfMidColumnPage

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

insertBeginColumnPage

Inserts a beginColumnPage into the aggregation beginColumnPages.

insertEndColumnPage

Inserts a endColumnPage into the aggregation endColumnPages.

insertMidColumnPage

Inserts a midColumnPage into the aggregation midColumnPages.

needPlaceholder

Checks whether a placeholder is needed by comparing the currently displayed page with the page object that is going to be displayed. If they are the same, no placeholder needs to be shown.

removeAllBeginColumnPages

Removes all the controls from the aggregation beginColumnPages.

Additionally, it unregisters them from the hosting UIArea.

removeAllEndColumnPages

Removes all the controls from the aggregation endColumnPages.

Additionally, it unregisters them from the hosting UIArea.

removeAllMidColumnPages

Removes all the controls from the aggregation midColumnPages.

Additionally, it unregisters them from the hosting UIArea.

removeBeginColumnPage

Removes a beginColumnPage from the aggregation beginColumnPages.

removeEndColumnPage

Removes a endColumnPage from the aggregation endColumnPages.

removeMidColumnPage

Removes a midColumnPage from the aggregation midColumnPages.

setAutoFocus

Sets a new value for property autoFocus.

Determines whether the initial focus is set automatically on first rendering and after navigating to a new page.

For more information, see sap.m.NavContainer#autoFocus.

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

Default value is true.

setBackgroundDesign

Sets a new value for property backgroundDesign.

Specifies the background color of the content. The visualization of the different options depends on the used theme.

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

Default value is Transparent.

setDefaultTransitionNameBeginColumn

Sets a new value for property defaultTransitionNameBeginColumn.

Determines the type of the transition/animation to apply for the Begin column when to() is called without defining the transition to use. The default is slide, other options are fade, flip, show, and the names of any registered custom transitions.

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

Default value is "slide".

setDefaultTransitionNameEndColumn

Sets a new value for property defaultTransitionNameEndColumn.

Determines the type of the transition/animation to apply for the End column when to() is called without defining the transition to use. The default is slide, other options are fade, flip, show, and the names of any registered custom transitions.

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

Default value is "slide".

setDefaultTransitionNameMidColumn

Sets a new value for property defaultTransitionNameMidColumn.

Determines the type of the transition/animation to apply for the Mid column when to() is called without defining the transition to use. The default is slide, other options are fade, flip, show, and the names of any registered custom transitions.

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

Default value is "slide".

setInitialBeginColumnPage

Sets the associated initialBeginColumnPage.

setInitialEndColumnPage

Sets the associated initialEndColumnPage.

setInitialMidColumnPage

Sets the associated initialMidColumnPage.

setLandmarkInfo

Sets the aggregated landmarkInfo.

setLayout

Sets a new value for property layout.

Determines the layout of the control - number of visible columns and their relative sizes.

For more details, see Types of Layout in the documentation.

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

Default value is OneColumn.

setRestoreFocusOnBackNavigation

Sets a new value for property restoreFocusOnBackNavigation.

Determines whether the focus is restored to the last known when navigating back to a prevously opened column, for example, upon closing of the end column and being transfered back to the mid column.

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

Default value is false.

showPlaceholder

Shows the placeholder on the corresponding column for the provided aggregation name.

to

Navigates to the given page inside the FlexibleColumnLayout. Columns are scanned for the page in the following order: Begin, Mid, End.

toBeginColumnPage

Navigates to a given Begin column page.

toEndColumnPage

Navigates to a given End column page.

toMidColumnPage

Navigates to a given Mid column page.

_getColumnWidthDistributionForLayout

Returns a string, representing the relative percentage sizes of the columns for the given layout in the format "begin/mid/end" (f.e. "33/67/0")

Param Type DefaultValue Description
sLayout string

the layout

bAsArray boolean

return an array in the format [33, 67, 0] instead of a string "33/67/0"

_getLayoutHistory

Returns the layout history object

addBeginColumnPage

Adds some beginColumnPage to the aggregation beginColumnPages.

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

The beginColumnPage to add; if empty, nothing is inserted

addEndColumnPage

Adds some endColumnPage to the aggregation endColumnPages.

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

The endColumnPage to add; if empty, nothing is inserted

addMidColumnPage

Adds some midColumnPage to the aggregation midColumnPages.

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

The midColumnPage to add; if empty, nothing is inserted

attachAfterBeginColumnNavigate

Attaches event handler fnFunction to the afterBeginColumnNavigate event of this sap.f.FlexibleColumnLayout.

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.f.FlexibleColumnLayout itself.

Fires when navigation between two pages in the Begin column has completed.

NOTE: In case of animated transitions this event is fired with some delay after the navigate 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.f.FlexibleColumnLayout itself

attachAfterEndColumnNavigate

Attaches event handler fnFunction to the afterEndColumnNavigate event of this sap.f.FlexibleColumnLayout.

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.f.FlexibleColumnLayout itself.

Fires when navigation between two pages in the End column has completed.

NOTE: In case of animated transitions this event is fired with some delay after the navigate 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.f.FlexibleColumnLayout itself

attachAfterMidColumnNavigate

Attaches event handler fnFunction to the afterMidColumnNavigate event of this sap.f.FlexibleColumnLayout.

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.f.FlexibleColumnLayout itself.

Fires when navigation between two pages in the Mid column has completed.

NOTE: In case of animated transitions this event is fired with some delay after the navigate 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.f.FlexibleColumnLayout itself

attachBeginColumnNavigate

Attaches event handler fnFunction to the beginColumnNavigate event of this sap.f.FlexibleColumnLayout.

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.f.FlexibleColumnLayout itself.

Fires when navigation between two pages in the Begin column has been triggered. The transition (if any) to the new page has not started yet. This event can be aborted by the application with preventDefault(), which means that there will be no navigation.

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.f.FlexibleColumnLayout itself

attachColumnResize

Attaches event handler fnFunction to the columnResize event of this sap.f.FlexibleColumnLayout.

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.f.FlexibleColumnLayout itself.

Fired when resize of each column has completed.

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.f.FlexibleColumnLayout itself

attachEndColumnNavigate

Attaches event handler fnFunction to the endColumnNavigate event of this sap.f.FlexibleColumnLayout.

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.f.FlexibleColumnLayout itself.

Fires when navigation between two pages in the End column has been triggered. The transition (if any) to the new page has not started yet. This event can be aborted by the application with preventDefault(), which means that there will be no navigation.

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.f.FlexibleColumnLayout itself

attachMidColumnNavigate

Attaches event handler fnFunction to the midColumnNavigate event of this sap.f.FlexibleColumnLayout.

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.f.FlexibleColumnLayout itself.

Fires when navigation between two pages in the Mid column has been triggered. The transition (if any) to the new page has not started yet. This event can be aborted by the application with preventDefault(), which means that there will be no navigation.

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.f.FlexibleColumnLayout itself

attachStateChange

Attaches event handler fnFunction to the stateChange event of this sap.f.FlexibleColumnLayout.

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.f.FlexibleColumnLayout itself.

Fired when there is a change in the layout property or in the maximum number of columns that can be displayed at once.



Note: The event is suppressed while the control has zero width and will be fired the first time it gets a non-zero width

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.f.FlexibleColumnLayout itself

backToPage

Navigates back to a page in the FlexibleColumnLayout. Columns are scanned for the page in the following order: Begin, Mid, End.

Calling this navigation method, first triggers the (cancelable) navigate event on the SplitContainer, then the BeforeHide pseudo event on the source page, BeforeFirstShow (if applicable), and BeforeShow on the target page. Later, after the transition has completed, the AfterShow pseudo event is triggered on the target page and AfterHide - on the page, which has been left. The given backData object is available in the BeforeFirstShow, BeforeShow, and AfterShow event objects as data property. The original "data" object from the "to" navigation is also available in these event objects.

Param Type DefaultValue Description
sPageId string

The screen to which is being navigated to. The ID or the control itself can be given.

oBackData object

This optional object can carry any payload data which should be made available to the target page of the back navigation. The event on the target page will contain this data object as backData property. (the original data from the to() navigation will still be available as data property).

In scenarios, where the entity triggering the navigation can't or shouldn't directly initialize the target page, it can fill this object and the target page itself (or a listener on it) can take over the initialization, using the given data. For back navigation this can be used, for example, when returning from a detail page to transfer any settings done there.

When the transitionParameters object is used, this data object must also be given (either as object or as null) in order to have a proper parameter order.

oTransitionParameters object

This optional object can give additional information to the transition function, like the DOM element, which triggered the transition or the desired transition duration. The animation type can NOT be selected here - it is always the inverse of the "to" navigation.

In order to use the transitionParameters property, the data property must be used (at least "null" must be given) for a proper parameter order.

NOTE: it depends on the transition function how the object should be structured and which parameters are actually used to influence the transition.

backToTopBeginColumn

Navigates back to the initial/top level of Begin column (this is the element aggregated as "initialPage", or the first added element). NOTE: If already on the initial page, nothing happens. The transition effect which had been used to get to the current page is inverted and used for this navigation.

Param Type DefaultValue Description
oBackData object

This optional object can carry any payload data which should be made available to the target page of the back navigation. The event on the target page will contain this data object as "backData" property. (The original data from the "to()" navigation will still be available as "data" property.)

In scenarios where the entity triggering the navigation can or should not directly initialize the target page, it can fill this object and the target page itself (or a listener on it) can take over the initialization, using the given data. For back navigation this can be used e.g. when returning from a detail page to transfer any settings done there.

When the "transitionParameters" object is used, this "data" object must also be given (either as object or as null) in order to have a proper parameter order.

oTransitionParameters object

This optional object can give additional information to the transition function, like the DOM element which triggered the transition or the desired transition duration. The animation type can NOT be selected here - it is always the inverse of the "to" navigation.

In order to use the transitionParameters property, the data property must be used (at least "null" must be given) for a proper parameter order.

NOTE: it depends on the transition function how the object should be structured and which parameters are actually used to influence the transition.

backToTopEndColumn

Navigates back to the initial/top level of End column (this is the element aggregated as "initialPage", or the first added element). NOTE: If already on the initial page, nothing happens. The transition effect which had been used to get to the current page is inverted and used for this navigation.

Param Type DefaultValue Description
oBackData object

This optional object can carry any payload data which should be made available to the target page of the back navigation. The event on the target page will contain this data object as "backData" property. (The original data from the "to()" navigation will still be available as "data" property.)

In scenarios where the entity triggering the navigation can or should not directly initialize the target page, it can fill this object and the target page itself (or a listener on it) can take over the initialization, using the given data. For back navigation this can be used e.g. when returning from a detail page to transfer any settings done there.

When the "transitionParameters" object is used, this "data" object must also be given (either as object or as null) in order to have a proper parameter order.

oTransitionParameters object

This optional object can give additional information to the transition function, like the DOM element which triggered the transition or the desired transition duration. The animation type can NOT be selected here - it is always the inverse of the "to" navigation.

In order to use the transitionParameters property, the data property must be used (at least "null" must be given) for a proper parameter order.

NOTE: it depends on the transition function how the object should be structured and which parameters are actually used to influence the transition.

backToTopMidColumn

Navigates back to the initial/top level of Mid column (this is the element aggregated as "initialPage", or the first added element). NOTE: If already on the initial page, nothing happens. The transition effect which had been used to get to the current page is inverted and used for this navigation.

Param Type DefaultValue Description
oBackData object

This optional object can carry any payload data which should be made available to the target page of the back navigation. The event on the target page will contain this data object as "backData" property. (The original data from the "to()" navigation will still be available as "data" property.)

In scenarios where the entity triggering the navigation can or should not directly initialize the target page, it can fill this object and the target page itself (or a listener on it) can take over the initialization, using the given data. For back navigation this can be used e.g. when returning from a detail page to transfer any settings done there.

When the "transitionParameters" object is used, this "data" object must also be given (either as object or as null) in order to have a proper parameter order.

oTransitionParameters object

This optional object can give additional information to the transition function, like the DOM element which triggered the transition or the desired transition duration. The animation type can NOT be selected here - it is always the inverse of the "to" navigation.

In order to use the transitionParameters property, the data property must be used (at least "null" must be given) for a proper parameter order.

NOTE: it depends on the transition function how the object should be structured and which parameters are actually used to influence the transition.

destroyBeginColumnPages

Destroys all the beginColumnPages in the aggregation beginColumnPages.

destroyEndColumnPages

Destroys all the endColumnPages in the aggregation endColumnPages.

destroyLandmarkInfo

Destroys the landmarkInfo in the aggregation landmarkInfo.

destroyMidColumnPages

Destroys all the midColumnPages in the aggregation midColumnPages.

detachAfterBeginColumnNavigate

Detaches event handler fnFunction from the afterBeginColumnNavigate event of this sap.f.FlexibleColumnLayout.

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

detachAfterEndColumnNavigate

Detaches event handler fnFunction from the afterEndColumnNavigate event of this sap.f.FlexibleColumnLayout.

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

detachAfterMidColumnNavigate

Detaches event handler fnFunction from the afterMidColumnNavigate event of this sap.f.FlexibleColumnLayout.

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

detachBeginColumnNavigate

Detaches event handler fnFunction from the beginColumnNavigate event of this sap.f.FlexibleColumnLayout.

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

detachColumnResize

Detaches event handler fnFunction from the columnResize event of this sap.f.FlexibleColumnLayout.

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

detachEndColumnNavigate

Detaches event handler fnFunction from the endColumnNavigate event of this sap.f.FlexibleColumnLayout.

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

detachMidColumnNavigate

Detaches event handler fnFunction from the midColumnNavigate event of this sap.f.FlexibleColumnLayout.

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

detachStateChange

Detaches event handler fnFunction from the stateChange event of this sap.f.FlexibleColumnLayout.

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

sap.f.FlexibleColumnLayout.extend

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

fireAfterBeginColumnNavigate

Fires event afterBeginColumnNavigate to attached listeners.

Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

from sap.ui.core.Control

The page, which had been displayed before navigation.

fromId string

The ID of the page, which had been displayed before navigation.

to sap.ui.core.Control

The page, which is now displayed after navigation.

toId string

The ID of the page, which is now displayed after navigation.

firstTime boolean

Whether the "to" page (more precisely: a control with the ID of the page, which has been navigated to) has not been displayed/navigated to before.

isTo boolean

Determines whether was a forward navigation, triggered by to().

isBack boolean

Determines whether this was a back navigation, triggered by back().

isBackToTop boolean

Determines whether this was a navigation to the root page, triggered by backToTop().

isBackToPage boolean

Determines whether this was a navigation to a specific page, triggered by backToPage().

direction string

Determines how the navigation was triggered, possible values are "to", "back", "backToPage", and "backToTop".

fireAfterEndColumnNavigate

Fires event afterEndColumnNavigate to attached listeners.

Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

from sap.ui.core.Control

The page, which had been displayed before navigation.

fromId string

The ID of the page, which had been displayed before navigation.

to sap.ui.core.Control

The page, which is now displayed after navigation.

toId string

The ID of the page, which is now displayed after navigation.

firstTime boolean

Whether the "to" page (more precisely: a control with the ID of the page, which has been navigated to) has not been displayed/navigated to before.

isTo boolean

Determines whether was a forward navigation, triggered by to().

isBack boolean

Determines whether this was a back navigation, triggered by back().

isBackToTop boolean

Determines whether this was a navigation to the root page, triggered by backToTop().

isBackToPage boolean

Determines whether this was a navigation to a specific page, triggered by backToPage().

direction string

Determines how the navigation was triggered, possible values are "to", "back", "backToPage", and "backToTop".

fireAfterMidColumnNavigate

Fires event afterMidColumnNavigate to attached listeners.

Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

from sap.ui.core.Control

The page, which had been displayed before navigation.

fromId string

The ID of the page, which had been displayed before navigation.

to sap.ui.core.Control

The page, which is now displayed after navigation.

toId string

The ID of the page, which is now displayed after navigation.

firstTime boolean

Whether the "to" page (more precisely: a control with the ID of the page, which has been navigated to) has not been displayed/navigated to before.

isTo boolean

Determines whether was a forward navigation, triggered by to().

isBack boolean

Determines whether this was a back navigation, triggered by back().

isBackToTop boolean

Determines whether this was a navigation to the root page, triggered by backToTop().

isBackToPage boolean

Determines whether this was a navigation to a specific page, triggered by backToPage().

direction string

Determines how the navigation was triggered, possible values are "to", "back", "backToPage", and "backToTop".

fireBeginColumnNavigate

Fires event beginColumnNavigate to attached listeners.

Listeners may prevent the default action of this event by calling the preventDefault method on the event object. The return value of this method indicates whether the default action should be executed.

Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

from sap.ui.core.Control

The page, which was displayed before the current navigation.

fromId string

The ID of the page, which was displayed before the current navigation.

to sap.ui.core.Control

The page, which will be displayed after the current navigation.

toId string

The ID of the page, which will be displayed after the current navigation.

firstTime boolean

Determines whether the "to" page (more precisely: a control with the ID of the page, which is currently being navigated to) has not been displayed/navigated to before.

isTo boolean

Determines whether this is a forward navigation, triggered by to().

isBack boolean

Determines whether this is a back navigation, triggered by back().

isBackToTop boolean

Determines whether this is a navigation to the root page, triggered by backToTop().

isBackToPage boolean

Determines whether this was a navigation to a specific page, triggered by backToPage().

direction string

Determines how the navigation was triggered, possible values are "to", "back", "backToPage", and "backToTop".

fireColumnResize

Fires event columnResize to attached listeners.

Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

beginColumn boolean

Determines whether beginColumn resize has completed.

midColumn boolean

Determines whether midColumn resize has completed.

endColumn boolean

Determines whether endColumn resize has completed.

fireEndColumnNavigate

Fires event endColumnNavigate to attached listeners.

Listeners may prevent the default action of this event by calling the preventDefault method on the event object. The return value of this method indicates whether the default action should be executed.

Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

from sap.ui.core.Control

The page, which was displayed before the current navigation.

fromId string

The ID of the page, which was displayed before the current navigation.

to sap.ui.core.Control

The page, which will be displayed after the current navigation.

toId string

The ID of the page, which will be displayed after the current navigation.

firstTime boolean

Determines whether the "to" page (more precisely: a control with the ID of the page, which is currently being navigated to) has not been displayed/navigated to before.

isTo boolean

Determines whether this is a forward navigation, triggered by to().

isBack boolean

Determines whether this is a back navigation, triggered by back().

isBackToTop boolean

Determines whether this is a navigation to the root page, triggered by backToTop().

isBackToPage boolean

Determines whether this was a navigation to a specific page, triggered by backToPage().

direction string

Determines how the navigation was triggered, possible values are "to", "back", "backToPage", and "backToTop".

fireMidColumnNavigate

Fires event midColumnNavigate to attached listeners.

Listeners may prevent the default action of this event by calling the preventDefault method on the event object. The return value of this method indicates whether the default action should be executed.

Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

from sap.ui.core.Control

The page, which was displayed before the current navigation.

fromId string

The ID of the page, which was displayed before the current navigation.

to sap.ui.core.Control

The page, which will be displayed after the current navigation.

toId string

The ID of the page, which will be displayed after the current navigation.

firstTime boolean

Determines whether the "to" page (more precisely: a control with the ID of the page, which is currently being navigated to) has not been displayed/navigated to before.

isTo boolean

Determines whether this is a forward navigation, triggered by to().

isBack boolean

Determines whether this is a back navigation, triggered by back().

isBackToTop boolean

Determines whether this is a navigation to the root page, triggered by backToTop().

isBackToPage boolean

Determines whether this was a navigation to a specific page, triggered by backToPage().

direction string

Determines how the navigation was triggered, possible values are "to", "back", "backToPage", and "backToTop".

fireStateChange

Fires event stateChange to attached listeners.

Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

layout sap.f.LayoutType

The value of the layout property

maxColumnsCount int

The maximum number of columns that can be displayed at once based on the available screen size and control settings.

    Possible values are:
  • 3 for browser size of 1280px or more
  • 2 for browser size between 960px and 1280px
  • 1 for browser size less than 960px

isNavigationArrow boolean

Indicates whether the layout changed as a result of the user clicking a layout arrow

isResize boolean

Indicates whether the maximum number of columns that can be displayed at once changed

getAutoFocus

Gets current value of property autoFocus.

Determines whether the initial focus is set automatically on first rendering and after navigating to a new page.

For more information, see sap.m.NavContainer#autoFocus.

Default value is true.

getBackgroundDesign

Gets current value of property backgroundDesign.

Specifies the background color of the content. The visualization of the different options depends on the used theme.

Default value is Transparent.

getBeginColumnPages

Gets content of aggregation beginColumnPages.

The content entities between which the FlexibleColumnLayout navigates in the Begin column.

These should be any control with page semantics. These aggregated controls will receive navigation events like BeforeShow, they are documented in the pseudo interface sap.m.NavContainerChild.

getCurrentBeginColumnPage

Returns the currently displayed Begin column page.

getCurrentEndColumnPage

Returns the currently displayed End column page.

getCurrentMidColumnPage

Returns the currently displayed Mid column page.

getDefaultTransitionNameBeginColumn

Gets current value of property defaultTransitionNameBeginColumn.

Determines the type of the transition/animation to apply for the Begin column when to() is called without defining the transition to use. The default is slide, other options are fade, flip, show, and the names of any registered custom transitions.

Default value is "slide".

getDefaultTransitionNameEndColumn

Gets current value of property defaultTransitionNameEndColumn.

Determines the type of the transition/animation to apply for the End column when to() is called without defining the transition to use. The default is slide, other options are fade, flip, show, and the names of any registered custom transitions.

Default value is "slide".

getDefaultTransitionNameMidColumn

Gets current value of property defaultTransitionNameMidColumn.

Determines the type of the transition/animation to apply for the Mid column when to() is called without defining the transition to use. The default is slide, other options are fade, flip, show, and the names of any registered custom transitions.

Default value is "slide".

getEndColumnPages

Gets content of aggregation endColumnPages.

The content entities between which the FlexibleColumnLayout navigates in the End column.

These should be any control with page semantics. These aggregated controls will receive navigation events like BeforeShow, they are documented in the pseudo interface sap.m.NavContainerChild.

getInitialBeginColumnPage

ID of the element which is the current target of the association initialBeginColumnPage, or null.

getInitialEndColumnPage

ID of the element which is the current target of the association initialEndColumnPage, or null.

getInitialMidColumnPage

ID of the element which is the current target of the association initialMidColumnPage, or null.

getLandmarkInfo

Gets content of aggregation landmarkInfo.

Accessible landmark settings to be applied on the containers of the sap.f.FlexibleColumnLayout control.

If not set, no landmarks will be written.

getLayout

Gets current value of property layout.

Determines the layout of the control - number of visible columns and their relative sizes.

For more details, see Types of Layout in the documentation.

Default value is OneColumn.

getMaxColumnsCount

Returns the maximum number of columns that can be displayed at once based on the control width

sap.f.FlexibleColumnLayout.getMetadata

Returns a metadata object for class sap.f.FlexibleColumnLayout.

getMidColumnPages

Gets content of aggregation midColumnPages.

The content entities between which the FlexibleColumnLayout navigates in the Mid column.

These should be any control with page semantics. These aggregated controls will receive navigation events like BeforeShow, they are documented in the pseudo interface sap.m.NavContainerChild.

getRestoreFocusOnBackNavigation

Gets current value of property restoreFocusOnBackNavigation.

Determines whether the focus is restored to the last known when navigating back to a prevously opened column, for example, upon closing of the end column and being transfered back to the mid column.

Default value is false.

hidePlaceholder

Hides the placeholder on the corresponding column for the provided aggregation name.

Param Type DefaultValue Description
mSettings object

Object containing the aggregation name

aggregation string

The aggregation name to decide on which column/container the placeholder should be hidden

indexOfBeginColumnPage

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

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

The beginColumnPage whose index is looked for

indexOfEndColumnPage

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

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

The endColumnPage whose index is looked for

indexOfMidColumnPage

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

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

The midColumnPage whose index is looked for

insertBeginColumnPage

Inserts a beginColumnPage into the aggregation beginColumnPages.

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

The beginColumnPage to insert; if empty, nothing is inserted

iIndex int

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

insertEndColumnPage

Inserts a endColumnPage into the aggregation endColumnPages.

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

The endColumnPage to insert; if empty, nothing is inserted

iIndex int

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

insertMidColumnPage

Inserts a midColumnPage into the aggregation midColumnPages.

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

The midColumnPage to insert; if empty, nothing is inserted

iIndex int

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

needPlaceholder

Checks whether a placeholder is needed by comparing the currently displayed page with the page object that is going to be displayed. If they are the same, no placeholder needs to be shown.

Param Type DefaultValue Description
sAggregationName string

The aggregation name for the corresponding column

oObject sap.ui.core.Control

The page object to be displayed

removeAllBeginColumnPages

Removes all the controls from the aggregation beginColumnPages.

Additionally, it unregisters them from the hosting UIArea.

removeAllEndColumnPages

Removes all the controls from the aggregation endColumnPages.

Additionally, it unregisters them from the hosting UIArea.

removeAllMidColumnPages

Removes all the controls from the aggregation midColumnPages.

Additionally, it unregisters them from the hosting UIArea.

removeBeginColumnPage

Removes a beginColumnPage from the aggregation beginColumnPages.

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

The beginColumnPage to remove or its index or id

removeEndColumnPage

Removes a endColumnPage from the aggregation endColumnPages.

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

The endColumnPage to remove or its index or id

removeMidColumnPage

Removes a midColumnPage from the aggregation midColumnPages.

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

The midColumnPage to remove or its index or id

setAutoFocus

Sets a new value for property autoFocus.

Determines whether the initial focus is set automatically on first rendering and after navigating to a new page.

For more information, see sap.m.NavContainer#autoFocus.

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

New value for property autoFocus

setBackgroundDesign

Sets a new value for property backgroundDesign.

Specifies the background color of the content. The visualization of the different options depends on the used theme.

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

Default value is Transparent.

Param Type DefaultValue Description
sBackgroundDesign sap.m.BackgroundDesign Transparent

New value for property backgroundDesign

setDefaultTransitionNameBeginColumn

Sets a new value for property defaultTransitionNameBeginColumn.

Determines the type of the transition/animation to apply for the Begin column when to() is called without defining the transition to use. The default is slide, other options are fade, flip, show, and the names of any registered custom transitions.

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

Default value is "slide".

Param Type DefaultValue Description
sDefaultTransitionNameBeginColumn string "slide"

New value for property defaultTransitionNameBeginColumn

setDefaultTransitionNameEndColumn

Sets a new value for property defaultTransitionNameEndColumn.

Determines the type of the transition/animation to apply for the End column when to() is called without defining the transition to use. The default is slide, other options are fade, flip, show, and the names of any registered custom transitions.

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

Default value is "slide".

Param Type DefaultValue Description
sDefaultTransitionNameEndColumn string "slide"

New value for property defaultTransitionNameEndColumn

setDefaultTransitionNameMidColumn

Sets a new value for property defaultTransitionNameMidColumn.

Determines the type of the transition/animation to apply for the Mid column when to() is called without defining the transition to use. The default is slide, other options are fade, flip, show, and the names of any registered custom transitions.

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

Default value is "slide".

Param Type DefaultValue Description
sDefaultTransitionNameMidColumn string "slide"

New value for property defaultTransitionNameMidColumn

setInitialBeginColumnPage

Sets the associated initialBeginColumnPage.

Param Type DefaultValue Description
oInitialBeginColumnPage sap.ui.core.ID sap.ui.core.Control

ID of an element which becomes the new target of this initialBeginColumnPage association; alternatively, an element instance may be given

setInitialEndColumnPage

Sets the associated initialEndColumnPage.

Param Type DefaultValue Description
oInitialEndColumnPage sap.ui.core.ID sap.ui.core.Control

ID of an element which becomes the new target of this initialEndColumnPage association; alternatively, an element instance may be given

setInitialMidColumnPage

Sets the associated initialMidColumnPage.

Param Type DefaultValue Description
oInitialMidColumnPage sap.ui.core.ID sap.ui.core.Control

ID of an element which becomes the new target of this initialMidColumnPage association; alternatively, an element instance may be given

setLandmarkInfo

Sets the aggregated landmarkInfo.

Param Type DefaultValue Description
oLandmarkInfo sap.f.FlexibleColumnLayoutAccessibleLandmarkInfo

The landmarkInfo to set

setLayout

Sets a new value for property layout.

Determines the layout of the control - number of visible columns and their relative sizes.

For more details, see Types of Layout in the documentation.

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

Default value is OneColumn.

Param Type DefaultValue Description
sLayout sap.f.LayoutType OneColumn

New value for property layout

setRestoreFocusOnBackNavigation

Sets a new value for property restoreFocusOnBackNavigation.

Determines whether the focus is restored to the last known when navigating back to a prevously opened column, for example, upon closing of the end column and being transfered back to the mid column.

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

New value for property restoreFocusOnBackNavigation

showPlaceholder

Shows the placeholder on the corresponding column for the provided aggregation name.

Param Type DefaultValue Description
mSettings object

Object containing the aggregation name

aggregation string

The aggregation name to decide on which column/container the placeholder should be shown

to

Navigates to the given page inside the FlexibleColumnLayout. Columns are scanned for the page in the following order: Begin, Mid, End.

Param Type DefaultValue Description
sPageId string

The screen to which we are navigating to. The ID or the control itself can be given.

sTransitionName string slide

The type of the transition/animation to apply. Options are: "slide" (horizontal movement from the right), "fade", "flip", and "show" and the names of any registered custom transitions.

None of the standard transitions is currently making use of any given transition parameters.

oData object

This optional object can carry any payload data which should be made available to the target page. The BeforeShow event on the target page will contain this data object as data property.

Use case: in scenarios where the entity triggering the navigation can or should not directly initialize the target page, it can fill this object and the target page itself (or a listener on it) can take over the initialization, using the given data.

When the transitionParameters object is used, this "data" object must also be given (either as object or as null) in order to have a proper parameter order.

oTransitionParameters object

This optional object can contain additional information for the transition function, like the DOM element which triggered the transition or the desired transition duration.

For a proper parameter order, the "data" parameter must be given when the transitionParameters parameter is used (it can be given as "null").

NOTE: It depends on the transition function how the object should be structured and which parameters are actually used to influence the transition. The "show", "slide" and "fade" transitions do not use any parameter.

toBeginColumnPage

Navigates to a given Begin column page.

Param Type DefaultValue Description
sPageId string

The screen to which drilldown should happen. The ID or the control itself can be given.

sTransitionName string slide

The type of the transition/animation to apply. Options are: "slide" (horizontal movement from the right), "fade", "flip", and "show" and the names of any registered custom transitions.

None of the standard transitions is currently making use of any given transition parameters.

oData object

This optional object can carry any payload data which should be made available to the target page. The BeforeShow event on the target page will contain this data object as data property.

Use case: in scenarios where the entity triggering the navigation can't or shouldn't directly initialize the target page, it can fill this object and the target page itself (or a listener on it) can take over the initialization, using the given data.

When the transitionParameters object is used, this data object must also be given (either as object or as null) in order to have a proper parameter order.

oTransitionParameters object

This optional object can contain additional information for the transition function, like the DOM element, which triggered the transition or the desired transition duration.

For a proper parameter order, the data parameter must be given when the transitionParameters parameter is used (it can be given as "null").

NOTE: it depends on the transition function how the object should be structured and which parameters are actually used to influence the transition. The "show", "slide" and "fade" transitions do not use any parameter.

toEndColumnPage

Navigates to a given End column page.

Param Type DefaultValue Description
sPageId string

The screen to which drilldown should happen. The ID or the control itself can be given.

sTransitionName string slide

The type of the transition/animation to apply. Options are: "slide" (horizontal movement from the right), "fade", "flip", and "show" and the names of any registered custom transitions.

None of the standard transitions is currently making use of any given transition parameters.

oData object

This optional object can carry any payload data which should be made available to the target page. The BeforeShow event on the target page will contain this data object as data property.

Use case: in scenarios where the entity triggering the navigation can't or shouldn't directly initialize the target page, it can fill this object and the target page itself (or a listener on it) can take over the initialization, using the given data.

When the transitionParameters object is used, this data object must also be given (either as object or as null) in order to have a proper parameter order.

oTransitionParameters object

This optional object can contain additional information for the transition function, like the DOM element, which triggered the transition or the desired transition duration.

For a proper parameter order, the data parameter must be given when the transitionParameters parameter is used (it can be given as "null").

NOTE: it depends on the transition function how the object should be structured and which parameters are actually used to influence the transition. The "show", "slide" and "fade" transitions do not use any parameter.

toMidColumnPage

Navigates to a given Mid column page.

Param Type DefaultValue Description
sPageId string

The screen to which drilldown should happen. The ID or the control itself can be given.

sTransitionName string slide

The type of the transition/animation to apply. Options are: "slide" (horizontal movement from the right), "fade", "flip", and "show" and the names of any registered custom transitions.

None of the standard transitions is currently making use of any given transition parameters.

oData object

This optional object can carry any payload data which should be made available to the target page. The BeforeShow event on the target page will contain this data object as data property.

Use case: in scenarios where the entity triggering the navigation can't or shouldn't directly initialize the target page, it can fill this object and the target page itself (or a listener on it) can take over the initialization, using the given data.

When the transitionParameters object is used, this data object must also be given (either as object or as null) in order to have a proper parameter order.

oTransitionParameters object

This optional object can contain additional information for the transition function, like the DOM element, which triggered the transition or the desired transition duration.

For a proper parameter order, the data parameter must be given when the transitionParameters parameter is used (it can be given as "null").

NOTE: it depends on the transition function how the object should be structured and which parameters are actually used to influence the transition. The "show", "slide" and "fade" transitions do not use any parameter.