Intro

Dynamic side content is a flexible layout container that enables the displays of additional contextual information alongside the main content. It adapts responsively to different screen sizes, automatically repositioning the side content on smaller devices.

The side content container can be configured to stay visible, move below the main content, or hide entirely on smaller screens.

Dynamic side content layout

When to Use

Use dynamic side content if:

You want to display supporting information that enriches the main content or helps users complete their tasks.
The information only makes sense when placed next to the main content.
The content influences the main view (for example, filters for lists, chart settings, or map details).
Users can still access all critical functionality and information even if the side content is hidden on smaller screens.

Don't

Don’t use dynamic side content if:

You want to display critical information that should be visible all the time. The dynamic side content is not meant to split the page into two equally important sections.
You want to display navigation or drilldown. For drilldown scenarios, use the Flexible Column Layout.
You want to display a list-detail scenario. Instead, use the Flexible Column Layout.

information

Currently Dynamic Side Content is not available in Fiori Elements.

Anatomy

Dynamic side content is a layout container that can hold any type of UI elements, such as lists, tables, form fields placed alongside the main content.

Dynamic side content anatomy

Dynamic side content: Additional content area that appears next to the main content.
Main content*: The primary area of the page where the main content is displayed.

* The main content is not part of the dynamic side content component. It is included here to illustrate how the side content appears in relation to the rest of the page.

Types

The size and position of the dynamic side content depend on the configuration and the available screen width.

Size

Two size options are supported:

Default split – 25% or 33% of the total screen width, depending on resolution.
Equal split – 50% of the total screen width.

Dynamic side content with default and equal split

Position

You can specify whether the side content is shown on the right or on the left.

Dynamic side content with left and right position

If the side content width falls below 320 px, the side content automatically slides under the main content, unless the app development team specifies that it should disappear.

Dynamic side content below the main content

Behavior and Interaction

Dynamic side content is displayed to the left or right of the main content container.

The dynamic side content can be closed by a button that is displayed in its toolbar.

The dynamic side content can be opened, if it set to hidden, with an action within the container to which it is directly related, or by an action displayed in the container-related toolbar, if it is available.

When the dynamic side content is displayed side-by-side to the main content container, it doesn’t overlay it. Instead, the main content area narrows to make room for the additional content.

Dynamic side content displayed next to the main content container without overlapping

Responsiveness

The dynamic side content control is built for different screen sizes and layouts.

Dynamic Side Content Resizing for Different Devices

The dynamic side content adapts its size and layout to suit device and screen width, keeping both main and side content visually balanced across different screen sizes. It can be hidden or revealed depending on the user’s needs and available space.

Different sizes of dynamic side content - desktop view on the left; middle shows a mobile view with a link to display the side content; right shows the side content in focus as the “Activities” panel.

Dynamic Side Content in Default Layout on Large Desktops

The default screen layout features the side content on the left or right side of the screen, covering 25% of the screen width on a large desktop (over 1440 px).

Dynamic side content - default layout

Dynamic Side Content in Smaller Screen Layouts

On smaller screen sizes (under 1440 px), the side content occupies 33% of the screen width to accommodate the nested controls. If the side content width falls below 320 px, the side content automatically slides under the main content, unless the app development team specifies that it should disappear.

Dynamic side content - smaller screen sizes

On screen sizes of less than or equal to 720 px, the side content automatically disappears from the screen (unless specified to stay under the content) and can be triggered from a preset trigger (specified within the app). When the side content is triggered, it replaces the main content. We recommend that you always place the trigger for the side content in the same location, such as the container toolbar.

If only the side content is shown and the user increases the screen size, the main content is automatically displayed again. If the user then decreases the screen size, the side content disappears (unless specified to stay under the content), and can be opened again by the trigger.

Dynamic Side Content in an Equal Split Layout

Equal split: A special view of the side content is the 50:50 view, which enables users to show more data, for example, for comparison purposes. The responsive behavior of the equal split is the same as in the standard view: The side content disappears on screen widths of less than 720 px and can only be viewed by triggering it.

Dynamic side content - equal split

information

The app development team may specify that the side content should slide under the main content when the screen is resized to a smaller width. Sliding the side content under the main content on smaller screens allows it to remain on the screen at all times. However, it may only become visible after scrolling.

The side content is always related to the main content, so it must show content that can be triggered from the main content. This also means minimizing navigation, such as drill-ins within the side content, and displaying content that is triggered from the main content area. An example would be showing additional details such as contact information or conversation history. If a different type of data relates to the main content, app developers can implement a switcher in the side content. However, we recommend that you keep the side content free of additional navigation elements.

Triggering the Side Content

The side content can be set to hidden by default, and it automatically disappears when the screen width is less than or equal to 720 px (except when it is set to be under the main content).The app design team can define the trigger point. Our recommendation is to put a transparent text button with a meaningful label in the container toolbar, or an action inside the container the dynamic side content is related to. Ensure that the user can understand how to trigger the side content. Please, avoid using icons, because they can confuse the user.

Hiding the Side Content

The side content should be hidden from the header (top) section of the side content. The side content container itself has no header. We therefore strongly recommend that you use a toolbar control with a title, a transparent button labeled Close, and a spacer between them.

Hiding side content – from the header section

Guidelines

Dynamic Side Content in Object Page

Dynamic side content can be used within the object page. Use dynamic side content within a section if you want to give the user additional data related to this section. If you want to display additional information about the object such as a timeline, include this information as a new section.

Do not separate the screen into two panels. Do not use it for navigation, for drilldown, or for displaying information related to the entire object.

Correct and incorrect use of dynamic side content

Dynamic Side Content in List Report

Do not separate the page into two panels when you are using it inside the list report. The dynamic side content should be placed directly next to the table or the chart container.

Correct and incorrect use of dynamic side content in list report

Dynamic Side Content in Dynamic Page

Do not separate the page into two panels if you use dynamic side content within the dynamic page layout. Place the dynamic side content directly next to the page container and under the header container. The header snaps manually and both sections have their own scrollbars.

Correct and incorrect use of dynamic side content in dynamic page

Use of Controls in the Dynamic Side Content

You can use most of the main controls in the dynamic side content, such as text, simple form, chart, list, panel, tree, timeline, or feed and notes. However, you must make sure that the control doesn’t result in the appearance of a horizontal scrollbar.

Do not use complex controls, such as tables.

Localization

For right-to-left languages, such as Arabic or Hebrew, the position of the dynamic side content is mirrored.

Side content placement adapting to language direction (using the ‘Begin’ property)

hint

There are two properties that determine the position of the dynamic side content:

Begin - The side content is on the left side of the main container in left-to-right mode and on the right side in right-to-left mode.
End - The side content is on the right side of the main container in left-to-right mode and on the left side in right-to-left mode.

Elements and Controls

Object Page (guidelines)
List Report (guidelines)
Dynamic Page Layout (guidelines)

Implementation

Dynamic Side Content (SAPUI5 API reference)
Dynamic Side Content (SAPUI5 samples)