QuickView

Introduction

The QuickView is a basis control for displaying a Thing overview. The QuickView appears as a small popup window with a short description of the related/referenced entity. The referenced entity is usually represented as a link but can be any control.

A QuickView can be attached to any SAPUI5 control as a tooltip.

The QuickView control has the following properties and aggregations:

There is also a set of toolbar-related properties and aggregations:

Note: do not attach a QuickView to a control inside of another Callout, QuickView, Menu, or a DropDownBox. This is not user-friendly, may lead to unpredictable results and is not supported.

Basic example

The simplest way to create a QuickView is to instantiate a new sap.ui.ux3.QuickView control and set it as a tooltip to a reference control like in the code sample below. Application must fill corresponding properties and provide content for the QuickView:

Data binding

Usually, properties of a QuickView are not assigned directly but are bound to a DataModel. The following example creates a template button with an attached QuickView and binds corresponding fields of DataModel to control properties. The template is then used to display all rows of the provided data array in a rows list of a matrix layout:

Data Collection QuickView

One of possible uses of a QuickView can be a list of entities/links that are related to the referenced Thing. It could be provided in a table-like form like in the sample below. Coding is essentially the same as in case of normal QuickViews:

Toolbar

The Toolbar offers a set of the predefined actions (update, follow, favorite, flag, and open). Though the actions have predefined semantics (for example, the "open" action means opening a Thing Inspector window), application must implement corresponding actions handlers for the actionSelected and feedSubmit events. Application may also add own custom actions (see sap.ui.ux3.ThingAction) that are displayed in a drop-down menu at the right side of the toolbar.

If the toolbar is not required and should be hidden, set the showActionBar property of the QuickView control to false, as in the example for DataCollection QuickView above.

Navigation events

Normally, the browser opens a new page when a user clicks on a link inside of a QuickView. Application may subscribe to the navigate event and override the browser navigation by calling event.preventDefault().

Keyboard and ARIA support

QuickView provides accessibility support in its header area. However, the application should provide the keyboard navigation functionality and corresponding ARIA roles in the custom content of the QuickView. The above samples provide example code in the form of setKeyboardNavigation() function for keyboard navigation in lists.

Size of the QuickView window

Width of a QuickView window is 270 pixel by default. You may set another value in the width property prior to opening a QuickView. It is also possible to override the .sapUiUx3QV CSS class by a custom value.

Height of a QuickView window is defined by content. Though the QuickView window tries to find a position so that it is completely visible on the screen, it is not guaranteed in case of very big QuickViews. Do not provide content that is more than 7-10 lines of text in height.

API Documentation

See API documentation