Components/List/Standard

fd-list · 17 examples from SAP's documentation · Back to the gallery

About

In SAP, we distinguish between tables and lists. Both usually contain homogeneous data, but lists generally have rather basic data, while the data in tables tend to be more complex. Lists are mostly used in the master list for a master-detail scenario using the flexible column layout, as well as in **Popovers** or **Dialogs**.

**Use the standard list if:** - You want to display a homogeneous set of basic data. - You need to sort, group, or filter simple datasets. - You need to display a single-level hierarchy rather than using a complex tree table to support this simple use case. **Do not use the standard list if:** - You want to manage complex datasets that need to be extensively sorted, grouped, filtered, or edited. In this case, use a **Table**. - You work with complex hierarchies. In this case, use a **Tree**. **Use the standard list if:** - You want to display a homogeneous set of basic data. - You need to sort, group, or filter simple datasets. - You need to display a single-level hierarchy rather than using a complex tree table to support this simple use case. - You want to manage complex datasets that need to be extensively sorted, grouped, filtered, or edited. In this case, use a **Table**. - You work with complex hierarchies. In this case, use a **Tree**.

Default

The default standard list displays list items in the standard size, which is ideal for mobile. To display the standard list in compact mode (for desktop), add the \

  • List item 1
  • List item 2
  • List item 3
  • List item 4

Unread

The \

Unread Options

  • List item 1 Unread
  • List item 2 Unread
  • List item 3 Read
  • List item 4 Read

Interactive

The \

Interactive Items

  • Regular State
  • Hover State
  • Down/Active State
  • Selected State
  • Hover on Selected State
  • Focus State
  • Focus Selected State

Navigation

Standard list items can contain navigation links. To add navigation, add the \

Buttons

  • List item 1
  • List item 1
  • List item 2

Navigation indicators

If only a subset of the list items is navigable you should indicate them with an arrow icon. To display navigation indicators, add the \

Action

Standard list items can display actions that users can choose from. To display actions, add the \

Standard

Action List item with other list items

  • List Item 1
  • List Item 2
  • List Item 3

Growing List Item with Busy Indicator

  • List Item 1
  • List Item 2
  • List Item 3

Secondary data

To display secondary data in standard list items, add a span element with \

  • List item 1 Neutral Status
  • List item 2 Positive Status
  • List item 3 Critical Status
  • List item 4 Negative Status
  • Wrapping Rules for Long Text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Informative Status Wrapping Rules for Long Text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

ItemCounter

The item counter is vertically aligned within the list item, to the right. The maximum number of digits is 5. In case of more digits, the formatting and the transformation is left to the applications. It's recommended to avoid combining item counter to other list variations and status texts.

  • List item 1 12345
  • List item 2 12345
  • List item 3 12345
  • List item 4 12345

Icon

To display an icon inside standard list items, add the \

  • List item 1
  • List item 2
  • List item 3
  • List item 4

Group

Standard list items can be displayed with headers, separating the items into groups. To add group headers, add the \

  • Group header 1
  • List item 1
  • List item 2
  • List item 3
  • Group header 2
  • List item 4
  • List item 5
  • List item 6

Footer

The standard list can display a footer by adding a span element with an \

  • List item 1
  • List item 2
  • List item 3
  • List item 4
Footer text

Borderless

To display a borderless standard list, add the \

  • List item 1
  • List item 2
  • List item 3
  • List item 4

Selection

Standard list items can display checkboxes that users can select from. To display standard list items with selection, add the \

  • List item 1
  • List item 2
  • List item 3

Inactive

Some list item can be made inactive, to make it non-clickable.

Infinite scroll

If height for list is fixed and there are more list otem to show, then we should be able to scroll to next list items.

  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5
  • List item 6
  • List item 7
  • List item 8
  • List item 9
  • List item 10
  • List item 11
  • List item 12

SearchResults

To be used in a popover containing sophisticated search results.