Enhanced Related List

This tutorial requires installing the Avonni Dynamic Components Package on your Salesforce org.

Overview

Replace standard related lists with powerful, interactive versions built using the Avonni 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.

Guided Steps

1

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

2

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.

3

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.

4

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

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.

5

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). Make sure to create the "On Save" interaction to ensure data is saved.
   • 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

6

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.

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.