Data Toolbar: Everything in Its Place

Toolbar screenshotEnterprise applications put the user in charge of many objects; virtual machines, networks, hosts, storage domains, and more all require organization and maintenance. Managing these objects is only made harder by the fact that different applications, and even different sections of the same application, all have their own ways of sorting, filtering, and performing actions on objects. The data toolbar is a pattern aimed at bringing consistency to the tools for managing objects by providing a place for everything.

Toolbar patterns

The first step towards performing a task or fixing a problem with an object is often finding it in the first place. For this reason, the data view toolbar places emphasis on patterns whose primary purpose is locating things.

Filter [1]
The default simple filter pattern enables users to quickly apply stackable filters to a page of objects. Filters simplify the current view by showing only a subset of the data matching an input filter query, and can be added and removed as necessary. Rather than building a single complex filter only to apply it and find that something is wrong, the user can use the simple filter to narrow their focus bit by bit until they have reached their desired level of complexity. If the user finds that they have excluded something they shouldn’t, filters can be deactivated one at a time or all at once.

Sort [2]
Simple sort is a pattern that enables the user to quickly sort a page of objects by a single attribute, even if that attribute is not displayed on the page. This is particularly useful for data view types with lower information density than a table. The user can prioritize objects based on low-level information even if they only want to look at high-level information.

Find [4]
This pattern reproduces a popular browser functionality by highlighting all substring matches to a search query within the current view and enabling the user to jump between them. Unlike the in-browser version, find is not limited to objects that are visible at the time of search, but extends to objects that have not yet rendered, such as those lower down in an infinite scrolling view.

Once the object of interest has been located through one or several methods, the next step is either to gather more information on the object or take some sort of action. The data toolbar provides consistent options for both of these possibilities.

Toggle Display Type [5]
This pattern is used when a set of objects has different possible representations that each have their own advantages. From high-level overview representations such as dashboards to data-rich tables, different views convey different, valuable, pieces of information. A quick button press enables users to get the most out of each one of them.

Toolbar Actions [3]
The data toolbar offers ample room for actions. Important and frequently used actions each get their own dedicated button on the toolbar. In order to save space, less common actions are located in the ‘more actions’ menu which affords easy access with less visual clutter. In a responsive application, actions can be rolled up into this menu as the screen gets smaller.

All or a subset of these patterns can be put together in any application to form a consistent set of tools for getting oriented and taking action.

 

PatternFly is currently working on behavior and usage guidelines for the data toolbar and its component patterns. Please share your thoughts in the comments!

Best,

-Chris

3 Responses so far.

  1. Josephine says:
    Thanks for sharing this! I just have one question regarding the filter:
    If it only makes sense to filter by name, will you recommend the label “Name” to be shown on a flat UI element, rather than on a button? (assuming that the caret will be removed in that case)
  2. Allie says:
    When the page has a table do you recommend using the toolbar to filter / sort columns or use the column sorting in the data table?

LEAVE A COMMENT