Updated: February 22, 2023

Smart List

sap.ui.comp.smartlist.SmartList

Intro

You can use the smart list control to create lists or trees.

Smart list as list
Smart list as list
Smart list as tree
Smart list as tree
Information
Unlike most smart controls, the smart list does not use annotations to create the content automatically.

When to Use

You can use the smart list if you use an OData service for your app (OData version 2 only).

For detailed recommendations on when to use a list or a tree, see the corresponding guideline articles:

Components

The smart list control consists of an overflow toolbar (1) in combination with either the list control (2) or the tree control (3).

Smart list used as a list:

(1) An overflow toolbar on the top
(2) List control below

List components
List components

Smart list used as a tree:

(1) An overflow toolbar on the top
(3) Tree control below

Tree components
Tree components

Behavior and Interaction

The individual controls mentioned in the Components section behave exactly as they would on their own.

For more information, see the respective guidelines:

Responsiveness

Both smart list variants are responsive. Each embedded control behaves as specified.

The following schematic examples show how list and tree use cases appear on different devices.

Responsive list - Size S
Responsive list - Size S
Responsive list - Size M
Responsive list - Size M
Responsive list - Size L
Responsive list - Size L
Responsive tree - Size S
Responsive tree - Size S
Responsive tree - Size M
Responsive tree - Size M
Responsive tree - Size L
Responsive tree - Size L

Top Tips

List or tree? What you should consider

Due to their one-dimensional layout, lists are much easier for users to grasp than trees. First consider if you can use a list to present your data. Only use a tree if your data requires a hierarchy. Make sure that the nodes are clearly labeled and that information is not nested too deeply.

Developer Hint
The listType property controls whether the smart list presents itself as a list or tree. It must be appended by either List or Tree to work.

More guidelines and tips for each component of the smart list

  • Guidelines and tips for toolbars
  • Guidelines and tips for lists
  • Guidelines and tips for trees

Related Links

Elements and Controls

Implementation