Last Update: Dec. 14, 2023

Platform: Web, Mobile

Designer: Matthias Stenzl

Intro

The detail panel is a panel that displays details information that is related to one selected specific object on the page and provides interaction with those details.

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 contextual SF page panel is always positioned on the right side of the main page content.

Usage

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.

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.

Types

At SuccessFactors, the side panel content can be compared to a form. The types of side panels fundamentally differ in the use of different UI components. Therefore, we are currently only assuming one type of a side panel.

Structure & Components

Similar to a shape, the side panel begins with a header area with a label aligned to the left and an x control on the right. The structure of the side panel is divided by one or more section headers. The content can consist of text, links and action controls.

Behavior & Interaction

By default, the side panel is collapsed. With a click on an object, link or action button the side panel will be opened. With the X- control the side panel will be closed.