Helper class, facilitating the implementation of the recommended UX design of a sap.f.FlexibleColumnLayout
-based app.
Note: Using this class is not mandatory in order to build an app with sap.f.FlexibleColumnLayout
, but exists for convenience only.
sap.f.FlexibleColumnLayoutSemanticHelper
revolves around two main methods: getCurrentUIState
Suggests which action buttons to show in each sap.f.FlexibleColumnLayout
column, based on the current control state (number and visibility of columns, layout, etc..)getNextUIState
Suggests which layout
to use when navigating to another view level (e.g. from one view to two views).Sample usage of the class:
var helper = sap.f.FlexibleColumnLayoutSemanticHelper.getInstanceFor(myFlexibleColumnLayout);
helper.getCurrentUIState();
helper.getNextUIState(2);
helper.getNextUIState(0);
Calling getCurrentUIState()
will return information which action buttons (Close, FullScreen, ExitFullScreen) must be currently shown in which column, according to UX guidelines, as well as to what layout clicking them should lead.
Calling getNextUIState(2)
will return information about the expected layout and action buttons if the application should display three views (master-detail-detail), based on the current state.
Similarly, calling getNextUIState(0)
will return information about the expected layout and action buttons if the application should display the initial view only (master), based on the current state.
For more information, see sap.f.FlexibleColumnLayoutSemanticHelper#getCurrentUIState and sap.f.FlexibleColumnLayoutSemanticHelper#getNextUIState
Constructor for an sap.f.FlexibleColumnLayoutSemanticHelper.
new sap.f.FlexibleColumnLayoutSemanticHelper(oFlexibleColumnLayout, oSettings)
Param | Type | Default Value | Description |
---|---|---|---|
oFlexibleColumnLayout | sap.f.FlexibleColumnLayout | The |
|
oSettings | object | Determines the rules that will be used by the helper. |
|
defaultTwoColumnLayoutType? | sap.f.LayoutType | sap.f.LayoutType.TwoColumnsBeginExpanded | Determines what two-column layout type will be suggested by default: |
defaultThreeColumnLayoutType? | sap.f.LayoutType | sap.f.LayoutType.ThreeColumnsMidExpanded | Determines what three-column layout type will be suggested by default: |
maxColumnsCount | int | Determines the maximum number of columns that will be displayed side by side.
|
|
initialColumnsCount | int | Determines whether a single-column or a 2-column layout will be suggested for logical level 0.
|
|
mode | string | Deprecated as of version 1.50, use Determines the suggested layout types: |
Method | Description |
---|---|
getCurrentUIState |
Returns an object, describing the current state of the control and the expected action buttons for each column.
Note: This method relies on the internal Example value:
|
getDefaultLayouts |
Returns the default layout types for the different numbers of columns.
|
sap.f.FlexibleColumnLayoutSemanticHelper.getInstanceFor |
Returns an instance of the |
getNextUIState |
Returns an object, describing the state that the control will have after navigating to a different view level. About the format of return value, see: sap.f.FlexibleColumnLayoutSemanticHelper#getCurrentUIState |
isDOMReady |
Returns |
isReady |
Abstract wrapper for sap.f.FlexibleColumnLayoutSemanticHelper#isDOMReady. Returns |
whenDOMReady |
Returns promise which can be used to find out when the internal |
whenReady |
Returns promise which can be used to find out when internal criteria for this helper's API reliability are met. |
Returns an object, describing the current state of the control and the expected action buttons for each column.
layout
propertybeginColumn, midColumn, endColumn
, representing the relative percentage sizes of the three columns as integersbeginColumn, midColumn, endColumn
, representing the visibility of the three columnstrue
if only one column is visible at the moment, false
otherwise Note: This may be due to small screen size (phone) or due to a layout, for which a single column takes up the whole widthtrue
if the current layout
is one of the following: sap.f.LayoutType.OneColumn, sap.f.LayoutType.MidColumnFullScreen, sap.f.LayoutType.EndColumnFullScreen
, false
otherwise Note: While isFullScreen
can be true
for any layout, due to small screen size, isLogicallyFullScreen
will only be true
for the layout values, listed above.midColumn, endColumn
, each containing an object, telling whether action buttons should be shown in the mid
and end
columns, and what value of the layout
property should be set upon clicking these buttons. Each of these objects has the following fields: closeColumn, fullScreen, exitFullScreen
. If null
, then the respective action button should not be shown, otherwise provides the value of layout
property for the action button.Note: This method relies on the internal FlexibleColumnLayout
reference to be rendered in the DOM tree. For convenience, use methods sap.f.FlexibleColumnLayoutSemanticHelper#isDOMReady and sap.f.FlexibleColumnLayoutSemanticHelper#whenDOMReady.
Example value:
{
"layout":"ThreeColumnsMidExpanded",
"maxColumnsCount":3,
"columnsSizes":{
"beginColumn":25,
"midColumn":50,
"endColumn":25
},
"columnsVisibility":{
"beginColumn":true,
"midColumn":true,
"endColumn":true
},
"isFullScreen":false,
"isLogicallyFullScreen":false,
"actionButtonsInfo":{
"midColumn":{
"fullScreen":null,
"exitFullScreen":null,
"closeColumn":null
},
"endColumn":{
"fullScreen":"EndColumnFullScreen",
"exitFullScreen":null,
"closeColumn":"TwoColumnsBeginExpanded"
}
}
}
Returns the default layout types for the different numbers of columns.
Returns an instance of the sap.f.FlexibleColumnLayoutSemanticHelper
class for a given sap.f.FlexibleColumnLayout
object.
Param | Type | DefaultValue | Description |
---|---|---|---|
oFlexibleColumnLayout | sap.f.FlexibleColumnLayout |
The |
|
oSettings | object |
An optional settings object to be used when creating the instance. Note: will be considered only for the first |
Returns an object, describing the state that the control will have after navigating to a different view level.
About the format of return value, see: sap.f.FlexibleColumnLayoutSemanticHelper#getCurrentUIState
Param | Type | DefaultValue | Description |
---|---|---|---|
iNextLevel | int |
the view level that should be represented. 0 means initial (master only), 1 - master-detail, 2 - master-detail-detail, 3 and above - subsequent views |
Abstract wrapper for sap.f.FlexibleColumnLayoutSemanticHelper#isDOMReady. Returns true
if criteria are met for the APIs in this helper to be used.