Feed List Item

sap.m.FeedListItem

Intro

The sap.m.FeedListItem is capable of displaying unformatted text accompanied by an optional user image. Together with the sap.m.FeedInput control, it makes a simple feed or notes control.

Responsiveness & Adaptiveness

Its responsive behavior allows the feed list item to appear in both, small and large containers, or screens.

Feed - Size S

Feed - Size M

Feed - Size L

When the width of the available space falls below 25 rem (e.g. portrait mode on smartphones), the feed list item responds as follows.

The user’s name, image, and the time stamp move on top of the text. If there is no image, the name and time stamp are left-aligned together with the text.

Feed list item - Responsiveness - With image

Feed list item - Responsiveness - Without image

Layout

The feed list item consists of the user’s name and an optional picture of the user who wrote the note/ update (optional). The name can contain a link that triggers a quick overview of the user’s profile data. The actual text written by the user follows the name. Below is separate byline that can hold a time stamp and an attribute in the form of free text. This allows apps to put in their own attribute (e.g. approval etc.). Both time stamp and attribute are optional.

In case the name is a link, the picture should also be linked with the same attributes.

Feed list item_01

If the user does not have a picture assigned, a placeholder is shown instead:

Feed list item_02

Name (and picture) can also be read-only, i.e. without a link:

Feed list item_03

In case the app does not support user images at all, they can be omitted:

Feed list item_04

Here, too, the name can be read-only:

Feed list item_05

Information

The list of feed list items can only be homogeneous. This means all items need to be of the same type: all of them with a picture and linked name or all of them without a picture and a plain name. Any of the above is possible as long as all items have the same layout/ visualization.

Components

The feed list item itself does not contain multiple components. However, to create a simple feed or notes container, it can be combined with the sap.m.FeedInput control.

Behavior & Interaction

Show More Text

When the text exceeds a certain amount of characters (default value can be overwritten by apps), the rest of the text is truncated and a More link appears after the truncated section.

Initially the More link is grey, so it does not divert attention from the actual text.

When the user moves the mouse over the feed chunk, the More link is highlighted.

Hovering over the link underlines it.