Flexible Layout Widget

Widget Definition

Name	FlexibleLayout
ID	com.hybris.cockpitng.flexiblelayout
Category	Layout
Description	Two-slots layout - main content container and a responsive sidebar.
Applied In	Not applicable.
Based On	Not applicable.
Author	SAP
Inputs	Details of input sockets: openSidebar Type: java.lang.Object Multiplicity: Single Description: whenever a message is received through this socket the sidebar is opened and remains in this state (value itself is ignored) closeSidebar Type: java.lang.Object Multiplicity: Single Description: whenever a message is received through this socket the sidebar is closed and remains in this state (value itself is ignored) toggleSidebar Type: java.lang.Object Multiplicity: Single Description: whenever a message is received through this socket the sidebar state changes between closed and responsive, the sidebar remains in this state (value itself is ignored) toggleCollapsedSidebar Type: java.lang.Object Multiplicity: Single Description: whenever a message is received on this socket the sidebar state is changed (narrowed or wide sidebar) and remains in this state (value itself is ignored) sidebarState Type: java.lang.String Multiplicity: Single Description: sets a state of the sidebar Possible values: empty: the sidebar is visible if the responsiveness is properly configured open: the sidebar is always visible, no matter what the resolution/responsiveness is. closed: the sidebar is always hidden, no matter what the resolution/responsiveness is. responsiveBreakpoint Type: java.lang.String Multiplicity: Single Description: responsiveness breakpoint Possible values: empty: disables the sidebar responsiveness XL, L, M, S: predefined breakpoint resolutions
Outputs	Details of output socket: sidebarState Type: java.lang.String Multiplicity: Single Description: informs about new sidebar state Possible values: empty: the sidebar is visible if the responsiveness is properly configured open: the sidebar is always visible closed: the sidebar is always hidden
Generated Events	Not applicable.

Configuration

Not applicable.

Widget Preview

The responsive sidebar can be displayed either on the left or on the right. It can be collapsed or expanded on high resolutions. On low resolutions it can be collapsed, expanded, or hidden.

Figure: Preview of Flexible Layout Widget collapsed.

Figure: Preview of Flexible Layout Widget expanded.

The sidebar is shown on the left and main container on the right. You can either collapse or expand the sidebar using the arrow placed at the bottom.

Figure: Preview of Flexible Layout Widget on low resolution

The two images show the widget view on low resolution. By default, the sidebar is invisible. It becomes visible after you click the hamburger icon placed on top. You can either collapse or expand the sidebar using the arrow placed at the bottom.

Settings

Setting	Type	Description
sidebarPosition	java.lang.String	Defines where the sidebar should be located. Possible values: left, right. Default value: left.
sidebarState	java.lang.String	Defines the sidebar state on startup (see sidebarState socket). Possible values: responsive, open, closed. Default value: responsive.
sidebarCollapsed	java.lang.Boolean	Informs whether the sidebar should be in a narrow or wide state on startup. If set to true, the sidebar is narrowed. Default value: false.
sidebarCollapsible	java.lang.Boolean	Informs whether the sidebar collapsing state can be changed at runtime. If set to false, the sidebar is displayed according to sidebarCollapsed setting and remains in this state. toggleCollapsedSidebar messages are ignored. Default value: true.
sidebarOverlap	java.lang.Boolean	When a side bar is opened, the setting makes it overlap the content. Default value: false.
overlapOnHover	java.lang.Boolean	If set as true, then whenever the sidebar is collapsed and you move a mouse cursor over it, it expands and overlaps content. It remains in this state until you move the cursor out of the sidebar. Default value: false.

Widget Slots

slotID	Multiplicity	Type	Slots Composition
cockpitWidgetChildrenInvisible	multi	Not applicable.	This is a general-purpose slot available for widgets. Any widget placed on this slot is not displayed in the application view but can be accessed through its socket API.
sidebar	single	Not applicable.	This slot represents contents of the sidebar.
contents	single	Not applicable.	This slot represents main contents.

Responsiveness

Flexible layout contains a responsive sidebar. To achieve it, a proper message must be received through responsiveBreakpoint input socket. Message is interpreted as one of predefined values (XL, L, M, S) that points to the certain resolution below which a sidebar is hidden by default. If the message is null or empty, then the responsiveness is disabled and the sidebar visibility may be changed only by the proper input sockets.

After the system initialization, flexible layout is rendered as not responsive. It remains in this state until some valid breakpoint value is received.

In most cases, a responsive sidebar requires a button that shows/hides it. In this case, see Flexible Sidebar Toggle Action.