Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 60 Next »

See also: Data Tables

Description

A dual list selector allows the user to select multiple items. It is particularly useful when there are a large number of available items.

The most common use of the dual list selector is a column picker, used in Data Tables. For this reason, this document describes the structure and function for a column picker.

Usage & Behavior

General guidelines

  • The dual list selector appears inside a workspace or in a dialog.

  • In data tables, it is triggered by clicking the Columns option in the action menu.

Structure

The column picker contains

  • Two checkbox lists:

    • Available Columns (on the left) - a list of all of the columns available in the table.

    • Chosen Columns (on the right) - a list of the currently chosen columns.

Each list shows a selected items indicator, next to a global checkbox, allowing users to select / deselect all items on that list.

  • Move buttons (right and left), shown between the two lists. These allow the user to move items between the lists.

  • Reorder buttons (up and down), shown underneath the Chosen Columns list. These allow the user the reorder the chosen items.

  • A “Up to X” indicator, shown next to the Chosen Columns header (optional - if a maximum number of chosen items was set).

  • A search bar above each list (optional). This allows the user to quickly locate specific items. The search bar is optional, depending on the number of items.

  • A vertical scrollbar, used where the list is too long to be displayed in its container.

  • A Restore defaults button (optional), shown in the bottom-left corner of the dialog box.

  • Apply and Cancel dialog buttons, shown in the bottom-right corner of the dialog box.

Order

  • The Selected Columns list shows the list of columns in the same order as they appear in the data table.

  • The Chosen Columns list is sorted alphanumerically.

States

  • The Move buttons (left and right) are disabled until the user has selected at least one item: selecting items in the right list enables the left button, and vice versa.

  • The Reorder buttons (up and down) are disabled until the user has selected at least one item in the Chosen Columns list:

    • Selecting the top item will only enable the down button.

    • Selecting the bottom item will only enable the up button.

    • Selecting any other item will enable both the up and down buttons.

  • If a column cannot be moved or reordered, its checkbox should be disabled.

Interaction

Selecting Items

  • On either lists, checking an item selects it.

  • Some items on the Chosen Columns list may be defined as fixes (hard coded), so users cannot select them.

  • The user can select all items on a list by checking the corresponding main checkbox.

  • Selecting items on one list deselects all items in the other list.

Moving items between lists

  • The user can move selected items between lists using one of two methods:

    • clicking the right or left button between the lists.

    • using Drag and Drop.

  • Items moved to the Chosen Columns list will appear at the bottom of the list.

  • Items moved to the Available Columns list will appear in their original locations, so the list is always sorted alphanumerically.

  • Items should remain selected after they were moved.

  • Moved items should always be visible. Where the target list is outside of the visible area, the list will scroll automatically.

Ordering items

  • In the Chosen Columns list, the user can reorder items by selecting them and then clicking the up and down buttons underneath the list.

    • Reordering multiple items together will keep their relative locations (i.e. including the gaps between items, where they exist).

  • Items can also be reordered using drag and drop. In this case, when reordering multiple items they will be clustered.

  • After the items are reordered they will remain selected until the user selects other items or deselects the corresponding global checkbox.

Restoring Defaults

  • Clicking the Restore Defaults button restores both lists to their original states ('factory default').

Pinning columns (optional)

  • Where defined, users can pin any column on the Chosen Columns list by clicking the pin icon, which is shown on hover. In this case:

    • the icon toggles from pinned to unpinned.

    • the item moves to the top of the list.

    • the item can be ordered only inside the group of pinned items.

    • within a data table, pinned columns are anchored to the left. Pinned columns can be reordered only inside the group of pinned columns.

  • The user can unpin the item by clicking the pin icon again.

Validation and Errors

All items were removed

If the user removes all items from the Chosen Columns list:

  • the search bar, reordering buttons and the Apply will be disabled.

  • a message will appear inside the container, advising the user to select at least one item.

Exceeding the maximum number of columns

  • It is recommended to limit the number of items which can be selected, depending on common usage and system performance.

  • In this case, the maximum number of items should be shown with the count above the Selected Columns list, regardless of the number of available columns.

  • If the user reaches the maximum number of items:

    • the right arrow button will be disabled.

    • dragging items from the Available Columns list will be disabled.

    • a relevant message will appear at the bottom of the popup.

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Design

Zeplin link

Screen thumbnail

https://zpl.io/2j6oopW

Code

  • No labels