See also: Data Tables

Description

Dual list selectors allow users to select multiple items from a predefined list. It is especially useful when there is a large number of available items.

Open

A common use of the dual list selector is as a column picker for Data tables.

Open

Usage & Behavior

General guidelines

Structure

The dual list selector includes:

• two multiple selection lists:

  • Available items are shown on the left. This list may be either a List or a Tree.

  • Chosen items are shown on the right.

• additional items above each list.

  • A header, describing the contents of the list.

  • A Search bar (optional), allowing users to quickly locate specific items.

  • A master Checkbox, allowing users to select/deselect all of the items in that list.

  • Counts of the total number of items and the number of selected items in each list.

  • Next to the Chosen items list header, an Up to [x] indicator showing the maximum number of allowed items (where relevant).

  • Where a tree list is used for the Available items, a Collapse/Expand All option will appear next to the master checkbox.

• two move buttons (right and left) between the two lists, allowing users to move items between the lists.

• two reorder buttons (up and down) below the Chosen items list, allowing users to reorder the chosen items.

• a vertical Scrollbar for each list, used if it exceeds its container.

• Restore defaults button (optional).

Placement and Positioning

• The dual list selector may appear within a Form, either in the main workspace or in a dialog popup.

• Data table column selectors are commonly triggered via the Action menu.

Content

• Some mandatory items may appear in the Chosen items list by default, and cannot be moved. In this case:

  • These items will appear first on the list

  • The associated checkbox for a mandatory item will be disabled.

Internal logic

• Available items are often sorted alphanumerically.

• Chosen items are shown in the order they were added, unless reordered by the user.

• It is possible to select items in both lists. After clicking one of the move buttons, selection will be removed from all items in both lists.

States

• The left and right Move buttons are disabled until an item has been selected from the relevant list. Selecting an item in the Available items list enables the right button, and vice versa.

• The Reorder buttons are disabled until at least two items are added to the Chosen items list.

  • The Up button is always disabled when the top item is selected.

  • The Down button is always disabled when the bottom item is selected.

Interaction

Selecting Items

• Items are selected using the checkboxes.

• All items in a list can be selected by checking the corresponding master checkbox.

Moving items between lists

• Items can be moved between lists by either:

  • clicking the right or left move buttons, or

  • using Drag and drop.

• Items moved to the Chosen items list will be added to the bottom of the list.

• Items returned to the Available items list will return to their original location.

• When items are moved using the move buttons, the Chosen items list should automatically scroll so that the first moved item is at the top of the visible area.

• When items are moved using drag and drop, the Chosen items list will scroll according to the Drag and drop guidelines.

Reordering the Chosen items list

• Items can be reordered by either:

  • selecting the items and then clicking the up and down buttons underneath the list.

    • In this case, when reordering multiple items they will keep their relative locations in the list, each moving up or down one place each.

  • using Drag and drop.

    • In this case, when reordering multiple items they will be clustered together, and move as a group.

• After items are reordered they will remain selected.

• Mandatory items in the Chosen items list cannot be reordered.

Restoring Defaults (optional)

• Clicking the Restore defaults button will return both lists to their original state.

Pinning columns (optional, only relevant for table column selectors)

For table column selectors, items in the Chosen items list may be pinned to the top. This will ensure that these columns are always visible on the table, and remain static when there is horizontal scroll.

• Where defined, users can pin any items within the Chosen items. Within a Data table column selector, pinned items represent columns which are anchored to the left of the table and do not move with horizontal scroll (where it exists).

• Mandatory items are always pinned automatically.

• Items are pinned by clicking the pin icon, which is shown on hover. The icon toggles between pinned and unpinned states.

• When the pin icon is selected, the item will automatically move to the top of the list, beneath the preexisting pinned items.

• Pinned items can only be ordered within the pinned items group. Note: mandatory items cannot be moved.

Validation and Errors

No items on the chosen columns list

If all items are removed from the Chosen items list:

• the search bar, reordering buttons, and Apply button are all disabled.

• a message will appear within the Chosen items area, advising the user to select at least one item.

Exceeding the Chosen items limit

• There is no restriction on how many items can be moved to the Chosen items list.

• If there is a limit on the number of items which can be applied, and the number of items in the list exceeds this limit:

  • the Apply button is disabled.

  • an error message will appear underneath the lists.

Best practices

Where used as a table column selector:

• do not make more than one item mandatory.

• do not pin more than three items, as the table will not be usable at narrow screen widths with horizontal scroll.

Accessibility compliance

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

Focus management

• Generally the focus will behave as in other Forms.

• There is one variation on this behavior: When the focus is on the Chosen items list, and the user moves one or more selected items to the bottom of the list, the focus will move to the Up arrow (9) (instead of to the next focusable element).

• If the user moves all the items from the chosen items list back to the available items list, the focus will automatically move from the left move button (5) to the the right move button (4).

Design

Code