See also: Data Tables

Lead:  Liav Nadler 

Description

A dual list selector is a component allowing the user to select multiple items. It is especially useful when the number of available items is large.

A common application would be the "Customise Columns" popup 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 on a column picker.

...

Usage & Behaviour

General guidelines

• In case of a column picker:

  The dual list selector appears in a dialog box

• It is triggered by clicking the Columns action in the column

  contextual menu

  Action Menu

Structure

• The component contains two lists:

  • Available Columns (on the left): a list of all other columns available for that the table

  • Selected Columns (on the right): a list of the currently displayed columns of the table

• Between the two lists there is a set of buttons, allowing the user to move items between them (as described below)

• Under the selected columns list there is a set of buttons, allowing the user the reorder the selected items (as described below)

• Next to the selected columns title there is an indicator, showing the number of selected items out of the total number of items (e.g. for example: 7/22)

• At the top of each list there is a search bar may appear, allowing the user to quickly locate specific items. The search bar is optional, depending on the number of items

• If In case the list is too long to be displayed in its container, a vertical scroll bar appears

• At the bottom-left corner of the dialog box there is a button titled Restore Defaults button appears (see Interaction below)

Order

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

• The Available Columns list is sorted alphanumerically

...

• The right and left buttons are disabled until the user selected at least one item: selecting items on the right enables the left button, and vice versa

• The up and down buttons are disabled until the user selected at least one item on the Selected Columns list:

  • Selecting the top item will enable only the down button

  • Selecting the bottom item will enable only the up button

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

• If the table contain columns that cannot be removed or reordered, the relevant items on the selected columns list will show as disabled

Interaction

...

Mouseover an item triggers hover state

...

Selecting Items

• Clicking On either list, clicking an item selects it. The user can select more than one item on the list, using the Ctrl (or Command) key for discrete selection, or the Shift key for a block selection

• Selecting items on a one list deselects all the items on the other list

Moving items between lists

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

  The user can reorder selected items on the selected columns list by

  • Clicking the right or left button between the lists

  • Using drag Drag and drop

    • Add link to drag and drop

    • Auto Scroll to the bottom when using the buttons

• After the items were moved they remain selected until the user selects other items

Reordering items

• • Drop

• Items that were moved to the Selected Columns list appears at the bottom of the list

• Items that were moved to the Available Columns list appear at their original locations, so the list is always sorted

• Items that were moved remain selected

• In addition, moved items should be visible. In case the target area is outside of the visible area of the list, it will scroll automatically

Reordering items

• On the Selected Columns list, the user can reorder items by selecting them and then clicking the up or down buttons under the list

• After the items were ordered they remain selected until the user selects other items

• The user can also reorder items using /wiki/spaces/~347593403/pages/918783940

• Check re-ordering multiple items using the buttonsReordering multiple items will keep their relative locations

  • If the first item reached the top of the list, the up button will be disabled

  • If the last item reached the bottom of the list, the down button will be disabled

Restoring Defaults

• Clicking the Restore Defaults button restores the dialog box to its original state (“factory default”)

• After clicking the button the user can confirm the action by clicking the Done button, or to cancel

Locking columns (optional)

...