Functions Acting on Tables, Columns, Rows
Functions on Tables: Pushbuttons Outside of Tables
Functions on Table Columns: Pushbuttons Referring to Columns
| Hyperlinks in Column Headers
Functions on Table Rows: Pushbuttons Outside of Tables
| Pushbuttons Referring to Rows | Hyperlinks
in Columns
The following guidelines complement the general guidelines for function placement in tables with some special cases. Many of these guidelines below are obsolete if the tables defined in the HTML business function library, or the ALV control (ABAP list viewer) are used.
Functions on Tables
Pushbuttons Outside of Tables
Place pushbuttons for functions that act on whole table below the table. For long, scrolling tables place the pushbuttons above the table and repeat them below the table (for details see Pushbuttons - Placement and Look).
If there are variants of a function (e.g. different sort functions), use menu buttons for the variants (possible with the ALV grid control).
Figure 1: Functions acting on the whole table are placed below
the table and left-aligned, if the table is of fixed size; pushbuttons
acting on the whole screen, or area are placed below these buttons and
also left-aligned.
Figure 2: For scrolling tables place the pushbuttons acting on
the whole table above the table and repeat them below it.
Functions on Table Columns
Pushbuttons Referring to Columns
Some functions, for examples Sort, refer to certain columns. Place pushbuttons with small icons into the column headers to speed up interaction.
If there are alternative variants of a function (e.g. different sortings or calculations), consider to display only one icon at a time in order to save space, instead of displaying two or more icons in parallel.
Do not use more than three icons in a column header.
Hyperlinks in Column Headers
If it is evident what a function does, you can also use a hyperlink in the column header text.
Functions on Table Rows
Pushbuttons Outside of Tables
In pure HTML tables it is usually not possible to display the selection state of rows. If you can mark the selection state of rows - either through checkboxes in a special column or by highlighting a row - you can use pushbuttons above the table to initiate functions.
Note: This is a two-step approach. Other approaches work faster, but may be less evident.
Pushbuttons Referring to Rows
Small icons in separate columns can be used to initiate functions acting on rows. However, note that such columns can be visually distracting, especially if there is more than one column.
Figure 3: Example of using icons in a table (schematic table)
Note: Hyperlinks (see below) are less distracting and better recognized by users.
Hyperlinks in Columns
Hyperlinks in columns can be used to initiate functions acting on rows. However, often it is not evident what these functions will do.
Proposals for "evident" hyperlinks:
- A hyperlink in the item number column leads to a "detail" screen
- A hyperlink in the column requisition number leads to the requisition
Source: SAP Interaction Design Guide for Internet Application Components