Displays a group of avatars arranged horizontally. It is useful to visually showcase a group of related avatars, such as, project team members or employees.
The control allows you to display the avatars in different sizes, depending on your use case.
The AvatarGroup
control has two group types:
Group
type: The avatars are displayed as partially overlapped on top of each other and the entire group has one click/tap area.Individual
type: The avatars are displayed side-by-side and each avatar has its own click/tap area.When the available space is less than the width required to display all avatars, an overflow visualization appears as a button placed at the end with the same shape and size as the avatars. The visualization displays the number of avatars that have overflowed and are not currently visible.
Use the AvatarGroup
if:
Do not use the AvatarGroup
if:
Constructor for a new AvatarGroup
.
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.f.AvatarGroup(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 |
Name | Type | Default Value | Description |
---|---|---|---|
avatarDisplaySize | sap.m.AvatarSize | S | Defines the display size of each avatar. Visibility: public |
groupType | sap.f.AvatarGroupType | Group | Defines the mode of the |
Default Aggregation: items
Name | Cardinality | Type | Description |
---|---|---|---|
items (default) | 0..n | sap.f.AvatarGroupItem |
The |
Fired when the user clicks or taps on the control.
Param | Type | Description |
---|---|---|
oControlEvent | sap.ui.base.Event | |
getSource | sap.ui.base.EventProvider | |
getParameters | object | |
groupType | string |
The |
overflowButtonPressed | boolean |
Indication whether the overflow button is pressed. |
avatarsDisplayed | int |
The number of currently displayed (visible) avatars. |
Method | Description |
---|---|
addItem |
Adds some item to the aggregation items. |
attachPress |
Attaches event handler When called, the context of the event handler (its Fired when the user clicks or taps on the control. |
destroyItems |
Destroys all the items in the aggregation items. |
detachPress |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
sap.f.AvatarGroup.extend |
Creates a new subclass of class sap.f.AvatarGroup with name
|
firePress |
Fires event press to attached listeners. |
getAvatarDisplaySize |
Gets current value of property avatarDisplaySize. Defines the display size of each avatar. Default value is |
getGroupType |
Gets current value of property groupType. Defines the mode of the Default value is |
getItems |
Gets content of aggregation items. The |
sap.f.AvatarGroup.getMetadata |
Returns a metadata object for class sap.f.AvatarGroup. |
indexOfItem |
Checks for the provided |
insertItem |
Inserts a item into the aggregation items. |
removeAllItems |
Removes all the controls from the aggregation items. Additionally, it unregisters them from the hosting UIArea. |
removeItem |
Removes a item from the aggregation items. |
setAvatarDisplaySize |
Sets a new value for property avatarDisplaySize. Defines the display size of each avatar. When called with a value of Default value is |
setGroupType |
Sets a new value for property groupType. Defines the mode of the When called with a value of Default value is |
Adds some item to the aggregation items.
Param | Type | DefaultValue | Description |
---|---|---|---|
oItem | sap.f.AvatarGroupItem |
The item to add; if empty, nothing is inserted |
Attaches event handler fnFunction
to the press event of this sap.f.AvatarGroup
.
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.AvatarGroup
itself.
Fired when the user clicks or taps on the control.
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 |
Detaches event handler fnFunction
from the press event of this sap.f.AvatarGroup
.
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 |
Creates a new subclass of class sap.f.AvatarGroup 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.
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 |
Fires event press to attached listeners.
Param | Type | DefaultValue | Description |
---|---|---|---|
mParameters | object |
Parameters to pass along with the event |
|
groupType | string |
The |
|
overflowButtonPressed | boolean |
Indication whether the overflow button is pressed. |
|
avatarsDisplayed | int |
The number of currently displayed (visible) avatars. |
Gets current value of property avatarDisplaySize.
Defines the display size of each avatar.
Default value is S
.
Gets current value of property groupType.
Defines the mode of the AvatarGroup
.
Default value is Group
.
Checks for the provided sap.f.AvatarGroupItem
in the aggregation items. and returns its index if found or -1 otherwise.
Param | Type | DefaultValue | Description |
---|---|---|---|
oItem | sap.f.AvatarGroupItem |
The item whose index is looked for |
Inserts a item into the aggregation items.
Param | Type | DefaultValue | Description |
---|---|---|---|
oItem | sap.f.AvatarGroupItem |
The item to insert; if empty, nothing is inserted |
|
iIndex | int |
The |
Removes all the controls from the aggregation items.
Additionally, it unregisters them from the hosting UIArea.
Removes a item from the aggregation items.
Param | Type | DefaultValue | Description |
---|---|---|---|
vItem | int string sap.f.AvatarGroupItem |
The item to remove or its index or id |
Sets a new value for property avatarDisplaySize.
Defines the display size of each avatar.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is S
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sAvatarDisplaySize | sap.m.AvatarSize | S |
New value for property |
Sets a new value for property groupType.
Defines the mode of the AvatarGroup
.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is Group
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sGroupType | sap.f.AvatarGroupType | Group |
New value for property |