SelectShuttle Usage Guideline Bookmark this Guideline Printable Page


RCUI Document Version 5.0.0 for Oracle® Fusion Middleware 11g Release 1 Patch Set 1 (11.1.1.2.0)
Last Updated 21-Jan-2011

The selectShuttle components are used to assemble a list of items, by moving items from one list to another. Typically, users are moving objects from a list of "available" items to a list of "selected" items.

Guideline Contents

Note: Images in this guideline are provided as a general reference, and may not be exact representations of FusionFX pages.

Related Guidelines

Guideline Section For Information About
List Box All List components used in selectShuttle.

Related ADF Elements

Refer to the ADF Faces Rich Client demos page to find demos and tag documentation for the ADF elements related to this component:

ADF Element Notes
af:selectManyShuttle Allows users to move items between two lists.
af:selectOrderShuttle Allows users moves items between two lists, and reorders the LOV.

General Principles Bookmark this Heading Return to Top

Purpose:

To assemble a list of items.

Description:

  • Select Shuttle components are used to pool a list of items by moving them from one list to another. Any number of items can be moved at a time, in either direction.
  • Select Shuttle lists are implemented with select-many list boxes. See the Select-Many List Box sections of the List Box guideline for details.
  • Items in the "selected" list can be moved up one, moved to the top, moved down one, or moved down to the bottom of the list using optional Reorder controls. A standalone Reorder container may be used by itself when only reorder functionality is required.

Usage:

  • A shuttle is the preferred method for assembling a list of items when users are likely to both select and deselect multiple items. Shuttles facilitate this because the selected items are clearly displayed in a list adjacent to the available items, rather than only being indicated only by check marks in the selection column, or across multiple pages. Also consider using a shuttle in the following cases:
    • The number of available items is large, and users need to review their selections.
    • Users do not need to see item attributes or drill down on an item to determine whether or not to select it.
  • The entire shuttle control should have either a header or a prompt to indicate the shuttle's function. When displayed in a dialog box, the dialog title may also meet this requirement. Different levels of headers may be used (including subheader or sub-subheader) depending on where the shuttle is placed in relation to other page content; see the Headers guideline for details.

Select Shuttle Layouts Bookmark this Heading Return to Top

The shuttle consists of two lists with iconic action buttons to control movement of items between the lists. Optionally, it can be configured to have iconic action buttons next to the Selected Items list to reorder the list items contained in the list. These elements can be displayed in two layouts:

  • Horizontal layout: Shuttle elements are placed side by side across the page.
  • Vertical layout: Shuttle elements are stacked down the page.

Horizontal shuttle layout, featuring the available items container and the selected items container side-by-side, and the shuttle buttons with icons are between the containers.

Horizontal Shuttle Layout

Vertical shuttle layout, featuring the available items container stacked atop the selected items container, with the shuttle buttons between them.

Vertical Shuttle

Usage:

  • The horizontal layout is recommended for most cases.
  • The vertical layout is recommended when the shuttle contains long entries.

Basic Shuttle Operation Bookmark this Heading Return to Top

  • The user can select one or more items in the Available Items list and then click the "Move" action button to move those items to the Selected Items list.
  • The user can also remove items from the Selected Items list, and can repeat the Select and Move/Remove process as many times as needed to populate the Selected Items list.
  • Items are always appended to the end of the Selected Items list.
  • The user can Shift-select multiple contiguous items (hold down the Shift key and select a range), or can Ctrl-select multiple non-contiguous items in any order. For more information on select-many list boxes, see the Select-Many List Box information in the List Box guideline for details.
  • Once the user completes the selection/removal process, the user can reorder the Selected Items list using the optional Reorder controls on the right of the shuttle.
  • The shuttle may also feature several other options, including a description field, and embedded action buttons. For details, see Configurable Elements below.
  • A shuttle may include a required field indicator or a changed field indicator, in the same way as a choice list. See the Select Choice guideline for details.
Note: Although development teams can change the name of shuttle containers, this guideline uses the general terms "Available Items" and "Selected Items" when referring to the two containers.

Configurable Elements Bookmark this Heading Return to Top

The selectShuttle component features a number of elements that are either optional or have configurable properties, as shown in the following image and subsections.

Shuttle elements, with callouts for content regions, headers, reorder buttons, available items container, selected items container,  details region, shuttle buttons, and text prompts. There are also examples of a selected value, and of a value in a disabled state.

Shuttle Elements

Shuttle Prompt Bookmark this Heading Return to Top

Purpose:

Indicates the function of the shuttle.

Usage:

  • A prompt is a label used to provide information about the shuttle's function so that it is obvious to users.
  • There is no limit to the number of characters allowed in the prompt, but product teams must make sure that the layout allows for prompts to become up to 100 percent longer in translation.
  • Prompts should use headline capitalization. See Capitalization in the Language in UI guideline for details.
  • A prompt can be used instead of a shuttle section header.
  • A prompt may be omitted when:
    • A shuttle section header or dialog box title adequately describes the function of the shuttle.
    • Space on the page does not permit it AND the function of the shuttle is obvious to the product's users without displaying a label.
  • When a prompt is omitted:
    • Provide a tooltip so that accessibility tools, such as screen readers, can still read a prompt for the shuttle.
    • If a required field or change field indicator is used, it appears in the default prompt location.

Shuttle Containers Bookmark this Heading Return to Top

Purpose:

Separates a list from other shuttle elements.

Shuttle containers side by side, in which the left container contains the available  values, and the right-hand container holds the selected values.

Shuttle Containers

Usage:

  • Containers include select-many list boxes.
  • Each container in the shuttle control must have a container title. Where possible, the title should be specific to the shuttle list contents:
    • Typical titles have the syntax "Available {ObjectType | Items}" and "Selected {ObjectType | Items}", where "Items" is the general term for a heterogeneous list of objects.

Action Buttons Bookmark this Heading Return to Top

Purpose:

Move objects from one container to another.

Description:

Action buttons consist of the following iconic buttons and labels.

  • Move
  • Move All
  • Remove
  • Remove All

These labels appear only on the tooltip corresponding to each of the buttons.

Usage:

  • Users may move items from the Available Items list to the Selected Items list and vice versa.
  • Moved items appear only in the target list—either in Available Items list or Selected Items list—but never in both lists.
  • If an action button is not applicable because of object-based restrictions (such as Remove All), it should be disabled.

Reorder Buttons Bookmark this Heading Return to Top

Purpose:

Reorder the items in the Selected Items container.

Description:

Reorder buttons consist of the following iconic buttons and labels.

  • Move Up
  • Move Down
  • Move to Top
  • Move to Bottom

These labels appear only on the tooltip corresponding to each of the buttons.

Usage:

  • Reorder buttons are recommended unless the sequence of items is not editable, or the sequence is not significant.
  • If items on a page need to be reordered, the Selected Items shuttle container with the reorder controls may be displayed without the other shuttle elements.

Details Region Bookmark this Heading Return to Top

Purpose:

Shows details for the selected item.

Description:

  • Both the Available and Selected Item containers may include a details region. The details region appears at the bottom of the lists.
  • Product teams can display item details in the details region when the user selects an item.
  • The details region is a read-only text box.
  • The text displayed is a single description string.
  • When multiple items are selected, the details region displays details for the item that has focus.

Shuttle with read-only text box in the details region beneath each items container.

Shuttle with Read-Only Text Box in Details Region

Usage:

  • The details region is recommended in the Available Items container when the user may fail to distinguish between items because object names are similar.
  • The details region is recommended in the Selected Items container when:
    • The user may fail to distinguish between items because object names are similar, AND
    • A large number of items are commonly selected (more than 10).
  • The details region should not be used if it is likely to cause significant performance problems.

Standalone Reorder Container Bookmark this Heading Return to Top

Purpose:

Reorders a list of items.

Description:

  • The standalone Reorder container consists of a select-many list with reorder buttons and no other shuttle functionality.
  • The Reorder container may be displayed on a page or in a dialog.

A standalone reorder container in a dialog, showing a list of values and the reorder buttons; the value that is meant to be reordered is highlighted.

Standalone Reorder Container in a Dialog, Showing Reordered Values

Usage:

  • The Reorder container is commonly used as part of a flow that originates with a list of objects, and then returns to the reordered list afterwards. It may also appear within a section of the page.
  • The Reorder container may have a details region if needed. Recommendations are the same as for the Selected Items container.