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 avatar next to the title and subtitle. Additionally, groups and fields are used to structure the information. When a field is empty, the “–” character shows.

You can use the fallbackIcon property to define a backup icon. This icon is displayed if the initial avatar can’t be loaded.

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.

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.