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 re-sizable areas side by side.
  • The application must be responsive across different devices types.
  • 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 adapts to different viewports or device types through responsive behavior. The responsive splitter arranges the defined areas side by side on large devices, while it automatically structures these areas into different on/off-canvas areas on devices such as tablets or smartphones. These defined areas, known as “SplitPanes”, reside in their parent containers (“PaneContainers”). The application development team can determine their precise behavior.

For each area, it’s possible to specify a minimal screen width (property:requiredParentWidth) in 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; this button 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. In this case, users cannot navigate to this area.

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. The responsive splitter layout’s responsiveness is determined by the content of the areas; the layout does not make the content responsive but 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. 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.

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 pushed into off-canvas mode and whose property:demandPane is set to “true”.

This area is the lowermost bar in such a layout.

Behavior and Interaction

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