Data lists have become a popular alternative to tables for displaying structured data as they provide more flexible presentation of information, media, and controls that can reduce the need for users to navigate between overview and detail views of information. PatternFly currently supports this presentation as part of the List View pattern. In looking at this page, you will see a variety of options for displaying textual and graphical information in the context of a row.
The expandable list view builds on that work by allowing users to expand any row in the list to reveal more details about an object. This is useful when you want to give users direct access to more details about the object without requiring them to open the object in a separate view. This pattern builds on the principle of progressive disclosure, although it differs in that the goal is less about hiding advanced functionality than it is about allowing the user to view details of an item in context.
The proposal offers up two options for list expansion. The first is a simple case where all details are displayed within a single expandable panel. The second option addresses a more complex use case where a data list row may have multiple expansion panels that hold the details associated with different items displayed in the row. Let’s start with the simple case.
Option 1: Simple Expansion
Here, the user is presented with a list of objects, in this case storage pools, and they want to view details related to the first item in the list. The right caret placed at the start of the list entry communicates that this row can be expanded.
The user clicks anywhere in the row to reveal the details. The row content remain visible as the header of the expanded panel.
When the user wants to hide the details of this row, they will click Close.
Option 2: Multiple Expansion
Now let’s address the more complex case where you may want to expose multiple detailed views associated with the same some. This is illustrated here.
Note that in this example, both OSDs and Alerts will reveal separate details views. To indicate this a progressive disclosure affordance, in this case the right caret, is inserted to the left of the field. A hover effect in added when mousing over the field to provide additional feedback indicating that this is an interactive element.
Single clicking on the element will reveal its details as shown below. The row element will remain highlighted and the direction of the caret will change to indicate that this element is currently expanded.
Again, clicking close will collapse the expansion. The user may also close these details and expand a different element by clicking on that item in the header row.
In all cases, all rows will be closed (collapsed) when the list view is initialized. Filtering of sorting will have the effect of re-initializing the list and will close any row that is currently expanded.
Open Issues, Questions, and Further Work
In creating this proposal, there are a few questions that come to mind:
- When a panel opens, how should this affect the space occupied by the list? Should the list grow vertically and other content be pushed down the page? Or should the height of the list be fixed and a scroll bar appear to let users scroll to items further down the list?
- Would users ever want multiple rows expanded at once? Or should this behave more like a standard accordion where expansion of a new row closes any currently open details panel (i.e. only one row can be open at a time)?
- Differentiating between expansion and drill-down navigation must be addressed. Will it be clear when single clicking on a list entry results in list expansion vs. drill-down?
Our next step will be to finalize this design, but first we welcome your input and comments. Do you feel like this pattern will be useful? Are there other options or issues that need to be considered?