Hide and Show Details Version 2.0.0.0Print this Page
Detail on Demand Pattern Set
 
Description
Return to Top

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
Return to Top
  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
Return to Top

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
Return to Top
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