# Enhanced Related List

{% 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** <a href="#overview" id="overview"></a>

Replace standard related lists with powerful, interactive versions built using the [**Avonni Data Table**](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/components/data-table) within a Dynamic Component. This tutorial shows how to add custom actions, filters, search, and inline editing directly on your Lightning Record Pages, leveraging the performance and easy configuration of Dynamic Components – no Flows needed.

<figure><img src="https://3857391697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHOej9Pd5IxJNGEJMZKW%2Fuploads%2F8RBl6niUtCZepo5d8ovP%2F2025-04-07_21-32-37.png?alt=media&#x26;token=bca6416f-33c0-4bdd-905b-a895abd298cf" alt=""><figcaption></figcaption></figure>

## Guided Steps

{% stepper %}
{% step %}

### Set Target Page Name

First, define the main object context for your related list component. Go to the Component Builder **Settings** (gear icon ⚙️) and set the [**Target Page Name**](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/core-concepts/target-page-object) to the object of the record page where this component will be used (e.g., `Account`). This critical step makes the current record's ID available via `$Component.recordId`, which is necessary to filter the related data later.&#x20;

<figure><img src="https://3857391697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHOej9Pd5IxJNGEJMZKW%2Fuploads%2FqbJNCha8quFB4ynIoNO6%2F2025-04-07_21-13-18.png?alt=media&#x26;token=b2f3f23a-f764-4bf6-9c63-1b101da8c578" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Add a Card Container for Structure

Next, we'll add an Avonni **Card** component. This will serve as the main **visual container** for our related Contacts list. Using a Card helps to group the list elements, provides a space for a clear title and optional icon, and gives our overall component a structured and professional look on the Account record page.

* Drag a Card component from the Component Library onto the canvas.
* Select the Card, and set it `Title` to "Contacts" in the Properties Panel.
* Optionally, add an icon using the `Icon Name` property, or adjust the styling using the Style tab.
* Click the "**`Expand content to fit`**" toggle to remove any space around the items inside the card, aligning them directly with its edges.
* **Customize Style (Optional):** You can further adjust the Card's appearance (like background color or borders) using the options in the **Style** tab if desired, but we'll keep the defaults for this tutorial.

<figure><img src="https://3857391697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHOej9Pd5IxJNGEJMZKW%2Fuploads%2FKILijKWNM7sRVcxbLvOz%2F2025-04-07_21-14-34.png?alt=media&#x26;token=677c4cd9-d62f-421a-bead-8683a2c5d8e2" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Add the Data Table inside the card

Now, we can add the Data Table inside the card, which will play a big part in creating our enhanced related list.

<figure><img src="https://3857391697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHOej9Pd5IxJNGEJMZKW%2Fuploads%2F4D3Jih4BO5AnJaGNBXnL%2F2025-04-07_21-15-31%20(1).gif?alt=media&#x26;token=6db9463c-e167-491c-a38b-2924199c682d" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Configure the Data Table query

Now, we need to tell the Data Table *which* Contacts to display. Since we want a *related* list for the Account page, we'll create a query that fetches only the Contacts associated with the *current* Account record. We'll use the **Avonni Query Data Source** and leverage the context provided by the **Target Object API Name** we set in Step 1.

1. **Select Data Source**
   * Click on the **Data Table** component you added inside the Card.
   * In the Properties Panel (right side), ensure the **Data Source** property is set to `Avonni Query Data Source`.
2. **Create/Edit Query**
   * Click the button or link to **Create a Query** (or edit the existing placeholder query).
3. **Name Query**
   * Give your query a descriptive name (e.g., `RelatedContactsQuery`).
4. **Select Object**
   * Choose `Contact` as the object you want to retrieve records from.
5. **Configure the Filter (The Key Step)**
   * This filter ensures we only get Contacts linked to the *current* Account page.
   * Navigate to the **Filter** section within the query builder interface.
   * Click **Add Filter Condition**.
   * Set up the condition as follows:
     * **Field:** Select the `AccountId` field (this is the lookup field on the Contact object that stores the related Account's ID).
     * **Operator:** Choose `equals`.
     * **Value:** Click the **resource selector icon** (`{ }` or similar) next to the value input. Navigate through the options to select: **Component** > **record** > **Id**. The value field should now show `$Component.recordId`.
       * *(Why this works: Because we set the Target Page Name to `Account` in* [*Step 1*](#step-1-set-target-page-name)*, the `$Component.recordId` variable automatically provides the ID of the specific Account record the user is viewing on the page).*
6. **Save Query:**
   * Click **Save** (or the equivalent button) to save your query configuration.

<figure><img src="https://3857391697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHOej9Pd5IxJNGEJMZKW%2Fuploads%2F4un1eWPcrrPHURVmRpUJ%2F2025-04-07_21-18-32%20(1).gif?alt=media&#x26;token=6bd3c15c-89d0-40a3-8cde-125c8e005981" alt=""><figcaption></figcaption></figure>

The Data Table is now set up to dynamically fetch only the Contacts directly related to the specific Account record page where this Dynamic Component is placed. The next step involves defining which selected fields will appear as columns in the table.
{% endstep %}

{% step %}

### Configure Data Table Columns

Now that the Data Source is configured (telling the table *where* to get data), we need to define *which* specific fields will appear as columns in our Data Table and how those columns should look and behave.

1. **Select the Data Table:** Ensure your Data Table component is selected on the canvas.
2. **Add a Column:** Click the **"Add Column"** button (or a similar "+" icon). This adds a new, unconfigured column to your table layout.
3. **Configure the New Column:** For the column you just added, you'll typically need to set at least these properties:
   * **Source Field:** This is essential. Use the dropdown or selector provided to choose the specific field *from your Data Source* (the query or variable you configured earlier) that contains the data you want to display in *this* column.
4. **Adjust Other Settings (Optional but Common):** Explore the other settings available for the selected column to fine-tune its appearance and functionality:
   * **Editable:** Allow users to edit data directly within this column's cells (requires save interaction elsewhere). <mark style="color:red;">**Make sure to create**</mark> [<mark style="color:red;">**the "On Save" interaction**</mark>](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/tutorials/components/data-table/enable-inline-editing) <mark style="color:red;">**to ensure data is saved.**</mark>
   * **Filterable:** Allow users to filter the entire table based on the values in this column.
   * **Sortable:** Allow users to sort the table by clicking this column's header.
   * **Width:** Control the specific width of the column.
   * **Alignment:** Set the text alignment within the column (left, center, right).
5. **Repeat for All Desired Columns:** Repeat steps 3 through 5 for *each* field you want to display as a separate column in your Data Table.
6. **Reorder Columns (Optional):** Once you have added multiple columns, you can usually change their display order by dragging and dropping them within the "Columns" configuration section in the Properties Panel.

By completing these steps, you define the structure and appearance of your Data Table, ensuring the correct data is displayed in a clear and user-friendly format
{% endstep %}

{% step %}

### Save, Activate, and Deploy Your Component

Now that you've configured your "Enhanced Related List" Dynamic Component, let's make it live and visible to your users on a Salesforce Lightning Page. This involves saving your work, activating the component so Salesforce recognizes it, and adding it to a page layout using the standard Lightning App Builder.

**1. Save Your Dynamic Component**

* In the Component Builder interface, ensure all your recent changes are saved by clicking the **Save** button (usually located in the top-right corner).

**2. Activate the Dynamic Component**

* Next to the Save button, click the **Activate** button. Activation makes your custom component available within the Salesforce Lightning App Builder.&#x20;

**3. Add the Component to a Lightning Record Page**

* Navigate to an example Salesforce record page where you want this related list to appear (e.g., go to an Account record page if you built a related Contacts list).
* Click the **Setup gear icon** (⚙️) in the top-right corner of the Salesforce interface and select **Edit Page**. This will open the Lightning App Builder.
* Scroll down the list of components on the left panel until you find the "**Custom—Managed"** section.
* Locate your **"Avonni Dynamic Component"** component.
* **Drag** your custom component from the list onto the desired area of the page layout (e.g., into a main region, a sidebar, or a specific tab).
* Select the Dynamic Component from the list.

**4. Save and Activate the Lightning Page**

* Click the **Save** button in the top-right corner of the Lightning App Builder.
* If this is a new page assignment or you've made significant changes, you might be prompted to **Activate** the page. Click **Activate** and follow the steps to assign the updated page layout to the appropriate Salesforce Apps, Record Types, and Profiles.

**You're Set!** Navigate back to the record page you just edited. Your custom "Enhanced Related List" component should now be visible and functional for users who have the correct permissions and licenses assigned.
{% endstep %}
{% endstepper %}

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


---

# 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/building-basics-components/enhanced-related-list.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.