How to Use Avatars as Quick Links to Related Records

Create Your Dynamic Component & Define Its Context

First, we need to create the main Avonni Dynamic Component that will hold our custom side panel for displaying related records.

• Open the Avonni Components App: From the Salesforce App Launcher (the nine-dot grid icon), find and open the "Avonni Components" application.

• Create a New Dynamic Component: Click the New button on the "All Components" page (or similar).

• Define Component Name and Target Object: In the dialog that appears:

  • API Name & Label: Enter a descriptive name for your component (e.g., RelatedRecordSidePanel or AccountQuickLinks). You can add an optional description too.

  • Target Page Name: This is a crucial setting. Select the Salesforce object from the dropdown list on the record page where you intend to place this custom side panel. For example, if you want this panel to show records related to an Account, select Account as the Target Object API Name.

• Click Create (or the equivalent button) to save these initial settings and open the Component Builder.

Why Setting the Target Page Name is Important

Setting the Target Page Name (e.g., to Account) means that when you later place this Dynamic Component onto an Account record page, it will automatically "know" which Account record is currently being viewed. We'll use this information (specifically, the Account's ID via the $Component.RecordId variable) in subsequent steps.

Add a Container to Structure Each Related Item

Now, let's add an Avonni Container component to the canvas. Each Container will hold the elements (like an Avatar and text) for this tutorial.

Why use a Container here?

• Organization: It helps group all elements for one related item, making your layout cleaner.

• Styling Control: You can apply specific styling (borders, padding, background) to the entire "related item" block.

• Easy Duplication: If you want to create several similar blocks to link to different types of related records, you can easily copy and paste this entire Container with its configured contents.

Container Customization: Set the variant to card to make a card-style container.

Add The Media Object Component

Next, drag an Avonni Media Object component from the Component Library into the Container. We're using the Media Object because its built-in slots provide an ideal structure for displaying an icon next to text information for each related record link we will create. This helps achieve a more common and modern UI for list items.

Create a Two-Column Layout in the Media Object's Left Slot

We'll embed a Columns component to arrange an icon and a metric side by side within the Media Object's left area. Drag the Columns component from the Component Library into the left slot of your Media Object. Once added, select this inner Columns component and configure it in the Properties Panel to have two column items. We'll add our Icon and Metric components to these new columns next.

Configure Columns Component Spacing

Next, select the main Columns component on your canvas. In its Properties Panel, find the property related to horizontal spacing between the column items (often called Horizontal Alignment, Horizontal Spacing, or Gap). Set this to Medium to add some visual "breathing room" between the columns. You can also explore other Columns properties for further layout adjustments.

Place an Icon in the First Column

In your Columns component's first (left) column, drag an Avonni Icon component from the Component Library. Once added, select this Icon. In its Properties Panel, set the Icon Name property. Choose an SLDS icon that visually represents the information this column will be associated with (e.g., standard:opportunity for Opportunity data).

Place a Metric in the Right Column

In your Columns component's second (right) column, drag an Avonni Metric component from the Component Library. This component is ideal for displaying important summarized data, like the "Number of Open Opportunities" or "Total Project Value" for the record in context. It applies an aggregate function (e.g., COUNT, SUM) to data retrieved via a query.

Add an Avatar Group for Clickable Related Record Links

In the Media Object's right slot, drag an Avatar Group component from the Component Library. This will visually display related records as clickable avatars.

1. Select & Configure Basics: Select the Avatar Group. In Properties, set its API Name, enable "Initials auto formatted" and "Items Clickable".

2. Set Data Source: Choose Avonni Query Data Source. Create a query for your related records (e.g., Contacts).

3. Map Data: In the Items (or Data Mappings) section, map:

   • Initials: To the name field in your query.

   • Initials Auto Formatted: checked

   • Item Clickable: checked

4. Enable Navigation: Go to Interactions for the Avatar Group. For the On Avatar Click event, add a Navigate action:

   • Page Reference Type: Record Page

   • Object API Name: The object of your related records (e.g., Contact).

   • Record ID: Bind to Record: Record ID.

This will make each avatar clickable, so when a user clicks on an avatar, they will be taken directly to that related record’s page.

This setup displays related records as clickable avatars that navigate to the respective record page.