Related Contacts Card

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 Object

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