Guidelines

Intro

The side panel provides additional information in applications across SAC, DSP, and BDC.

https://www.figma.com/design/3pnSbYmau9yyEpKr63q5cb/DNA-Web-UI-Kit?node-id=40535-18976&t=Ma0UidQcWIgKwXMZ-11

When to Use

Use the Side Panel to:

Present additional information without navigating away from the main page.
House options or settings relevant to the current task or selection.
Facilitate multi-page workflows within a contained space.

Don't

Don’t use the Side Panel if:

It overlaps critical content in the main workspace and disrupts the primary task.
The information is simple and non-interactive — use a tooltip or modal dialog instead.
The user flow must be interrupted to prompt the user for information or for a response — use a dialog instead.

Top Tips

Keep content focused and relevant to the context of the side panel.
Prioritize the most important information and actions.
Select the subcomponent to view the properties and instructions regarding manual adjustments.

Anatomy

Icon Tab Bar / Toolbar (optional): Provides additional context for the side panel. May include tabs for multi-page workflows as well as an Expand / Collapse button, and a Close button. Label Icon is optional.
Header: Shows the main title and key supporting information such as subtitle, tags, or status.
Content: Main area for related information, settings, or controls. Content for BDC/DSP is always organized into panels.
Footer (optional): Used for final actions. The footer must contain one confirm button and one cancel button.
Scrollbar (optional): Displays when content exceeds available space.

Side Panel - Anatomy

The toolbar provides additional context for the panel through a label, in addition to the title in the header. Icon is optional.

The expand/collapse button and the close button are always positioned on the right side. In SAC, an optional overflow button can be placed to the left of the close button for actions related to panel display.

If there is an ongoing process in the side panel that has not been saved automatically, pressing the close button should act as a cancel action.

Side Panel title toolbar variant showing an object icon, "Object Title / Task Title" heading, overflow menu, and close button.

SAC Toolbar

Side Panel title toolbar for DSP showing an object icon followed by "Object Type / Operator Type" as breadcrumb-style text, with an expand button and a close button on the right.

DSP Toolbar

When the toolbar is used by itself without the page header, the variant with a title is used.

Side Panel title toolbar for an SAC context showing an object icon, the text "Object Title / Task Title" as a compound heading, an overflow menu button, and a close button.

SAC Title Toolbar

Tab Bar

Tab Bar is used for side panels with multiple pages. Each tab can have an icon and label with a limit to two tabs. Icon is optional. The close button always appears on the right side.

Side Panel tab bar showing two icon-and-label tabs: "Builder" (active, indicated by a blue underline) and "Style", with a close button on the far right.

Icon Tab Bar

Dynamic Page

The header should clearly identify what the panel is about, typically through a title that reflects the current task, object, or selection.

Optional elements such as a subtitle, breadcrumb, tags, or buttons can be included to provide additional context or actions.

Breadcrumb (optional): Displays a navigation path for the current panel. Use when the panel is part of a deeper navigation hierarchy.
Title : Clearly identifies the main task, object, or selection the panel is focused on. Keep it concise and specific.
Subtitle (optional): Provides secondary context or a brief explanation related to the title. Use when the title alone isn’t enough to describe the panel’s purpose.
Generic Tag (optional): Appears directly after the title. Tag is used to provide an important piece of information about the object or the selection.
Actions (optional): Contains actions relevant to the panel. Only actions that are applicable to the entire object or selection should be placed here.
Header Content (optional): Reserved area for inserting product-specific elements into the header.
Header Features (optional): Controls to expand or collapse the header, and to pin or unpin it so it stays fixed or collapsed as content is scrolled.

Side Panel Dynamic Page Header anatomy with seven numbered callouts: (1) breadcrumb navigation, (2) bold page Title, (3) Subtitle below the title, (4) "SAP Operated" tag badge next to the title, (5) an edit icon and overflow menu in the toolbar area, (6) a swap slot content area for custom header content, and (7) a collapse/pin button pair at the bottom center of the header.

Dynamic Page Header

Tag

Tag provides important information about the object or the selection. When the title is too long, the tag goes into the overflow. However, it can also be configured to never overflow. As an alternative, the tag can also be placed in the header content.

Two Side Panel header states illustrating tag overflow behavior. Top state: a long title truncated with an ellipsis, two overflow menu buttons, and a Subtitle — no tag visible because the title overflows. Bottom state: the same truncated title with the first overflow button in an active/pressed state, revealing an "SAP Operated" tag badge in a popover below it.

Truncated Tag

Actions in Header

The header of the side panel features a toolbar for key actions. Only actions that are applicable to the entire object or selection should be placed here. We recommend displaying no more than two key actions, with an overflow function managing additional features.

Dynamic Page Header

Validation

Validation messages are collected and displayed within a dedicated message popover located in the header's actions area.

Four validation state badges used in the Side Panel header, displayed in a row: an info badge (blue, showing count 2), a warning badge (orange, showing count 2), an error badge (red, showing count 2), and a success badge (green, with a checkmark and no count).

Validation

Message Popover Flyout

Table Information

Table Information provides users with a quick summary of the data they are working with. This information features an icon and a number text that shows the count of items, such as columns, rows, or tables.

Three table count indicator badges shown side by side, each displaying a grid/table icon followed by the number 1, used to communicate the number of tables, columns, or rows in the Side Panel header.

Table Status Indicator

Header Content

The optional header content area is located directly below the header title area and can house any elements relevant to the entire panel. Content should be concise and not take up too much space.

If a message strip is needed, it must be positioned at the top of this area, above all other elements. If multiple messages need to be displayed, they should be grouped and presented within a message popover located in the header actions.

Two Side Panel header variants demonstrating content slot usage. Top variant: Title, "SAP Operated" badge, edit and overflow icons, Subtitle, and a highlighted swap slot area indicating a customizable content region. Bottom variant: the same header structure, but the content slot is replaced by an inline error message strip reading "This is an error message." with a dismiss button.

Table Status Indicator

The optional footer toolbar is used to provide finalizing actions when a side panel does not automatically save changes as they are edited. It must always contain at least two buttons: one for the confirming action and one for the canceling action.

Avoid using single-button footer that simply closes the side panel (e.g., Done or Close).

Side Panel footer bar in a minimal state showing only a Cancel button aligned to the right, with no primary action present.

Floating Footer

SAC Exceptions

The following documents custom extensions from UI5’s Dynamic Page control, made to support specific SAC headers.

Custom Header

In SAC, the header can include a label above the title as an alternative to a breadcrumb. This label cannot be used in combination with a breadcrumb.

Side Panel custom header showing a tab bar with "Builder" (active, underlined) and "Styling" tabs, each with an icon, and a close button. Below the tabs is a Label field displaying the model name "SAC_DRINKS_ORDER_FINANCE" with an edit icon, and an "+ Add Linked Models" link below.

SAC Header with a Label and an “Available Objects” button

Side Tab Bar (TBD)

The side panel supports an optional side tab bar as an alternative to the standard icon tab bar located at the top. This feature provides a vertical navigation option for multi-page workflows or sections within the panel.

Side Panel layout with a vertical side tab bar on the right edge. The panel header shows "Builder" with a close button. To the right, a narrow side tab bar contains three icon-only tabs — a builder/tools icon (selected, highlighted), a styling icon, and an info icon — plus a collapse arrow at the top. The main content area holds a swap slot.