Class sap.f.AvatarModule: sap/f/Avatar

extends Control

An image-like control that has different display options for representing images, initials, and icons.

Overview

The Avatar control allows the usage of different content, shapes, and sizes depending on the use case.

The content types that can be displayed are either images, icons, or initials. The shape can be circular or square. There are several predefined sizes, as well as an option to set a custom size.

Usage

Up to two Latin letters can be displayed as initials in an Avatar. If there are more than two letters, or if there's a non-Latin character present, a default image placeholder will be created.

There are two options for how the displayed image can fit inside the available area:

  • Cover - the image is scaled to cover all of the available area
  • Contain - the image is scaled as large as possible while both its height and width fit inside the avalable area

Note: To set a custom size for the Avatar, you have to choose the Custom value for the displaySize property. Then, you have to set both the customDisplaySize and customFontSize properties.


Since: 1.46.
Constructor Summary
new sap.f.Avatar(sId?, mSettings?)Constructor for a new Avatar.
Event Summary
press(oControlEvent)Fired when the user selects the control.
Events borrowed from class sap.ui.core.Control
Method Summary
sap.f.Avatar.extend(sClassName, oClassInfo?, FNMetaImpl?)Creates a new subclass of class sap.f.Avatar with name sClassName and enriches it with the information contained in oClassInfo.
sap.f.Avatar.getMetadata()Returns a metadata object for class sap.f.Avatar.
attachPress(oData?, fnFunction, oListener?)Attaches event handler fnFunction to the press event of this sap.f.Avatar.
bindDetailBox(oBindingInfo)Binds aggregation detailBox to model data.
destroyDetailBox()Destroys the detailBox in the aggregation detailBox.
detachPress(fnFunction, oListener)Detaches event handler fnFunction from the press event of this sap.f.Avatar.
firePress(mParameters?)Fires event press to attached listeners.
getCustomDisplaySize()Gets current value of property customDisplaySize.
getCustomFontSize()Gets current value of property customFontSize.
getDetailBox()Gets content of aggregation detailBox.
getDisplayShape()Gets current value of property displayShape.
getDisplaySize()Gets current value of property displaySize.
getImageFitType()Gets current value of property imageFitType.
getInitials()Gets current value of property initials.
getSrc()Gets current value of property src.
setCustomDisplaySize(sCustomDisplaySize)Sets a new value for property customDisplaySize.
setCustomFontSize(sCustomFontSize)Sets a new value for property customFontSize.
setDetailBox(oLightBox)Sets the detailBox aggregation.
setDisplayShape(sDisplayShape)Sets a new value for property displayShape.
setDisplaySize(sDisplaySize)Sets a new value for property displaySize.
setImageFitType(sImageFitType)Sets a new value for property imageFitType.
setInitials(sInitials)Sets a new value for property initials.
setSrc(sSrc)Sets a new value for property src.
unbindDetailBox()Unbinds aggregation detailBox from model data.
Constructor Detail
new sap.f.Avatar(sId?, mSettings?)

Constructor for a new Avatar.

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

The supported settings are:

  • Properties

  • Aggregations

  • Events

    • press : fnListenerFunction or [fnListenerFunction, oListenerObject] or [oData, fnListenerFunction, oListenerObject]

In addition, all settings applicable to the base type sap.ui.core.Control can be used as well.

Parameters:
stringsId?ID for the new control, generated automatically if no ID is given
objectmSettings?Initial settings for the new control
Event Detail
press(oControlEvent)
Fired when the user selects the control.
Parameters:
sap.ui.base.EventoControlEvent
sap.ui.base.EventProvideroControlEvent.getSource
objectoControlEvent.getParameters
Method Detail
sap.f.Avatar.extend(sClassName, oClassInfo?, FNMetaImpl?): function

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

oClassInfo might contain the same kind of information as described in sap.ui.core.Control.extend.

Parameters:
stringsClassNameName of the class being created
objectoClassInfo?Object literal with information about the class
functionFNMetaImpl?Constructor function for the metadata object; if not given, it defaults to sap.ui.core.ElementMetadata
Returns:
functionCreated class / constructor function
sap.f.Avatar.getMetadata(): sap.ui.base.Metadata
Returns a metadata object for class sap.f.Avatar.
Returns:
sap.ui.base.MetadataMetadata object describing this class
attachPress(oData?, fnFunction, oListener?): sap.f.Avatar

Attaches event handler fnFunction to the press event of this sap.f.Avatar.

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.f.Avatar itself.

Fired when the user selects the control.

Parameters:
objectoData?An application-specific payload object that will be passed to the event handler along with the event object when firing the event
functionfnFunctionThe function to be called when the event occurs
objectoListener?Context object to call the event handler with. Defaults to this sap.f.Avatar itself
Returns:
sap.f.AvatarReference to this in order to allow method chaining
bindDetailBox(oBindingInfo): sap.f.Avatar

Binds aggregation detailBox to model data.

See ManagedObject.bindAggregation for a detailed description of the possible properties of oBindingInfo.

Parameters:
objectoBindingInfoThe binding information
Returns:
sap.f.AvatarReference to this in order to allow method chaining
Since:
1.48
destroyDetailBox(): sap.f.Avatar
Destroys the detailBox in the aggregation detailBox.
Returns:
sap.f.AvatarReference to this in order to allow method chaining
Since:
1.48
detachPress(fnFunction, oListener): sap.f.Avatar

Detaches event handler fnFunction from the press event of this sap.f.Avatar.

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

Parameters:
functionfnFunctionThe function to be called, when the event occurs
objectoListenerContext object on which the given function had to be called
Returns:
sap.f.AvatarReference to this in order to allow method chaining
firePress(mParameters?): sap.f.Avatar
Fires event press to attached listeners.
Parameters:
objectmParameters?Parameters to pass along with the event
Returns:
sap.f.AvatarReference to this in order to allow method chaining
getAccessibilityInfo()
See:
sap.ui.core.Control#getAccessibilityInfo
getCustomDisplaySize(): sap.ui.core.CSSSize

Gets current value of property customDisplaySize.

Specifies custom display size of the Avatar.

Note: It takes effect if the displaySize property is set to Custom.

Default value is 3rem.

Returns:
sap.ui.core.CSSSizeValue of property customDisplaySize
getCustomFontSize(): sap.ui.core.CSSSize

Gets current value of property customFontSize.

Specifies custom font size of the Avatar.

Note: It takes effect if the displaySize property is set to Custom.

Default value is 1.125rem.

Returns:
sap.ui.core.CSSSizeValue of property customFontSize
getDetailBox(): sap.m.LightBox

Gets content of aggregation detailBox.

A sap.m.LightBox instance, that will be opened automatically when the user interacts with the Avatar control.

The press event will still be fired.

Returns:
sap.m.LightBox
Since:
1.48
getDisplayShape(): sap.f.AvatarShape

Gets current value of property displayShape.

Defines the shape of the Avatar.

Default value is Circle.

Returns:
sap.f.AvatarShapeValue of property displayShape
getDisplaySize(): sap.f.AvatarSize

Gets current value of property displaySize.

Sets a predefined display size of the Avatar.

Default value is S.

Returns:
sap.f.AvatarSizeValue of property displaySize
getImageFitType(): sap.f.AvatarImageFitType

Gets current value of property imageFitType.

Specifies how an image would fit in the Avatar.

Default value is Cover.

Returns:
sap.f.AvatarImageFitTypeValue of property imageFitType
getInitials(): string

Gets current value of property initials.

Defines the displayed initials.

Returns:
stringValue of property initials
getSrc(): sap.ui.core.URI

Gets current value of property src.

Determines the path to the desired image or icon.

Returns:
sap.ui.core.URIValue of property src
setCustomDisplaySize(sCustomDisplaySize): sap.f.Avatar

Sets a new value for property customDisplaySize.

Specifies custom display size of the Avatar.

Note: It takes effect if the displaySize property is set to Custom.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 3rem.

Parameters:
sap.ui.core.CSSSizesCustomDisplaySizeNew value for property customDisplaySize
Returns:
sap.f.AvatarReference to this in order to allow method chaining
setCustomFontSize(sCustomFontSize): sap.f.Avatar

Sets a new value for property customFontSize.

Specifies custom font size of the Avatar.

Note: It takes effect if the displaySize property is set to Custom.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 1.125rem.

Parameters:
sap.ui.core.CSSSizesCustomFontSizeNew value for property customFontSize
Returns:
sap.f.AvatarReference to this in order to allow method chaining
setDetailBox(oLightBox): object
Sets the detailBox aggregation.
Parameters:
sap.m.LightBox|undefinedoLightBoxInstance of the LightBox control or undefined
Returns:
objectthis for chaining
Since:
1.48
setDisplayShape(sDisplayShape): sap.f.Avatar

Sets a new value for property displayShape.

Defines the shape of the Avatar.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is Circle.

Parameters:
sap.f.AvatarShapesDisplayShapeNew value for property displayShape
Returns:
sap.f.AvatarReference to this in order to allow method chaining
setDisplaySize(sDisplaySize): sap.f.Avatar

Sets a new value for property displaySize.

Sets a predefined display size of the Avatar.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is S.

Parameters:
sap.f.AvatarSizesDisplaySizeNew value for property displaySize
Returns:
sap.f.AvatarReference to this in order to allow method chaining
setImageFitType(sImageFitType): sap.f.Avatar

Sets a new value for property imageFitType.

Specifies how an image would fit in the Avatar.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is Cover.

Parameters:
sap.f.AvatarImageFitTypesImageFitTypeNew value for property imageFitType
Returns:
sap.f.AvatarReference to this in order to allow method chaining
setInitials(sInitials): sap.f.Avatar

Sets a new value for property initials.

Defines the displayed initials.

When called with a value of null or undefined, the default value of the property will be restored.

Parameters:
stringsInitialsNew value for property initials
Returns:
sap.f.AvatarReference to this in order to allow method chaining
setSrc(sSrc): sap.f.Avatar

Sets a new value for property src.

Determines the path to the desired image or icon.

When called with a value of null or undefined, the default value of the property will be restored.

Parameters:
sap.ui.core.URIsSrcNew value for property src
Returns:
sap.f.AvatarReference to this in order to allow method chaining
unbindDetailBox(): sap.f.Avatar
Unbinds aggregation detailBox from model data.
Returns:
sap.f.AvatarReference to this in order to allow method chaining
Since:
1.48