Page Layout Usage Guideline Bookmark this Guideline Printable Page


RCUI Document Version 5.1.0 for Oracle® Fusion Middleware 11g Release 1 Patch Set 1 (11.1.1.2.0)
Last Updated 09-Nov-2010

A page layout design organizes components within a two- or three-column layout.

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
Tab Bar All Highest level component in a page layout.
Form Layout All Common method to organize data on page.
Tables Overview All Common method to organize data on page.
PanelSplitter All Method for users to increase and decrease content region size.
Standard Web Widgets All Basic components for use in context regions: Checkbox, Select Choice Input File, List Box, Input/Output Text, SelectRadio, Spinbox .
Train All Method for identifying current step in a guided process and provide links to navigate through the process.

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:pageTemplate Defines reusable templates for ADF components, including for a page that includes a context region.
af:panelBorderLayout Layout that supports top, bottom, left, right, and center placement for components.
af:panelGroupLayout Lays out components in a single horizontal or vertical line.
af:panelStretchLayout Stretches components to fill available space.
af:decorativeBox Provides look-and-feel transition between areas on a page; applies a bordered look to its children.
af:panelTabbed Distributes components across separate tabs.
af:panelFormLayout Lays out context region controls in a form.
af:panelHeader Provides title for context region.
af:showDetailHeader Renders hide/show region with disclosure icon.
af:train Identifies steps in multi-step process. Renders each step as an image and textual link indicating state.
af:panelSplitter Divide regions into parts that can be repositioned.
af:navigationPane Creates a series of navigation items representing one level in a navigation hierarchy.
af:toolbar Container for buttons and other controls which perform actions on a component.
af:toolbox Container for toolbars, menu bars, or group components.
af:selectOneChoice Creates menu-style components for value selection.

General Principles Bookmark this Heading Return to Top

Purpose:

A page layout design arranges FusionFX components on the page.

Description:

  • A page layout design forms a layout grid for placement of other components.
  • All FusionFX pages are based on a page layout design.

Usage:

  • Product teams should construct page designs based on the standard FusionFX layout designs described in this guideline.
  • A page layout design should not be used in dialog boxes and other secondary windows.
  • Consistent page layout across applications enhances usability, as it allows users to become accustomed to finding certain components in certain places, and in the same order.
  • FusionFX page layouts are designed to order components in a logical, usable way across different types of content.
  • A page layout design constructs a page using a combination of Layers and Content Regions, together with optional Control Panels and Tab Bars.
  • FusionFX provides one-, two-, and three-column page layout designs to use in constructing page layout designs. See Page Layout Designs for details.
Note: To simplify explanations of the relative placement of components, this guideline uses the terms "left" instead of "start" and "right" instead of "end." Note that the order of those components is reversed in right-to-left language applications.

Configurable Elements Bookmark this Heading Return to Top

Product teams configure the following elements to define the page layout design:

  • Layers
  • Content Regions
  • Control Panels
  • Context Regions
  • Tab Bars
Note: When choosing page layout options, product teams should plan for content expansion when UI text is translated.

Layers Bookmark this Heading Return to Top

Purpose:

Define visually distinct regions of the page in which to place specific components.

Description:

  • A page layout design consists of up to three visually distinct, nested layers:
    • Global Layer: Mandatory layer containing components that persist from one page to another, and all other layers.
    • Primary Layer: Optional layer nested below the Global Layer containing components that persist from one page to another, and the Secondary Layer.
    • Secondary Layer: Mandatory layer nested below the other layers that includes primary page content.

Page Layout Layers: Branding bar at top of page, global layer, primary layer within it, and secondary layer within the primary layer.

Page Layout Layers

Note: Page layout layers are always opaque, and cover the underlying layer. As a result, they visually divide the page into regions with different types of content.

Global Layer Bookmark this Heading Return to Top

  • The Global Layer is mandatory in all layouts.
  • The Global Layer contains the Branding bar, Global Control Panel (including Level 1 tab bar), Primary Layer, and Secondary Layer, and may contain an auxiliary content region on the left side of the layer.

Primary Layer Bookmark this Heading Return to Top

  • The Primary Layer is mandatory if a Level 1 tab bar is used. Otherwise, product teams may turn it off.
  • The Primary Layer contains the Primary Control Panel (including Level 2 tab bar), Secondary Layer, and may contain an auxiliary content region on the right side of the layer.

Secondary Layer Bookmark this Heading Return to Top

  • The Secondary Layer is mandatory in all layouts.
  • The Secondary Layer contains the Secondary Control Panel, the main content region, and may contain an auxiliary content region on either side of the layer depending on the design chosen.

 

Content Regions Bookmark this Heading Return to Top

Purpose:

Divide page-specific content into regions with different background colors.

Showing the auxiliary content region on the left side of a page, and the main content region to its right in a 2-Column Layout.

Content Regions in a 2-Column Layout

Showing auxiliary content regions on either side of the main content region in a 3-Column Layout.

Content Regions in a 3-Column Layout

Description:

  • A page may contain up to three content regions:
    • Main Content Region: A mandatory region within the Secondary Layer that occupies the center of the page, and may extend to the left side and right side of the page.
    • Left-side Auxiliary Content Region: Optional region on the left side of the page.
    • Right-side Auxiliary Content Region: Optional region on the right side of the page.
  • If content within the main content region exceeds its height or width, vertical or horizontal scrollbars appear.
  • An auxiliary content region may appear within the global, primary, or secondary layer; only one auxiliary content region per layer is supported.

Usage:

  • Follow structuring protocol to define a clear, top-down information hierarchy across layers when adding content to the context region; for example, if a page header is placed within a primary layer, do not place one in the secondary layer.
    • Optional instruction text may appear below a header.
    • The content region may have subheaders and sub-subheaders but not a page header.
  • The left-side auxiliary content region is in a dominant position relative to the main content area, as users read and scan from left to right, except in right-to-left languages, where both the reading direction and placement of the left-side auxiliary content region are reversed. Consequently, it should be reserved for lists that control or map the content in the main content area, such as a Vertical Train or a set of navigation links.
  • The right-side auxiliary content region is in a subordinate position relative to the main content area and may be overlooked, even when its contents are highlighted with a panel box or other visual cue. Consequently it should be used for ancillary content that is not critical for the primary page tasks, such as a shopping cart, related links, or a list of selected or recently-viewed items.
  • By default, each auxiliary content region consumes 25% of the browser width. The default value may be changed by product teams.
  • Product teams may place a panelSplitter component between content regions so users can control their widths. See the PanelSplitter guideline for details.
Note: Content regions divide the page into columns with distinctive background colors inherited from page layers. Product teams can also use a Form Layout, Table, or Tree Table component within a content region to divide the content into form or tabular columns.

Control Panels Bookmark this Heading Return to Top

Purpose:

Provide a set of controls and read-only fields that are related to the entire page.

Usage:

  • Each of the three layers has an associated control panel; the control panel is named after its layer.
  • Each control panel may contain certain elements. Some elements, such as page-level toolbars, may be displayed in any control panel, but may not be used in more than one layer at a time.

Global Control Panel Bookmark this Heading Return to Top

Purpose:

Provide a set of controls and read-only fields that are related to the entire page or application.

Description:

  • The Global Control Panel appears to users as a distinct, higher, and relatively distant information space compared to the main content region and other layers:
    • The global control panel is located at the top of the global layer, beneath the Branding bar.
    • The global control panel background color has the greatest level of contrast of all control panels when compared to the background of the main content region.
  • The global control panel consumes 100% of the browser's width.
  • The global control panel supports a list of mandatory and optional components in the specific order and location as specified in the table below. When a row of optional components does not exist, the next row of components moves up to fill the available space.
75% Width (Default) 25% Width (Default)
Branding (mandatory) Global Links
Login Stamp
Toolbar region, with Menus and Toolbar Quick Search
Breadcrumbs
Global Context Region  

 

A sample of a page with Global Control Panel featuring branding bar, global control panel and global context region. There are callouts pointing to the many components that can be in the page, such as breadcrumbs, search box, global links, quick search toolbar in the toolbar region, and primary layer tab bar.

Global Layer featuring Branding Bar, Global Control Panel and Global Context Region

Usage:

  • The Global Control Panel is mandatory in all page layout designs.
  • When a page-level menu bar or toolbar is needed, it is recommended to place it in the Global Control Panel if commands remain valid regardless of user navigation through the application.
  • If Quick Search is needed, it is recommended to place it after level 1 tabs.
  • Breadcrumbs should be placed in the Global Control Panel unless the number of fields in the Global Context Region reduces their visibility. In that case, they should be displayed in the Secondary Control Panel. They must not be displayed in both places, and should be consistently implemented across application pages.
  • Login Stamps are placed adjacent to the first line of Global Links in the branding bar, even if the Global Links wrap. See the Page Stamps guideline for information on placement of Login stamps and User stamps.
  • User stamps are placed adjacent to the Global links in the Global Control Panel.

Primary Control Panel Bookmark this Heading Return to Top

Purpose:

Provide a set of controls and read-only fields that are related to the contents of a tab.

Description:

  • The primary control panel is optional. When used, it occupies the top horizontal space in the primary layer.
  • The primary control panel consumes the same width as the secondary layer. It scales horizontally with the secondary layer when the user resizes the browser window.
  • The background color of the Primary Control Panel has a medium amount of contrast compared to the other control panels, so the local context region is more noticeable.
  • The primary control panel may include the following optional components, in the following order. If a component is not present, the next component may take its place:

A page displaying the Primary Control Panel, which features callouts pointing to the local context region, header, toolbar region in the primary layer, and secondary layer tabs.

Primary Control Panel

Usage:

  • When a level 1 tab bar is present, the Primary Control Panel appears below the tabs. Consequently, it is associated with tab-specific content and may change contents from one tab to another.
  • When a Primary Control Panel is used:
    • It is recommended to place the page header in the Primary Control Panel. Other levels of headers should not be placed in the Primary Control Panel.
    • If a Local Context Region is needed, it should be placed in the Primary Control Panel.
    • If page-level commands may vary from one tab to another, it is recommended to place menus and toolbars in the Primary Control Panel.
  • If Quick Search is needed in addition to a menu bar or toolbar, it is recommended to place it in the Primary Control Panel after level 2 tabs.

Secondary Control Panel Bookmark this Heading Return to Top

Purpose:

Provide a set of controls and read-only fields that are related to the entire page.

Description:

  • The Secondary Control Panel provides the closest information space to the main content region, both because of its location and its low level of contrast.
  • The secondary control panel scales horizontally with the main content region when the user resizes the browser window.
  • If the secondary control panel contains no components, the height of the secondary control panel is reduced to 0 pixels.
Note: Vertical and horizontal trains should not be used at the same time.

Secondary Control Panel, showing a horizontal train, and breadcrumbs.

Secondary Control Panel with Horizontal Train

A Secondary Control Panel featuring a vertical train in the left of the panel, and breadcrumbs.

Secondary Control Panel with Vertical Train

Usage:

  • By default, the secondary control panel refers to the horizontal space located above the main content region in the secondary layer. However, a vertical space located to the left of the main content region may also be used as part of the secondary control panel if a vertical train is used.
  • The Secondary Control Panel is required for pages with guided processes and Train components.
    • A horizontal train should be center-aligned and should consume 100% of the width of the local context region.
    • A vertical train should be start-aligned in the vertical space of the control panel located to the left of the main content region.
  • The Secondary Control Panel is recommended unless all components required on the page have already been placed in the Global or Primary control panels.
  • The Secondary Control Panel supports a list of optional components. When used, these components should appear in the order and location specified in the table below.
75% Width (Default) 25% Width (Default)
Breadcrumbs
Vertical Train Horizontal Train
Page Header (and its elements, which can include toolbar, buttons, icons, etc.)
Local Context Region
Toolbar region, with Menus and Toolbar

Context Regions Bookmark this Heading Return to Top

The page layout includes a Context Region, which displays persistent data across a set of pages that identifies the current task or object.

Description:

  • There are two types of context regions:
    • Global Context Region: Placed in the global control panel, to show contextual information that is global to an entire application.
    • Local Context Region: Placed within the primary or secondary control panel, to show information related to a choice made on a prior page.
  • See above for a description of layers and control panels.
  • Unlike most other components, a Context Region does not have any visual aspects, other than the patterns formed by placement of web widgets or other components upon the page background.
  • All components are placed within an invisible container. The container size depends on the type of context region.

Usage:

  • A page may not contain more than one Global Context Region or more than one Local Context Region.
  • An application may display a Local Context Region in addition to a Global Context Region, when the user navigates to a task requiring persistent context.
  • A context region may include elements such as breadcrumbs, as well as page header and page header elements (for instance toolbar, buttons and icons. See Global Context Region, and Local Context Region. Nested content and components can be placed in panel boxes within the main content region.
  • Page Stamps can be used instead of a context region when both of the following conditions apply:
    • The information is view-only, such as current date or space remaining.
    • The number of prompt/data pairs does not exceed three per page.
  • Both Global and Local Context Regions may contain view-only or editable information. Editable fields may be useful for advanced users to:
    • Minimize the steps and page refreshes required to edit the information within a context region.
    • Act as filters to change the page contents below.
  • Prompt/data pairs may be placed in two or three columns to minimize use of vertical space.
  • It is recommended not to exceed three prompt/data pairs per column to avoid cluttering the page with unnecessary information.

Global Context Region Bookmark this Heading Return to Top

Purpose:

To show contextual information that is global to an entire application.

The layout of a Global Context Region, and some of the elements that can be within it, including disclosure icon, global context title, content switcher.

Global Context Region Layout

Description:

  • The global context region renders in the global layer below the branding, or global toolbar region, if present.
  • The container for the global context region is an invisible element that consumes 100 percent of the page width. The container height depends on its contents.
  • The global context region may contain a header. The global context header may include the following components:
    • Disclosure Icon: Same as for the Subheader component.
    • Content Switcher: Same as for the Page Header.
    • See the Headers guideline for details on different types of headers and header elements.
  • The global context region may also contain the following components, in any combination:
    • Button
    • Input/Choose Color
    • Input/Choose Date
    • Form Layout
    • Graph/Chart
    • Link
    • List of Values (LOV)
    • Standard Web Widgets (including Checkbox, SelectChoice, Text Box)
    • Content Switcher
    • Table
    • TreeTable
    • Text

Examples:

  • In a project management application, once a user has picked a specific project to view from the home page, all the tabs in that application are applicable ONLY to that specific project. This project name (the context) needs to be represented in the global context region. There may be prompt/data pairs associated with the project, such as project number, start date, and projected completion dates, or just the project name.
  • The same project management application could also include editable fields, such as an LOV field for the project number, allowing the user to easily switch between projects.
  • In a sales application, the global context region could contain customer and location fields.

Usage:

  • The global context region does not need to have any contents. If a single string is sufficient to describe the context, then additional information may not be necessary.
  • When the global context header is implemented, the recommended syntax is "[Context] [Object Name] - [Optional Attribute]", where the optional attribute can be any attribute of the object, such as its location. For example, a context header for a project could be: "Coastal Development Bay Area Plan 2012 - Redwood Shores", where Coastal Development is the context, Bay Area Plan 2012 is the object name, and Redwood Shores is the optional attribute.
  • The global context header text should not replicate the page title text.
  • If it is important that the information in the context region be exposed to the user at all times, then a Disclosure icon is not recommended. However, if the user does not need to view the information in order to make decisions, then the Disclosure icon is useful, because collapsing the context region increases the screen area available for other data.
  • The default state of the Disclosure icon is collapsed. Product teams can configure the default state of the Disclosure icon to be expanded if it is necessary for users to see the region's content directly on page load.
  • A content switcher should only be implemented if users may frequently need to switch between contexts.

Example of syntax in a Global Context Region, which can feature the context name, object name, and optional attribute.

Global Context Region Syntax Example

Local Context Region Bookmark this Heading Return to Top

Purpose:

The local context region contains information that is based on a user's selection from a previous page. The information helps users complete tasks as they move from page to page, and ensures that they are acting on the appropriate object.

A page layout featuring a local context region below the breadcrumbs. See surrounding text for information about components that may be put into this region.

Local Context Region Layout

Description:

  • The local context region renders within the primary or secondary control panel below the breadcrumbs and the page header.
  • The container for the local context region is an invisible element that consumes 100 percent of the control panel. The container height depends on its contents.
  • The local context region may contain the following components, in any combination:
    • Button
    • Input/Choose Color
    • Input/Choose Date
    • Disclosure Icon
    • Form Layout
    • Graph/Chart
    • Link
    • List of Values (LOV)
    • Standard Web Widgets (including Checkbox, SelectChoice, Text Box)
    • Table
    • Text

Examples:

  • On an Object List page, a user selects three rows/objects to act on. During the subsequent pages of the process or task, the three selected object names appear as contextual information.
  • On an Object List page, a user selects one row/object to act on. During the subsequent page or pages of the process, some of that object's principal attributes are displayed as contextual information.
  • When a manager selects an employee to promote, the local context region on the subsequent pages of the task may display several prompt/data pairs about that employee, such as employee name, title, and possibly current salary. This context helps the manager make promotion decisions regarding that employee.
  • Using the same employee example, if the local context region is editable, the manager would be able to quickly change the employee's last name (for example, from a maiden name) as well as make the promotion simultaneously.
  • A Dashboard or project management application may include editable parameter fields in the local context region, and display dependent regions below. When users change the selection or data in a controlling parameter field, the dependent regions are updated to match the change in context.

A Local Context Region in a dashboard, featuring a number of controlling parameter fields.

Controlling Parameter Fields in a Local Context Region

Usage:

  • The local context region may not be needed if the related data is concatenated into the page title. For example, if the page title includes a customer name, then there is no need for a local context region with the customer name.
  • The local context region should only be displayed only if it is necessary for a user to see context (from a previous selection) while performing a task or process. Too much information on the page can produce clutter and distract the user from completing the task.
  • The local context region should not contain redundant or obvious information. For instance, users do not need to see all of their personal details.
  • If it is important that the information in the context region be exposed to the user at all times, then a Disclosure icon is not recommended. However, if the user does not need to view the information in order to make decisions, then the Disclosure icon is useful, as collapsing the context region increases the screen area available for other data.
  • The default state of the Disclosure icon is collapsed. Product teams can configure the default state of the Disclosure icon to be expanded if it is necessary for users to see the region's content directly on page load.

Tab Bars Bookmark this Heading Return to Top

Purpose:

Organize application pages in a meaningful structure and provide a navigation method for moving from one application area to another.

Description:

  • Two levels of tab bars are provided in the Page Layout Designs: Level 1 and Level 2.
  • Both levels of tab bars may share the same horizontal space with a toolbar region or a Quick Search component.
  • The Level 1 tab bar renders below the Global Control Panel, attached to the Primary Layer.
  • The Level 2 tab bar renders below the Primary Control Panel, attached to the Secondary Layer.
  • The Level 2 tab bar may exist independently of the Level 1 tab bar.
  • See the Tab Bar guideline for more information.

Usage:

See the Tab Bar guideline for details.

Page Layout Designs Bookmark this Heading Return to Top

FusionFX defines three basic page layout designs that product teams can use in constructing page layout designs: a three-column layout, a two-column layout, and a single-column layout.

  • The page layout designs work with different combinations of the Global, Primary, and Secondary layers.
  • Global and Secondary layers are mandatory, while the Primary layer is optional. By default, all layers are rendered.
  • The Primary layer can be turned off manually by teams if a Level 1 tab bar is not used.
  • A control panel may appear in the top region of each layer.
  • See Comparison of Page Layout Designs for usage information about each basic page layout.
  • Different page designs can have a slightly different component order. See Page Layout and Component Order for details.

Three-Column Layout Bookmark this Heading Return to Top

Purpose:

Display page content in three content region columns.

Description:

  • The three-column layout contains a main content region and two auxiliary content regions—one on the left side of the Global layer and the other on the right side of either the Primary or the Secondary layer.
  • By default, the right-side auxiliary content region is rendered in the primary layer, but product teams may choose to render it in the Secondary layer. The right-side auxiliary content region is always rendered top aligned with the control panel located within the same layer, if it exists.
  • In three-column layouts, the left-side auxiliary content region should be displayed in the Global layer or Primary Layer.

3-column layout with the auxiliary content region in the right side in the primary layer.

3-Column Layout with Right-Side Auxiliary Content Region in Primary Layer

3-column layout with the auxiliary content region on the right side in the secondary layer.

3-Column Layout with Right-Side Auxiliary Content Region in Secondary Layer

Two-Column Layout Bookmark this Heading Return to Top

Purpose:

Display page content in two content region columns.

Description:

  • The two-column layout contains the main content region and one auxiliary content region.
  • In a two-column layout, the auxiliary content region can be placed:
    • On the left, in the Global layer.
    • On the left, in the Primary Layer or the Secondary layer.
    • On the right, in the Primary layer.
    • On the right, in the Secondary layer.

A 2-column layout with a left-side auxiliary content region in the global layer.

2-Column Layout with Left-Side Auxiliary Content Region in Global Layer

A 2-column layout with a left-side auxiliary content region in the secondary layer.

2-Column Layout with Left-Side Auxiliary Content Region in Secondary Layer

A 2-column layout with a right-side auxiliary content region in the primary layer.

2-Column Layout with Right-Side Auxiliary Content Region in Primary Layer

A 2-column layout with a right-side auxiliary content region in the secondary layer

2-Column Layout with Right-Side Auxiliary Content Region in Secondary Layer

One-Column Layout Bookmark this Heading Return to Top

Purpose:

Display all content in the main content region.

A 1-column layout (without auxiliary content region); the page features, from top: global control panel, primary contol panel, secondary control panel, and main content region.

1-Column Layout (without Auxiliary Content Region)

Comparison of Page Layout Options Bookmark this Heading Return to Top

The following table describes all page layout options and indicates the primary emphasis in each configuration. Note that all page configurations must include the main content region in the Secondary Layer.

Base Layout Auxiliary Content Option Emphasis Notes
3-Column Left-Side Auxiliary Content Region in Global Layer and Right-Side Auxiliary Content Region in Primary Layer 3 columns with maximum emphasis on left auxiliary content region and medium emphasis on right auxiliary content region. Both left and right auxiliary content regions extend above main content region.
Left-Side Auxiliary Content Region in Global Layer and Right-Side Auxiliary Content Region in Secondary Layer 3 columns with maximum emphasis on left auxiliary content region and low emphasis on right auxiliary content region. Right auxiliary content region starts at same vertical level as main content region.
2-Column Left-Side Auxiliary Content Region in Global Layer 2 columns with maximum emphasis on left auxiliary content region. Left auxiliary content region extends above main content region.
Left-Side Auxiliary Content Region in Secondary Layer 2 columns with low emphasis on left auxiliary content region. Left auxiliary content region starts at same vertical level as main content region.
Right-Side or left-side Auxiliary Content Regions in Primary Layer 2 columns with maximum emphasis on the auxiliary content region. Auxiliary content region extends above main content region.
Right-Side Auxiliary Content Region in Secondary Layer 2 columns with low emphasis on right auxiliary content region. Right auxiliary content region starts at same vertical level as main content region.
1-Column No Auxiliary Content Regions Single column with top-down emphasis.  

Page Layout and Component Order Bookmark this Heading Return to Top

Component order should vary slightly depending on the number of columns in the page layout. The following images show the relative positions for each component.

Notes:

  • The images below list valid components for each region. Pages typically do not include all components.
  • Elements shown in red text must be included at a minimum in the page layout.
  • Some components, such as Breadcrumbs and Trains, can be placed in different regions, but only one instance of that component may appear on a single page.
  • A single column page layout should have the same general component order as the two-column layout.

A schematic of component order in a 3-column layout

Component Order in a Three-Column Layout

A schematic of component order in a 2-column layout

Component Order in a Two-Column Layout