Avatar Group

The Avonni Avatar Group component clearly and organizedly represents groups of users within your application, enhancing the user experience and making information easily accessible.

Tutorials

How to build an account contacts list

Generate a list of contacts using the Avatar Group

---

Changing the properties

General

To configure the avatar group, customize the look and feel by setting up Variant, Size, Layout and Max Count.

Data Source

Data Source is where the avatar group will come to life.

Manual

Manual data source allows you to create your avatars manually without any link to Salesforce data.

Variable

Variable gives you the ability to create avatars dynamically by assigning any source collection available in your flow. By selecting a source collection, you can define a data mapping for each attribute of the avatar group.

For example, the primary text attribute can be linked to the full name field to display the record's full name next to the avatar.

Interactions

From the interactions tab, define if you would like to define an action when a user click on an avatar. For example, on avatar click navigate the user to the appropriate record id. The interaction would be something like this:

Setting	Value
Type	Navigate
Page Refecence type	Record Page
Object API Name	The desired object
Record ID	Item: Name
Action Name	View

---

Tutorials

The following examples demonstrate some of the available functionality for Avatar Group.

Stack

Property	Value
Variant	Circle
Size	Large
Layout	Stack
Max Count	5

Grid

Property	Value
Variant	Square
Size	Large
Layout	Grid
Max Count	5
Data Source	Variable
Data Mapping / Fallback icon	avatar
Status Position	Top Right
Presence Type	Online
Presence Position	Top Right

List

Property	Value
Variant	Square
Size	Large
Layout	List
Max Count	5
Data Source	Variable
Data Source / Fallback icon	Contact
Primary Text	Full Name
Secondary Text	Title
Tags / Label	Mailing City
Tags / Variant	Default