Last Update: Nov 19, 2022

Platform: Web

Designer: Dasha Kalacheva

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.

Usage

A detail panel is used to display related information / related details to one specific object. Pattern wise it can be considered as an object detail behavior, with one object in a table or list and the side panel displaying its details. In contrast to the master detail pattern, different side panels can be triggered by different objects within one line of the master table or list. The detail panel is used when the displayed details should not influence the layout of the rest of the page.

Although the detail panel uses a master detail like behavior, it is displayed in a different way, to ensure the rest of the page being displayed on the full width of the screen.

Components

Image

The side panel has its independent header, displaying the title and the main information of the displayed object. It also provides the actions for the side panel, as well as for the object itself.

The content area of the side panel is subdivided in two levels: First by tabs and within those tabs by subheadings. If useful, the subheadings can be collapsible. For easier understanding icons can be added up front of the subheading labels.

The content of the side panel can be displayed in various ways:

There are independent scrollbars for the main proportion of the screen and the side panel. Only the content can be scrolled within the side panel, the header stays fixed.

Within the side panel the user can navigate via tabs.

Resources

WSP - Admin – Figma (3 Variants in SP)

https://www.figma.com/file/rTJhTNCza1ciRuQyZaRaN0/WSP---Admin?node-id=6176%3A269210

WSP - Admin – Figma (Attribute Types, skills, Proficiency Level)

https://www.figma.com/file/rTJhTNCza1ciRuQyZaRaN0/WSP---Admin?node-id=4201%3A188030

WSP - Admin – Figma (Big Data Analytics, Proficiency Level)

https://www.figma.com/file/rTJhTNCza1ciRuQyZaRaN0/WSP---Admin?node-id=3828%3A135055