Texts, Links, Lists

Visual Design of Links | Using Texts and Links in iViews | Long Text Links | Lists

Visual Design of Links

Currently links are not underlined, but show a hovering effect with underlining when the mouse is moved over the link.

Proposal
As users are used to underlined links on the web, the Workplace should enable users to set link attributes. This way they can decide whether they prefer underlining by default or on MouseOver.

Using Texts and Links in iViews

iViews can contain textual information (see example). Put texts within  tags in order to get the correct formatting.

The TextView Control can present text in very different ways:

Figure 1: Text displayed through the TextView Control

Proposal
The following text styles are proposed for use in iViews:

Text type	Look	Attributes	Usage
Header1	Large Headline	font-family:arial,sans-serif font size:large font-weight="bold"	Headline for field groups or text; for large headlines, used in news items*
header2	Medium Headline	font-family:arial,sans-serif font-size:medium font-weight="bold"	Subheadline for text
header3	Small Headline	font-family:arial,sans-serif font-size:small font-weight="bold"	Third headline level for text
text	This is normal text	font-family:arial,sans-serif font-size:small	Standard text
noneditabletext	This is noneditable text	font-family:arial,sans-serif font-size:medium color:gray	open
small	This is small text	font-family:arial,sans-serif font-size:small	Small text for legends, explanations, small field labels above i/o fields Unclear whether this style will be offered
<b> (tag)	bold text	bold, defined by using the <b> tag	Use bold within text for emphasizing words
<i> (tag)	italic text	italic, defined by using the <i> tag	Use italic within text for references; do not use italic for small text

Most of these style are predefined in the accompanying CSS style sheet for iViews. These styles can be used as class declarations inside HTML tags. They can also be implemented manually, if the SAP style sheets are not available. However, in such a case it is highly recommended to define an own style sheet and use these classes; this way maintainance is much easier. The styles for emphasizing text (bold, italic) are simple HTML tags (, ).

The same applies to hyperlinks. These, however, need not be enclosed in  tags on their own, because the <a> tags already do the correct formatting.

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.

Lists

Lists are an alternative to the PortalDataViewer or other types of tables. 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.

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

Ordered List	Unordered List