Implements the master-detail-detail paradigm by displaying up to three pages in separate columns.
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.
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.
sap.f.FlexibleColumnLayout
-based app, you can use the sap.f.FlexibleColumnLayoutSemanticHelper
class.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 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 |
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. |
backgroundDesign | sap.m.BackgroundDesign | Transparent | Specifies the background color of the content. The visualization of the different options depends on the used theme. |
defaultTransitionNameBeginColumn | string | slide | Determines the type of the transition/animation to apply for the |
defaultTransitionNameEndColumn | string | slide | Determines the type of the transition/animation to apply for the |
defaultTransitionNameMidColumn | string | slide | Determines the type of the transition/animation to apply for the |
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. |
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 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 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 If not set, no landmarks will be written. |
midColumnPages | 0..n | sap.ui.core.Control |
The content entities between which the 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. |
Name | Cardinality | Type | Description |
---|---|---|---|
initialBeginColumnPage | 0..1 | sap.ui.core.Control |
Sets the initial |
initialEndColumnPage | 0..1 | sap.ui.core.Control |
Sets the initial |
initialMidColumnPage | 0..1 | sap.ui.core.Control |
Sets the initial |
Event | Description |
---|---|
afterBeginColumnNavigate |
Fires when navigation between two pages in the 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 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 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 Listeners may prevent the default action of this event by calling the |
columnResize |
Fired when resize of each column has completed. |
endColumnNavigate |
Fires when navigation between two pages in the Listeners may prevent the default action of this event by calling the |
midColumnNavigate |
Fires when navigation between two pages in the Listeners may prevent the default action of this event by calling the |
stateChange |
Fired when there is a change in the
Note: The event is suppressed while the control has zero width and will be fired the first time it gets a non-zero width |
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 |
midColumn | boolean |
Determines whether |
endColumn | boolean |
Determines whether |
Fired when there is a change in the layout
property or in the maximum number of columns that can be displayed at once.
layout
was changed indirectly by the user clicking a layout arrowParam | Type | Description |
---|---|---|
oControlEvent | sap.ui.base.Event | |
getSource | sap.ui.base.EventProvider | |
getParameters | object | |
layout | sap.f.LayoutType |
The value of the |
maxColumnsCount | int |
The maximum number of columns that can be displayed at once based on the available screen size and control settings.
|
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 |
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 When called, the context of the event handler (its Fires when navigation between two pages in the NOTE: In case of animated transitions this event is fired with some delay after the navigate event. |
attachAfterEndColumnNavigate |
Attaches event handler When called, the context of the event handler (its Fires when navigation between two pages in the NOTE: In case of animated transitions this event is fired with some delay after the navigate event. |
attachAfterMidColumnNavigate |
Attaches event handler When called, the context of the event handler (its Fires when navigation between two pages in the NOTE: In case of animated transitions this event is fired with some delay after the navigate event. |
attachBeginColumnNavigate |
Attaches event handler When called, the context of the event handler (its Fires when navigation between two pages in the |
attachColumnResize |
Attaches event handler When called, the context of the event handler (its Fired when resize of each column has completed. |
attachEndColumnNavigate |
Attaches event handler When called, the context of the event handler (its Fires when navigation between two pages in the |
attachMidColumnNavigate |
Attaches event handler When called, the context of the event handler (its Fires when navigation between two pages in the |
attachStateChange |
Attaches event handler When called, the context of the event handler (its Fired when there is a change in the
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 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 The passed function and listener object must match the ones used for event registration. |
detachAfterEndColumnNavigate |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
detachAfterMidColumnNavigate |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
detachBeginColumnNavigate |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
detachColumnResize |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
detachEndColumnNavigate |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
detachMidColumnNavigate |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
detachStateChange |
Detaches event handler 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
|
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 |
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 |
fireMidColumnNavigate |
Fires event midColumnNavigate to attached listeners. Listeners may prevent the default action of this event by calling the |
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 |
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 |
getBeginColumnPages |
Gets content of aggregation beginColumnPages. The content entities between which the 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 Default value is |
getDefaultTransitionNameEndColumn |
Gets current value of property defaultTransitionNameEndColumn. Determines the type of the transition/animation to apply for the Default value is |
getDefaultTransitionNameMidColumn |
Gets current value of property defaultTransitionNameMidColumn. Determines the type of the transition/animation to apply for the Default value is |
getEndColumnPages |
Gets content of aggregation endColumnPages. The content entities between which the 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 |
getInitialEndColumnPage |
ID of the element which is the current target of the association initialEndColumnPage, or |
getInitialMidColumnPage |
ID of the element which is the current target of the association initialMidColumnPage, or |
getLandmarkInfo |
Gets content of aggregation landmarkInfo. Accessible landmark settings to be applied on the containers of the 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 |
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 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 |
hidePlaceholder |
Hides the placeholder on the corresponding column for the provided aggregation name. |
indexOfBeginColumnPage |
Checks for the provided |
indexOfEndColumnPage |
Checks for the provided |
indexOfMidColumnPage |
Checks for the provided |
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 Default value is |
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 Default value is |
setDefaultTransitionNameBeginColumn |
Sets a new value for property defaultTransitionNameBeginColumn. Determines the type of the transition/animation to apply for the When called with a value of Default value is |
setDefaultTransitionNameEndColumn |
Sets a new value for property defaultTransitionNameEndColumn. Determines the type of the transition/animation to apply for the When called with a value of Default value is |
setDefaultTransitionNameMidColumn |
Sets a new value for property defaultTransitionNameMidColumn. Determines the type of the transition/animation to apply for the When called with a value of Default value is |
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 Default value is |
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 Default value is |
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: |
toBeginColumnPage |
Navigates to a given Begin column page. |
toEndColumnPage |
Navigates to a given End column page. |
toMidColumnPage |
Navigates to a given Mid column page. |
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" |
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 |
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 |
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 |
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 |
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.
layout
was changed indirectly by the user clicking a layout arrowParam | 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 |
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. |
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. |
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. |
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. |
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 |
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 |
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 |
Fires event columnResize to attached listeners.
Param | Type | DefaultValue | Description |
---|---|---|---|
mParameters | object |
Parameters to pass along with the event |
|
beginColumn | boolean |
Determines whether |
|
midColumn | boolean |
Determines whether |
|
endColumn | boolean |
Determines whether |
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 |
|
maxColumnsCount | int |
The maximum number of columns that can be displayed at once based on the available screen size and control settings.
|
|
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 |
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
.
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
.
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.
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"
.
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"
.
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"
.
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.
ID of the element which is the current target of the association initialBeginColumnPage, or null
.
ID of the element which is the current target of the association initialEndColumnPage, or null
.
ID of the element which is the current target of the association initialMidColumnPage, or null
.
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.
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
.
Returns the maximum number of columns that can be displayed at once based on the control width
Returns a metadata object for class sap.f.FlexibleColumnLayout.
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.
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
Removes all the controls from the aggregation beginColumnPages.
Additionally, it unregisters them from the hosting UIArea.
Removes all the controls from the aggregation endColumnPages.
Additionally, it unregisters them from the hosting UIArea.
Removes all the controls from the aggregation midColumnPages.
Additionally, it unregisters them from the hosting UIArea.
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
Sets the aggregated landmarkInfo.
Param | Type | DefaultValue | Description |
---|---|---|---|
oLandmarkInfo | sap.f.FlexibleColumnLayoutAccessibleLandmarkInfo |
The landmarkInfo to set |
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 |
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 |
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. |
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. |
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. |
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. |