Related Contacts Card
Last updated
Was this helpful?
Last updated
Was this helpful?
Was this helpful?
This tutorial requires installing the Avonni Dynamic Components Package on your Salesforce org.
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.
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.
Open the Avonni Components App: Find and open the "Avonni Components" application from the Salesforce App Launcher.
Create a New Component: Click the New button.
Name the Component: Enter a descriptive name (e.g., "RelatedContactsList").
Open the Component Builder: Click Create.
Open Component Settings: In the Component Builder, click the Settings icon (usually in the top-left corner).
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 ObjectAdd the Card: Drag an Avonni Card component from the Component Library onto the canvas.
Set the Title (Optional): In the Properties Panel, set the Title
property of the Card (e.g., "Related Contacts").
Set the Icon (Optional): Set the Icon Name
property (e.g., standard:contact
).
Add the List: Drag an Avonni List component inside the Card component.
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
.
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
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.
Save and Activate: In the Component Builder, Save and then Activate your Dynamic Component.
Open Lightning App Builder: Go to an Account record page in Salesforce and click the Setup gear icon, then select Edit Page.
Add the Component: In the Lightning App Builder, find your "RelatedContactsList" component (or whatever you named it) under "Custom - Managed" in the component list.
Drag and Drop: Drag the component onto the desired location on the Account record page layout.
Save and Activate (Page): Save and activate the page.
Go to an Account record page.
You should now see your "Related Contacts" component displaying the Contacts associated with that specific Account