Information
The controls described in this article have been designed exclusively for the SAP tool landscape for the SAP HANA Cloud Platform. Do not use these controls in regular SAP Fiori applications. This highly specialized set of controls targets the specific needs of the tools user group (typically developers and administrators).

Intro

The responsive splitter layout structures complex applications into defined areas. These areas may be resizable and are either distributed on one screen or across different areas, which may also be off-canvas. This depends on the device class and the requirements and settings of the application.

The defined areas are resizable manually, programmatically, and/or by external function holders such as buttons or menu entries. These areas and their parent containers are parts of the responsive splitter control and have properties that can be changed to meet an application’s need.

Responsive splitter - Size XL. Here, all the areas are shown on one screen. The different areas are separated by splitters.
Responsive splitter - Size XL. Here, all the areas are shown on one screen. The different areas are separated by splitters.

Usage

Use the responsive splitter if:

  • The application has to display several areas side by side that must be resizable.
  • The application must work on a range of different devices in a responsive manner.
  • Your scenarios are in the tooling or administration space.

Do not use the responsive splitter if:

  • Your scenarios are not in the tooling or administration space.

Responsiveness and Adaptiveness

The responsive splitter layout may adapt to different viewports or device types by applying a responsive behavior that arranges the defined areas, technically called “SplitPanes” – which themselves reside in their parent containers (“PaneContainers”) – side by side on large devices, and automatically structures them into different on/off-canvas areas on devices such as tablets or smartphones. The precise behavior may be specified by the application development team.

For each area, it’s possible to specify a minimal screen width (property:requiredParentWidth) by pixels. The respective area is then hidden below the specified minimal screen width.

When the minimal screen width is specified, an additional setting can be specified (property:demandPane). If this is set to “true”, a separate area will be created from the hidden area if the viewport is below the specified minimal screen width. Furthermore, a pagination bar will be automatically displayed at the bottom of the application. This bar contains a button for each area below a certain screen width that sets the property:demandPane to “true”. When one of these buttons is clicked, the respective area is shown.

It is also possible to completely hide an area below a certain viewport width so that it is not shown and so there is no navigation to it.

S Size
S Size
M Size
M Size
L Size
L Size

The application development team may also define a default area. The default area will always remain visible and will then be the first page of the application. If no default area is specified, the responsive splitter sets the first area that is added to its parent container by default. This can be overridden. As the responsive splitter layout relies on the content of the areas to have an own responsive strategy, it does not make the content responsive by itself, but it handles its areas in a responsive way.

Depending on the requirements, the concrete behavior may be specified by the application development team.

Layout

A responsive splitter layout consists of the SplitPanes, PaneContainers and the Splitters themselves. Off-canvas areas are reachable by clicking a tab in the pagination bar.

In an XL view, all of these areas may be shown on one screen. These areas are divided by splitters. When the viewport gets smaller, some areas may be pushed into an off-canvas mode. These areas are displayed when the respective view is chosen in the pagination bar. The pagination bar is always at the bottom of the screen and contains the navigation to all of the areas that are in the off-canvas mode.

The responsive splitter with all areas displayed on one screen
The responsive splitter with all areas displayed on one screen
The responsive splitter with one area in the off-canvas mode. The hidden area can be reached using the pagination bar at the bottom of the screen.
The responsive splitter with one area in the off-canvas mode. The hidden area can be reached using the pagination bar at the bottom of the screen.

Components

The responsive splitter layout consists of the split panes, pane containers and the splitters themselves.

Split Panes

Split panes are independent containers that may interact with one another. They reside in pane containers.

Split panes have the properties property:requiredParentWidth and property:demandPane.
The property:requiredParentWidth determines the minimum width of the parent container (in pixels). When it is reached, the pane will be hidden from the screen.
If a pane is hidden from the screen and pushed into off-canvas mode, the property:demandPane determines if the area is reachable via the pagination bar (if property:demandPane is set to “true”, which is the default) or completely hidden (if property:demandPane is set to “false”).

Splitters

Splitters are the horizontal or vertical dividers that may be moved around to make an area larger or smaller. Splitters can be dragged and dropped either using the mouse or by touch. On non-touch desktop devices, splitters do not show explicit handles as they may be interacted with anywhere along the splitter itself. On touch devices, splitters show explicit handles that have larger touch areas so that they can be dragged and dropped using touch capabilities.

Pagination Bar

If areas are moved into off-canvas mode by specifying a required width of their parent containers that is smaller than the current size of the parent container, and the property:demandPane is set to “true”, a pagination bar is automatically displayed at the bottom of the application, which offers access to the areas that are pushed into off-canvas mode.

This pagination bar contains a button for each area that is pushed into off-canvas mode and for which the property:demandPane is set to “true”

This area is the lowermost bar in such a layout.

Behavior and Interaction (incl. Gestures)

View Switching

As soon as views are in the off-canvas mode, the pagination bar at the bottom of the application allows the user to switch between views if the property:demandPane is set to “true”.

It is possible to switch off-canvas views using the Pagination Bar.
It is possible to switch off-canvas views using the Pagination Bar.

Resizing the Splitters

On non-touch desktop devices, users can click anywhere along the splitters to drag them to a new position. The splitters will be highlighted as soon as an input device focuses or selects them. They may also be double-clicked to collapse them or to expand them back to their original position.

On touch-enabled devices, the splitters show explicit handles with larger touch areas. These handles can be used for moving the splitter to a new position.

On touch-enabled devices, the Splitters display handles wich can be used to move a Splitter to a new position.
On touch-enabled devices, the Splitters display handles wich can be used to move a Splitter to a new position.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

No links.

Implementation