ORACLE CORPORATION

PeopleSoft Fluid Grids Standards

Fluid User Experience November 2015

2

PeopleSoft Fluid Grids Standards

Copyright © 2015, Oracle and/or its affiliates. All rights reserved.

This software and related documentation are provided under a license agreement containing restrictions on use and disclosure and are

protected by intellectual property laws. Except as expressly permitted in your license agreement or allowed by law, you may not use, copy,

reproduce, translate, broadcast, modify, license, transmit, distribute, exhibit, perform, publish, or display any part, in any form, or by any means.

Reverse engineering, disassembly, or decompilation of this software, unless required by law for interoperability, is prohibited.

The information contained herein is subject to change without notice and is not warranted to be error-free. If you find any errors, please report

them to us in writing.

If this is software or related documentation that is delivered to the U.S. Government or anyone licensing it on behalf of the U.S. Government,

then the following notice is applicable:

U.S. GOVERNMENT END USERS: Oracle programs, including any operating system, integrated software, any programs installed on the

hardware, and/or documentation, delivered to U.S. Government end users are "commercial computer software" pursuant to the applicable

Federal Acquisition Regulation and agency-specific supplemental regulations. As such, use, duplication, disclosure, modification, and adaptation

of the programs, including any operating system, integrated software, any programs installed on the hardware, and/or documentation, shall be

subject to license terms and license restrictions applicable to the programs. No other rights are granted to the U.S. Government.

This software or hardware is developed for general use in a variety of information management applications. It is not developed or intended for

use in any inherently dangerous applications, including applications that may create a risk of personal injury. If you use this software or hardware

in dangerous applications, then you shall be responsible to take all appropriate fail-safe, backup, redundancy, and other measures to ensure its

safe use. Oracle Corporation and its affiliates disclaim any liability for any damages caused by use of this software or hardware in dangerous

applications.

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.

This software or hardware and documentation may provide access to or information about content, products, and services from third parties.

Oracle Corporation and its affiliates are not responsible for and expressly disclaim all warranties of any kind with respect to third-party content,

products, and services unless otherwise set forth in an applicable agreement between you and Oracle. Oracle Corporation and its affiliates will

not be responsible for any loss, costs, or damages incurred due to your access to or use of third-party content, products, or services, except as

set forth in an applicable agreement between you and Oracle.

Documentation Accessibility

For information about Oracle's commitment to accessibility, visit the Oracle Accessibility Program website at

http://www.oracle.com/pls/topic/lookup?ctx=acc&id=docacc.

Access to Oracle Support

Oracle customers that have purchased support have access to electronic support through My Oracle Support. For information, visit

http://www.oracle.com/pls/topic/lookup?ctx=acc&id=info or visit http://www.oracle.com/pls/topic/lookup?ctx=acc&id=trs if you are hearing

impaired.

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 Oracle’s products remains at the sole discretion

of Oracle.

3

Fluid Grids Standards

Fluid Grids Standards ............................................................................................................................................................ 3 Overview ........................................................................................................................................................................... 4 Common Guidelines .......................................................................................................................................................... 4

Simple and Complex Grids ............................................................................................................................................ 4 Stacked and Unstacked Grids ........................................................................................................................................ 6 Grid Constructs .............................................................................................................................................................. 7 Tappable Grid Rows and Hotspots .............................................................................................................................. 11 Grid Toolbar Buttons and Attributes ........................................................................................................................... 13

Grid Toolbar .................................................................................................................................................................... 15 Grid Title.......................................................................................................................................................................... 17 Row Count ....................................................................................................................................................................... 19 Grid Tabs ......................................................................................................................................................................... 19 Tab Overflow ................................................................................................................................................................... 19 View Collections .............................................................................................................................................................. 19 Add/Edit .......................................................................................................................................................................... 22

In-line Editing ............................................................................................................................................................... 23 Edit in a Modal, Single Tappable Row ......................................................................................................................... 25 Row with Multiple Hot Spots ....................................................................................................................................... 26

Delete .............................................................................................................................................................................. 27 Filters .............................................................................................................................................................................. 30 App Button ...................................................................................................................................................................... 31 Sort .................................................................................................................................................................................. 32 Grid Column Headers ...................................................................................................................................................... 33 Number of rows to display .............................................................................................................................................. 33 Bulk Actions ..................................................................................................................................................................... 33 Toolbar Button Order ...................................................................................................................................................... 34 Empty Grid ...................................................................................................................................................................... 34 Responsive Design .......................................................................................................................................................... 36

List View Grids ............................................................................................................................................................. 36 Stacked to Unstacked Grids ......................................................................................................................................... 37

Examples ......................................................................................................................................................................... 38

4

Overview

Grids are used to display data in a tabular format with rows and columns. The range within which grids may be displayed goes from the simple to the complex. In its simple form, a grid may be a single column with a few rows or it can be as complex as a multi column grid divided into multiple tabs that contain many selectable items in each grid row in addition to multiple grid actions available to the user.

There are several constructs and design patterns for grids the designer may choose from depending upon the type and amount of data to be displayed as well as the form factor. The guidelines for selecting a grid construct and design pattern are discussed in this document in the sections below.

Generally, the intent for the design of a grid is to present a simple, easy to understand page that does

not overwhelm the user with data. The overall look and feel of the page should be a less cluttered appearance that allows the page to be read easily.

Common Guidelines

When determining how grid data should be displayed on a page, there are a number of things to consider:

1. How much data needs to be displayed?

2. What type of data is displayed?

3. How will my grid use responsive design?

The answers to these questions will determine the type of grid and the grid header attributes that will

be used in the grid. There are two main types of grids: simple and complex.

Depending upon the amount of data that must be displayed, there are two ways to display the data in a grid: stacked and unstacked.

There are a number of constructs that can be used to display a grid. There are many Listview constructs that have been designed specifically for the small form factor.

The sections below provide a definition for simple and complex grids, stacked and unstacked grids, and list the grid constructs available. When and how these grid constructs and design patterns should be used is also discussed.

Simple and Complex Grids

There are two main types of grids: simple and complex.

Simple Grid

A simple grid is a grid that does not contain a lot of data. It has both a smaller number of rows and a smaller number of columns. It does not have a large number of action buttons within the grid or a large number of action buttons below the grid that take action on the grid as a whole. It would not have stacked fields in columns or grid tabs.

5

Figure 1: Example of a simple grid

Simple grids are preferred over complex grids when possible because they are easy to read and

understand. There are times when functional requirements dictate the need to display larger amounts of data and a complex grid would be used in these scenarios. It is important to evaluate and only include the necessary columns in any grid. Only include data columns in the grid that are needed for performing the task.

Complex Grid

A complex grid has a large amount data with many rows and columns. It may contain many action

buttons within the grid, in the grid toolbar, above the grid or below the grid. When a page contains many grids, stacked one on top of the other, this may be considered complex even if the individual grids are not complex.

The following example shows a more complex grid with a stacked column and an action button above the grid:

Figure 2: Example of a complex grid with a stacked column and action button above the grid

The grid shown below has stacked columns with many rows and columns. It is considered a complex grid:

6

Figure 3: Example of a complex grid with stacked columns

The following example shows a complex grid that has many columns and may contain many rows. It

is an unstacked grid with grid sort turned on and it has an application defined grid toolbar button, Add Service Request, above the grid on the right:

Figure 4: Example of a complex grid with grid sort turned on and an application defined grid toolbar button

Stacked and Unstacked Grids

Unstacked Grid Example

An unstacked grid does not combine two or more columns of data into a single column. It takes the form of a traditional table where only one piece of data is contained in each cell. The following

screenshot shows an example of an unstacked grid. This grid has three columns: Contact Name, Relationship and Preferred. At the intersection of each column and row is one data item, for example,

Contact Name: Jason Channing.

7

Figure 5: Example of an unstacked grid

Unstacked grids are used when only a small amount of columnar data needs to be displayed. Horizontal scrolling of grids should be avoided. Use an unstacked grid when the data will fit on the

page without the need for a horizontal scrollbar.

Stacked Grid Example

A stacked grid combines two or more columns of data into a single column. A stacked grid allows more data to be displayed using less horizontal space. The following screenshot shows an example of a stacked grid. The first column in the grid is Name/Title. This grid column is the combination of two grid columns: Name and Title. In the unstacked form, Name and Title would each have their own column. In a stacked grid, Name and Title occupy the same column with the Name data appearing

above the Title data in each row.

Figure 6: Example of a stacked grid

Stacked grids are used when more columns of data need to be displayed than can fit on the page without introducing horizontal scrolling. Horizontal scrolling of grids should be avoided.

Grid Constructs

There are a number of different grid constructs that can be used to display a grid in a Fluid page. The following table lists the constructs available with a screenshot of each construct and when it should be used.

Construct Name Description When to use

8

Detailed Multi-Line

List

May be used when several

columns of data per grid row need to be displayed in a small space. The data is organized into primary, secondary and

tertiary data. The primary data is a larger font and is bold. The secondary data is a medium sized non bold font and the tertiary data is a smaller non bold font.

Detailed List with

Icons

Contains the same primary,

secondary and tertiary data described in the Detailed Multi-

Line List. It also contains an Icon below this data.

Detailed List with

Multiple Hot Spots

Contains more than one

tappable area on each grid row. The chevron indicates that the whole row is tappable.

However, there are one or more hot spots on the row as well.

Images with

Drilldown

Contains an image on each grid

row. Used when an image must be displayed in a multi line list.

Empty Grid

Used when there is no data to

display in the grid and the grid

does not have an Add button.

9

Empty Grid - Add

Used when there is no data to

display in the grid and an add row button is needed.

Row Count

Used when there are no grid

toolbar buttons to be displayed and a row count is displayed. It moves the row count down to

be inline with the grid title. Without the grid toolbar, row

count would be on a row by itself. This style reclaims that space and places the count in the same row as the grid title.

Stacked Grid

Used when a grid contains more

columns than can be displayed in the horizontal space available. The stacked grid takes data from multiple columns and combines it in a

single column to save space.

Summary/Detail

Collapses or expands the data

in each in grid row by toggling between Summary and Detail. It is used when there is secondary data in each grid row that can be viewed on demand

by the user when selecting the Detail view. The data in the detail view is display only. Updates to the grid row are made by tapping on the grid row and opening a modal window.

10

Listview with right

aligned labels, truncate and wrap

Contains one line per column

for each grid row. The labels are right aligned and the data is left aligned. Long words are

truncated and long labels with many words wrap to the next line on a space between words.

11

Listview with

checkbox and tappability

Contains a left aligned checkbox

on each grid row and a chevron to indicate tappability. Use this when a checkbox is needed and the whole row is tappable.

Tabbed Grid

Used when there are more

columns than can be displayed in a stacked grid. The columns in a grid row are divided into

separate tabs.

Tappable Grid Rows and Hotspots

The chevron icon is the tappable row indicator. The chevron should always be used to indicate that a grid row is tappable except for the following instances:

1. Grid Rows are displayed in a list view and are used for navigation:

Figure 7: Example of grid rows displayed in a list view

2. Grid Rows are displayed in a list view and contain a count indicator:

12

Figure 8: Example of grid rows displayed in a list view with count indicators

The following screenshot shows the chevron tappable row indicator:

Figure 9: Example of chevron tappable row indicator

The screenshot below shows an example of a Summary/Detail List View with a tappable row indicator:

13

Figure 10: Example of a Summary/Detail list view with tappable row indicator

Grid Toolbar Buttons and Attributes

There are a large number of Toolbar buttons and attributes available on a grid and each button or attribute can be included or excluded from the grid design as needed.

The following screenshot shows an example of all of the grid toolbar buttons, the grid title, the row count and grid tabs:

Figure 11: Example of grid title, grid toolbar buttons, row count and grid tabs

The following list contains the Toolbar buttons and attributes available along with a link to a section

describing its use:

Attribute Description

Grid Title The grid title appears above the grid and the grid toolbar.

Grid Title View Collection Add Filter Application Button Row Count Edit

Stacked Grid Sort

Grid Tabs

Bulk Actions

14

Attribute Description

Row Count The row count is displayed by Tools and appears on the right above the Grid

Toolbar.

See Row Count Style in the Grid Constructs section for an alternate style when there are no toolbar buttons. The row count is moved down and placed directly above the grid reclaiming the space reserved for the Grid Toolbar:

Tabs The tabs in a tabbed grid appear directly above the grid header and below the

grid toolbar.

Tab Overflow A scrollbar will appear when there are more tabs to display than can fit in the

horizontal space.

View Collections The View Collection is a series of three buttons that switch between grid view,

list view and card view:

Add The Add new row icon is the plus sign image:

Edit The Edit row icon is the pencil image:

15

Attribute Description

Filter The grid filter icon is the filter image:

App Button Application Development can place application specific buttons on the grid

Toolbar:

Find in Grid Find in Grid functionality was deferred to Tools Release 8.56.

Sort The grid Sort button is provided by Tools and appears on the right side of the

grid toolbar. This Grid Sort button applies only to Stacked Grids and is used to

select the column that will be sorted on. The sort is the up and down arrow

image:

Grid Toolbar The grid toolbar is hidden when none of the grid toolbar buttons or attributes are enabled:

Example when Toolbar buttons are enabled:

Example when all Toolbar buttons are disabled, the toolbar is hidden and the row count is displayed directly above the grid:

Grid Toolbar

The attributes listed in the section above are placed in the grid toolbar as needed. The Grid Toolbar and Grid Toolbar Border attributes can be enabled or disabled. The Toolbar is disabled when:

There are no toolbar buttons to display.

In the following example, there are no grid toolbar buttons to display and the toolbar is hidden. An application button placed above or below the grid and not directly in the toolbar is not considered

when hiding the grid toolbar:

16

Figure 12: Example of grid toolbar hidden

The Toolbar borders are disabled when:

Only one or two buttons are displayed and there are very few rows and columns.

Toolbar borders would add clutter, for example, on the small form factor.

In the following example, the grid toolbar is hidden and the grid borders are turned off:

Figure 13: Example of grid toolbar hidden and grid borders turned off

17

There is one button provided by Tools, Grid Sort, and the remaining buttons must be provided by

Application Development. The Grid Sort Tools button, if enabled, automatically appears on the far right in the grid toolbar. The row count is also provided by Tools and is displayed on the right and above the toolbar:

Avoid placing a large number of buttons in the grid header on the small form factor if possible. The buttons will wrap to the next line:

Figure 14: Example of buttons wrapping to next line on small form factor

Grid Title

Use a grid title if:

There is more than one grid on your page

Additional clarity is required

If you are not displaying a grid title, set one in accessible mode

It is not necessary to have a grid title for a grid. When there is one grid in the right panel of a two panel layout, the grid title may be suppressed to avoid repeating the title that is already displayed as a panel selection in the left panel and a panel title in the right panel.

Tools Button Apps Buttons

18

Figure 15: Example of a single grid title

In the following example with multiple grids in the right panel, the grid titles are displayed for all three grids because each grid title is unique on the page and does not match the page title. Contact Details is the title of the right panel and the three grid titles are Phone, Email and Instant Message:

Figure 16: Example of multiple grid titles

19

Row Count

When the row count is displayed, there are two styles available depending on whether Toolbar buttons are enabled or not:

Row Count displayed with Toolbar buttons enabled:

Row Count displayed with Toolbar buttons disabled:

It is optional to display the row count. The row count can be suppressed when it is expected that a

small number of rows will be displayed or the row count is not functionally relevant.

Grid Tabs

Grid tabs may be used when the data to be displayed contains a large number of columns and those columns can be logically grouped into tabs.

Tab Overflow

When a grid contains more tabs than can be displayed in the horizontal space available, there will be tab overflow.

View Collections

A view collection is a collection of three buttons that allows the user to toggle between a detailed view, a list view and a card view of a grid. Any two of the three buttons or all three buttons may be used depending upon functional requirements. It is not necessary to provide all three buttons in the

collection. The View Collection is used to change the view of tabular information between a table, a single column or a group of cards.

The following table provides a description of each type of view:

View Type Description

Grid View Displays information in multiple columns and multiple rows. This is the

traditional table format for a grid and can be used when enough horizontal

20

space is available. Horizontal scrolling should be avoided.

List View Displays information in a single column with multiple rows. There is more

vertical scrolling with a List View; however it can be used when horizontal space is limited.

Card View Displays information using a business card metaphor. It is used when data is

display only and the grouping of the data into a card type image is more easily reviewed by the user.

The example below shows a View Collection with a Card View button and a Grid View button. The following screenshots show examples of the Grid View and the Card View. The selected button in the View Collection appears shaded:

Grid View

Figure 17: Example of view collection with card view and grid view, grid view is selected

Card View

21

Figure 18: Example of view collection with card view and grid view, card view is selected

Card View Flipped

The button that flips the card is an Application specific button:

Figure 19: Example of button that flips the cards in card view

The following example illustrates selection between a grid view and a listview.

Grid View

Data columns are displayed horizontally:

22

Figure 20: Example of grid view with data columns displayed horizontally

Listview

Data columns are stacked in a list:

Figure 21: Example of data columns stacked in a list view

Add/Edit

There are three design patterns for adding and editing grid data:

1. In-line editing 2. Edit in a Modal, single tappable row 3. Edit in a Modal, multiple hot spot row

23

Each of these three design patterns are discussed in the sections below.

In-line Editing

It is recommended that inline editing is not used on the phone. On the small form factor the grid should be read only and a modal window should be used for editing, adding and deleting because of

the space constraints.

On a tablet, use inline editing when the user is expected to make many modifications to a number of rows in one session. Use a modal window when updates are infrequent and single row updates are expected. Be aware of providing a consistent experience when choosing inline versus modal.

The grid Add button will insert a new row directly into the grid. The fields on the grid are directly editable on the page. When a new row is inserted directly into the grid, the row may be added to the top or the bottom of the grid depending upon the application functionality.

It is recommended that when lazy scrolling is used, the new row is added to the top. When the new row is added to the top, scrolling is not required to view the new row.

Edit Inline – Direct Edit

Fields are open for editing. Rows are added directly into the grid by selecting the Add button in the grid toolbar.

Figure 22: Example of fields open for inline editing

Use the inline edit design pattern when there is enough space to display the grid in portrait mode and avoid horizontal scrolling.

The inline Add/Delete row buttons are available for backward compatibility and should not be used in Fluid designs:

24

Edit Inline – Read Only

This design pattern is not available in Tools Release 8.54.

In this design pattern the grid rows are display only and become editable when the pencil button is

tapped:

Figure 23: Example of grid rows with fields initially display only (1 of 2)

25

Figure 23: Example of grid rows with fields open for editing after tapping pencil button (2 of 2)

Edit in a Modal, Single Tappable Row

The grid Add button launches a modal window where a new row of data can be added and saved. To

modify an existing row, the row is tapped to open a modal window where the grid row updates can be made and saved. The modal window contains a Cancel button so the user can exit the window without saving either a new row or modified existing row.

The following screenshot shows the modal window that appears when the Add button on the grid is

selected:

Figure 24: Example of modal window that appears once Add button is selected

26

The next screenshot shows the modal window displayed when an existing row is tapped for editing.

The cancel and save buttons are available when a row is added or when a row is updated.

Figure 25: Example of modal window that displays once an existing row is tapped for editing

Ensure that the modal window size is such that it can be seen fully in your window. The Save and

Cancel buttons must be visible.

Row with Multiple Hot Spots

When a row contains multiple hot spots, the entire row is tappable and a chevron is placed on the row. Additionally there are one or more tappable areas on the row that perform different actions than when the whole row is tapped. In the example below, the Name Tile contains a Related Actions hot spot that opens the Related Actions Menu. The Directs/Total column contains a hot spot that shows the Direct reports. The Email/Phone column contains a hot spot that opens the email client. The row has

a chevron indicator that allows the row to be tapped anywhere other than the two hot spots and a modal window will open:

Figure 26: Example of rows with multiple hot spots and chevron indicator

27

Delete

There are two options for deleting rows in a grid:

1. Tap on a row to open a modal window with a delete button. 2. Provide an Edit button in the grid header.

Delete from a Modal Window

When deleting from a modal window, grid rows are deleted one at a time. A specific grid row is deleted by tapping on the row to open a modal window and then tapping on a Delete button. After tapping on the Delete button, the modal window is dismissed and the deleted row no longer appears in the grid.

The following example shows the full screen modal window that opens when the grid row is tapped.

The modal window contains a Cancel button in the upper left, the primary save action (Submit) in the upper right and a separator line at the bottom with a Delete button below it:

Figure 27: Example of modal window that opens when the grid row is tapped

The following example shows a grid on a tablet where a modal window is used to delete grid rows one at a time. The grid row is selected and the modal window opens with a Delete button displayed at the

bottom of the window:

28

Figure 28: Example of modal window used to delete grid rows one at a time

This design pattern can be used when deleting and modifying rows one at a time will not be tedious for the user. The advantage of this design pattern is that all of the data for a row can be accessed from a single tap and the data for that row can be updated or deleted from the modal window.

Additional grid toolbar buttons are not necessary and data from the grid is modified or deleted one

row at a time rather than opening the entire grid for editing.

Delete from Edit Button in Grid Header

Deleting from a button in the grid header will open a column of checkboxes that allows the user to select multiple rows to be deleted at one time. This design pattern hides the checkboxes until needed. Tap on the Edit button in Grid Toolbar.

29

Figure 29: Example of deleting multiple rows using the Edit button in Grid Toolbar

The following design pattern is used when the checkboxes are always displayed. The Delete button is

always displayed in the Grid Toolbar. Use this design pattern when multi delete is a frequent action:

Figure 30: Example of Delete button always displayed in Grid Toolbar and checkboxes always displayed

In this design pattern, the checkboxes should be on the far left of the grid and the Delete button

should be the left most button in the grid toolbar.

30

Filters

Grid contents can be filtered by the user when the Filter toolbar button is enabled. The Filter button opens a modal window where the user can select field values to filter on:

Figure 31: Example of Filter button opening a modal window where field values can be selected to filter on

The Filter modal contains a Cancel and a Done button. If the user makes modifications to the filter fields, they can use the Cancel button to abandon those changes and return. When the user selects the Done button, the filters are applied to the grid.

It is optional to use a Reset or Clear button on the Filter modal window. Use a Reset button when

default values for the filters are automatically populated when the modal is first opened.

1. The Reset button will repopulate the fields with these default values. 2. Use the Clear button when there are no default filter values and the user would like to set the values

for the filters back to all values.

When the grid contents have been filtered, the filter icon becomes green:

Figure 32: Example of Filter button becoming green when grid contents have been filtered

When the user selects Reset or Clear and then Done, the filter icon should no longer be green.

31

Any filter that has been applied to a grid will cause the filter icon to be green for the life of the

component. When the user re-enters the component, all grid filtering will be cleared and the icon will be white.

App Button

Application buttons may appear in the grid toolbar, above the grid or below the grid:

Figure 33: Example of Application buttons in grid toolbar, above the grid and below the grid

Consider the following guidelines when selecting where to place an Application Button:

Grid Toolbar Place button here when:

1. The application logic applies to the grid as whole. 2. The view selector buttons are always in the grid toolbar. 3. The Add button is always in the grid toolbar. 4. The pencil Update button (available post 8.54) is always in the grid toolbar. 5. The filter button is always in the grid toolbar. 6. The Delete button always in the grid toolbar. 7. The Edit button always in the grid toolbar.

Above Grid Place button here when:

1. It is necessary to see the button without scrolling. 2. The button would get lost if placed in the grid toolbar. 3. The buttons have long labels.

Below Grid Place button here when:

1. Users are selecting checkboxes as they work their way down a grid. 2. The button would get lost if placed in the grid toolbar. 3. When the button performs an action that changes the data in the grid, for

example, updating a Status. 4. The buttons have long labels.

32

Sort

A Sort button is provided by Tools for Stacked Grids. Stacked grids contain multiple data elements in a single column and sorting requires the user to select one data element in a column when there are multiples. The button is provided by Tools and when it is enabled, it appears on the far right in the grid toolbar:

Figure 34: Example of Sort button for stacked grids

When the sort button is selected, a window appears where the user can select a specific data element

to sort on. The labels in the in Sort window are taken from the label on the grid column:

Figure 35: Example of window that appears once Sort button is selected

When Sort is turned on, it is recommended that all sort-able data has a grid column header label that

matches the label in the Sort window.

The grid sort button should be enabled in the grid toolbar when sorting is desired in a Stacked Grid.

Tools will automatically exclude fields in the Sort that should not be sorted upon such as images.

33

Grid Column Headers

Typically, grid column headers should be used. In situations where there is only one or a few columns and the column header would add clutter rather than clarity, the column header can be suppressed. When the grid column header is suppressed, it should be enabled in accessible mode. Sorting should be used on grid column headers where it makes sense.

By default, column headers are left aligned, text in a column is left aligned, numbers are right aligned and dates are left aligned.

Number of rows to display

Avoid vertical scrolling in grids on touch devices. A vertical scrollbar adds clutter to a self service page and should be avoided. For simple grids, display all rows to the user and allow the page to scroll.

There are some circumstances where a vertical scroll bar may be needed. A vertical scrollbar may be

used when:

There is a large amount of data in the grid with many rows and scrolling the page is not feasible.

The grid contains a multi select checkbox and there are action buttons below the grid.

The grid data needs to be viewed side by side with other data on the page and this cannot be accomplished if the page were to scroll.

Lazy loading is needed because there is a large amount of data.

Never create a situation where the user must alternately scroll the page and then the grid scroll to view more data.

Bulk Actions

Bulk Actions allow the user to select multiple grid rows to take action on. There are two types of Bulk Actions:

1. Bulk Related Actions allows the user to select multiple grid rows to perform a transaction level change for example a reporting change.

2. Bulk Actions allows the user to select multiple grid rows for row level processing changes such as making a status change to candidates in Recruiting.

The same button is used for both types of Bulk Actions:

When a grid contains both Bulk Actions and Bulk Related Actions, all of the actions should be placed in a single list accessed from the Actions button.

The user chooses rows to act upon by selecting the checkbox next to the desired rows and then selecting the Actions button. A window is displayed showing the Actions available:

34

Figure 36: Example of window displaying the actions available to take in bulk

Toolbar Button Order

Toolbar buttons should be placed in the following order when two or more buttons are used in the grid toolbar:

1. Bulk Actions 2. View Collection 3. Add 4. Edit 5. Filter 6. Application Button

The sort button will be automatically placed on the far right of the toolbar by Tools:

Empty Grid

The empty grid pattern is used when there is no data to be displayed in the grid. There are two design patterns for the Empty Grid: empty grid for a grid with no add row functionality and empty grid for a grid with the ability to add a row to the grid.

35

The following example shows the empty grid for a grid that has an Add button for inserting a new grid

row. The Empty grid pattern contains three elements:

1. Grid title 2. Empty grid text 3. Add button

Figure 37: Example of empty grid for a grid that has an Add button for inserting a new grid row

When a grid contains a Filter toolbar button and the empty grid pattern is used, the Filter button appears below the grid:

Figure 38: Example of Filter button below the empty grid

In a two panel layout with an empty grid in the left panel and an empty grid in the right panel, convert

the two panel layout to a single panel layout and display the empty grid text:

Two panel layout with data in the grids in the left and right panels:

36

Figure 39: Example of two panel layout with data in the grids in the left and right panels

The Two Panel Layout is converted to a single panel when the grids are empty and empty grid text is displayed:

Figure 40: Example of two panel layout converted to a single panel when grids are empty and empty grid text displayed

Responsive Design

The following techniques can be used for displaying grids across form factors and are discussed in the sections below:

1. List View Grids 2. Stacked to Unstacked Grids

List View Grids

List view grids with Summary/Detail can be used to display a large number of columns on the small form factor:

Figure 41: Example of Summary list view grid and Detail list view grid on small form factor

37

On the larger form factors, adaptive design can be used to switch from displaying the list view on the

small form factor to a grid view on larger form factors:

Figure 42: Example of list view on small form factor switched to grid view on larger form factors

Stacked to Unstacked Grids

Grids can be displayed as Stacked on the small form factor and unstacked on larger form factors:

Becomes Stacked Grid UnStacked Grid

38

Figure 43: Example of stacked grid on small form factor switched to unstacked grid on larger form factors

Examples

The following screenshots show examples of grids that have been implemented.

Complex Unstacked Grid

This grid contains many rows and columns. It is an unstacked grid with column sorting. The grid toolbar is hidden and the row count is displayed in line with the grid title.

Figure 44: Example of an unstacked grid with column sorting and hidden toolbar

39

Complex Stacked Grid

This grid contains a small number of rows and large number of columns. It is a stacked grid with column sorting where the sort is accomplished with the Tools Sort toolbar button. The row count is not displayed.

Figure 45: Example of a stacked grid with large number of columns and Sort toolbar button

40

Multiple Simple Grids in a Two Panel Layout

This is a two panel layout that contains three grids in the right panel. Each grid has only a few rows

and few columns. There in a single Add button in the grid toolbar. The Add button opens a modal window to add a row to the grid.

Figure 46: Example of two panel layout that contains three simple grids in the right panel

41

Simple Grid on Small Form Factor

This grid on the small form factor contains only two columns and a few rows. The grid borders are

turned off and the column header labels are suppressed when not in accessible mode.

Figure 47: Example of simple grid with grid borders turned off and column header labels suppressed