Texts, Lists, Links

Using Text in iViews | Lists | Links

Using Text in iViews

iViews can contain textual information (see example). Use the HTMLB text view control to present text in different styles. For details on the text view control see the SAP Portals HTMLB Guidelines.

Note: The text View control must not be used to create a label for input fields; use the HTMLB label control instead.

Use

The text in the control is restricted to a single font, size and style unless manually set with HTML commands. The text size can be set using different styles (see Text Styles below)

Also note that if you occupy a certain area on the screen for a text view control you should reserve enough space for the translation to other languages. Text in other languages may use up to 30% more space than needed in English.

Text Styles

The text view control offers several text styles, which are set by the attribute design (values STANDARD, EMPHASIZED, REFERENCE, LEGEND, HEADER1, HEADER2, HEADER3).

Text Style Use
used to display body text
used to display emphasized text e.g. phrases, single terms; not to be used for complete text areas; text size "Standard"
Style for Text Used as a Reference; text size "Standard"
used to display a legend or small-size help text; text size -2 in comparison to "Standard"
used to display a headline or page title; text size +4 in comparison to "Standard"
used to display a page subtitle; text size +2
used to display a subtitle; text size "Standard"

Table 1: Text styles offered for the text view control and their use

 

Lists

Lists are an alternative to the PortalDataViewer or other types of tables (e.g. the HTMLB table view). Use lists whenever you want to present a list of items in an unobtrusive way, where reading is the primary usage and where there is - apart from hyperlinks - no interaction on the list elements.

Note: Use the HTMLB item list control for implementing lists if possible; there is an ordered and an unordered item list available. See the SAP Portals HTMLB Guidelines for details.

Lists have the following characteristics:

  • List items are read-only.
  • List items may contain links.
  • Lists do not scroll. Therefore make sure that all list items fit the iView!
  • Lists consist of one column only; for multiple columns include the lists in an HTML table with one row and several columns (2-3).
  • Lists may be ordered (numbers) or unordered (bullets).
  • Lists may be nested; do not use more than 2-3 levels!

Examples

Below you find an example for an ordered and an unordered list implemented as HTMLB controls.

Ordered List

Unordered List

example of a numbered list example of a bulleted list

Figure 2: Ordered (left) and unordered list (right)

 

Links

A link (hyperlink, hypertext link) is a word, text phrase, image, image section, or icon that transfers the user to a different page or section on the same page. Links point to one specific target (there exist linking services on the Web, which provide users with a selection of targets).

Note: Use the HTMLB link control for implementing links if possible. For details see the SAP Portals HTMLB Guidelines.

Visual Design of Links

Currently, links are not underlined, but show a hovering effect with underlining when the mouse is moved over the link. In the future, different link types may be offered, such with underlined text and such, where text is not underlined.

Reasoning: Within longer text passages, links are hard to find if they are not underlined. Link lists, on the other hand are hard to read if all links are underlined.

In addition, users should be able to override the link settings according to their personal preferences and needs.

Long Text Links

Format only a characteristic part of the text passage as link which clearly describes the target of the link; if one word suffices, use just one word. Avoid underlining more than one line.

Link Types

Although there is only one link type from a technical point of view, we must make a distinction between the various kinds of links. This helps to establish usage rules for links and to make a distinction between buttons and links. Based on what purpose the links serve, we can establish five different types of content area links: view switch, toggle, drill-down, function, and navigation.

  • View Switch Links
    View switch links are similar in function to toggle links, but are different in that they are always visible. The view switch links are an alternative to the tabstrip control (see Selecting Views for details). This type of link is similar to the navigation link. As opposed to navigation links, view switch links all refer to the same context and must be persistent in all the views. The currently selected view should not be presented as a link, but as bold text. View switch links should be separated from one another by a vertical line ("|").
  • Toggle Links
    Toggle links are used when there are two alternative views of the current data. Toggle links are always pairs of links, but only one is visible at a time.
  • Drill-Down Links
    A drill-down link allows a user to see more detailed or specific information. For example, in the overview of an address book, the contact names are drill-down links that allow the user to access details on that person.
  • Function Links
    A function link allows the user to carry out an action. Although in general buttons should be reserved for functions (see Links vs. Buttons for more information), there may be cases where a link would be preferable or where the distinction between a function and a link to another view might be very blurry.
  • Navigation Links
    Many times, there will be navigation within an iView or application which is independent of the main navigation of the portal. End users might not even perceive these links as "navigation" per se. Navigation links allow users to move backwards or forwards though a data set or process.

Links vs. Buttons

In general, use links to indicate navigation to another HTML page or to a different view of the current information as well as to link to further or more detailed information. Links commonly appear within the context of the application (within trees, tables or text).

Use buttons to indicate that a function can be carried out (save, print, close, delete, etc.) or that a process can be started (subscribe, etc.). Buttons generally appear at the bottom left of a grouped area to indicate a function that can either be performed on selected items (if checkboxes appear as well) or that apply to the whole screen (see Buttons for details on button placement).
Figure 3: Example of an iView where links and buttons are both used

 

top top

Source:  SAP iView Guidelines