Detail View

Joule / Patterns / Detail View

Intro

The detail view provides an in-depth look at specific attributes of a single object, offering additional information that may not have been initially displayed.

Detail view in compact Joule panel (left) and regular Joule panel (right)

Usage

Do

Use the detail view to display additional information, especially if it is lengthy and would otherwise take up too much space in the original format.

Don't

Don’t use the detail view for unrelated details. The detail view should only display information specifically related to a single object.

  • Section out content in the detail view appropriately. This helps users understand the details better, particularly when there is an abundance of content.
  • Avoid showing vital information only in the detail view. Vital information should be visible in the original view and supplemented with additional details in the detail view.

Anatomy

A. Joule Panel

The detail view is a unique view of the Joule panel.

B. Panel Header

The panel header is modified when in a detail view. The Joule logo is replaced with a “Back” button, and unnecessary right accessories are removed.

C. Header

The header introduces the detail view object. Its properties are flexible to suit various use cases and should align with the header information from the original object. These properties include a title and optionally a subtitle, description, and status.

D. Body

The body contains the main content of the detail Its properties are flexible to suit various use cases. These properties include an optional section header and up to five key value pairs. The key value content may be plain text or actionable (a link).

E. Footer (Optional)

The footer includes up to three action buttons related to the detail view

Detail view anatomy

Behavior and Interaction

Trigger

The detail view is triggered if the detail view property is enabled on an object card or list card. When the object card or list items within the list card are pressed, the Joule panel transitions to the detail view of the tapped object. The user may return to the Joule conversation by tapping on the “Back” button.

Interaction of opening the detail view upon tapping an object card and then returning to the Joule conversation

Resources

Joule for Android: Detail View

Joule for Web: Joule Web UI Kit Guidelines

Related Components/Patterns: Illustrated Message