Description

The details pane is an area located on the right side of the page, presenting information and actions related to a selected itemitems selected on the main area of the page.

Image Removed

Image Added

Usage & Behavior

General guidelines

• In case no items were selected on the main area, and empty state will be presented , the details pane will show an empty state (see states below).

• In case two or more items were selected on the main area, the pane will only show the number of selected items (see states below).

• The details pane may have an option to be pinned pin to the side of the screenpage, or unpinned (i.e., expanded by demand).

Structure

Header

• The details panel may contain a header with the pane’s title.

• The header may also contains:

  • a secondary title,

  • a Thumbnail image (for example: an avatar),

  • a pinning icon,

  • a contextual help icon.

Tab Bar

• When Where relevant, the details pane will show include a tab bar, containing between 2 and 5 tab barstabs.

• All tabs will be of the same width. In case the title is long it Long titles will be truncated and a tooltip will appear on hover.

Image Removed

Image Added

The Content Area

• The details pane’s content area pane (or any tab) content area may contain :

• Any combination of text, lists, cards, tables, forms, graphs, etc.

A vertical scroll bar. If exists, the

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

  on

  to the content area only,

  and not on other areas such as the header or an action area. Some tabs

  excluding the header and the action area, if exists (see below).

• The content area (or any of the tabs) may include drill down options or links to other areas.

Action Area

• Where relevant, an actions area is will be shown at the bottom of the details pane, allowing users to perform high level actions.

• Examples - buttons / dropdown menu?

Placement & Positioning

• The details panel is

• attached the right side of the page (

• in LTR

• languages), and stretches from below the

• page header area

• to the bottom of the page.

• When shown, the details pane has a fixed width.

Default State

• When first entering the workspace the details pane should be pinned and expanded (if the resolution allows, see responsive design)

Content

• The detail pane presents Item/s related content with additional options

• more information and/or actions related to the selected item

in some areas multi item selection is available and may present other content and options

Image Removed

• content area may contain any combination of text, lists, cards, tables, forms, graphs, etc.

• In case the content area contains multiple items (for example, cards):

  • Each item may have its own set of actions.

  • The user may have the option to select multiple items, in order to perform additional actions.

• Here are some examples of content used on the details pane:

States

State	Description	Example
Empty State	In case no items are selected, the details pane can present an empty state with guiding text or actions, and/or page summary	(Rotem Avidan (Unlicensed) please update the empty state here)
Loading	When details pane is being loaded a corresponding animation should be presented	Image RemovedImage Added

The Collapse/Expand bar

State	Collapsed details pane	Expanded details pane
Hover

Interaction

Clicking the pin icon switches between pinned and unpinned states.

• When unpinned, the content of the page stretches to its full width, being partially hidden by the content panel.

• 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 do not require special validations.

• For validations and errors related to possible content, see Field Validation.

Transitions

• When the details pane is being expanded from collapsed mode, the transition will be a slide from right to left (RTL mode).

• When the details pane is being collapsed, the transaction will be slide from left to right.

Best practices

Use:

• When there is a lot of information/meta data to present on an item.

• When there is additional secondary information and actions to present on an item.

• When there is a benefit of viewing some content see side by side.

Don’t use:

When the information isn’t related to a selected item. In this case use a /wiki/spaces/UserExp/pages/2496694037 instead.

Accessibility Compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Design

See some examples below:

Zeplin link	Screen thumbnail
WFM https://zpl.io/bzjLm73
WFM https://zpl.io/VDo1yWv
WFM https://zpl.io/V0qprPO
Form designer https://zpl.io/V17RrZm

Code