Intro

The side panel is a feature located on the side of an app page, and provides quick access to frequently used actions and content without leaving the page. It can easily be expanded and collapsed, depending on the user’s needs.

The side panel is reserved for:

• Additional context and information related to the overall page content or to an item on the page.
• Interactive tools, such as actions and list elements.

The side panel can be positioned on the right or left side of the main page content. It can contain multiple tabs or a single tab. When expanded, the side panel pushes the main page content sideways.

When to Use

You can use the side panel to give users easy access to information relating to the main content, such as comments, attachments, or a change log.

SAP S/4HANA Only

You can use the side panel together with a list report, worklist, or analytical list page.

Use the side panel only for the following use cases:

• Comments
• Attachments
• Table filter and layout for pivot tables
• Message handling and notifications
• Activity history / change log

Don’t use the side panel:

• In the object page floorplan. Use the dynamic side content instead.
• In the flexible column layout.
• As a navigation tool.
• To provide controls or information that are unrelated to the content of the app page.

Components

The side panel has the following components:

1. Content panel icon and title.

2. Content area

3. Resize handle (optional)

4. Close button

5. Side bar

6. Expand/Collapse side panel

7. Icon tab (selected)

8. Icon tab (not selected)

9. Overflow button. See Multiple actions with overflow.

Panel Width

By default, the side panel is 320 px wide when expanded. You change this setting as needed for your use case.

Behavior and Interaction

Side Bar and Content Panel Navigation

By default, the side panel is collapsed and no tabs are selected. You can change this as needed for your use case.

The interaction depends on how many actions you offer via the side panel.

Side bar with one action

If only one action is available, the side bar contains only the expand/collapse button.

The expand button  opens the content panel. The collapse button  closes it.

On mouseover, the expand button  shows a tooltip with the name of the action.

Side bar with multiple actions

Clicking a tab in the side bar opens the corresponding content panel directly.

To close the content panel, users can either click the tab in the side bar again or use the Close button at the top of the content panel.

The Expand  button  at the top of the side bar expands the side bar. The available actions are now visible in full. The Collapse button  collapses the side bar again.

From the list of actions, users can navigate to the individual content panels. Opening a content panel collapses the side bar and the tab displays as selected.

Multiple actions with overflow

If the side bar can’t accommodate all the available actions, or the screen size is reduced, an overflow button (…) appears as the last option.

Clicking the overflow button opens a list of additional actions.

Users can close the list by:

• Selecting an item
• Clicking the overflow button again
• Clicking anywhere else on the screen

Resizing the Content Panel

You can allow users to adjust the width of the content panel.

Mouse Interaction

• Click and drag the resize handle to the left or to the right.
• Double-click the resize handle to adjust the side panel width size as follows: Maximum width minimum width default width
• Right-click the resize handle or anywhere within the side panel to open the context menu with the following options:
  • Expand to Maximum Width
  • Collapse to Minimum Width
  • Reset to Default Width

Keyboard Interaction

• Press Left Arrow or Right Arrow to expand or collapse the panel by 10 px.
• Press Shift+Left Arrow or Shift+Right Arrow to expand or collapse the panel by 100 px.

Screen Width Limits

For legibility, we recommend limiting the screen width allowed for the side panel display as follows:

• Maximum: 90% of the screen
• Minimum: 15% of the screen

You can change these values, depending on the use case.

If the app page contains two side panels – one to the left and one to the right of the screen – the expanded side panel is limited to 50% of the screen width. Users can only expand one panel at once.

Accessibility

Users can perform all the following actions with both a mouse and keyboard:

• Expand and collapse the side bar
• Select and deselect the tabs on the side bar to open and close the content panel
• Set the focus on a tab
• Move the focus from the side bar to the content panel
• Resize the side panel

Responsiveness

Information on the design for tablet and phone devices will be added soon.

Related Links

When a user selects multiple items from a table, it might not be possible to process all of the items at once.

Users therefore need clear and user-friendly information on:

• The actions available for the selected items
• Any issues that prevent items from being processed
• Whether or not an action was successful for all items

Scenarios for Processing Results

This guideline outlines the message patterns and recommended message texts for the following scenarios:

• Success: All items were processed successfully
• Failure: No items can be processed / were processed
• Partial Processing: Only some items can be processed. Others can’t be processed or require manual validation.

Enabling/Disabling Actions

Success

When all items were processed successfully, show a message toast.

Failure Cases

No items can be processed

When no items can be processed, disable the action button.

For example, if all the selected items are locked, disable the Edit button.

To help users understand why the action button is disabled, use the item states.

No items were processed

When no items were processed, show a message view in a dialog.

Partial Processing

Backend issues

When one or more of the selected items were processed successfully and one or more were not, due to backend issues, show a message view in a dialog.

One or more items can’t be processed

1. Before processing, a warning message asks users whether they want to apply the action to remaining items.
2. After user confirmation the resulting message depends on the processing results:
   • A message toast for successful processing
   • A message view for when backend errors occurred during the processing

Before Processing

If the action cannot be applied to one or more items, a warning message asks the users whether they want to apply the action to the other items.

After User Confirmation

After the users confirm the primary action for the remaining items the resulting message depends on the processing results:

• When all the remaining items were successfully processed, a message toast is displayed.
• When one or more backend errors occurred during the processing, a Summary message view in a dialog is displayed. It includes:
  1. Successfully processed items
  2. The backend error or errors
  3. An information message for each item excluded from the processing

Information message text: The <item name> can’t be <action>

Processing is blocked by items that require manual validation

Some warnings for individual items may require a user decision before processing can continue:

• Case 1: Just one warning. The user can ignore the warning and process the item, or skip the item.
• Case 2: More than one warning. The user can ignore the warnings and process all the items, or skip all the affected items. Processing is only interrupted once.

Case 1: One Item

When one item requires manual validation, show a warning message box with actions to:

• Validate and process the item
• Skip the item: When the users skip the item, in the message view in a dialog, show an information message for the skipped item in the message view.

For the skipped item, in the Summary message view, add an information message text below the other (success, error, and warning) items.

Case 2: More than One

When more than one item requires manual validation, show a warning message box with actions to:

• Validate and process the items
• Skip the items: When the users skip the items, in the message view in a dialog, show an information message for each skipped item.

For each skipped item, in the Summary message view, add an information message text below the other (success, error, and warning) items.

Action on multiple items with field issues in edit mode

Triggering a mass action can reveal field issues because the mass action also triggers field validation.

List the field related messages among other messages in the summary message view dialog.

Once the dialog is closed, the message popover appears, with a list of only the field issues.

Related Links