Description

The details pane is a panel located on the right side of the page, presenting information and actions related relating to selected items on within the main areacontent.

Basic Flow

• The details pane panel can have two modes: pinned and unpinned (optional).When pinned,

  • Pinned - the detail pane is expanded (see

  states

  • States below).

  In this case,

  • The pane is shown next to the content of the

  main area is shown entirely

  • page so nothing is hidden.

  When unpinned,

  • Unpinned - the details pane is collapsed (see

  states

  • States below), unless at least one item is selected.

  In this case, the

  • The pane overlays the main area of the page, hiding the content behind it.

• In any case, users can collapse and expand the details pane both modes, the pane can be collapsed and expanded using the collapse/expand bar on the left side of the pane (see below).

Usage & Behavior

General guidelines

• In case When no items are selected, the details pane will show an empty state (see states States below).

• In case When 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

  • States below).

Structure

Header

• The details pane’s header displays its title.The header the pane’s title, and may also contain:

  • a secondary title,

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

  • a pin icon (see interaction Interaction below),

  • a contextual help icon.

Tabs (optional)

• Where relevant, the details pane will can include between 2 up to 5 tabs.

• All tabs will be of the same width.

• Long titles will be truncated. In this case, and a tooltip will appear on hover. Titles may not wrap onto multiple lines.

The Content Area

• The main area of the details pane (or any of the tabs) may contain various types of content (see content below). See Content for examples.

• If the content exceed exceeds the height of its container, a scroll bar Scrollbar will appear. The scroll bar scrollbar will apply only to the content area, excluding the header and the action area, if exists (see below).

Action Area (optional)

• 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 elements such as indicators, buttons, dropdown and drop-down menus etc.

• Add image

The Collapse/Expand Bar (optional)

• If exists, the The collapse/expand bar is located on the left side of the details pane.

• An arrow is shown In in the middle of the bar:

  • when expanded, the arrow will

  directs

  • direct to the right

  and

  • .

  • when collapsed

  it

  • , the arrow will direct to the left.

Placement & Positioning

• The details pane is attached to the right side of the page (in LTR languages) and .

• The pane has a fixed width.

• Pane height:

  • If the page contains a ribbon, the top side of the pane is attached to the bottom side of the ribbon.

  If not

  • Otherwise, the pane starts a few pixels below the VerinTop, to align with the page title.

  In both cases, the pane stretches all the way

  • The pane always stretches 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 such as text, lists, cards, tables, forms, graphs, and links etc.

• The content area may contain multiple sub-elements (for example, such as cards).

Examples

Update images

States

State	Description	Example
Expanded	The details pane is expanded in casewhenever: It is pinned. In this case, the content of the page is pushed narrowed to appear next to the pane, so nothing is hidden. It is unpinned but one or more items are selected. In this case, the pane overlays the main area, hiding the content behind itcontent of the page stretches to its full width, being partially hidden by the details pane.
CollapsedIn case the details	The details pane is collapsed whenever: the pane is unpinned, and no items are selected , the . The only visible part of it the details pane will be a narrow bar with an arrow pointing to the left.
Empty State	In case When no items are selected, the details pane will present an empty state with guiding text or , guiding actions, and/ or a 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 Progress Indicator for each of the containers.

Interaction

The Pin Icon

• Clicking the pin icon :

  Switches the icon

  changes it between pinned and unpinned versions.

• When pinned:

  If one or more

  Clicking the icon when the pane is pinned will change it to unpinned mode.

  • If no items are selected in the main

    area - expands the

    content

    in the main

    area

    so

    , the details pane

    overlays it

    is automatically collapsed.

  • If

    no

    one or more items are selected in the main content area

    - collapses

    , the details pane will remain open and the content will expand to full width, being partially hidden by the pane.When unpinned - collapses the content in the main area

• Clicking the icon when the pane is unpinned will change it to pinned mode.

  • The main content area is narrowed to appear next to the pane, so nothing is hidden.

Pane is unpinned	Pane is pinned
Image Added	Image Added

The Collapse/Expand Bar

• Hovering the collapse/expand bar switches it to hover state. (See States above).

• When the pane is expanded, clicking the bar switches it to the collapsed state.

• When the pane is collapsed, clicking the bar switched switches it to the 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 items have a lot of related information related to items that need needs 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 https://zpl.io/bzjLm73
WFM https://zpl.io/VDo1yWv
WFM https://zpl.io/V0qprPO
Form designer https://zpl.io/V17RrZm

Code