Intro
The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering.
Usage
Use the quick view if:
- You want to display a concise overview of an object.
- You want to display information about, for example, an employee or a company.
- You can split your information into groups (for example, contact details and company information).
Do not use the quick view if:
- You want to provide information in a way other than displaying it in groups.
- You want to display complex information about an object.
Responsiveness
The quick view is based on the popover. It therefore inherits the same basic properties from it and provides the same responsiveness. For more information, see popover.
Layout
Generic Quick View
The figure on the right shows how the content is structured within the quick view. At the top of the content area, you can display an image next to the title and subtitle. Additionally, groups and fields are used to structure the information.
Example of a generic quick view
Quick View Examples
You can create your own quick view element or, as with the two examples below show, there are also basic structures for displaying employee and company information in a quick view.
Example: Employee quick view
Example: Company quick view
Behavior and Interaction
The quick view is based on the popover. It therefore inherits the same basic properties from it and provides the same interaction. For more information, see popover.
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
- Popover (guidelines)
Implementation
- Quick View (SAPUI5 samples)
- Quick View (SAPUI5 API reference)
Visual Design
- Quick View (visual design specification)
Elements and Controls
- Popover (guidelines)
Implementation
- Quick View (SAPUI5 samples)
- Quick View (SAPUI5 API reference)