Page Header Region Guidelines Print this Page
Version 2.0.0.4  


Note:
All images in this document are illustrative and do not represent actual Oracle Fusion Applications user interface (UI) screens.


Contents
Return to Top
 
Description and Purpose
Return to Top

The page header is a fixed, nonscrolling region at the top of the local area on the page. This region offers a structural framework in which formatted content can display in an organized hierarchy.

The page header region contains a series of header elements, each dedicated to a specific type of formatted content. The guidelines and design patterns for each header element determine the content that the element contains.

This guideline discusses the overall framework that governs the page header region. This design applies to all Oracle Fusion pages.

Figure 1. Page header region in the No-tabs work area model
Figure 1. Page header region in the No-tabs work area model
Figure 2. Page header region in the Dynamic Tabs work area model
Figure 2. Page header region in the Dynamic Tabs work area model
 
Header Elements
Return to Top

This section provides a description and additional references for each header element type.

Introduction

This section contains images that depict all header elements, with and without horizontal trains. Boundaries surrounding header elements are shown for illustration purposes only.

Figure 3 shows an example of the page header region on a multiple objects work area page.

Figure 3. Header elements in the page header region of a multiple objects work area page
Figure 3. Header elements in the page header region of a multiple objects work area page

Figure 4 shows an example of the page header region in a single-object work area page.

Figure 4. Header elements in the page header region of a single-object work area page
Figure 5 shows an example of a page header region that contains a horizontal train.
Figure 5. Header elements in the page header region for a page with a horizontal train

Horizontal Train

Figure 6 shows an example of a horizontal train in the page header region.

Figure 6. Example of a horizontal train

Trains walk a single user through a number of steps to complete a single task. Train stops are presented horizontally across the top of the page. Users can navigate through the task by using the train or page-level buttons. Follow these guidelines for trains:

Header Title

Figure 7 shows an example of the header title in the page header region.

Figure 7. Header title with all other header elements displayed except the horizontal train

The header title identifies the page. In cases where the header title is the only header element, you should still use the AppsPanel component to build the page header region. Using the AppsPanel component ensures that the header elements do not scroll out of users' views. Follow these guidelines for header titles:

  • Usage of the header title is mandatory except on dashboard pages.
  • Content orientation is horizontal.
  • For more information, see the Header Syntax section of the Headers Usage Guideline .

Header Context

Figure 8 shows an example of the header context in the page header region.

Figure 8. Header context

The header context region can contain any, all, or none of the following content. The approved order from left to right is:

  • Switcher icon.
  • Record Information icon.
  • User Assistance Popup (UAP) icon.
  • Usage is optional, depending on the individual guidelines for each component.
  • Content orientation is horizontal.

Header Toolbar

Figure 9 shows an example of the header toolbar in the page header region.

Figure 9. Header toolbar

The header toolbar contains page actions. Follow these guidelines for header toolbars:

Collaboration Toolbar

Figure 10 shows an example of a collaboration toolbar in the page header region.

Figure 10. Collaboration toolbar

The collaboration toolbar component provides access to the collaboration components on business objects and transactions. Follow these guidelines for the collaboration toolbar:

  • Usage is mandatory if the page contains a collaboration tool (taggable object).
  • Content orientation is horizontal.
    • When you add content to the collaboration toolbar, the horizontal display expands within the available real estate.
      Figure 11. Example of a collaboration toolbar
  • For more information, see the following guidelines:

Scaling (Scales of Numeric Values)

Figure 12 shows an example of scaling in the page header region.

Figure 12. Example of scaling in the header region

Scaling refers to scales of numeric values, such as "amounts in thousands."

Follow this syntax:

  • A phrase including both the defined element and its definition. Examples include:
    • Amounts in thousands
    • Population in millions
  • {Term} = {Definition}. For example:
    • Currency = US Dollar
    • Note that some currency names include abbreviations, such as US for United States in US Dollar.

Usage

Follow these usage guidelines:

  • All exceptions to a scale of values must be noted in that scale.
    • For example: "Amounts in millions, except per share data"
  • Consider placing a currency definition in the scaling header element on pages when monetary amounts in a single currency occur frequently throughout the page.
    • In this case, the currency definition should be the first item in the scaling header element.
  • Display a currency definition (when possible) next to a monetary scaling measure.
    Contiguous placement enables users to easily scan both currency and scale.
    • Figure 13. Single currency code as a scale of values. The currency definition is correctly located as the first item in the Scaling header element.
    • For more information, see the Icon and Term Definition Guidelines.
  • Content orientation is horizontal.
    • When you add content to the scaling element, it expands horizontally within the header element’s available real estate.
    • If scaling content exceeds the available horizontal space, content will wrap.
    • Scales of value are separated from one another with the pipe (|) character.

Static Instruction Text

Figure 14 shows an example of static instruction text in the page header region.

Figure 14. Static instruction text

Use static instruction text only on pages where typical users may fail to perform a task unassisted. Apply static instruction text to explain the primary way to use a page or a subsection of the page. If a page or subsection does not need help, do not add static instruction text simply to make that page or subsection consistent with other pages or subsections.

If you use static instruction text, be brief and to the point. Use no more than two lines or 400 characters including spaces. The text is always visible.

Follow these usage guidelines:

  • Usage is optional.
  • Content orientation: Text expands horizontally within the width of its header element and wraps up to two lines.
    Figure 15. Example of static instruction text
  • For more information, see the Embedded Help Design Pattern: Static Instruction Text.

Task Stamps

Figure 16 shows an example of task stamps in the page header region.

Figure 16. Example of task stamps

Task stamps provide context-specific information regarding task-related and status information. Types of task stamps include the state of a page or section content, such as the last saved date (and time, if appropriate), or last refreshed time; the page data needed for users to complete a task, such as a space quota; and so on. Examples include:

  • Last Saved 6/16/09 11:32:47 PM
  • Last Refreshed 10/8/08 12:14:32 AM
  • [Object] Created 10/4/08 10:44:32 AM
  • Status Approved
  • Space Remaining 8 MB
  • Budget Remaining 12,750.00 USD
  • Days to Quarter End 25
  • Sales Target 65,000,000.00 USD
  • Customer Joseph Chao
  • Label Value

Follow these usage guidelines:

  • Usage is optional.
  • Content expansion is vertical stacking.
    • No more than one task stamp per row is allowed.
    • If you have two or more task stamps, each displays on a different row within the task stamp header element (see figure 17).
Figure 17. Example of two task stamps, each displayed on a different row

Right-align task stamps as a block (see figure 19). Within the block, right-align text values (see figure 18).

Figure 18. Within the task stamp block, right-align values
Figure 19. Right-align the task stamp block within its header element

For more information, see the Page Stamps Usage Guideline, Task Stamps section.

Local Context Region

Figure 20 shows an example of a local context region within the page header region.

Figure 20. Local context region

The local context region contains information based on users' selections from a previous page. The information helps users complete the task as they move from page to page and ensures that they are acting on the appropriate object.

Follow these usage guidelines:

 
Layout and Behavior
Return to Top

This table illustrates the layout of header elements.

Left-aligned
Right-aligned
Horizontal Train (center-aligned)

Header Title

Header Context
Header Toolbar (page actions)

Collaboration Toolbar

Task Stamps (as a block)

Scaling

Static Instruction Text

Local Context Region (content defaults to a two-column layout)
Table 1. Content alignment within header elements

The layout of header elements varies depending on which header elements contain content and which do not. If a header element contains no content, it does not occupy any real estate in the UI.

For example, when no task stamp is included, the collaboration toolbar, scaling, and static instruction text header elements may, if they contain content, occupy the entire width of the local area (see figure 22). 

Figures 21 - 23 show a sampling of layout variations but without the diagrammatic overlay of header element boundaries.

Figure 21. Example of a multiple objects model page header region that displays all header elements except a horizontal train and the local context region containing content
Figure 22. Example of a page header region where the task stamps header element contains no content and is, therefore, collapsed. As a result, the collaboration toolbar, scaling, and static instruction text header elements span the width of the local area
Figure 23. Example of a page header region that displays the most commonly used header elements: the header title, header toolbar, and the collaboration toolbar
 
Related Documentation
Return to Top

 
About Oracle | Legal Notices | Terms of Use | Your Privacy Rights