class sap.m.QuickView

Control sample: sap.m.QuickView
Visiblity: public
UX Guidelines: Quick View
Implements:
Available since: N/A
Module: sap/m/QuickView
Application Component: CA-UI5-CTR

A responsive popover that displays information on an object in a business-card format.

Overview

The quick view is used to show business information on either a person or an entity (e.g. a company). It uses a set of pre-defined controls. Objects can be linked together and you can navigate between several objects. An unlimited number of objects can be linked.

Structure

Each card is represented by a sap.m.QuickViewPage which holds all the information (avatar, title, header, description) for the object. A single quick view can hold multiple objects, each showing information on a single entity.

Usage

When to use

When not to use

Responsive Behavior

The quick view is displayed in a popover on desktop and a full-screen dialog on mobile devices.


Constructor

Constructor for a new QuickView.

Accepts an object literal mSettings that defines initial property values, aggregated and associated objects as well as event handlers. See sap.ui.base.ManagedObject#constructor for a general description of the syntax of the settings object.

new sap.m.QuickView(sId?, mSettings?)
Param Type Default Value Description
sId? string

ID for the new control, generated automatically if no ID is given

mSettings? object

Initial settings for the new control


Properties

Name Type Default Value Description
placement sap.m.PlacementType Right

This property is reused from sap.m.Popover and only takes effect when running on desktop or tablet. Please refer the documentation of the placement property of sap.m.Popover.

Visibility: public
width sap.ui.core.CSSSize 320px

The width of the QuickView. The property takes effect only when running on desktop or tablet.

Visibility: public

Borrowed Aggregations

Name Cardinality Type Description
pages 0..n sap.m.QuickViewPage

Displays a page header, object icon or image, object name with short description, and object information divided in groups


Events Overview

Event Description
afterClose

This event fires after the QuickView is closed.

afterOpen

This event fires after the QuickView is opened.

beforeClose

This event fires before the QuickView is closed.

beforeOpen

This event fires before the QuickView is opened.

afterClose

This event fires after the QuickView is closed.

Param Type Description
oControlEvent sap.ui.base.Event
getSource sap.ui.base.EventProvider
getParameters object
openBy sap.ui.core.Control

This parameter refers to the control, which opens the QuickView.

origin sap.m.Button

This parameter contains the control, which triggers the close of the QuickView. It is undefined when running on desktop or tablet.

afterOpen

This event fires after the QuickView is opened.

Param Type Description
oControlEvent sap.ui.base.Event
getSource sap.ui.base.EventProvider
getParameters object
openBy sap.ui.core.Control

This parameter refers to the control, which opens the QuickView.

beforeClose

This event fires before the QuickView is closed.

Param Type Description
oControlEvent sap.ui.base.Event
getSource sap.ui.base.EventProvider
getParameters object
openBy sap.ui.core.Control

This parameter refers to the control, which opens the QuickView.

origin sap.m.Button

This parameter contains the control, which triggers the close of the QuickView. It is undefined when running on desktop or tablet.

beforeOpen

This event fires before the QuickView is opened.

Param Type Description
oControlEvent sap.ui.base.Event
getSource sap.ui.base.EventProvider
getParameters object
openBy sap.ui.core.Control

This parameter refers to the control, which opens the QuickView.


Methods Overview

Method Description
attachAfterClose

Attaches event handler fnFunction to the afterClose event of this sap.m.QuickView.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.m.QuickView itself.

This event fires after the QuickView is closed.

attachAfterOpen

Attaches event handler fnFunction to the afterOpen event of this sap.m.QuickView.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.m.QuickView itself.

This event fires after the QuickView is opened.

attachBeforeClose

Attaches event handler fnFunction to the beforeClose event of this sap.m.QuickView.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.m.QuickView itself.

This event fires before the QuickView is closed.

attachBeforeOpen

Attaches event handler fnFunction to the beforeOpen event of this sap.m.QuickView.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.m.QuickView itself.

This event fires before the QuickView is opened.

close

Closes the QuickView.

detachAfterClose

Detaches event handler fnFunction from the afterClose event of this sap.m.QuickView.

The passed function and listener object must match the ones used for event registration.

detachAfterOpen

Detaches event handler fnFunction from the afterOpen event of this sap.m.QuickView.

The passed function and listener object must match the ones used for event registration.

detachBeforeClose

Detaches event handler fnFunction from the beforeClose event of this sap.m.QuickView.

The passed function and listener object must match the ones used for event registration.

detachBeforeOpen

Detaches event handler fnFunction from the beforeOpen event of this sap.m.QuickView.

The passed function and listener object must match the ones used for event registration.

sap.m.QuickView.extend

Creates a new subclass of class sap.m.QuickView with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.m.QuickViewBase.extend.

fireAfterClose

Fires event afterClose to attached listeners.

fireAfterOpen

Fires event afterOpen to attached listeners.

fireBeforeClose

Fires event beforeClose to attached listeners.

fireBeforeOpen

Fires event beforeOpen to attached listeners.

sap.m.QuickView.getMetadata

Returns a metadata object for class sap.m.QuickView.

getPlacement

Gets current value of property placement.

This property is reused from sap.m.Popover and only takes effect when running on desktop or tablet. Please refer the documentation of the placement property of sap.m.Popover.

Default value is Right.

getWidth

Gets current value of property width.

The width of the QuickView. The property takes effect only when running on desktop or tablet.

Default value is '320px'.

openBy

Opens the QuickView.

setPlacement

The method sets placement position of the QuickView.

setWidth

The method sets the width of the QuickView. Works only on desktop or tablet.

attachAfterClose

Attaches event handler fnFunction to the afterClose event of this sap.m.QuickView.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.m.QuickView itself.

This event fires after the QuickView is closed.

Param Type DefaultValue Description
oData object

An application-specific payload object that will be passed to the event handler along with the event object when firing the event

fnFunction function(sap.ui.base.Event) : void

The function to be called when the event occurs

oListener object

Context object to call the event handler with. Defaults to this sap.m.QuickView itself

attachAfterOpen

Attaches event handler fnFunction to the afterOpen event of this sap.m.QuickView.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.m.QuickView itself.

This event fires after the QuickView is opened.

Param Type DefaultValue Description
oData object

An application-specific payload object that will be passed to the event handler along with the event object when firing the event

fnFunction function(sap.ui.base.Event) : void

The function to be called when the event occurs

oListener object

Context object to call the event handler with. Defaults to this sap.m.QuickView itself

attachBeforeClose

Attaches event handler fnFunction to the beforeClose event of this sap.m.QuickView.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.m.QuickView itself.

This event fires before the QuickView is closed.

Param Type DefaultValue Description
oData object

An application-specific payload object that will be passed to the event handler along with the event object when firing the event

fnFunction function(sap.ui.base.Event) : void

The function to be called when the event occurs

oListener object

Context object to call the event handler with. Defaults to this sap.m.QuickView itself

attachBeforeOpen

Attaches event handler fnFunction to the beforeOpen event of this sap.m.QuickView.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.m.QuickView itself.

This event fires before the QuickView is opened.

Param Type DefaultValue Description
oData object

An application-specific payload object that will be passed to the event handler along with the event object when firing the event

fnFunction function(sap.ui.base.Event) : void

The function to be called when the event occurs

oListener object

Context object to call the event handler with. Defaults to this sap.m.QuickView itself

close

Closes the QuickView.

detachAfterClose

Detaches event handler fnFunction from the afterClose event of this sap.m.QuickView.

The passed function and listener object must match the ones used for event registration.

Param Type DefaultValue Description
fnFunction function(sap.ui.base.Event) : void

The function to be called, when the event occurs

oListener object

Context object on which the given function had to be called

detachAfterOpen

Detaches event handler fnFunction from the afterOpen event of this sap.m.QuickView.

The passed function and listener object must match the ones used for event registration.

Param Type DefaultValue Description
fnFunction function(sap.ui.base.Event) : void

The function to be called, when the event occurs

oListener object

Context object on which the given function had to be called

detachBeforeClose

Detaches event handler fnFunction from the beforeClose event of this sap.m.QuickView.

The passed function and listener object must match the ones used for event registration.

Param Type DefaultValue Description
fnFunction function(sap.ui.base.Event) : void

The function to be called, when the event occurs

oListener object

Context object on which the given function had to be called

detachBeforeOpen

Detaches event handler fnFunction from the beforeOpen event of this sap.m.QuickView.

The passed function and listener object must match the ones used for event registration.

Param Type DefaultValue Description
fnFunction function(sap.ui.base.Event) : void

The function to be called, when the event occurs

oListener object

Context object on which the given function had to be called

sap.m.QuickView.extend

Creates a new subclass of class sap.m.QuickView with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.m.QuickViewBase.extend.

Param Type DefaultValue Description
sClassName string

Name of the class being created

oClassInfo object

Object literal with information about the class

FNMetaImpl function

Constructor function for the metadata object; if not given, it defaults to the metadata implementation used by this class

fireAfterClose

Fires event afterClose to attached listeners.

Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

openBy sap.ui.core.Control

This parameter refers to the control, which opens the QuickView.

origin sap.m.Button

This parameter contains the control, which triggers the close of the QuickView. It is undefined when running on desktop or tablet.

fireAfterOpen

Fires event afterOpen to attached listeners.

Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

openBy sap.ui.core.Control

This parameter refers to the control, which opens the QuickView.

fireBeforeClose

Fires event beforeClose to attached listeners.

Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

openBy sap.ui.core.Control

This parameter refers to the control, which opens the QuickView.

origin sap.m.Button

This parameter contains the control, which triggers the close of the QuickView. It is undefined when running on desktop or tablet.

fireBeforeOpen

Fires event beforeOpen to attached listeners.

Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

openBy sap.ui.core.Control

This parameter refers to the control, which opens the QuickView.

sap.m.QuickView.getMetadata

Returns a metadata object for class sap.m.QuickView.

getPlacement

Gets current value of property placement.

This property is reused from sap.m.Popover and only takes effect when running on desktop or tablet. Please refer the documentation of the placement property of sap.m.Popover.

Default value is Right.

getWidth

Gets current value of property width.

The width of the QuickView. The property takes effect only when running on desktop or tablet.

Default value is '320px'.

openBy

Opens the QuickView.

Param Type DefaultValue Description
oControl sap.ui.core.Control

The control which opens the QuickView.

setPlacement

The method sets placement position of the QuickView.

Param Type DefaultValue Description
sPlacement sap.m.PlacementType

The side from which the QuickView appears relative to the control that opens it.

setWidth

The method sets the width of the QuickView. Works only on desktop or tablet.

Param Type DefaultValue Description
sWidth sap.ui.core.CSSSize

The new width of the QuickView.