...

Description

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

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 on for a column picker.

Usage &

...

Behavior

General guidelines

• The dual list selector appears in a dialog Dialog box.

• It is triggered by clicking the Columns action option in the column Action Menu.

Structure

• The component column picker contains two lists:

  • Available Columns (on the left): a . A list of all of the columns available for in the table, with a header.

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

  Between the two lists there is a set of buttons, allowing

  • , with a header.

• Move buttons (right and left), shown between the two lists. These allow the user to move items between themUnder the selected columns list there is a set of buttons, allowing columns.

• Reorder buttons (up and down), shown underneath the Selected Columns list. These allow the user the reorder the selected itemsNext to the selected columns title there is an indicator, showing .

• 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)At the top of each list a search bar may appear, allowing .

• (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 itemsIn case .

• A vertical Scroll bar, used where the list is too long to be displayed in its container, a vertical scroll bar appearsAt .

• A Restore Defaults button, shown in the bottom-left corner of the dialog box.

• Done and Cancel Dialog Buttons, shown in the bottom-left right corner of the dialog box there is a button titled Restore Defaults.

Order

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

• The Available Columns list is sorted alphanumerically.

States

• The right and left buttons Move buttons (left and right) are disabled until the user has selected at least one item: selecting items on in the right list enables the left button, and vice versa.

• The Reorder buttons (up and down buttons ) are disabled until the user has selected at least one item on in the Selected Columns list:.

  • Selecting the top item will only enable only the down button.

  • Selecting the bottom item will only enable only the up button.

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

• If the table contain columns that a column contains items which cannot be removed moved or reordered, the relevant items on the selected columns list will show as disabledthey should be shown as disabled when the column is selected.

Interaction

Selecting Items

• On In either list, clicking an item selects it. The  

• 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 on in one list deselects all items on in the other list.

Moving items between lists

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

  • Clicking clicking the right or left button between the lists.

  • Using drag using Drag and Drop.

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

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

• Items that were moved should remain selected In addition, moved when moved.

• Moved items should always be visible. In case Where the target area list is outside of the visible area of , the list, it dialog will scroll automaticallyautomatically scroll when the item is moved.

Reordering items

• On In the Selected Columns list, the user can reorder items by selecting them and then clicking the up or and down buttons under underneath the list. In this case, reordering

  • Reordering multiple items together will keep their relative locations (i.e. including the gaps between items,

  if exists

  • where they exist).

• The user Items can also reorder items using /wiki/spaces/~347593403/pages/918783940reordered using Drag and Drop. In this case, when reordering multiple items they will be clustered.

• After the items were ordered are reordered they will remain selected until the user selects other items.

Restoring Defaults

• Clicking the Restore Defaults button restores the dialog box list to its their original state (“factory default”)After clicking the button the user can confirm the action by clicking the Done button, or to cancelstates ('factory default').

Locking columns (optional)

• The user can lock any column on in the selected columns Selected Columns list by clicking the pin icon, which is shown on hover. In this case:

  • The the icon changes toggles from idle to selected.

  • The the item moves to the top of the list.

  • The the item can be ordered only inside the group of locked items.

  • On the actual table the 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 lock 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 cancelled by selecting the Cancel button.

Validation and Errors

Removing All Items

If the user

...

removes all items from the Selected Columns list:

• The

  the search bar and reordering buttons

  get

  will be disabled.

• A

  a message

  appears

  will appear inside the container,

  guiding

  advising the user to select at least one item.

• In this case, clicking the Done button:

  • Shows shows an error message at the bottom of the dialog.

  • Disables disables the button.

Limiting the

...

number of

...

items

• A limit on the number of selected itemsitems which can be selected is recommended, depending on common usage and system performance.

• In this case, the maximum number of items will should be presented within the indicator at the top of the shown with the count above the Selected Columns list, regardless of the number of available columns.

• If the user reached reaches the maximum number of items:

  • The the right arrow button will be disabled.

  • Dragging dragging items from the Available Columns list will be disabled.

  • A a relevant message will appear at the bottom of the popup.

Accessibility compliance

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

Design

Zeplin link	Screen thumbnail
https://zpl.io/2j6oopW

...