> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/tutorials/components/avatar-group/display-a-list-of-contacts-related-to-an-account.md).

# Display a list of contacts related to an account

## Overview

This tutorial will guide you through creating a screen flow using the [Avonni avatar group component](/flow/flow-components/avatar-group.md) to display a list of contacts related to a specific account.

{% hint style="info" %}
**This tutorial will cover:**

* [how to set up the flow](#set-up-our-flow)
* [add and configure the avatar group component](#configure-the-avonni-avatar-group-component)
* display contacts related to the account
* and activate and test the flow.
  {% endhint %}

## Result

The result will be a functional screen flow that allows users to view a list of contacts related to a specific account in Salesforce with the help of the avatar group component.

<figure><img src="/files/Pcd0FP0iIX2U8klgcqVa" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**PRO TIP**:

See the [suggestion for improvements section](#suggestion-for-improvements) to improve this example.
{% endhint %}

## Building our list of contact screen flow

### Set up our flow

#### Create the flow

Type Flow in the setup menu

* Click on the "**New Flow**" button to create a new flow
* Select "**Screen Flow**"

{% @arcade/embed url="<https://app.arcade.software/share/qSuQYiG2FCYgKnf5UdOs>" flowId="qSuQYiG2FCYgKnf5UdOs" %}

#### Create AccountID variable

Now we need to create an account variable to store accountID information. This is needed to display only contacts associated with a specific account.

* Click on the "**New Resource**" button
* Resource Type > **Variable**
* Enter an API Name: accountID
* In the **Data Type** dropdown, **select Record**
* Object: **Account**
* Check the "Available for input" checkbox

{% @arcade/embed url="<https://app.arcade.software/share/0OLDE5oaGzHOXSsrIoTR>" flowId="0OLDE5oaGzHOXSsrIoTR" %}

#### Create the Get Records element

We will create the Get Records collection to retrieve contact records using a filter.

* Add a "**Get Records**" element
* Enter an API Name
* Select the **Contact** object
* Filter Contact Records
  * All Condition Are Met (AND)
  * **`Field`** > AccountID
  * **`Equals`**
  * Our variable ID created in step 1 > {!accountID.Id
* Display "**All Records**"
* Click on the "**Done**" button

{% @arcade/embed url="<https://app.arcade.software/share/Ct8C5WBhYgcY84mSUmFM>" flowId="Ct8C5WBhYgcY84mSUmFM" %}

### Create the Screen Flow

#### General

* Add the **Screen element**
* **Enter a screen label**
* Hide Header and Footer (optional)

{% @arcade/embed url="<https://app.arcade.software/share/1Imr9iGm6AbEoweOBItr>" flowId="1Imr9iGm6AbEoweOBItr" %}

#### Add the Avatar Group Component

* Drag the [Avatar Group component](/flow/flow-components/avatar-group.md) from the custom list (or type Avatar Group from the search box)
* Set the following settings:
  * **`Variant`**: Circle
  * **`Size`**: Large
  * **`Layout`**: List
* **Data source** > Variable
* **Data Mapping**
  * **`Primary Text`**: Full name
  * **`Secondary Text`**: Title
  * **`Image Source`**: photo URL

{% hint style="info" %}
Fields name in the data mapping section might not be the same as yours.
{% endhint %}

* Click on the "Done" button to save the component

{% @arcade/embed url="<https://app.arcade.software/share/11CHsNx2qN5Gs02D0OV6>" flowId="11CHsNx2qN5Gs02D0OV6" %}

## Add the flow to the Account page

We just finished building our screen flow. We can now save it and add it to an account page to test it.

{% @arcade/embed url="<https://app.arcade.software/share/oduySlR1ZsilJ5gUClir>" flowId="oduySlR1ZsilJ5gUClir" %}

## Troubleshooting

#### Unable to see the records

Ensure your Get Records collection has the correct settings.

#### Unable to choose a source collection

Ensure your Get Records collection has the correct settings, especially the "How many records to store" section.

## Suggestion for improvements

### Add a Header Component

We can add the [Header component](/flow/flow-components/header.md) on our screen flow above the avatar group component. Add a title and an action to create a new record (New Contact.

<figure><img src="/files/80ki3Knu0nU7o0MzhYic" alt=""><figcaption></figcaption></figure>

### Redirect to the contact's page on click

Create an [interaction action](/flow/component-builder/interactions-panel.md) on avatar click with the following parameters:

* **Type**: Navigation
* **Page reference type**: Record Page
* **Object API name**: Contact
* **RecordID**: Item: Name
* **Action name**: View


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/flow/tutorials/components/avatar-group/display-a-list-of-contacts-related-to-an-account.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.