# Avatar Group

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FPSWgluzJcai4k2egOJ2C%2Fimage%20(84).avif?alt=media&#x26;token=f3837434-dc06-4702-994b-33f672c8f41a" alt="" width="375"><figcaption></figcaption></figure>

## Tutorials

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>How to build an account contacts list</strong></td><td>Generate a list of contacts using the Avatar Group</td><td></td><td><a href="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FDqg2MBZKIIq0EJXCXhzG%2Fmodern%20(30).png?alt=media&#x26;token=5e189fc3-6d94-4606-bdb4-5c4a2f10e150">modern (30).png</a></td><td><a href="https://youtu.be/Px9Cjyno_BM">https://youtu.be/Px9Cjyno_BM</a></td></tr></tbody></table>

***

## 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. &#x20;

#### Manual

`Manual` data source allows you to create your avatars manually without any link to Salesforce data.&#x20;

#### 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.&#x20;

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.&#x20;

### 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:&#x20;

<table><thead><tr><th width="214">Setting</th><th>Value</th></tr></thead><tbody><tr><td>Type</td><td>Navigate</td></tr><tr><td>Page Refecence type </td><td>Record Page</td></tr><tr><td>Object API Name</td><td>The desired object</td></tr><tr><td>Record ID</td><td>Item: Name</td></tr><tr><td>Action Name</td><td>View</td></tr></tbody></table>

***

## Examples

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

### Stack

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FZaymVtSJxX0WhynnqEmO%2F2022-10-04_21-47-05.png?alt=media&#x26;token=4d4baab2-458c-4411-bf25-ea1c3e48f0d1" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="214">Property</th><th>Value</th></tr></thead><tbody><tr><td>Variant</td><td>Circle</td></tr><tr><td>Size</td><td>Large</td></tr><tr><td>Layout</td><td>Stack</td></tr><tr><td>Max Count</td><td>5</td></tr></tbody></table>

### Grid

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FZsL3MAhNixYSJzTnWkRh%2F2022-10-05_09-25-11.png?alt=media&#x26;token=1e5ed8c6-6c9a-4a50-aaf3-6fff6ed34d17" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="214">Property</th><th>Value</th></tr></thead><tbody><tr><td>Variant</td><td>Square</td></tr><tr><td>Size</td><td>Large</td></tr><tr><td>Layout</td><td>Grid</td></tr><tr><td>Max Count</td><td>5</td></tr><tr><td>Data Source</td><td>Variable</td></tr><tr><td>Data Mapping / Fallback icon</td><td>avatar</td></tr><tr><td>Status Position</td><td>Top Right</td></tr><tr><td>Presence Type</td><td>Online</td></tr><tr><td>Presence Position</td><td>Top Right</td></tr></tbody></table>

### List

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2F0PH323V2uUMFAhovoolD%2F2022-10-05_10-27-27.png?alt=media&#x26;token=779e8018-0d34-4dcc-9edf-cdf32e1e93fa" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="214">Property</th><th>Value</th></tr></thead><tbody><tr><td>Variant</td><td>Square</td></tr><tr><td>Size</td><td>Large</td></tr><tr><td>Layout</td><td>List</td></tr><tr><td>Max Count</td><td>5</td></tr><tr><td>Data Source</td><td>Variable</td></tr><tr><td>Data Source / Fallback icon</td><td>Contact</td></tr><tr><td>Primary Text</td><td>Full Name</td></tr><tr><td>Secondary Text</td><td>Title</td></tr><tr><td>Tags / Label</td><td>Mailing City</td></tr><tr><td>Tags / Variant</td><td>Default</td></tr></tbody></table>