FlexibleColumnLayout SAP SE Implements the master-detail-detail paradigm by displaying up to three pages in separate columns. <h3>Overview</h3> The control is logically similar to {@link sap.m.SplitContainer} with the difference that it capable of handling three columns (referred to as <code>Begin</code>, <code>Mid</code> and <code>End</code>) rather than two (<code>Master</code>, <code>Detail</code>). 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 {@link sap.m.NavContainer}, thus forming the three columns. <h3>Usage</h3> 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 <code>beginColumnPages</code>, <code>midColumnPages</code> and <code>endColumnPages</code> aggregations. The relative sizes and the visibility of the three columns are determined based on the value of the {@link sap.f.LayoutType layout} property. Changes to the layout due to user interaction are communicated to the app with the <code>stateChange</code> event. <ul><b>Notes:</b> <li>To easily implement the recommended UX design of a <code>sap.f.FlexibleColumnLayout</code>-based app, you can use the <code>sap.f.FlexibleColumnLayoutSemanticHelper</code> class.</li> <li>To facilitate the navigation and view loading, you can use the {@link sap.f.routing.Router} </li></ul> <h3>Responsive Behavior</h3> The control automatically displays the maximum possible number of columns based on the device size and current <code>layout</code>. 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 <code>layout</code> property. For detailed information, see {@link sap.f.LayoutType LayoutType} enumeration. 1.46 sap.ui.core/Control Determines the layout of the control - number of visible columns and their relative sizes. For more details, see {@link topic:3b9f760da5b64adf8db7f95247879086 Types of Layout} in the documentation. Determines the type of the transition/animation to apply for the <code>Begin</code> column when <code>to()</code> is called without defining the transition to use. The default is <code>slide</code>, other options are <code>fade</code>, <code>flip</code>, <code>show</code>, and the names of any registered custom transitions. Determines the type of the transition/animation to apply for the <code>Mid</code> column when <code>to()</code> is called without defining the transition to use. The default is <code>slide</code>, other options are <code>fade</code>, <code>flip</code>, <code>show</code>, and the names of any registered custom transitions. Determines the type of the transition/animation to apply for the <code>End</code> column when <code>to()</code> is called without defining the transition to use. The default is <code>slide</code>, other options are <code>fade</code>, <code>flip</code>, <code>show</code>, and the names of any registered custom transitions. Specifies the background color of the content. The visualization of the different options depends on the used theme. Fired when there is a change in the <code>layout</code> property or in the maximum number of columns that can be displayed at once. <br/></br> <ul>The interactions that may lead to a state change are: <li>the property <code>layout</code> was changed indirectly by the user clicking a layout arrow</li> <li>the user resized the browser beyond a breakpoint, thus changing the maximum number of columns that can be displayed at once.</li></ul> <br/><br/> <b>Note: </b>The event is suppressed while the control has zero width and will be fired the first time it gets a non-zero width The value of the <code>layout</code> property The maximum number of columns that can be displayed at once based on the available screen size and control settings. <ul>Possible values are: <li>3 for browser size of 1280px or more</li> <li>2 for browser size between 960px and 1280px</li> <li>1 for browser size less than 960px</li></ul> Indicates whether the layout changed as a result of the user clicking a layout arrow Indicates whether the maximum number of columns that can be displayed at once changed Fires when navigation between two pages in the <code>Begin</code> 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. The page, which was displayed before the current navigation. The ID of the page, which was displayed before the current navigation. The page, which will be displayed after the current navigation. The ID of the page, which will be displayed after the current navigation. 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. Determines whether this is a forward navigation, triggered by to(). Determines whether this is a back navigation, triggered by back(). Determines whether this is a navigation to the root page, triggered by backToTop(). Determines whether this was a navigation to a specific page, triggered by backToPage(). Determines how the navigation was triggered, possible values are "to", "back", "backToPage", and "backToTop". Fires when navigation between two pages in the <code>Begin</code> column has completed. NOTE: In case of animated transitions this event is fired with some delay after the navigate event. The page, which had been displayed before navigation. The ID of the page, which had been displayed before navigation. The page, which is now displayed after navigation. The ID of the page, which is now displayed after navigation. 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. Determines whether was a forward navigation, triggered by to(). Determines whether this was a back navigation, triggered by back(). Determines whether this was a navigation to the root page, triggered by backToTop(). Determines whether this was a navigation to a specific page, triggered by backToPage(). Determines how the navigation was triggered, possible values are "to", "back", "backToPage", and "backToTop". Fires when navigation between two pages in the <code>Mid</code> 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. The page, which was displayed before the current navigation. The ID of the page, which was displayed before the current navigation. The page, which will be displayed after the current navigation. The ID of the page, which will be displayed after the current navigation. 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. Determines whether this is a forward navigation, triggered by to(). Determines whether this is a back navigation, triggered by back(). Determines whether this is a navigation to the root page, triggered by backToTop(). Determines whether this was a navigation to a specific page, triggered by backToPage(). Determines how the navigation was triggered, possible values are "to", "back", "backToPage", and "backToTop". Fires when navigation between two pages in the <code>Mid</code> column has completed. NOTE: In case of animated transitions this event is fired with some delay after the navigate event. The page, which had been displayed before navigation. The ID of the page, which had been displayed before navigation. The page, which is now displayed after navigation. The ID of the page, which is now displayed after navigation. 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. Determines whether was a forward navigation, triggered by to(). Determines whether this was a back navigation, triggered by back(). Determines whether this was a navigation to the root page, triggered by backToTop(). Determines whether this was a navigation to a specific page, triggered by backToPage(). Determines how the navigation was triggered, possible values are "to", "back", "backToPage", and "backToTop". Fires when navigation between two pages in the <code>End</code> 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. The page, which was displayed before the current navigation. The ID of the page, which was displayed before the current navigation. The page, which will be displayed after the current navigation. The ID of the page, which will be displayed after the current navigation. 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. Determines whether this is a forward navigation, triggered by to(). Determines whether this is a back navigation, triggered by back(). Determines whether this is a navigation to the root page, triggered by backToTop(). Determines whether this was a navigation to a specific page, triggered by backToPage(). Determines how the navigation was triggered, possible values are "to", "back", "backToPage", and "backToTop". Fires when navigation between two pages in the <code>End</code> column has completed. NOTE: In case of animated transitions this event is fired with some delay after the navigate event. The page, which had been displayed before navigation. The ID of the page, which had been displayed before navigation. The page, which is now displayed after navigation. The ID of the page, which is now displayed after navigation. 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. Determines whether was a forward navigation, triggered by to(). Determines whether this was a back navigation, triggered by back(). Determines whether this was a navigation to the root page, triggered by backToTop(). Determines whether this was a navigation to a specific page, triggered by backToPage(). Determines how the navigation was triggered, possible values are "to", "back", "backToPage", and "backToTop". The content entities between which the <code>FlexibleColumnLayout</code> navigates in the <code>Begin</code> column. These should be any control with page semantics. These aggregated controls will receive navigation events like {@link sap.m.NavContainerChild#event:beforeShow beforeShow}, they are documented in the pseudo interface {@link sap.m.NavContainerChild sap.m.NavContainerChild}. The content entities between which the <code>FlexibleColumnLayout</code> navigates in the <code>Mid</code> column. These should be any control with page semantics. These aggregated controls will receive navigation events like {@link sap.m.NavContainerChild#event:beforeShow beforeShow}, they are documented in the pseudo interface {@link sap.m.NavContainerChild sap.m.NavContainerChild}. The content entities between which the <code>FlexibleColumnLayout</code> navigates in the <code>End</code> column. These should be any control with page semantics. These aggregated controls will receive navigation events like {@link sap.m.NavContainerChild#event:beforeShow beforeShow}, they are documented in the pseudo interface {@link sap.m.NavContainerChild sap.m.NavContainerChild}. Sets the initial <code>Begin</code> column page, which is displayed on application launch. Sets the initial <code>Mid</code> column page, which is displayed on application launch. Sets the initial <code>End</code> column page, which is displayed on application launch. Navigates to the given page inside the FlexibleColumnLayout. Columns are scanned for the page in the following order: <code>Begin</code>, <code>Mid</code>, <code>End</code>. The screen to which we are navigating to. The ID or the control itself can be given. The type of the transition/animation to apply. This parameter can be omitted; then the default value is "slide" (horizontal movement from the right). 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. This optional object can contain additional information for the transition function, like the DOM element which triggered the transition or the desired transition duration. Navigates back to a page in the <code>FlexibleColumnLayout</code>. Columns are scanned for the page in the following order: <code>Begin</code>, <code>Mid</code>, <code>End</code>. 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. The screen to which is being navigated to. The ID or the control itself can be given. This optional object can carry any payload data which should be made available to the target page of the back navigation. This optional object can give additional information to the transition function, like the DOM element, which triggered the transition or the desired transition duration. Navigates to a given Begin column page. The screen to which drilldown should happen. The ID or the control itself can be given. The type of the transition/animation to apply. This parameter can be omitted; then the default value is "slide" (horizontal movement from the right). 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. This optional object can contain additional information for the transition function, like the DOM element, which triggered the transition or the desired transition duration. Navigates to a given Mid column page. The screen to which drilldown should happen. The ID or the control itself can be given. The type of the transition/animation to apply. This parameter can be omitted; then the default value is "slide" (horizontal movement from the right). 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. This optional object can contain additional information for the transition function, like the DOM element, which triggered the transition or the desired transition duration. Navigates to a given End column page. The screen to which drilldown should happen. The ID or the control itself can be given. The type of the transition/animation to apply. This parameter can be omitted; then the default value is "slide" (horizontal movement from the right). 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. This optional object can contain additional information for the transition function, like the DOM element, which triggered the transition or the desired transition duration. 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. 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.) This optional object can give additional information to the transition function, like the DOM element which triggered the transition or the desired transition duration. 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. 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.) This optional object can give additional information to the transition function, like the DOM element which triggered the transition or the desired transition duration. 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. 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.) This optional object can give additional information to the transition function, like the DOM element which triggered the transition or the desired transition duration. Returns the currently displayed Begin column page. Returns the currently displayed Mid column page. Returns the currently displayed End column page.