PeopleSoft Fluid Banner and Footer Standards

Fluid User Experience

ORACLE WHITE PAPER | DECEMBER 2015
Disclaimer
The following is intended to outline our general product direction. It is intended for information
purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any
material, code, or functionality, and should not be relied upon in making purchasing decisions. The
development, release, and timing of any features or functionality described for Oracles products
remains at the sole discretion of Oracle.

FLUID BANNERS AND FOOTERS STANDARDS

Table of Contents

Disclaimer 1

Overview 1

Banners 1

Back Button 1

Page Title 1

Icons in Banner (Banner Actions) 2

Application Actions Added to Actions List in Banner 3

Small Form Factor Banner 5

Back Button 5

Responsive Design 5

Footers 7

Small Form Factor Footer 7

Action Button 7

Responsive Design 8

FLUID BANNERS AND FOOTERS STANDARDS

Overview
This documentation provides standards and guidance related to the use of banners and footers on
Fluid Self-Service transactions.

Banners
All fluid components should use the following standards to maintain a common look and feel.

The banner of a fluid component can be divided into the following three areas:

Back Button
Page Title (also referred to as the Banner Title)
Icons

The following sections describe the function and guidelines for each of these areas.

Note: The guidelines in this section apply to all form factors unless specifically described otherwise in the Small
Form Factor section.

Back Button
On the main page of a Fluid transaction, a Back button should always appear in the left side of the banner.

The Back button should always allow users to return to the place from which they entered the current page. Note
that the only page that should not have a Back button is a homepage (since there is no place to go back to). The
Back button label should always be based on the page name to which the user will be returned (that is, not the word
Back). Note that in a small form factor device, the button appears as a left facing arrow without text.

Keep page titles short so they will fit on the Back button. The Back button style will truncate long page titles when
rendering the label.

If the transaction is editable and edits have been made, the Save alert will fire when the Back arrow is tapped.

See the Buttons Standards for more details about the Back button

Page Title
The page title should briefly identify the current page to the user. Choose a concise page title so that it can be
displayed in its entirety even on a small form factor. Be aware that long page titles increase the possibility of overlap
with other banner elements (for example, icons) and may require that the title be truncated.

The page title comes by default from the App Designer page name but can be overridden in PeopleCode.

1 | FLUID BANNERS AND FOOTERS STANDARDS

Note: In a two- or three-panel layout, the right (main content area) panel should have a title that reflects the category
selected from the left panel. This title is properly referred to as a Panel Title to avoid confusion with the page title
that appears in the banner. See the Panel Layout standard for more details about panel titles.

Figure 1: Example of Page Title in banner and Panel Title

Icons in Banner (Banner Actions)

The following icons are available and should be used for Fluid components:

The above options are enabled in App Designer. Designers of Fluid pages should generally enable the options
shown below in the Header Toolbar Actions section of the Fluid tab in the Component Properties definition.

2 | FLUID BANNERS AND FOOTERS STANDARDS

Figure 2: Component Properties showing available Fluid Header Toolbar Actions

The Next in List and Previous in List options should also be enabled if the component has a component search (that
is, when there is the possibility of a set of search results through which the user can navigate).

Note that the Add To and Logout actions will appear under the Component Actions icon.

Do not use the Add To option for any component where it does not make sense. For example, if the user should not
directly access the component, as would be the case for a Guided Self Service transaction or to a component that is
in the middle of a process, the Add To option should not be enabled.

Note that while it is technically possible to add custom application buttons to the right portion of the banner,
developers should not do so: instead add actions to the Actions List.

Application Actions Added to Actions List in Banner

Application-specific action items can be added to the Actions List (also referred to as the Hamburger icon) that
appears in the banner. They will always appear at the top of the list. They should be placed there if they are general
action items that users would logically expect to see under a Menu or Settings area; User Preferences is an
example of such an item:

3 | FLUID BANNERS AND FOOTERS STANDARDS

Figure 3: Example of Actions List items
Note that it is important to ensure that such slide-out menu windows display a header with an appropriate title in
Accessibility mode. Figure 4 (1 of 2) shows the Actions List slide-out menu modal window in non-Accessibility
mode, while Figure 4 (2 of 2) shows it as it should appear in Accessibility mode. The following is an example
PeopleCode snippet to achieve the header/title in accessibility mode:

Local string &sMenuTitle = EscapeHTML(MsgGetText(124, 524, "Message Not Found: Action Menu")); /*
Text=Actions List Popup */

PTLAYOUT.HEADER_ACTIONGROUP.SetGroupletMOptions("sStyle@ps_popup-menu ps_menutype-
act;sTitle@" | &sMenuTitle | ";bAutoClose@1;bMask@1;sMaskStyle@ps_masktrans;bVertical@1;bHeader@0;");

Figure 4: Modal Window without Header/Title (1 of 2)

4 | FLUID BANNERS AND FOOTERS STANDARDS

Figure 4: Modal Window with Header/Title in Accessibility mode (2 of 2)

Small Form Factor Banner

This guidance applies specifically to the Back button in a small form factor device.

Back Button
To save room on the banner, the Back button will always display a left-facing arrow rather than a page
name if the banner width is less than 680 pixels.
Similarly, the Notifications icon and Actions List icon will be the only visible icons in the banner when the
banner width is 580 pixels or less (as would be the case for most smartphones in portrait orientation).
See the following Responsive Design topic for more information about how icons are displayed or
hidden based on various breakpoints in the banner width.

Responsive Design
This section discusses how developers can minimize or avoid collisions of items in the banner.

Concept Description Examples

Actions List To try to avoid collisions between the Avoid collisions between title and icons.
Overflow page title and banner icons, move icon
actions from the banner into the Actions
List based on the rendering area (size of
the window).
Here the Home and Search icons are automatically removed from the
At the most compressed width, only the
banner. Their actions can be accessed from the Actions List icon.
Notifications icon (if activated for that
component) and the Actions List icon will
be visible.

If necessary, the Back button will

This is how the Home, Search, and Nav Bar actions become available
change from displaying a text label to
displaying just the left-facing arrow. under the Actions List icon when their icons are hidden:

5 | FLUID BANNERS AND FOOTERS STANDARDS

 If further compression is necessary, the
title will be truncated and ellipses will
appear when there is not enough space
to show the entire title.

Here the Back button label is still visible:

Here, the Back button has changed to display only a left-facing arrow
(no text label):

Here, the title was truncated:

Thresholds for Here are the breakpoints (based on This is an example of a banner with more than 800 pixels and all
Moving Each banner width) for moving icons into the elements included:
Icon into the Actions List menu:
Actions List

The icons will fall over into the Actions This example shows that the Back button loses its label text below 680
List starting with the first icon on the left. pixels. The Home and Search icons are also hidden:
Adjustments will be made to the width of
the other banner elements, Page Title
and Back Button label/appearance.

Below 900 pixels: Remove Custom Below 580 pixels, only the Alerts and Actions List icons will appear; all
buttons from banner. other icon actions were moved into the menu under the Actions List
icon.
Below 800 pixels: Hide the Home icon,
set max width on Back button, set max
width of Page Title in banner.

Below 680 pixels: Hide Search icon,

change max width of Page Title, hide
text in the Back button, and enlarge
icons.

580 pixels: Hide the Navbar icon and

6 | FLUID BANNERS AND FOOTERS STANDARDS

 change size of Page Title.

Note: The system always displays the

Actions List and Notifications icons.

Footers
Important! Only use footers for small form factor devices. Do not use a footer in any other size form factor.

Small Form Factor Footer

Action Button
Use footers in the small form factor to display page-level buttons.

This example shows a footer with a page-level button in small form factor device.

Figure 5: Example of page-level button (Submit) in footer

See the Buttons Standard for more information about the button styles and guidelines to be used in footers.

7 | FLUID BANNERS AND FOOTERS STANDARDS

Responsive Design
Footers are used in the small form factor to display page-level buttons. These page-level buttons should be
displayed differently on larger form factors, where the use of a footer is not allowed.

See the Responsive Design section in the Buttons Standard for more information on how buttons appear in the
small form factor and in larger form factors.

Activity Guide Type Guidelines for Use

Optimized Activity Guide Use when the Activity Guide does not contain any steps that display
a left panel or application header. An optimized Activity Guide:
Is designed to be optimized for the Activity guide framework.
Supports both sequential and nonsequential processes.
Discourages user from transferring away from the process.
Does not use the left panel.
Does not use custom applications header.
Could be a Single Unit of Work design.
Evaluates Applications Save button placement as part of the
optimization process.
Uses the modified PeopleTools banner in Guided mode:
New navigation functionality: Exit, Next, Previous
Actions List contains Home
Optional functionality: Notification
Not available in Guided mode: Search, NavBar

Non-optimized Activity Guide Use when you have an Activity Guide step that contains a page with
a left panel or application header.
When a step contains a page with a left panel, the left panel
contents of the page will appear, and the list of Activity Guide steps
will move to a drop down list in the banner.
A non-optimized Activity Guide:
Supports both sequential and nonsequential processes.
Discourages user from transferring away from the process.
Uses the modified PeopleTools banner in Guided mode:
New navigation functionality: Exit, Next, Previous
Actions List contains Home
Optional functionality: Notification
Not available in Guided mode: Search, NavBar

8 | FLUID BANNERS AND FOOTERS STANDARDS

GUIDELINES FOR USING NAVBAR TILES AND APPLICATION START PAGES

Type Guidelines for Use

Use when a group of links is needed for quick navigation.

NavBar tiles
Navigation Collections allow an unlimited number of grouping
levels for the transaction links; limit the number of levels in the
Navigation Collection to four or less.
Provide meaningful Navigation Collection names and folder names
for the groups of links.

Use when you want to navigate between components, from the left
Application Start pages
panel, or from the banner drop-down menu.
Ensure that Navigation Collections are no more than two levels
deep.

DESIGN PATTERNS

Homepage Application Start Application Activity Guide

Page Homepage

8.54 8.54 8.55 8.55

Minimum
PeopleTools
Release

Page containing tiles that Page displaying a list of Page containing Page displaying a list of
Description
appear following login. related components in the functionally similar tiles steps in the left panel with
left panel with the with live data. the selected step in the
selected component in the right panel or a page
right panel. displaying a simple
horizontal train stop.

Login > Homepage Homepage > Tile > Homepage > Tile > Homepage > Tile >
Navigation
Application Start page Application Homepage Activity Guide

Homepage > Tile >

Application Start Page >
Activity Guide

Homepage > Tile >

Component > Activity
Guide

Group functionally similar Group functionally similar Group functionally similar Use the PeopleTools
Implementation
tiles on a Role Based components in a page live tiles on a page. Release 8.55 Activity
Homepage. Allows with a two-panel layout. Similar to an Application Guide Framework to
groupings of tiles based The list of components Start page but uses live create Activity Guides.
on the users role, for contains an icon, a title, data on tiles to convey
example, Manager, and an optional count. high-level information to
Employee, Administrator. Allows groupings of users.
similar components to
improve the experience of
navigating quickly from
component to component.

Use no more than 5 Use this construct to Use this construct to Use this framework when
Usage
homepages per user and avoid having a large avoid having a large it will improve the users
no more than 9 tiles per number of tiles on a number of tiles on a experience to be guided

9 | FLUID BANNERS AND FOOTERS STANDARDS

 homepage. homepage or a large homepage or a large through a set of steps to
number of homepages. number of homepages. complete an activity.
Use when no summary- Use when you have
level metric data is summary-level data to
available to be displayed display in tiles and you do
for each component. If not want to open any
you have summary-level component by default.
data to display for each
component, consider
using the Application
Homepage.

Oracle Corporation, World Headquarters Worldwide Inquiries

500 Oracle Parkway Phone: +1.650.506.7000
Redwood Shores, CA 94065, USA Fax: +1.650.506.7200

10 | FLUID BANNERS AND FOOTERS STANDARDS

CONNECT W ITH US

blogs.oracle.com/oracle
Copyright 2015, Oracle and/or its affiliates. All rights reserved. This document is provided for information purposes only, and the
contents hereof are subject to change without notice. This document is not warranted to be error-free, nor subject to any other
facebook.com/oracle warranties or conditions, whether expressed orally or implied in law, including implied warranties and conditions of merchantability or
fitness for a particular purpose. We specifically disclaim any liability with respect to this document, and no contractual obligations are
twitter.com/oracle formed either directly or indirectly by this document. This document may not be reproduced or transmitted in any form or by any
means, electronic or mechanical, for any purpose, without our prior written permission.
oracle.com Oracle and Java are registered trademarks of Oracle and/or its affiliates. Other names may be trademarks of their respective owners.

Intel and Intel Xeon are trademarks or registered trademarks of Intel Corporation. All SPARC trademarks are used under license and
are trademarks or registered trademarks of SPARC International, Inc. AMD, Opteron, the AMD logo, and the AMD Opteron logo are
trademarks or registered trademarks of Advanced Micro Devices. UNIX is a registered trademark of The Open Group. 0615

White Paper Title

December 2015
Author: [OPTIONAL]
Contributing Authors: [OPTIONAL]

2 | FLUID BANNERS AND FOOTERS STANDARDS