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:
type
(mandatory) - Title of the QuickView that describes
the type of a Thing. Examples: Account, Employee, Material, Plant etc.firstTitle
- Name of the link to this particular Thing. The name text must distinguish
it from other Things with the same type.firstTitleHref
- Link to this particular Thing. It should open a extended view of
this Thing, normally in a Thing Inspector.icon
- Link to the Thing icon.secondTitle
- A short line of text that describes the particular Thing.content
(aggregation) - The content of the QuickView body must be provided
by the application.There is also a set of toolbar-related properties and aggregations:
showActionBar
- set to false to hide the toolbarfollowState, flagState, favoriteState
- State of the corresponding toolbar button.*Enabled
- Set any of these properties to false, if you need to disable a specific toolbar button.actionSelected
(event) - Event is fired when a toolbar button is pressed.feedSubmit
(event) - User has entered some text in the feed editor.actions
(aggregation) - Additional application-specific actions.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.
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:
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:
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:
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.
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()
.
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.
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.