Updated: July 15, 2021

Standard List Item

sap.m.StandardListItem

Intro

The standard list item is a type of list item used in simple lists. You can use it to display a simple data point (title) or a set of data, such as a product title and a few product attributes.

Standard list item with title only
Standard list item with title only
Standard list item with image, title, and short description
Standard list item with image, title, and short description

Usage

Use the standard list item if:

  • You want to display a simple set of data in a list.
  • You want to display a simple set of data as part of a list within the select dialog.

Do not use the standard list item if:

Components

The standard list item can consist of the following parts:

  • Title (mandatory). By default, the title font is larger if there’s no description. If you have list items with and without a description, this results in differently sized titles that are harder to read. In this case, switch off the title size adaptation (property: AdaptTitleSize).
  • Visual: icon or image (optional): Either displayed in the form of an icon from the SAP icon font or as an image.
  • Short description (optional).
  • Status (optional): This semantic information is equivalent to the object status. It’s usually displayed as colored text and displays the status. Keep the status text as short as possible.
    As an alternative, you can invert the display to place a stronger focus on the status
    (property: infoState). Use the inverted display only if the status is critical for your use case and requires immediate action.
Standard list item with all options (image, title, short description, status)
Standard list item with all options (image, title, short description, status)

Responsiveness

The title and short description can wrap and truncate. However, we recommend keeping the text as short as possible. The semantic information text is always displayed in full.

Standard list item with a truncated title
Standard list item with a truncated title
Standard list item with wrapped and truncated title and description
Standard list item with wrapped and truncated title and description

Behavior and Interaction

The list item behavior is identical for all list item types. For more information, see the interaction details in the list overview article.

Examples

Here are a few examples of standard list items:

Standard list items in a list
Standard list items in a list
Standard list item with a title and status
Standard list item with a title and status
Standard list item with a title and short description
Standard list item with a title and short description
Standard list item with a counter in list selection
Standard list item with a counter in list selection
Standard list item with an icon, title, and short description
Standard list item with an icon, title, and short description
Standard list item with an icon, title, short description, and checkbox for selection
Standard list item with an icon, title, short description, and checkbox for selection
Borderless standard list item
Borderless standard list item

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation