| Table of Contents | ||
|---|---|---|
|
Description
The details pane is a panel located on the right side of the page, presenting information and actions related to selected items on the main area.
Basic Flow
The details pane can have two modes: pinned and unpinned (optional).
When pinned, the detail pane is expanded (see states below). In this case, the content of the main area is shown entirely so nothing is hidden.
When unpinned, the details pane is collapsed (see states below), unless at least one item is selected. In this case, the pane overlays the main area, hiding the content behind it.
In any case, users can collapse and expand the details pane using the collapse/expand bar on the left side of the pane (see below).
Usage & Behavior
General guidelines
In case no items are selected, the details pane will show an empty state (see states below).
In case two or more items are selected, the pane will show either a combined view, aggregating data from all items, or just the number of selected items (see states below).
Structure
Header
The details pane’s header displays its title.
The header may also contain:
a secondary title,
a thumbnail image (for example: an avatar),
a pin icon (see interaction below),
a contextual help icon.
Tabs
Where relevant, the details pane will include between 2 to 5 tabs.
All tabs will be of the same width. Long titles will be truncated. In this case, a tooltip will appear on hover.
The Content Area
The main area of the details pane (or any of the tabs) may contain various types of content (see content below).
If the content exceed the height of its container, a scroll bar will appear. The scroll bar will apply only to the content area, excluding the header and the action area, if exists (see below).
Action Area
Where relevant, an actions area will be shown at the bottom of the details pane, allowing users to perform pane-level (or tab-level) actions.
The action area may include indicators, buttons, dropdown menus etc.
Add image
The Collapse/Expand Bar (optional)
If exists, the collapse/expand bar is located on the left side of the pane.
An arrow is shown In the middle of the bar: when expanded, the arrow will directs to the right and when collapsed it will direct to the left.
Placement & Positioning
The details pane is attached the right side of the page (in LTR languages) and has a fixed width.
If the page contains a ribbon, the top side of the pane is attached to the bottom side of the ribbon. If not, the pane starts a few pixels below the VerinTop, to align with the page title. In both cases, the pane stretches all the way to the bottom of the page.
Add image - see form designer
Default State
The default state of the details pane will be determined by each application separately.
Content
The content area may contain any combination of elements, including text, lists, cards, tables, forms, graphs, links etc.
The content area may contain multiple sub-elements (for example, cards).
Examples
Update images
States
State | Description | Example |
|---|---|---|
Expanded |
|  |
Collapsed | In case the details pane is unpinned and no items are selected, the only visible part of it will be a narrow bar with an arrow pointing to the left. |  |
Empty State | In case no items are selected, the details pane will present an empty state with guiding text or actions, and/or page summary. | (Rotem Avidan (Unlicensed) please update the empty state here) |
Loading Update image | While the details pane content is loading, a loading state will show, including a progress indicator for each of the containers. |  |
Interaction
The Pin Icon
Clicking the pin icon:
Switches the icon between pinned and unpinned.
When pinned:
If one or more items are selected in the main area - expands the content in the main area so the details pane overlays it.
If no items are selected in the main area - collapses the details pane.
When unpinned - collapses the content in the main area so nothing is hidden.
The Collapse/Expand Bar
Hovering the collapse/expand bar switches to hover state.
When expanded, clicking the bar switches to collapsed state.
When collapsed, clicking the bar switched to expanded state.
Validations and Errors
The details pane itself does not require special validations.
For validations and errors related to content, see Field Validation.
Transitions
When the details pane is expanded from collapsed mode, the transition will slide from right to left.
When the details pane is collapsed, the transition will slide from left to right.
Best practices
Use:
Where there is a lot of information related to items that need to be displayed.
Where there is a need to perform actions on sub-elements of items (e.g. cards).
Don’t use:
Where additional information is not related to the selected items. In this case, use a /wiki/spaces/UserExp/pages/2496694037.
Accessibility Compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
See some examples below:
Zeplin link | Screen thumbnail |
|---|---|
 | |
WFM |  |
WFM |  |
Form designer |  |
Code
