See also: Data Tables
| Table of Contents |
|---|
Description
A dual list selector is a pattern allowing 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. The most
...
A common use of the dual list selector is as a column picker , used in data tables. For this reason, this document describes the structure and function for a column picker.
...
for Data tables.
...
Usage & Behavior
General guidelines
Structure
The dual list selector
...
In data tables, it is triggered by clicking the Columns option in the action menu.
Structure
The column picker contains:
...
includes:
two multiple selection lists:
At the top of each list:
A search bar above each list (optional). This allows the useradditional items above each list.
A header, describing the contents of the list.
A Search bar (optional), allowing users to quickly locate specific items.
A list checkboxmaster Checkbox, allowing users to select/deselect all of the items on in that list.If only some
Counts of the items are selected, the list checkbox will show a “partially selected” state (see Checkbox).
A textual indicator, showing the number of existing items and the number of selected items, where relevant.
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.
At the bottom of the Chosen Columns list - two reorder buttons (up and down) below the Chosen items list, allowing users the to reorder the chosen items.
Next to the Chosen Column title - An Up to [X] indicator, showing the maximum number of allowed items (if it was set).
A vertical scrollbar, used where the list is too long to be displayed in its container.
On the left - a Restore defaults button (optional).
On the right - Apply and Canceldialog buttons.
At the bottom of the area / dialog:
Ordering
The Selected Columns list shows items 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 on the left 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 (up and down) are disabled until the user has selected at least one item in two items are added to the Chosen Columnsitems list:
Selecting.
Instead of a checkbox list, the Available Columns area can display a multiple selection tree list, allowing the user to quickly select and choose groups of items.
- In this case, an icon button will appear next to the list checkbox, allowing users to collapse and expand the list
The Up button is always disabled when 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 buttons.
If a column cannot be moved or reordered, its checkbox should be disabled.
Grouping
is selected.
The Down button is always disabled when the bottom item is selected.
Interaction
Selecting Items
On either list, checking an item selects it.
Some items on the Chosen Columns list may be defined as fixes, so users cannot select them.
The user can select all items on a list by checking the list checkbox.
Selecting items on one list deselects all items on the other listItems are selected using the checkboxes.
All items in a list can be selected by checking the corresponding master checkbox.
Moving items between lists
User can move selected items between lists using one of these methodsItems can be moved between lists by either:
clicking the right or left button between the lists.move buttons, or
using drag Drag and drop.
Items moved to the Chosen Columnsitems list will appear at be added to the bottom of the list.
Items moved returned to the Available Columnsitems list will appear back in return to their original locations, so the list is always sorted alphanumerically.
Items will remain selected after they were moved.
Moved items should always be visible. Whenever 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 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 the items are reordered they will remain selected until the user selects other items or deselects the list list checkbox.
Mandatory items in the Chosen items list cannot be reordered.
Restoring Defaults (optional)
Clicking the Restore Defaultsdefaults button restores will return both lists to their original state ('factory default').
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.
State | How the item looks on the Visible Items list | How the table would look |
|---|---|---|
A mandatory column (always pinned) |  |  When scrolled:  |
Before pinning the item (the user hovers over the item) |
...
 |
| |
After pinning the item. |  |
|
Where defined, users can pin any column on the Chosen Columns list 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. In this case: The icon toggles between pinned and unpinned states.
- The item moves
When the pin icon is selected, the item will automatically move to the top of the list
.The item can be ordered only inside the group of, beneath the preexisting pinned items.
On 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 againPinned 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 the user removes all items are removed from the Chosen Columnsitems list:
the search bar, reordering buttons, and Apply button are all disabled,.
a message appears will appear within the chosen columns 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 Columns list, but if items list.
If there is a limit on the number of items which can be applied, and the number of items in that the list exceeds the maximum numberthis limit:
The apply the Apply button is disabled.
An an error message appears at the bottom of the popup.
In this case, removing items so their number is equal or below the maximum reverts to the regular state.
...
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
Zeplin link | Screen thumbnail |
|---|---|
Happy trailInitial state  Selecting items  After adding items to the chosen list  Edge casesNo items chosen  Maximum items exceeded  OptionalGrouped items  |
Code
...