# Avatar Group

## Setting Up Your Avatar Group <a href="#changing-the-properties" id="changing-the-properties"></a>

### **1:** Choose Your Data Source

Determine how the Avatar Group will get the information it needs to create the individual avatars:

* **Manual:** Add avatars individually, providing details for each one.
  * **Best For:** Small, fixed sets of avatars or when you need precise control over each avatar's appearance and information.
  * **How it Works:** Within the component's settings, you'll manually add each avatar and specify its image source, initials, text, and other properties.
* **Query:** Connect the Avatar Group to a Salesforce object to dynamically generate avatars based on record data.
  * **Best For:** Larger datasets or when you want to display avatars based on information already stored in Salesforce (e.g., showing all contacts related to an account).
  * **Supported Objects:** You can connect to standard objects like Contact and User, or any custom object.
  * **How it Works:** The component automatically creates avatars for each record retrieved from the selected Salesforce object.

### **2: Map Data Fields (For Query Data Source Only)**

If you chose the "Query" data source, you need to map the Avatar Group's attributes to the corresponding fields in your Salesforce object. This tells the component where to find the information for each avatar.

* **Example Mappings:**
  * **Initials:** Map to your object's "FirstName" and "LastName" fields.
  * **Primary Text:** Map to the "Name" field or another field containing the record's main identifier.
  * **Secondary Text:** Map to a field like "Title," "Email," or another field that provides additional context.
  * **Image:** Map to a field that contains the URL of the image you want to use for the avatar.
* **Important Note:** Ensure the fields you map contain the correct data type for each attribute (e.g., text for initials, URL for image)

### **3: Customize the Appearance**

Tailor the look and feel of your Avatar Group to match your design:

* **Shape (Variant):**
  * **Circle:** Display avatars in a circular shape.
  * **Square:** Display avatars in a square shape.
* **Size:**
  * **Predefined Sizes:** Choose from options like "Small," "Medium," or "Large."
  * **Custom Size:** Set a specific pixel size for precise control.
* **Layout:** Choose how the avatars are arranged within the group:
  * **Stack (Vertical):** Arrange avatars vertically in a column.
  * **Grid:** Arrange avatars in a grid layout.
  * **List:** Display avatars in a horizontal list.
* **Max Visible:** Set the maximum number of avatars to display

***

## **Additional Configuration Options**

### **Header**

Add a title or descriptive text above the Avatar Group to provide context (e.g., "Project Team Members," "Online Users").

### **Filtering**

Allow users to filter the displayed avatars based on criteria you define (e.g., filter by role, department, or status). You'll need to configure filter options based on your chosen data source.

### **Search**

Enable a search bar so users can quickly find specific avatars within the group by searching for a name or other relevant information. This feature is handy for larger avatar groups.

### **Field Information**

You can display more fields information related to the selected avatar

***

## **Why Use the Avatar Group?**

* **Visual Representation of Groups:** Clearly and concisely display groups of people or entities.
* **Enhanced User Experience:** Make it easy for users to identify and understand relationships between individuals.
* **Space Optimization:** Present multiple avatars in a compact and organized manner.

***

## **Example Use Cases**

Display a&#x20;

* **Team Rosters:** Display the members of a team or department.
* **Project Teams:** Show the avatars of individuals working on a project.
* **Customer Lists:** Represent a group of customers associated with an account.
* **Social Networks:** Visualize connections between users in a social network.

By leveraging the Avatar Group component, you can create informative and visually engaging user interfaces representing groups and relationships within your Salesforce applications.


---

# 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/dynamic-components/components/avatar-group.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.