Updated: February 7, 2018

Dynamic Side Content

Intro

Dynamic side content is a layout control that displays additional content to help the user better understand the data that’s being displayed on the screen.  It is displayed in a way that flexibly adapts to different screen sizes.

App development teams can configure the behavior of the control on smaller screen sizes by following the relevant guidelines.

Dynamic side content layout
Dynamic side content layout

Usage

Use dynamic side content if:

  • You want to display information that:
    • Will enrich the main content and will help the user better perform his/her tasks;
    • Has meaning only when it is displayed next to the given container (side-by-side, below or on top of it);
    • Influences the main content (for example, a filter for list; settings for chart, details for map).
  • Users should have access to all of the key functions and critical information in the app even if they do not see the side content. This is important because on smaller screen sizes it may be difficult to display the side content in a way that is easily accessible for the user.

Do not 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.

Layout

Dynamic side content is displayed next to (left or right), on top of, or below a container that consists of the main information to which it is directly related.

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 container, it doesn’t overlay it. The main container narrows down and makes space for the additional content to be displayed.

Responsiveness

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

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 - Default layout

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
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 in the container toolbar.

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
Dynamic side content - Equal split

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 be accessible via scrolling.

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
Correct usage of dynamic side content in object page
Correct usage of dynamic side content in object page
Don't
Wrong usage of the dynamic side content in object page
Wrong usage of the dynamic side content in object page
Do
Correct usage of dynamic side content in object page
Correct usage of dynamic side content in object page
Don't
Wrong usage of the dynamic side content in object page
Wrong usage of the dynamic side content in object page

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

Dynamic Side Content in Dynamic Page

Do not separate the page into two panels when you are using it inside the dynamic page. The dynamic side content should be placed directly next to the page container and under the header container. The header snaps manually and the both sections have their own scrollbars.

Do
Correct usage of dynamic side content in dynamic page
Correct usage of dynamic side content in dynamic page
Don't
Wrong usage of the dynamic side content in dynamic page
Wrong usage of the dynamic side content in dynamic page

Examples

Dynamic side content in object page, used with map
Dynamic side content in object page, used with map
Dynamic side content in object page, used with planning calendar
Dynamic side content in object page, used with planning calendar
Dynamic side content with event list
Dynamic side content with event list

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 formchartlistpaneltreetimeline, 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.

Navigation

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
Hiding side content – From the header section

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

Implementation