FusionGPS: Design Patterns: Detail on Demand Pattern Set: Hide and Show Details

Hide and Show Details

Version 2.0.0.0

Detail on Demand Pattern Set


Description

Use the Hide and Show Details pattern when users need to easily access a small amount of information within the page. Details appear using a partial page refresh. These details appear in context, meaning that they appear next to the object to which they are related. The detail in these sections is supplemental and should not be required for users to complete their primary tasks.

Required fields should not appear in one of these detail regions, as the user will lose sight of them when the region collapses.


Pattern Set Decision Table

	Hover Details	Dialog Box Details	Hide and Show Details	Show More/ Show Less Detail	Drill-Down Details
Do the details become a primary resource for users and steps in their tasks? Do the users spend considerable time looking at the details?	No	No	Yes	Yes	Yes
Do users need to quickly obtain details (glance and close)?	Yes	Yes	Yes	No	No
Do these details need to be seen in conjunction with the other information?	Yes	Yes	Yes	Yes	No
How much space do the details use?	Small read-only form or data	Does not exceed 512 x 384 pixels	A few inches of screen real estate	A few inches of screen real estate	A page or more of detail

	Header Hide/Show	Region Hide/Show	Table Hide/Show
Does the detail region have actions that can be performed against it independent of the page-level actions or actions belonging to in the surrounding region?	Yes	No	No
Does the detail region need to surround a number of different components (such as a form and table) or another level of nested regions (such as a sub-subheader)?	Yes	No	No
Is the detail region agnostic to the page hierarchy?	No	Yes	No
Is the detail region a nested region within a sub-subheader?	No	Yes	No
Is the detail region associated with a table row?	No	No	Yes


Pattern Sample

Header Show/Hide

You can place details inside of a subheader region on a page where a toolbar may be associated with the actions. Detail regions can contain a number of components or another level of nested regions. You can set the subheader to open or close by default based on the use case requirements. If the subheader is closed by default, the details inside the region should not be required or should not be critical to task completion. The user reveals the details by clicking the Disclosure icon button within the subheader region.

Figure 1. Clicking the Disclosure icon button within the subheader region

Required Screen Elements
Component Type	Required Components	Customizable or Extendable Components
Subheader Region with Disclosure Icon Button	ADF subheader component with Disclosure icon button enabled	Contents of the hidden section

The user can click the Disclosure icon button again to collapse the detail region.

Figure 2. Clicking the Disclosure icon button again to collapse the detail region

Show/Hide Region

Details not associated with a subheader or requiring their own toolbars should use a show or hide region to store supplemental details.

Figure 3. Hide Detail region when collapsed

Figure 4. Hide Detail region when expanded

Required Screen Elements
Component Type	Required Components	Customizable or Extendable Components
Show/Hide Region with the Disclosure Icon Button	ADF show or hide component with Disclosure icon button enabled	Contents of the hidden section
Region Title	NA	The region title is to be determined by product teams. If the region is purely detail, consider naming the region Show Detail when collapsed and Hide Detail when expanded. If the region is needed as an additional level of nesting below a subheader, consider naming it to represent the kind of information contained inside.

Show/Hide in a Table

Detail can be shown for a table row. Clicking the Disclosure icon button in the row header reveals a detail region (in this example, a small two-column form).

Figure 5. Clicking the Disclosure icon button in the row header reveals a detail region

Clicking the Disclosure icon button again collapses the detail region for the table row.

Figure 6. Collapsing the detail region for the table row

Required Screen Elements
Component Type	Required Components	Customizable or Extendable Components
Table	Table with row disclosure enabled	Contents of the hidden section
Detail Region	NA	The product team defines the content. It is recommended that the content be kept to a minimum because space is limited and complex objects, such as a table, tree table, or complex form, will render the table unusable.


Related Guidelines

Headers	Guidelines for headers and subheaders including show/hide regions
Secondary Windows	Guidelines governing the use of secondary windows or dialog boxes
Tables	Guidelines for row detail regions in a table

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