Displaying Related Contacts on an Account Page

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

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.

Overview

We'll build a Dynamic Component that you can add to any Account record page. This component will show a list of Contacts associated with that specific Account.

The key concepts we'll use are:

• Card Component: For visual grouping.
• List Component: To display the related Contacts.
• Avonni Query Data Source: To retrieve Contact data from Salesforce.
• Target Object Page: 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.

You can learn more about Target Object Name here 👇

Target Page ObjectDynamic Components

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

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