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

For more information, see the respective guidelines:

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.

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

Elements and Controls

Implementation

Visual Design

  • Toolbar (visual design specification)
  • List (visual design specification)
  • Tree (visual design specification)

Elements and Controls

Implementation