| 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.
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 combimation combined view, aggregating data from all items, or just the number of selected items (see states below).
The details pane may have an option to pin to the side of the page
Structure
Header
The details panel contains a header with the pane’s details pane’s header displays its title.
The header may also contain:
a secondary title,
a Thumbnail 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 and . In this case, a tooltip will appear on hover.
The Content Area
The main area of the details pane (or any tabof the tabs) content area 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 only, 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.
Examples - buttons / dropdown menu?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 stretches from below the page header 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 ribbon / no ribbon
The details pane has a fixed width.
image
Default State
The default state of the details pane will be determined for 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 items sub-elements (for example, cards).
Examples
Update images
States
State | Description | Example |
|---|---|---|
Expanded |
|  |
Collapsed | In case the details pane is not pinnedunpinned and no items are selected, the only visible part of it will be a narrow bar with an arrow pointing to the left. Mouseover the bar will | reveal the details pane with a sliding effect, in overlay mode (hiding the content behind it. |
Empty State | In case no items are selected, the details pane can will present an empty state with guiding text or actions, and/or page summary. | (Rotem Avidan (Unlicensed) please update the empty state here) |
Loading | While the details pane content is loading, a corresponding animation will be presentedloading state will show, including a progress indicator for each of the containers. |  |
The Collapse/Expand bar
State | Collapsed details paneExpanded details pane | |
Hover | | |
Interaction
Clicking the pin icon switches :
Switches the icon between pinned and unpinned states.
Hovering the collapse/expand bar switches to hover state.
When expanded, clicking the collapse/expand bar switches to collapsed state.
When collapsed, clicking the collapse/expand bar switched to expanded state.
mouseover the collapse/expand bar clicking unpinned, the content of the page stretches to its full width, being partially hidden by the content panel. In this case:
Clicking anywhere on the bar opens the details pane in an overlay, hiding the content behind it.
When pinned, the content of the page narrows to be shown next to the panel, so nothing is hidden.
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
