List & Details

List & Details

What Problem Does This Solve?

User needs to see the details for an item selected from a list.

Why Use This Pattern?

A list is a form of data table that presents data for a large set of items. This is a common need for enterprise applications to show lists of clients, assets, activities with their status, address, contact information, timestamps, and location.

List & Details is like the Marker List pattern in layout and general recommendations but additionally let users select a single item to view and even edit its details. Users navigate from the list to the details view, perform their analysis or updates and navigate back to the list. This pattern works well for items with many fields that render long or complicated forms. It helps to focus the user on the selected item without obstructing anything on the map and to embed map interactions like editing features as part of the workflow.

When to Use This Pattern

Use to manage lists of assets, projects, incidents, or generally features that have a lot of attributes or geometries that need to be added or edited. For simple updates it is preferred to allow inline editing or let users modify attributes inside the Info Popup. Applications using this pattern include situational awareness, asset or content management, or operations.

What’s the Solution?

Provide a list of features side by side with the map. The list is often sortable, filterable, searchable and driven by the user’s privileges and populated through back-end services. Tapping a row of the list will toggle the panel over to the details view with a clear mechanism to toggle back by either submitting (saving) or canceling (aborting) the form on the details page. Sometimes the details page can provide a simple back button in addition or instead of form buttons or depending on the need provide previous/next buttons to move to the next record without having to pogo-stick back and forth with the list.

Keep the list simple by displaying only on the most important columns and removing unnecessary design elements like needless separators, row stripes, shadows, or even cell borders.

The details view is a place to create new, and display or edit existing items. Structure this space using common best practices for content hierarchy and form layouts, space permitting layout label/controls horizontally, otherwise stack them vertically. For forms, mark mandatory fields and provide inline validation whenever possible. Embed map tools for editing right in the place where users need to update geometries, e.g. a highway project has a list of related assets that need to be selected on the map.

Selecting the item from the list will also zoom to the extent of the item on the map showing the necessary level of detail to analyze the item and interact with it. Backing out from the details to the list should restore the last extent that was visible so that users don’t lose their context.

Special Considerations

Depending on the space requirements it is ok to use more or less horizontal space for the details view panel than it was reserved for the list view. Any toggle button to collapse the panel should collapse the panel regardless of the current view.

Leave a Reply