# Related Contacts Card

{% hint style="warning" %}
This tutorial requires installing [**the Avonni Dynamic Components Package**](https://appexchange.salesforce.com/appxListingDetail?listingId=e855ec28-bf2c-47fa-aa38-30b43948ab4f) on your Salesforce org.
{% endhint %}

## Overview

This tutorial guides you through creating an Avonni Dynamic Component that displays a list of Contacts related to the current Account on an Account record page. You'll learn how to use the Avonni Card, List components, a Query Data Source, and the `$Component.record` variable to create a contextual, dynamic component.

<figure><img src="https://3857391697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHOej9Pd5IxJNGEJMZKW%2Fuploads%2FRXiUhbXHIglYAWmezmNo%2F2025-03-14_14-30-16.png?alt=media&#x26;token=63667040-b8f8-497b-92d5-3f166ac356eb" alt=""><figcaption></figcaption></figure>

The key concepts we'll use are:

* [**Card Component**](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/components/card)**:** For visual grouping.
* [**List Component**](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/components/list)**:** To display the related Contacts.
* [**Avonni Query Data Source**](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/component-builder/data-sources/query)**:** To retrieve Contact data from Salesforce.
* [**Target Object Page**](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/core-concepts/target-page-object)**:** To establish the context (Account) for the component.
* **`$Component.RecordId`:** To dynamically filter Contacts based on the current Account's ID.

## Step-by-Step Instructions

### **Step 1: Create the Dynamic Component**

1. **Open the Avonni Components App:** Find and open the "Avonni Components" application from the Salesforce App Launcher.
2. **Create a New Component:** Click the **New** button.
3. **Name the Component:** Enter a descriptive name (e.g., "RelatedContactsList").
4. **Open the Component Builder:** Click **Create**.

### **Step 2: Set the Target Object API Name**

1. **Open Component Settings:** In the Component Builder, click the **Settings** icon (usually in the top-left corner).
2. **Target Object Name:** Set this to `Account`. This tells the component that it will be used in the context of an Account record.&#x20;

<figure><img src="https://3857391697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHOej9Pd5IxJNGEJMZKW%2Fuploads%2F6pGZZHzd3zJCgtDpvccf%2F2025-03-14_15-21-07.png?alt=media&#x26;token=b33ef192-bc67-4d5e-8433-430e5ed349cc" alt=""><figcaption></figcaption></figure>

You can learn more about Target Object Name here 👇

{% content-ref url="<https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/core-concepts/target-page-object>" %}
[Target Page Object](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/core-concepts/target-page-object)
{% endcontent-ref %}

### **Step 3: Add and Configure the Card Component**

1. **Add the Card:** Drag an Avonni **Card** component from the **Component Library** onto the canvas.
2. **Set the Title (Optional):** In the Properties Panel, set the `Title` property of the Card (e.g., "Related Contacts").
3. **Set the Icon (Optional):** Set the `Icon Name` property (e.g., `standard:contact`).

### **Step 4: Add and Configure the List Component**

1. **Add the List:** Drag an Avonni **List** component *inside* the Card component.
2. **Configure the Data Source:**
   * Select the List component.
   * Set the Data Source to Avonni Query Data Source in the Properties Panel.
   * Click **Create a Query**.
   * **Object:** Select `Contact`.
   * **Fields:** Select the Contact fields you want to display in the list (e.g., `FirstName`, `LastName`, `Email`, `Phone`, `AccountId`, `Id`). *It's crucial to include `AccountId` and `Id`.*
3. **Create the Reactive Filter:**
   * Go to the **Filter** section.
   * Add a new filter condition:
     * **Field:** Select `AccountId` (the field on Contact that links to the Account).
     * **Operator:** Choose `equals`.
     * **Value:** Click the resource selector and navigate to this path: Component > Record > Id
4. **Map List Attributes:**
   * In the List component's properties, map the fields from your query to the appropriate List attributes:
     * **Label:** `FirstName` , add a space and `LastName`.
     * **Image Source (Optional):** If you have a field containing image URLs, map it here.

### **Step 5: Add the Component to an Account Record Page**

1. **Save and Activate:** In the Component Builder, **Save** and then <mark style="background-color:green;">**Activate**</mark> your Dynamic Component.
2. **Open Lightning App Builder:** Go to an Account record page in Salesforce and click the Setup gear icon, then select **Edit Page**.
3. **Add the Component:** In the Lightning App Builder, find your "RelatedContactsList" component (or whatever you named it) under "Custom - Managed" in the component list.
4. **Drag and Drop:** Drag the component onto the desired location on the Account record page layout.
5. **Save and Activate (Page):** Save and activate the *page*.

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

### **Step 6: Test**

1. Go to an Account record page.
2. You should now see your "Related Contacts" component displaying the Contacts associated with that specific Account


---

# 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/projects/dynamic-components/working-with-data/related-contacts-card.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.