LogoLogo
HomepageYouTube ChannelInstall from the AppExchangeSubscribe for Updates
  • Home
  • Dynamic Components
  • Flow Components
  • Experience Components
  • Projects
  • Releases Notes
  • Avonni Projects
  • Dynamic Components
    • View All Tutorial Projects
    • Building Basics Components
      • My Active Opportunities
      • How to Use Avatars as Quick Links to Related Records
      • Enhanced Related List
    • Working with Data
      • Related Contacts Card
      • User Activity Report
      • Build a "Quick Lead" Entry Form
      • How to Build a Record Edit Form for modals & panels
    • Advanced Layout & Interactions
      • Build a Custom Record Header & Highlights Panel
      • Dynamic Opportunity Viewer
      • Dynamic Tradeshow Campaign Performance Dashboard
      • Vertical Tabs with Reactive Data Table
  • Flow Components
    • Home
    • Navigation & Structure
      • Building Left-Side Vertical Navigation
      • Navigational Screen Flows in Router Mode
    • Data Display & Interaction
      • Advanced related list
      • Bulk Edit on the Data Table
      • Contacts List
      • Dynamic Map
      • Map with Detailed Information
      • Product Showcase
      • User Activity Report
    • Business Processes & Logic
      • Building a Business Quote
      • Building a Marketing Campaign Calendar
      • Account Management
      • Today's Accounts to Visit
    • Dashboards & Reporting
      • Building Reactive Metrics Dashboards
    • Multimedia
      • Video Playlist
  • Experience Cloud Components
    • Home
    • Building a MapCard
    • Configuring the Avonni Data Table
    • Create an Export To button on the Data Table
    • Show Current User in Profile Card
    • Responsive Layout
Powered by GitBook
On this page
  1. Dynamic Components
  2. Working with Data

Related Contacts Card

Last updated 4 months ago

Was this helpful?

LogoLogo

Company

  • About Us
  • Pricing

Policies

  • Privacy Policy
  • Terms of Service
CtrlK
  • Overview
  • Step-by-Step Instructions
  • Step 1: Create the Dynamic Component
  • Step 2: Set the Target Object API Name
  • Step 3: Add and Configure the Card Component
  • Step 4: Add and Configure the List Component
  • Step 5: Add the Component to an Account Record Page
  • Step 6: Test

Was this helpful?

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.

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