View
223
Download
5
Category
Preview:
Citation preview
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
Recommended