See also: Data Tables
| Table of Contents |
|---|
Description
A dual list selector allows the user Dual list selectors allow users to select multiple items from a predefined list. It is particularly especially useful when there are 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
...
It is triggered by clicking the Columns option in the Action Menu.
Structure
The column picker contains two Lists:
Available Columns (on the left). A list of all of the columns available in the table, with a header.
Selected Columns (on the right). A list of the currently displayed columns, with a header.
Move buttons (right and left), shown between the two lists. These allow the user to move items between the columns.
Reorder buttons (up and down), shown underneath the Selected Columns list. These allow the user the reorder the selected items.
Selected items count, shown next to the Selected Columns header. It shows the number of selected items out of the total number of items, for example: 7/22.
(Optional) A Search bar above each list. 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, shown in the bottom-left corner of the dialog box.
Done 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 Available Columns list is sorted alphanumerically.
States
...
includes:
two multiple selection lists:
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 (up and down) are disabled until the user has selected at least one item in the Selected Columns two items are added to the Chosen items list.
Selecting 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 the up and down buttons.
is selected.
The Down button is always disabled when the bottom item is selected.
Interaction
Selecting Items
In either list, clicking an item selects it.
The user can select more than one item using the Ctrl (or Command) key for discrete selection, or the Shift key for a block selection.
Selecting items in one list deselects all items in 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
The user can move selected items between lists using one of two methodsItems can be moved between lists by either:
Items moved to the Selected Columns Chosen items list will appear at be added to the bottom of the list.
Items moved returned to the Available Columnsitems list will appear in return to their original locations, so the list is always sorted alphanumerically.
Items should remain selected when moved.
Moved items should always be visible. Where the target list is outside of the visible area, the dialog will automatically scroll when the item is moved.
Reordering items
In the Selected 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.Reordering
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.
Mandatory items in the Chosen items list cannot be reordered.
Restoring Defaults (optional)
Clicking the Restore Defaults button restores the list defaults button will return both lists to their original states ('factory default')state.
...
Pinning columns (optional, only relevant for table column selectors)
The user can lock any column in the Selected Columns list by clicking the pin icon, which is shown on hover. In this case:
the icon toggles from idle to selected.
the item moves to the top of the list.
the item can be ordered only inside the group of locked items.
within the Data Table, locked columns are anchored to the left. Locked items can be reordered only inside the group of locked items.
The user can unlock the column by clicking the pin icon again.
 |
Saving changes
After making changes to the lists, the user can confirm the selection by clicking the Done button.
Changes can be canceled by selecting the Cancel button.
Validation and Errors
Removing All Items
If the user removes all items from the Selected Columns list:
...
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 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 inside within the containerChosen items area, advising the user to select at least one item.
 |
In this case, clicking the Done button:
shows an error message at the bottom of the dialog.
disables the button.
 |
Limiting the number of items
...
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 selected is recommended, depending on common usage and system performance.In this case, the maximum applied, and the 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.
 |
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
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
...