...
Description
A dual list selector allows the user is a pattern allowing 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 common use of the dual list selector is a column picker, used in Data Tablesdata tables. For this reason, this document describes the structure and function for a column picker.
...
The dual list selector appears inside within a workspace or in a dialog.
In data tables, it is triggered by clicking the Columns option in the action menu.
...
Two checkbox lists:
Available Columns (on 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.
.
At the top of each list:
A search bar above each list (optional). This allows the user to quickly locate specific items.
A list checkbox, allowing users to select / deselect all the items on that list.
If only some of the items are selected, the global list checkbox will switch to a partially selected show a “partially selected” state (see Check Box).
.
A textual indicator, showing the number of existing items and the number of selected items, where relevant.
Between the two lists - two move buttons (right and left), shown between the two lists. These allow the user allowing users to move items between the lists.
Reorder At the bottom of the Chosen Columns list - two reorder buttons (up and down), shown underneath the Chosen Columns list. These allow the user allowing users 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 Next to the Chosen Column title - An Up to [X] indicator, showing the maximum number of allowed items (if it 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
At the bottom of the area / dialog:
On the left - a Restore defaults button (optional)
.
On the right - Apply and Canceldialog buttons
.
Ordering
The Selected Columns list shows the list of columns items in the same order as they appear in the data table.
The Chosen Columns list is sorted alphanumerically.
...
The Move buttons (left and right) are disabled until the user has selected at least one item: selecting items in on the right left list enables the left right 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.
...
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 global list checkbox, allowing users to quickly collapse and expand the list.
Interaction
Selecting Items
On either listslist, 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 list checkbox.
Selecting items on one list deselects all items in on the other list.
Moving items between lists
The user User can move selected items between lists using one of two these methods:
clicking the right or left button between the lists.
using Drag drag and Dropdrop.
Items moved to the Chosen Columns list will appear at the bottom of the list.
Items moved to the Available Columns list will appear back in their original locations, so the list is always sorted alphanumerically.
Items should will remain selected after they were moved.
Moved items should always be visible. Where Whenever the target list is outside of the visible area, the list will scroll automatically.
...
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
togetherwill 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 list list checkbox.
Restoring Defaults
Clicking the Restore Defaults button restores both lists to their original states state ('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 The icon toggles from between pinned to and unpinned states.
the The item moves to the top of the list.
the The item can be ordered only inside the group of pinned items.
within 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 again.
Validation and Errors
...
No items on the chosen columns list
If the user removes all items from the Chosen Columns list:
the search bar, reordering buttons and the Apply button are disabled.,
a message appears within the chosen columns area, advising the user to select at least one item.
...
Users can move any number of available items to the Chosen Columns arealist, but if the number of items in that area list exceeds the maximum number:
The apply button is disabled.
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.
 |
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
...