Avatar Group

The Avatar Group component lets you showcase multiple avatars together, making it ideal for representing teams, groups, or lists of individuals.

Setting Up Your Avatar Group

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

• 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.