> 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/create-an-avatar-with-details.md).

# Create an avatar with details

## Overview

In this tutorial, we'll walk you through adding the Avonni Avatar component to display specific details, such as full name and title, from a Salesforce record. Combining the Avatar component's visual appeal with relevant field information will create a more engaging and informative user interface.

## Result

The final result will look like this:

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-9f5f55790919b97117d3583dc36734b42e7f4aed%2FExample%20-%20List%20Sortable%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

## Steps

### 1. Create the recordID text variable

In the context of adding the Avonni Avatar Component, creating a recordID text variable and making it available for input is essential. This enables the Avatar Component to accurately match and display information associated with the current recordID.

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

### 2. Create the Get Records Collection

In adding the Avonni Avatar component with actions, creating a Get Records collection to fetch contact information is essential. By utilizing the recordID text variable we previously created, the Get Records collection will retrieve the specific contact data associated with that recordID. This enables the Avonni Avatar component to display the contact's avatar accurately.

* **Add a Get Records** element
* Linked to the **Contact Object**
* Filter by: **All Conditions are Met (AND)**
  * Contact ID EQUAL > RecordID (text variable created in [step 1](#1.-create-the-recordid-text-variable))

### 3. Create the screen flow and add the Avonni Avatar Component

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

### 4. Configure the Avatar component

To configure the Avonni Avatar component and add detailed information next to the avatar, follow these simple steps:

1. Open the component within your flow builder.
2. Navigate to the properties panel on the right side of the screen.
3. Expand the 'Text' section to reveal the primary and secondary text options.
4. Switch to the 'Mapped View' for both primary and secondary text fields.
5. Select your record variable from the list of available options.
6. Choose the specific fields you want to display as primary and secondary text, such as full name and title.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-5e203e057124c2e33ef2fcd2231f99801cff9f03%2F2023-04-05_20-56-32%20(1).gif?alt=media" alt=""><figcaption></figcaption></figure>

By completing these steps, you'll have successfully configured the Avonni Avatar component to display the desired details alongside the avatar, creating a more informative and visually appealing user interface.


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.avonnicomponents.com/flow/tutorials/components/avatar/create-an-avatar-with-details.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.