Select Choice Usage Guideline Bookmark this Guideline Printable Page


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

The Select Choice component allows users to pick one or more predefined values to populate a field or list. There are two types of Select Choice components: Select-One and Select-Many.

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
Form Layout All Commonly used to organize choice lists.
Checkbox All Alternative to Select-Many Choice list.
Help Framework Note Windows Help method used with choice lists.
List Box Select-One and Select-Many Alternative to Select-One and Select-Many Choice List.
Message Framework All Message methods used with choice lists.
Select Radio All Alternative to Select-One Choice List.
SelectShuttle All Alternative to Select-Many Choice List.

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:selectOneChoice Select-One Choice List component.
af:selectManyChoice Select-Many Choice List component.
af:selectItem List option component.

General Principles Bookmark this Heading Return to Top

Purpose:

Select-One Choice List allows users to populate a field with a single value from a predefined list.

Select-Many Choice List allows users to populate a field or list with one or more values from a predefined list.

Two images side by side: on left is a select-one choice list, with one of the values selected; on the right is a select-many choice list, with several of the check boxes checked.   Select-many Choice List

Select-One Choice List and Select-Many Choice List

Description:

Select-One and Select-Many choice lists function similarly, except that a Select-Many choice list:

  • Contains check boxes next to each list option to enable multiple selection.
  • May contain the option "All" to select all or none of the options in the list.

Usage:

  • A Select Choice component may be used within a toolbar, table cell, or form layout. A Select Choice component may also be used as a stand-alone component.
  • Product teams can organize the contents of the Select Choice panel using a special sort order, group separators, or even a hierarchy (for Select-One choice only). See the Elements section for details.
  • A Select-One choice list should be used only when a single value is accepted. For example:
    • A web site customer chooses a preferred contact method where only a single choice is valid. The application should make that choice a Select-One choice list.
    • A Select-One choice list is commonly used to select a state or region from a list to populate a State or Region field.
  • A Select-Many choice list should be used only when a field can contain multiple values. For example, a database administrator may need to specify multiple problem conditions that trigger notification. The administrator would select those conditions from a Select-Many choice list.
  • In a Select-One choice list:
    • Product teams can add a blank value as an option. This is different than a "None" choice. See List Options for details.
    • If the choice list is a required field and the user leaves it blank, then an error message should be displayed when the user attempts to apply changes to the page, just as with any other required field. See the Message Framework guideline for details.

Elements Bookmark this Heading Return to Top

The following images show the elements of a Select-One choice list and the Select-Many choice list.

Two images side by side. The one on the left shows a select-one choice list with callouts pointing to its elements; on the right is a select-many choice list, with callouts pointing to its elements.      Elements in a Select-Many Choice List

Elements in a Select-One Choice List and Elements in a Select-Many Choice List

Prompt Bookmark this Heading Return to Top

Purpose:

Identifies the objects contained in the choice list.

Usage:

  • Use of prompts is strongly recommended in a form layout. In a table layout, the column header is the prompt.
  • 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 may be placed before or above a Select Choice component. Place the prompt before the Select Choice component in most cases. If horizontal space is an issue, such as inside an accordion pane, place the prompt above the Select Choice component.
  • Prompts may be visually omitted when the function of the Select Choice component is obvious to the product's users without displaying a label. For example, a "Length" field may consist of a text box field to enter a number, followed by a Select Choice component to enter the unit of measure, such as Inches, Centimeters, Feet, Meters, and so on. In this case, the text box would have a prompt immediately before it, but the Select Choice component would not have its own individual prompt.
  • When a prompt is visually omitted, provide a hidden prompt label so that accessibility tools, such as screen readers, can still read a prompt for the data.
  • Prompts should use headline capitalization. See Capitalization in the Language in UI guideline for details.
  • Usage of prompts in a Select-One choice list and Select-Many choice list is the same, with the following exception:
    • Where possible, prompt text for Select-Many choice lists should be in plural form. For example, a Select-Many choice list would have the plural prompt "Regions", but the equivalent Select-One choice list would have the singular prompt "Region".

Box Bookmark this Heading Return to Top

Purpose:

Displays the default or selected option.

Usage:

  • Product teams can set any option or options as the default. If no default option is set, the box displays a blank by default.
  • By default, the width of the box is determined by the longest option in the list, but product teams may want to adjust the box width to align with other fields in a multiple column Form Layout, or to preserve a consistent width for the same type of field throughout an application. If the width of the box is set to be shorter than the length of the string of characters in the selected or default option, the option is clipped.
  • A default option should be set when one option is used more commonly than others. For example, if a user is entering address information and is within the United States, the "Country" field may be defaulted to "United States", instead of being left blank. The default value does not force the user to choose "Country" each time an address is entered, thus improving data entry efficiency.
  • The box should be shown as disabled when users are not able to select a value for the Select Choice component, but it is necessary to display the component because it may be enabled in different contexts. For example, when entering data for booking travel, the "Priority Seating" choice list may only be available once users enter their frequent-traveler status in a previous field.
  • The box should be shown as read-only when data is displayed in a read-only page, such as a printable page. Read-only data may also be displayed when the user has permission to view the selected value, but not to edit it.
  • Usage of the box in Select-One Choice List and Select-Many Choice List is the same, with the following exception:
    • When a select-many choice list is read-only, the box does not display, and the selected options within the box appear as plain text, delimited by semicolons.

Panel Bookmark this Heading Return to Top

Purpose:

Displays a list of options (for Select-Many choice list) or mutually exclusive options (Select-One choice list).

Usage:

  • There is no limit to the number of options in the panel. Nevertheless, lists that are longer than 30 items become difficult to scan unless sorted alphabetically or in some other recognizable order. If it is necessary to display a very long list that may require searching, consider using an LOV Choice List instead.
  • Options should be distinct. If option labels are very similar, consider appending data to distinguish them.
  • In products that require heavy, high-efficiency user interaction, such as data entry applications, consider limiting options so that the scrollbar does not appear. In such products, users should not have to scroll to review all choices before making a selection.

List Options Bookmark this Heading Return to Top

Purpose:

Provide a range of choices to users.

Description:

  • Options may consist of a blank value (Select-One choice list), an "All" option (Select-Many choice list), or text.
  • Blank Option:
    • A Select-One choice list may have a blank option. A "blank" option is not the same as "None".
    • Only one blank option per panel is permitted.
    • If a blank option is used, it must be the top option in the panel.
  • "All" Option:
    • A Select-Many choice list may have an "All" option that selects or deselects every item in the data set, even items that are outside of the viewable area of the panel.
    • When the "All" option is selected, the value "all" appears in the box (not the entire option list).
  • Text Option:
    • Text options consist of a string of characters. There is no character limit.
    • In Select-One choice lists, text options may be indented manually using underscore characters to represent a hierarchy. There is no limit to the number of roots used in the hierarchy.
  • Options may have Description Text. See the Help Framework guideline for more details.

Usage:

  • List options should be should be arranged in a logical order:
    • For example, if a list contains values that represent different phases of a process, such as the phases of a publishing cycle (Draft, Internal Review, External Review, Editorial Review, and Published), display the values in sequence.
    • If the values represent value increments, such as smaller to larger, group them from smallest to largest in most cases, unless the opposite order makes more sense in a specific context.
    • If the values have some other generally recognized order, follow that order.
    • If there is no other logical order to the values, list them alphabetically or numerically; however, note that alphabetical ordering does not make sense in some languages, particularly Asian languages.
  • It is generally recommended to select the first item in the list by default. However, in some cases, it may be more appropriate to default to a different value. For instance, for an application configured for an audience in France, it may be appropriate to default a "Country" list to "France", even though the first alphabetical option might be "Afghanistan". The default items should be specifically chosen based on the context of the Select Choice component and the task at hand.
  • If users do not have the ability to change the choice selection on a particular page, the selected list option should be displayed as read-only text after the Select Choice prompt.
  • Display disabled options inside the Select Choice component panel when it is helpful for the user to see all options (both enabled and disabled) before making a selection. For example, a change request may have multiple states that are all displayed in the list (Pending, Approved, On Hold, Rejected, and so on), but users with limited privileges may be able to select only one or two of the states.
  • When appropriate for the data, product teams can display Select-One choice list options in a hierarchy by manually indenting them using underscore characters. For example, when the choice list is used to select a region or state within the United States, it may display parent regions "North", "East", "South" and "West" and show the states within each region as indented child options.
  • Select-Many choice lists may not contain a "Blank" option.
  • Select-One choice lists may use the option "None" as a choice when appropriate. For example, if a user is creating a payment invoice and the process includes selecting a shipping address from a list, all predefined addresses may be in a choice list. Some payments, however, are for service items which do not have physical goods to ship, and thus do not require shipping. In this case, a "None" option for the "Shipping Address" field may be used.
    • Select-Many choice lists must not contain a "None" option. The user sets "no selection" by deselecting all options.
  • Select-Many choice lists may use the "All" option when it is possible for all options to be selected. For example, when a user wants to request certain team members to review a document, the "Reviewers" field options would include the names of each team member, and the "All" option would select and notify every team member.

Use of Blank Values (Select-One Choice List) Bookmark this Heading Return to Top

In some contexts, for Select-One choice lists, a blank (null) value is a valid choice. For these cases, it is recommended to set the blank option as the default. This blank choice represents a null data value. It is not the same as specifying "None".

  • A panel should not contain more than one blank option.
  • Choice lists that do not have a blank option should not be marked as a required field.
  • When a blank value is used, the blank option should always be the topmost option in the panel.
  • Blank options should be used in choice lists when:
    • The data is optional or can be filled in later. In this case, default to blank and don't show the required field indicator.
    • The data is required, but there is no acceptable default. In this case, default to blank and show the required field indicator.
  • When the data is required and there is an acceptable default selection, use that default selection instead of a blank option. In this case, omit the required field indicator because an option is already selected—users may change the option but are not required to do so.

Separators Bookmark this Heading Return to Top

Purpose:

Divide options into groups.

Example:

A Human Resources application has a long list of forms available for employees, using separators to group similar or related options, such as:

  • Personal information
  • Vacation inquiry
  • Personal alerts
    ---------------------
  • Online tax form (W4)
  • Online W2
    ---------------------
  • Time card entry for payroll
  • Preview pay slip
    ---------------------
  • Employee appraisal/review
  • Employee training request
  • Performance management

Usage:

  • Separators organize long lists into sets of related options, making them easier for users to scan.
  • A separator must not follow a blank option or another separator.
  • Separators must not be placed as the first or last item in the panel.
  • Clicking a separator should have no effect on the Select Choice component or any other element on the page.
  • There is no limit to the number of separators that may appear within a panel.
  • Finding the right level of balance in a long list can be a challenge. Too few or too many options in a group can make the list difficult to scan.
    • Where possible, do not group options in sets of one. If some options don't fit with anything else, consider merging the option with a related group, or placing them together in a "miscellaneous" group.
    • Where possible, do not group more than five options together.
Note: A separator in the ADF af:selectOneChoice component must be created as a list item using a string of hyphens. In the ADF af:selectManyChoice component, separators are created using the <af:separator> tag .

Required Field Indicator Bookmark this Heading Return to Top

Purpose:

Identifies fields that must be completed before submitting the page.

Description:

  • The Required Field Indicator is a text asterisk, *.
  • The Required Field Indicator does not display if a choice list box is disabled or read-only.
  • ADF provides ALT text and tooltips for required fields and changed fields. Product teams may additionally provide key notation to define the Required Field Indicator. Refer to Key Notation in the Headers guideline for information regarding usage.

Example:

When creating a new service request, contact information is required for follow-up. In this case, product teams can make one of the contact fields required, such as "Region" or "Preferred Contact Method."

Note: The option selected in a Select Choice component may cause other fields to become required. See Conditionally Required Fields for details.

Usage:

When a Required Field Indicator is used, product teams must add key notation to define the icon.

Changed Field Indicator Bookmark this Heading Return to Top

Purpose:

Indicates that the value in the Select Choice component changed after page submission.

  • ADF provides ALT text and tooltips to indicate changed fields. Product teams may additionally provide key notation to define the Changed Field Indicator. Refer to Key Notation in the Headers guideline for information regarding usage.

Usage:

  • The Changed Field Indicator should persist until the page is refreshed. If a scenario requires the indicator to persist after page refresh, the Changed Field Indicator may remain displayed as long as needed. For example, when submitting an employee for a divisional transfer, a "Location" choice list might display a Changed Field Indicator once the final revision is submitted.
  • When a Changed Field Indicator is used, product teams must add key notation to define the icon.

Help Text Bookmark this Heading Return to Top

Purpose:

Provides users with additional information about the choice list.

Usage:

Help text should be provided when users may be unclear about the result of their choice, or may have difficulty choosing the correct option. See the Help Framework guideline for details.

Conditionally Required Fields Bookmark this Heading Return to Top

The option selected in a Select Choice component may cause other fields below it to become required fields.

  • The number and content of fields on the page remain unchanged. Only the required or optional status changes.
  • The Required Field Indicator appears adjacent to fields that become mandatory as a result of choice list selection.

Example:

  • A shopping cart checkout page may include a Reason for Purchase choice list that includes the option "Gift". When the user selects "Gift", the "Gift Message" text area becomes a required field.
Note: If product teams require other changes to dependent fields based on user selection from a list, LOVs provide more options. See the LOV guideline for details.