PanelBox Usage Guideline Bookmark this Guideline Printable Page


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

The panelBox component is a box with a title bar that is used to contain and distinguish a specific type of content or set of information from other page elements.

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
Page Layout All Determines background of panel boxes.

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:panelBox panelBox component.
af:panelHeader panelHeader component.

General Principles Bookmark this Heading Return to Top

Purpose:

The panelBox component is a layout device that groups ancillary page elements and distinguishes them from other page elements.

Description:

  • A panel box consists of three mandatory elements: a Box, a Header, and a Content Region.
  • Typical use of panel boxes includes:
    • Related Links
    • Recent Items
    • Favorites

Usage:

  • Panel boxes are intended only for ancillary information, and should not be used for the primary page task. The only exception is in a web page where the page displays information from multiple sources.
  • The following components should never be used within a panel box:
    • Branding
    • Global Links
    • Level 1 tabs
    • Level 2 tabs
    • Breadcrumbs
    • a Train
  • No more than three panel boxes should be used on a page, so that each panel box retains its ability to draw the user's eye to the information, because it looks different than other content on the page. The more panel boxes displayed on the page, the less each one stands out.
  • Panel boxes should be used to hold information that needs to be persistent on the page. If information does not need to be persistent, designers can use a pop-up window or a collapsible Context Region for auxiliary information.
  • Panel boxes may be set to specific sizes. See Box Size for details.
  • Panel boxes must include a Header. See Header Text for details.
  • Panel boxes may have different background colors. See Background Color for details.
  • Panel boxes by themselves are read-only components, but they may contain both read-only and editable elements. See Content Region for details.

Configurable Elements Bookmark this Heading Return to Top

A panelBox contains four configurable elements:

  • Box size
  • Header Text
  • Background color
  • Content Region

  Elements of a PanelBox: Header text, header buttons and icons, the content region.

PanelBox Elements

Note: When using panelBoxes, product teams should plan for content expansion when UI text is translated.

Box Size Bookmark this Heading Return to Top

Purpose:

Defines the height and width of the panel box.

Usage:

  • There is no default height or width for the Box; it automatically inherits the height and width of its parent component.
  • Product teams may set the height and width of the Box to any CSS measuring unit.
  • The width of the panel box should not exceed 33% of the page width. If a wider Content Region is needed, then consider using a different Page Layout option, or a multi-column Form Layout.
  • The entire panel box should be visible on the page without scrolling, so the height of the panel box should not exceed 700 pixels, which represents the height of the default browser size.
  • Avoid excessive empty space in a panel box, unless the box needs to be set to a specific size to align with other page elements, such as another panel box.

Header Text Bookmark this Heading Return to Top

Purpose:

Identifies the function of the content within the panel box.

Description:

  • Header Text is part of the panelBox component, and does not include the same options as page and section Headers.
  • Header Text is alphanumeric; there is no character limit.
  • Header Text does not wrap.
  • Product teams may truncate Header Text using manual truncation. See the Truncation section of the Headers guideline for details. For manual truncation, the entire Header Text string should appear in a tooltip on hover.
  • PanelBox headers can feature icons and buttons. The optional disclosure icon is on by default. Teams may turn it off.
  • PanelBox headers support Help text through the Help icon. Product teams may also provide instruction text in the Content Region. See the Help Framework guideline for details.

Usage:

  • The Header Text font style and size is predefined as part of the component, and cannot be configured.
  • Product teams must provide Header Text.
  • Header Text should be in the form of a noun.
  • Header Text should be distinctive. If it is difficult to find an appropriate header, then:
    • Review all the elements in the panel box to determine whether they belong together. Sometimes it may be necessary to remove an element or place it elsewhere on the page to arrive at a group with a distinctive name.
    • Use a thesaurus and request ideas from others to develop a pool of candidate names, and choose the best one available.
  • The Header background can be changed. See the following section for details.

Background Color Bookmark this Heading Return to Top

Purpose:

Identifies type of content or the degree to which the panel box stands out against the page background.

PanelBox color options: core and highlight background colors for default panel boxes, light panel boxes, medium panel boxes, and dark panel boxes.

PanelBox Color Options: Core and Highlight Background Colors

Usage:

  • Valid colors are white, blue, yellow, orange, or teal.
  • Background color choice has no effect on the color of header text.
  • Any color may be used in conjunction with any page layer. See PanelBox Layout for details on page layers.
  • Background colors may be used to distinguish content types. For instance, panel boxes with favorites may all be yellow background, while panel boxes with ancillary information pertinent to the application may be on blue background. If used for this purpose, the color of each type of panel box should be consistent throughout the product or product suite.
  • When multiple panel boxes are displayed on a single page, it is recommended to use a separate background color for each.
  • No more than three panel box background color options should be used on one page.
  • The Header background color can be modified by changing the Header background image, but this is recommended only when the panel box background color is white.
  • The default background color for both the core and the highlight options is white with a blue Header background, as shown in the following image.

The default panelBox colors

Default PanelBox Colors

Content Region Bookmark this Heading Return to Top

Purpose:

Presents information, links, or editable widgets to users.

Description:

  • Panel boxes may contain both read-only and editable elements.
  • Panel boxes may contain bulleted text.

Examples:

  • Read-only: A list of links to related documents or applications.
  • Editable: When a user views a PO at the detail level, a panel box could display a text field and a Go button allowing the user to type in another PO number, and jump directly to a new PO from the current PO.
Process/Task Information

Process/Task Information

  Two examples of panel boxes presenting related information, one of them is editable, and the other read-only.

Related Information

Usage:

  • A panelBox is commonly used for the following types of information:
    • Favorites
    • Recent Items
    • Shortcuts—Navigation that takes the user to a related task or object within the application—often known as "Related Links". Shortcuts can also be in the form of editable text fields or LOVs.
    • Related Information—Navigation to information resources related to the page content.
    • Related Applications—Navigation to other product applications with tasks or information related to the given page.
  • Panel boxes can also be used to display informative text or tips, in addition to standard Help methods, but this should be limited to cases where all of the following conditions apply:
    • The information does not relate to a single component or group of components. Otherwise, use component-level Help.
    • The information does not describe how to use page elements. Otherwise, use instruction text.
    • It is important for the information to be persistent, for all users of all levels. Otherwise, use a message dialog window that is displayed only in the appropriate contexts, such as user permission level, date, type of object selected, and so on.
  • The following components should not be placed in panelBoxes:
    • Branding
    • Global links
    • Level 1 tabs
    • Level 2 tabs
    • Breadcrumbs
    • a Train

PanelBox Layout Bookmark this Heading Return to Top

  • A single page should contain no more than three panel boxes.
  • Panel boxes contain ancillary information, but are visually distinctive, so should always be placed on the right side of the page (left side for right-to-left languages). Users scan pages from left to right (from right to left for bi-directional language layouts), so the left side of the page is reserved for primary page content.
  • A panel box can form a standalone column by itself, or can be stacked vertically with other panel boxes if different types of information are needed in each box. It can also exist with other contents within a section.
  • A single panel box may be placed in the upper right corner of the page contents (upper left for right-to-left language applications), under the tab/navigation structure.
  • A single panel box should not span the entire page, but only a portion of the page. The bottom portion of the page contents may wrap below the panel box. If the panel box spans the entire right side of the page, no page contents may be below the panel box except the page footer. See examples below for details.

An application page with single panel box in it

Page with Single Panel Box

An application page with stacked panel boxes on the right side of the page.

Page with Stacked Panel Boxes

PanelBoxes in Different Page Layers Bookmark this Heading Return to Top

PanelBoxes can be placed in the Global, Primary, or Secondary Layers, as shown in the following image. Note that this image is intended to show the different page backgrounds and positions in each layer rather than to show an example of usage. See the Page Layout guideline for more information on page layers.

Panel boxes shown in Global, Primary, and Secondary Layers

Placement Options for Panel Boxes in Global, Primary, and Secondary Layers
(Actual pages should not contain more than three panel boxes)