# 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 flowId="qSuQYiG2FCYgKnf5UdOs" url="<https://app.arcade.software/share/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 flowId="0OLDE5oaGzHOXSsrIoTR" url="<https://app.arcade.software/share/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 flowId="Ct8C5WBhYgcY84mSUmFM" url="<https://app.arcade.software/share/Ct8C5WBhYgcY84mSUmFM>" %}

### Create the Screen Flow

#### General

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

{% @arcade/embed flowId="1Imr9iGm6AbEoweOBItr" url="<https://app.arcade.software/share/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.&#x20;
{% endhint %}

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

{% @arcade/embed flowId="11CHsNx2qN5Gs02D0OV6" url="<https://app.arcade.software/share/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.&#x20;

{% @arcade/embed flowId="oduySlR1ZsilJ5gUClir" url="<https://app.arcade.software/share/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:&#x20;

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


---

# Agent Instructions: 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:

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

The question should be specific, self-contained, and written in natural language.
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.