Splitter

Use

The Splitter UI element is a vertical or horizontal bar that divides a container into two areas: a left and right area, or a top and bottom area. You can change the size of both areas by moving the sash. If one area is made bigger, the other area automatically is made smaller. The function for changing the size can be deactivated. The initial position of the sash can be specified either as an absolute value (e.g. 200px from the left, 100px from the right) or as a percentage (e.g. 30% corresponds to 30%-70%). If required, one of the two areas can be collapsed. Another Splitter can be embedded within a Splitter. However, we recommend you do not create deep nestings.

Examples of the Visualization:

Splitter

Note

When Splitter.enabled=none, everything is not ready for input, which means the entire container is also not ready for input.

Restrictions

It is not permitted to embed Active UI Elements in a Splitter. See also SAP Note 1156163 .
A Splitter must be embedded in a container that fulfils one of the following conditions:
- The height of the container is 100% and verticalSizing=FILL.
- The container has a fixed default height.
More information: SAP notes 1266588 and 1451443 .
A Splitter must not be embedded in a ScrollContainer.
Splitter areas cannot be automatically scrolled. Scrolling is only possible if transparent containers are inserted as the top UI elements, which then contain the actual splitter elements.

Implementation Details

Runtime Class

CL_WD_SPLITTER

Name	Type	Initial Value	Bindable
id	STRING	(automatic)	No
border	WDUI_SPLITTER_BORDER	none	Yes
collapseDirection	WDUI_SPLITTER_COLLAPSE_DIRECT	none	Yes
contextMenuBehaviour	WDUI_CONTEXT_MENU_BEHAVIOUR	inherit	No
contextMenuId	WDY_MD_UI_ELEMENT_REFERENCE		No
enabled	WDY_BOOLEAN	true	Yes
isCollapsed	WDY_BOOLEAN	false	Yes
height	STRING		Yes
orientation	WDUI_SASH_ORIENTATION	vertical	Yes
sashDesign	WDUI_SASH_DESIGN	standard	Yes
sashPosition	I	50	Yes
sashPositionMode	WDUI_SASH_POSITION_MODE	percent	Yes
sashType	WDUI_SASH_TYPE	interactive	Yes
styleClassName	STRING		Yes
tooltip	Translatable text		Yes
visible	WDUI_VISIBILITY	visible	Yes
width	STRING		Yes

Name	Cardinality	Type
FIRST	0..1	UIElement
SECOND	0..1	UIElement

Name
onResize

Other properties that can be inherited are defined in the related higher-level classes. The related UI elements are:

Dynamic Programming

For dynamic programming, the same properties, events, and aggregations as in the View Designer are available. But note that the spelling format and use of upper/lower case is different.

View Designer Name	Runtime Name	Type
border	BORDER	WDUI_SPLITTER_BORDER
border: areadivider	CL_WD_SPLITTER=>E_BORDER-AREADIVIDER
border: closure	CL_WD_SPLITTER=>E_BORDER-CLOSURE
border: closureLight	CL_WD_SPLITTER=>E_BORDER-CLOSURELIGHT
border: none	CL_WD_SPLITTER=>E_BORDER-NONE
border: subareaDivider	CL_WD_SPLITTER=>E_BORDER-SUBAREADIVIDER
contextMenuBehaviour	CONTEXT_MENU_BEHAVIOUR	WDUI_CONTEXT_MENU_BEHAVIOUR
contextMenuBehaviour: inherit	CL_WD_SPLITTER=>E_CONTEXT_MENU_BEHAVIOUR-INHERIT
contextMenuBehaviour: provide	CL_WD_SPLITTER=>E_CONTEXT_MENU_BEHAVIOUR-PROVIDE
contextMenuBehaviour: suppress	CL_WD_SPLITTER=>E_CONTEXT_MENU_BEHAVIOUR-SUPPRESS
collapseDirection	COLLAPSE_DIRECTION	WDUI_SPLITTER_COLLAPSE_DIRECT
collapseDirection: none	CL_WD_SPLITTER=>E_COLLAPSE_DIRECTION-NONE
collapseDirection: toBegin	CL_WD_SPLITTER=>E_COLLAPSE_DIRECTION-TO_BEGIN
collapseDirection: toEnd	CL_WD_SPLITTER=>E_COLLAPSE_DIRECTION-TO_END
contextMenuId	CONTEXT_MENU_ID	WDY_MD_UI_ELEMENT_REFERENCE
enabled	ENABLED	WDY_BOOLEAN
isCollapsed	IS_COLLAPSED	WDY_BOOLEAN
height	HEIGHT	STRING
orientation	ORIENTATION	WDUI_SASH_ORIENTATION
orientation: horizontal	CL_WD_SPLITTER=>E_ORIENTATION-HORIZONTAL
orientation: vertical	CL_WD_SPLITTER=>E_ORIENTATION-VERTICAL
sashDesign	SASH_DESIGN	WDUI_SASH_DESIGN
sashDesign: contour	CL_WD_SPLITTER=>E_SASH_DESIGN-CONTOUR
sashDesign: standard	CL_WD_SPLITTER=>E_SASH_DESIGN-STANDARD
sashPosition	SASH_POSITION	I
sashPositionMode	SASH_POSITION_MODE	WDUI_SASH_POSITION_MODE
sashPositionMode: absoluteFromBegin	CL_WD_SPLITTER=>E_SASH_POSITION_MODE-ABSOLUTE_FROM_BEGIN
sashPositionMode: absoluteFromEnd	CL_WD_SPLITTER=>E_SASH_POSITION_MODE-ABSOLUTE_FROM_END
sashPositionMode: percent	CL_WD_SPLITTER=>E_SASH_POSITION_MODE-PERCENT
sashType	SASH_TYPE	WDUI_SASH_TYPE
sashType: fixed	CL_WD_SPLITTER=>E_SASH_TYPE-FIXED
sashType: interactive	CL_WD_SPLITTER=>E_SASH_TYPE-INTERACTIVE
sashType: invisible	CL_WD_SPLITTER=>E_SASH_TYPE-INVISIBLE
styleClassName	STYLE_CLASS_NAME	STRING
tooltip	TOOLTIP	WDY_MD_TRANSLATABLE_TEXT
visible	VISIBLE	WDUI_VISIBILITY
visible: none	CL_WD_SPLITTER=>E_VISIBLE-NONE
visible: visible	CL_WD_SPLITTER=>E_VISIBLE-VISIBLE
width	WIDTH	STRING

View Designer Name	Runtime Name	Cardinality
FIRST	FIRST	0..1
SECOND	SECOND	0..1

Example

You can find a test example of this UI element in the WDR_TEST_UI_ELEMENTS component.