Intro
You can use the smart list control to create lists or trees.
Smart list as list
Smart list as tree
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
Smart list used as a tree:
(1) An overflow toolbar on the top
(3) Tree control below
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 M
Responsive list - Size L
Responsive tree - Size S
Responsive tree - Size M
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.
More guidelines and tips for each component of the smart list
Related Links
Elements and Controls
- Overflow Toolbar (Guideline)
- List (Guideline)
- Tree (Guideline)
Implementation
- Smart List (SAPUI5 samples)
- Smart List (SAPUI5 API reference)
Elements and Controls
- Overflow Toolbar (Guideline)
- List (Guideline)
- Tree (Guideline)
Implementation
- Smart List (SAPUI5 samples)
- Smart List (SAPUI5 API reference)