Responsive Splitter
ResponsiveSplitter is used to visually divide the content of its parent. It consists of PaneContainers that further agregate other PaneContainers and SplitPanes.
Z2UI5_CL_SMPC_APP_186
Controls
sap.ui.layout
UI5 1.71
The facts
- Repository
- abap2UI5/samples-controls
- Class
Z2UI5_CL_SMPC_APP_186- Source file
z2ui5_cl_smpc_app_186.clas.abap↗- Library
- sap.ui.layout
- UI5 entity
sap.ui.layout.ResponsiveSplitter- Demo kit sample
sap.ui.layout.sample.ResponsiveSplitter- SAP's own sample
- running at sdk.openui5.org ↗
- Minimum UI5
- 1.71 — the floor abap2UI5 holds its samples to
- In the playground
- runs in the browser, with no system and nothing installed
Keywords: responsivesplitter, responsive, splitter, sap.ui.layout, panecontainer, splitpane, splitterlayoutdata, panel, text, list, standardlistitem, vbox
Controls it builds
- sap.m.Button
- sap.m.Label
- sap.m.List
- sap.m.OverflowToolbar
- sap.m.Page
- sap.m.Panel
- sap.m.Select
- sap.m.StandardListItem
- sap.m.Text
- sap.m.ToolbarSpacer
- sap.m.VBox
- sap.ui.core.Item
- sap.ui.core.mvc.View
- sap.ui.layout.PaneContainer
- sap.ui.layout.ResponsiveSplitter
- sap.ui.layout.SplitPane
- sap.ui.layout.SplitterLayoutData
Read out of the builder chain by the abap2UI5 linter, not from the category this sample is filed under — which is what makes “which samples build one of these” a question the catalogue can answer at all.
Libraries
Run it here
The sample running, in this page — the app on its own, with no editor over it.
Switch to Playground with this code
Nothing is installed and nothing is sent anywhere: the ABAP is compiled to JavaScript in this browser and runs against abap2UI5 itself.
The ABAP
z2ui5_cl_smpc_app_186.clas.abap — 347 lines
Click a number to link to a line — shift-click for a range.
Read it on GitHub ↗
" @keywords responsivesplitter responsive splitter sap.ui.layout panecontainer splitpane splitterlayoutdata panel text list standardlistitem vbox
" @summary ResponsiveSplitter is used to visually divide the content of its parent. It consists of PaneContainers that further agregate other PaneContainers and SplitPanes.
CLASS z2ui5_cl_smpc_app_186 DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
TYPES:
BEGIN OF ty_product,
productid TYPE string,
name TYPE string,
quantity TYPE i,
END OF ty_product.
DATA productcollection TYPE STANDARD TABLE OF ty_product WITH EMPTY KEY.
" The original keeps the three pane sizes in a separate 'sizes' JSON model
" ({sizes>/pane1..3}); with abap2UI5's single default model they live flat
" here and the SplitterLayoutData.size / the Text labels bind them directly.
DATA pane1 TYPE string.
DATA pane2 TYPE string.
DATA pane3 TYPE string.
PROTECTED SECTION.
DATA client TYPE REF TO z2ui5_if_client.
METHODS view_display.
METHODS model_init.
PRIVATE SECTION.
ENDCLASS.
CLASS z2ui5_cl_smpc_app_186 IMPLEMENTATION.
METHOD z2ui5_if_app~main.
me->client = client.
IF client->check_on_init( ).
model_init( ).
view_display( ).
ELSEIF client->check_on_navigated( ).
view_display( ).
ENDIF.
ENDMETHOD.
METHOD view_display.
DATA(view) = z2ui5_cl_ui5_view_builder=>factory( ).
" sap.ui.layout.ResponsiveSplitter. The original binds the pane sizes from a
" separate 'sizes' JSON model ({sizes>/paneN}) and the product list/select
" from the default model ({/ProductCollection}); abap2UI5 has one default
" model, so the sizes are folded into it (the 'sizes>' prefix is dropped -
" last path segment identical, which structural-diff matches). The two
" PaneContainer 'resize' handlers show an informational MessageToast of the
" old/new pane sizes. Reproduced roundtrip-free since 2026-08-05: an event
" arg is a full UI5 expression and .join( ',' ) over an ARRAY parameter
" resolves (measured with scripts/probes/event-arg-expression-probe.mjs),
" so both size arrays travel into the client-composed toast 1:1.
view->ele( n = `View` ns = `mvc`
)->a( n = `xmlns:l` v = `sap.ui.layout`
)->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`
)->a( n = `xmlns:core` v = `sap.ui.core`
)->a( n = `xmlns` v = `sap.m`
)->a( n = `height` v = `100%`
)->ele( n = `ResponsiveSplitter` ns = `l`
)->a( n = `defaultPane` v = `default`
)->ele( n = `PaneContainer` ns = `l`
)->a( n = `resize` v = client->follow_up_action( val = client->cs_event-control_global
t_arg = VALUE #( ( `MESSAGE_TOAST` )
( `show` )
( `Root container is resized.{0}` && |\n| && `New panes sizes = [{1}]` )
" the WHOLE 'Old panes sizes' line is conditional in the original
" (if (aOldSizes && aOldSizes.length)), not just its value - the first
" resize really does arrive with an empty array, since _sizeArraysDiffer
" compares [] against the new sizes. So the line is built inside the
" expression and the template carries only the placeholder
( `${$parameters>/oldSizes} && ${$parameters>/oldSizes}.length ? '\nOld panes sizes = [' + ${$parameters>/oldSizes}.join(',') + ']' : ''` )
( `${$parameters>/newSizes} ? ${$parameters>/newSizes}.join(',') : ''` ) ) )
)->ele( n = `SplitPane` ns = `l`
)->a( n = `requiredParentWidth` v = `400`
)->a( n = `id` v = `default`
)->ele( n = `layoutData` ns = `l`
)->tag( n = `SplitterLayoutData` ns = `l`
)->a( n = `size` v = client->_bind( pane1 )
)->end(
)->ele( `Panel`
)->a( n = `headerText` v = `Minimum parent width 400`
)->a( n = `height` v = `100%`
)->tag( `Text`
)->a( n = `text` v = |LayoutData.size={ client->_bind( pane1 ) }|
)->ele( `List`
)->a( n = `headerText` v = `Products`
)->a( n = `items` v = client->_bind( productcollection )
)->tag( `StandardListItem`
)->a( n = `title` v = `{NAME}`
)->a( n = `counter` v = `{QUANTITY}`
)->end(
)->end(
)->end(
)->ele( n = `PaneContainer` ns = `l`
)->a( n = `orientation` v = `Vertical`
)->a( n = `resize` v = client->follow_up_action( val = client->cs_event-control_global
t_arg = VALUE #( ( `MESSAGE_TOAST` )
( `show` )
( `Inner container is resized.{0}` && |\n| && `New panes sizes = [{1}]` )
" the WHOLE 'Old panes sizes' line is conditional in the original
" (if (aOldSizes && aOldSizes.length)), not just its value - the first
" resize really does arrive with an empty array, since _sizeArraysDiffer
" compares [] against the new sizes. So the line is built inside the
" expression and the template carries only the placeholder
( `${$parameters>/oldSizes} && ${$parameters>/oldSizes}.length ? '\nOld panes sizes = [' + ${$parameters>/oldSizes}.join(',') + ']' : ''` )
( `${$parameters>/newSizes} ? ${$parameters>/newSizes}.join(',') : ''` ) ) )
)->ele( n = `SplitPane` ns = `l`
)->a( n = `requiredParentWidth` v = `600`
)->ele( n = `layoutData` ns = `l`
)->tag( n = `SplitterLayoutData` ns = `l`
)->a( n = `size` v = client->_bind( pane2 )
)->end(
)->ele( `Panel`
)->a( n = `headerText` v = `Minimum parent width 600`
)->ele( `VBox`
)->tag( `Text`
)->a( n = `text` v = |LayoutData.size={ client->_bind( pane2 ) }|
)->ele( `Select`
)->a( n = `forceSelection` v = `false`
)->a( n = `selectedKey` v = `1239102`
)->a( n = `items` v = |\{ path: '{ client->_bind_path( productcollection ) }', sorter: \{ path: 'NAME' \} \}|
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `{PRODUCTID}`
)->a( n = `text` v = `{NAME}`
)->end(
)->end(
)->end(
)->end(
)->ele( n = `SplitPane` ns = `l`
)->a( n = `requiredParentWidth` v = `800`
)->ele( n = `layoutData` ns = `l`
)->tag( n = `SplitterLayoutData` ns = `l`
)->a( n = `size` v = client->_bind( pane3 )
)->end(
)->ele( `Page`
)->a( n = `title` v = `Minimum parent width 800`
)->tag( `Text`
)->a( n = `text` v = |LayoutData.size={ client->_bind( pane3 ) }|
)->ele( `footer`
)->ele( `OverflowToolbar`
)->a( n = `id` v = `otb3`
)->tag( `Label`
)->a( n = `text` v = `Buttons:`
)->tag( `ToolbarSpacer`
)->tag( `Button`
)->a( n = `text` v = `New`
)->a( n = `type` v = `Transparent`
)->tag( `Button`
)->a( n = `text` v = `Open`
)->a( n = `type` v = `Transparent`
)->tag( `Button`
)->a( n = `text` v = `Save`
)->a( n = `type` v = `Transparent`
)->tag( `Button`
)->a( n = `text` v = `Save as`
)->a( n = `type` v = `Transparent`
)->tag( `Button`
)->a( n = `text` v = `Cut`
)->a( n = `type` v = `Transparent`
)->tag( `Button`
)->a( n = `text` v = `Copy`
)->a( n = `type` v = `Transparent`
)->tag( `Button`
)->a( n = `text` v = `Paste`
)->a( n = `type` v = `Transparent`
)->tag( `Button`
)->a( n = `text` v = `Undo`
)->a( n = `type` v = `Transparent` ).
client->view_display( view->stringify( ) ).
ENDMETHOD.
METHOD model_init.
" the original pane sizes model starts every pane at 'auto'
pane1 = `auto`.
pane2 = `auto`.
pane3 = `auto`.
" the shared 123-row demo ProductCollection (sap/ui/demo/mock/products.json),
" inlined with the three columns the sample binds (ProductId, Name, Quantity)
productcollection = VALUE #(
( productid = `HT-1000` name = `Notebook Basic 15` quantity = 10 )
( productid = `HT-1001` name = `Notebook Basic 17` quantity = 20 )
( productid = `HT-1002` name = `Notebook Basic 18` quantity = 10 )
( productid = `HT-1003` name = `Notebook Basic 19` quantity = 15 )
( productid = `HT-1007` name = `ITelO Vault` quantity = 15 )
( productid = `HT-1010` name = `Notebook Professional 15` quantity = 16 )
( productid = `HT-1011` name = `Notebook Professional 17` quantity = 17 )
( productid = `HT-1020` name = `ITelO Vault Net` quantity = 14 )
( productid = `HT-1021` name = `ITelO Vault SAT` quantity = 50 )
( productid = `HT-1022` name = `Comfort Easy` quantity = 30 )
( productid = `HT-1023` name = `Comfort Senior` quantity = 24 )
( productid = `HT-1030` name = `Ergo Screen E-I` quantity = 14 )
( productid = `HT-1031` name = `Ergo Screen E-II` quantity = 24 )
( productid = `HT-1032` name = `Ergo Screen E-III` quantity = 50 )
( productid = `HT-1035` name = `Flat Basic` quantity = 23 )
( productid = `HT-1036` name = `Flat Future` quantity = 22 )
( productid = `HT-1037` name = `Flat XL` quantity = 23 )
( productid = `HT-1040` name = `Laser Professional Eco` quantity = 21 )
( productid = `HT-1041` name = `Laser Basic` quantity = 8 )
( productid = `HT-1042` name = `Laser Allround` quantity = 9 )
( productid = `HT-1050` name = `Ultra Jet Super Color` quantity = 17 )
( productid = `HT-1051` name = `Ultra Jet Mobile` quantity = 18 )
( productid = `HT-1052` name = `Ultra Jet Super Highspeed` quantity = 25 )
( productid = `HT-1055` name = `Multi Print` quantity = 16 )
( productid = `HT-1056` name = `Multi Color` quantity = 5 )
( productid = `HT-1060` name = `Cordless Mouse` quantity = 25 )
( productid = `HT-1061` name = `Speed Mouse` quantity = 12 )
( productid = `HT-1062` name = `Track Mouse` quantity = 12 )
( productid = `HT-1063` name = `Ergonomic Keyboard` quantity = 50 )
( productid = `HT-1064` name = `Internet Keyboard` quantity = 35 )
( productid = `HT-1065` name = `Media Keyboard` quantity = 26 )
( productid = `HT-1066` name = `Mousepad` quantity = 12 )
( productid = `HT-1067` name = `Ergo Mousepad` quantity = 16 )
( productid = `HT-1068` name = `Designer Mousepad` quantity = 26 )
( productid = `HT-1069` name = `Universal card reader` quantity = 22 )
( productid = `HT-1070` name = `Proctra X` quantity = 15 )
( productid = `HT-1071` name = `Gladiator MX` quantity = 16 )
( productid = `HT-1072` name = `Hurricane GX` quantity = 13 )
( productid = `HT-1073` name = `Hurricane GX/LN` quantity = 5 )
( productid = `HT-1080` name = `Photo Scan` quantity = 8 )
( productid = `HT-1081` name = `Power Scan` quantity = 11 )
( productid = `HT-1082` name = `Jet Scan Professional` quantity = 13 )
( productid = `HT-1083` name = `Jet Scan Professional` quantity = 10 )
( productid = `HT-1085` name = `Copymaster` quantity = 10 )
( productid = `HT-1090` name = `Surround Sound` quantity = 20 )
( productid = `HT-1091` name = `Blaster Extreme` quantity = 15 )
( productid = `HT-1092` name = `Sound Booster` quantity = 50 )
( productid = `HT-1095` name = `Lovely Sound 5.1 Wireless` quantity = 12 )
( productid = `HT-1096` name = `Lovely Sound 5.1` quantity = 18 )
( productid = `HT-1097` name = `Lovely Sound Stereo` quantity = 21 )
( productid = `HT-1100` name = `Smart Office` quantity = 25 )
( productid = `HT-1101` name = `Smart Design` quantity = 26 )
( productid = `HT-1102` name = `Smart Network` quantity = 28 )
( productid = `HT-1103` name = `Smart Multimedia` quantity = 9 )
( productid = `HT-1104` name = `Smart Games` quantity = 13 )
( productid = `HT-1105` name = `Smart Internet Antivirus` quantity = 17 )
( productid = `HT-1106` name = `Smart Firewall` quantity = 19 )
( productid = `HT-1107` name = `Smart Money` quantity = 18 )
( productid = `HT-1110` name = `PC Lock` quantity = 14 )
( productid = `HT-1111` name = `Notebook Lock` quantity = 20 )
( productid = `HT-1112` name = `Web cam reality` quantity = 27 )
( productid = `HT-1113` name = `Screen clean` quantity = 17 )
( productid = `HT-1114` name = `Fabric bag professional` quantity = 14 )
( productid = `HT-1115` name = `Wireless DSL Router` quantity = 16 )
( productid = `HT-1116` name = `Wireless DSL Router / Repeater` quantity = 12 )
( productid = `HT-1117` name = `Wireless DSL Router / Repeater and Print Server` quantity = 12 )
( productid = `HT-1118` name = `USB Stick` quantity = 14 )
( productid = `HT-1119` name = `Travel Adapter` quantity = 10 )
( productid = `HT-1120` name = `Cordless Bluetooth Keyboard, english international` quantity = 13 )
( productid = `HT-1137` name = `Flat XXL` quantity = 10 )
( productid = `HT-1138` name = `Pocket Mouse` quantity = 20 )
( productid = `HT-1210` name = `PC Power Station` quantity = 22 )
( productid = `HT-1251` name = `Astro Laptop 1516` quantity = 23 )
( productid = `HT-1252` name = `Astro Phone 6` quantity = 28 )
( productid = `HT-1253` name = `Benda Laptop 1408` quantity = 27 )
( productid = `HT-1254` name = `Bending Screen 21HD` quantity = 23 )
( productid = `HT-1255` name = `Broad Screen 22HD` quantity = 5 )
( productid = `HT-1256` name = `Cerdik Phone 7` quantity = 19 )
( productid = `HT-1257` name = `Cepat Tablet 10.5` quantity = 17 )
( productid = `HT-1258` name = `Cepat Tablet 8` quantity = 24 )
( productid = `HT-1500` name = `Server Basic` quantity = 24 )
( productid = `HT-1501` name = `Server Professional` quantity = 26 )
( productid = `HT-1502` name = `Server Power Pro` quantity = 34 )
( productid = `HT-1600` name = `Family PC Basic` quantity = 10 )
( productid = `HT-1601` name = `Family PC Pro` quantity = 20 )
( productid = `HT-1602` name = `Gaming Monster` quantity = 24 )
( productid = `HT-1603` name = `Gaming Monster Pro` quantity = 25 )
( productid = `HT-2000` name = `7" Widescreen Portable DVD Player w MP3` quantity = 20 )
( productid = `HT-2001` name = `10" Portable DVD player` quantity = 21 )
( productid = `HT-2002` name = `Portable DVD Player with 9" LCD Monitor` quantity = 50 )
( productid = `HT-2025` name = `CD/DVD case: 264 sleeves` quantity = 26 )
( productid = `HT-2026` name = `Audio/Video Cable Kit - 4m` quantity = 16 )
( productid = `HT-2027` name = `Removable CD/DVD Laser Labels` quantity = 25 )
( productid = `HT-6100` name = `Beam Breaker B-1` quantity = 32 )
( productid = `HT-6101` name = `Beam Breaker B-2` quantity = 18 )
( productid = `HT-6102` name = `Beam Breaker B-3` quantity = 16 )
( productid = `HT-6110` name = `Play Movie` quantity = 15 )
( productid = `HT-6111` name = `Record Movie` quantity = 24 )
( productid = `HT-6120` name = `ITelo MusicStick` quantity = 15 )
( productid = `HT-6121` name = `ITelo Jog-Mate` quantity = 24 )
( productid = `HT-6122` name = `Power Pro Player 40` quantity = 23 )
( productid = `HT-6123` name = `Power Pro Player 80` quantity = 13 )
( productid = `HT-6130` name = `Flat Watch HD32` quantity = 16 )
( productid = `HT-6131` name = `Flat Watch HD37` quantity = 14 )
( productid = `HT-6132` name = `Flat Watch HD41` quantity = 13 )
( productid = `HT-7000` name = `Copperberry` quantity = 5 )
( productid = `HT-7010` name = `Silverberry` quantity = 9 )
( productid = `HT-7020` name = `Goldberry` quantity = 11 )
( productid = `HT-7030` name = `Platinberry` quantity = 12 )
( productid = `HT-8000` name = `ITelO FlexTop I4000` quantity = 11 )
( productid = `HT-8001` name = `ITelO FlexTop I6300c` quantity = 20 )
( productid = `HT-8002` name = `ITelO FlexTop I9100` quantity = 20 )
( productid = `HT-8003` name = `ITelO FlexTop I9800` quantity = 22 )
( productid = `HT-9991` name = `Smartphone Leather Case` quantity = 12 )
( productid = `HT-9992` name = `Smartphone Alpha` quantity = 13 )
( productid = `HT-9993` name = `Mini Tablet` quantity = 10 )
( productid = `HT-9994` name = `Camcorder View` quantity = 50 )
( productid = `HT-9995` name = `Tablet Pouch` quantity = 34 )
( productid = `HT-9996` name = `Tablet Pouch` quantity = 34 )
( productid = `HT-9997` name = `e-Book Reader ReadMe` quantity = 23 )
( productid = `HT-9998` name = `Smartphone Beta` quantity = 21 )
( productid = `HT-9999` name = `Maxi Tablet` quantity = 20 )
( productid = `PF-1000` name = `Flyer` quantity = 33 )
).
ENDMETHOD.
ENDCLASS.More in sap.ui.layout
- Fullscreen – with toolbar — A form that uses Toolbars as Form header and FormContainer headers.
- Controlling Empty Spaces Within the Grid — Example of setting the gridAutoFlow property.
- Horizontal Layout — The Horizontal Layout control is a simple way to align multiple controls horizontally. By…
- Grid - Using GridData — Take advantage of sap.ui.layout.GridData to control the appearance of individual Grid chi…
- Vertical Layout — The Vertical Layout control is a simple way to align multiple controls vertically. If you…
- Fullscreen – with toolbar — A SimpleForm that uses Toolbars as Form header and FormContainer headers.
- Grid - Info Layout — You can use the Grid control to make responsive table-free layouts; here we are using a d…
- Block Layout — The BlockLayout is intended to be used with rows and cells. The cells have predefined wid…
- Fix Flex - Vertical Direction with minFlexSize — Shows a FixFlex control where the minFlexSize is set to 400px.
- Fix Flex - Horizontal Direction — Shows a FixFlex control with a horizontal layout.
- Block Layout with links as titles — The BlockLayout Cells can have links as titles. The link text overwrites the title text.
- Grid - Features Demo — The major layout features of the Grid control are shown in this example. Features like in…
On this page