Pattern Library/Display Data

MPDL

=Display many Items (Item Lists)=

eSciDoc lists are role dependent and can appear in two varieties. Lists appear differently depending on available roles (Public, Logged in). A defined area of the list is available for role dependent information and actions to keep consistency of layout and usage across different roles. Additionally users can choose between two list types (Bibliographic and Grid). One type can be used as default type for logged in users.


 * 1) DD-BL Bibliographic List
 * 2) Display type short
 * 3) Display type medium
 * 4) DD-GL Grid List

Paginator and actions can appear repeatedly on top and bottom of the list display because such lists can exceed the display area. If items on a list can be manipulated, the list display has actions and selection controls attached additionally. Within this document a 'list of items' means all records retrieved. The term 'page' only refers to all items in the browser window.

'List Entries' are listed below more detailed.

Components
The bibliographic list display has to balance metadata display and the number of items per screen. To give a choice between more metadata or less, users can switch between those two views. Users, who are not logged in, see the bibliographic list short as default.

Bibliographic lists provide two display length: Short and medium. A short display provides up to five 'List Entries'. The medium view provides more (TBD ???) metadata (e.g. Source Genre).



Bibliographic lists provide the following set of patterns


 * 1) A list header with role dependent area (WS: Workspace)
 * 2) Display type
 * 3) Additional filter options (optional)
 * 4) Multiselect (optional)


 * 1) A list body with role dependent area (WS: Workspace)
 * 2) List Entry
 * 3) Entry Header
 * 4) Entry Body
 * 5) Actions (WS: Workspace)
 * 6) Selection controls (optional)

List Header (Bibliographic)
The list header appears as a horizontal bar above the list.



Display Types

Bibliographic lists provide two display length: Short and medium. A short display provides up to five 'List Entries'. The medium view provides more metadata (e.g. Source Genre).

Multiselect (optional)

If multiselect is available (e.g. Export) the header provides the following select options:


 * Inverse selection
 * Select methods: 'All within one page', 'all within the whole result set'
 * A select counter (Since users usually is occupied with rating items by importance he can not keep track how many items have been selected after working on different pages of the list)

Sort options are not part of the header for bibliographic view. They are located within an additional menu in the application layout (see TBD...). Default sorting is by date published (descending). Sorting is the most important technique to refine a list of records. The list can be sorted by alternative criteria (see PubMan_Sorting):


 * 1) Sorting
 * 2) Display of sort order and direction
 * 3) Option to change sort order and direction
 * 4) Cascaded sorting (optional)

Examples for headers

List Body (Bibliographic)


The list body below is separated from the list header above and contains one or more 'List Entries' (select options not displayed here). The medium view provides more 'List Entries'. Each 'List Entry' contains:


 * 1) Entry Header (e.g. Title of item)
 * 2) Label (optional)
 * 3) Value
 * 4) Select mechanism (optional)
 * 5) Entry Body
 * 6) Label (optional)
 * 7) Value

An 'Entry Header' can optionally have a link attached.

List Entries
'List Entries' are ordered line by line. Each list entry appears as a paragraph. The sorting functionality must be kept apart from the list because sorting is hard to recognize due to missing columns.

List Entries' for different media (FACES, VIRR)

If unstructured media must be displayed a picture or thumbnail of the object is used. Placeholders can be of a size that does not allow a proper list table for display and structured data has to be displayed additionally to give the user a description about the item. The layout of these lists largely depends on the size of the picture/placeholder. For smaller placeholders a table is possible in which the picture spans one or more rows (see Grid List). For bigger placeholders it makes sense to let the items flow left to get as much on a page as possible.



Varieties and Examples
 * thumbnails included
 * highlighting
 * frames with further information on mouse hovering



DD-GL Grid List


The 'Grid List' can be used alternatively to the 'Bibliographic List' and has as well areas for workspace functionality attached. They come with at least two main elements:


 * 1) Table Header
 * 2) Column Titles
 * 3) Sort criteria
 * 4) Label => Sort order
 * 5) List Body
 * 6) Columns
 * 7) Rows with cells (Item)

Items appear row by row, structured by columns. 'List Header' and 'Table Header' need to be distinguished. If there is just one list shown a list header is not always necessary because table headers usually embed functions for sorting the list directly. As long titles and other metadata entries might not fit in one cell a lyer should be visible on hovering which displays the content. If a list body is used for display and a list header is also used, the sorting function should in any case be part of the table header. To have a clear understanding whether a table header offers the sorting function it should be made visible by a triangle symbol. A table header can have even more functionality in a future version:


 * Sorting
 * Field selection
 * Change Column Size
 * Change Column Order

A grid list can have multiselect option within the header and optionally select controls attached, succeeding each row.

Which Scenario fits?

Many items have to be displayed containing one or more short values. Values do not exceed a length of 20 Characters. The user is expected to look for relevant values or a set of values. He might want to compare items using values.

Pros and cons


 * + Common Use
 * - Cluttered Screen

Varieties and Examples

Behaviour
 * Instant grid filter
 * Layer for input field/filter
 * Draggable corners (if cells contain more than they can display)
 * Client side sorting
 * Resizable columns

=Display single Item (Detail View)=

Component View (Unstructured data only, e.g.Image Viewer)
=Display of Labels and Values=