Vertical Tabs with Reactive Data Table

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 Accounts in a vertically oriented Tabs component, and a dynamically updating Data Table showing Opportunities related to the selected Account. You'll learn how to use the Card, Columns, Tabs, and Data Table components, and how to create a reactive connection between them.

We'll build a component with the following structure:

• Card: A container for visual grouping.

• Columns: To create a two-column layout.

• Tabs (Vertical): Displays a list of Accounts, one Account per tab.

• Data Table: Displays Opportunities related to the selected Account.

The key is reactivity: selecting a different Account tab instantly changes the Opportunities displayed in the Data Table.

Step-by-Step Instructions

Step 1: Create the Dynamic Component

1. Open the Avonni Components App: From the Salesforce App Launcher, find and open "Avonni Components."

2. Create a New Component: Click New.

3. Name the Component: Enter a descriptive name (e.g., "VerticalAccountOpportunities").

4. Open the Component Builder: Click Create.

Step 2: Add and Configure the Card Component

1. Add the Card: Drag an Avonni Card component onto the canvas.

2. Set the Title (Optional): In the Properties Panel, set the Title (e.g., "Accounts and Opportunities").

3. Set the Icon (Optional): Set the Icon Name.

4. Expand to Content Fit: Enable the Expand to Content Fit for a better visual.

Step 3: Add the Columns Component

1. Add the Columns: Drag an Avonni Columns component inside the Card component.

2. Create Two Columns:

   • Select the Columns component, and in the Properties panel click on the plus button twice.

   • Select each column and set Horizontal Align to x-small.

Step 4: Add and Configure the Tabs Component (Accounts)

1. Add the Tabs: Drag an Avonni Tabs component into the first column of the Columns component.

2. Configure the Data Source:

   • Select the Tabs component.

   • Set the Data Source to Avonni Query Data Source in the Properties Panel.

   • Click Create a Query.

   • Object: Select Account.

   • Filters (Optional): Add any filters to limit the displayed accounts.

3. Configure Tab Display:

   • Orientation: Set the Orientation property to Vertical.

   • Items: Map the Name field for the tab Label.

Step 5: Add and Configure the Data Table Component (Opportunities)

1. Add the Data Table: Drag an Avonni Data Table component into the second column of the Columns component.

2. Configure the Data Source:

   • Select the Data Table component.

   • Set the Data Source to Avonni Query Data Source.

   • Click Create a Query.

   • Object: Select Opportunity.

3. Create the Reactive Filter:

   • Go to the Filter section of the query.

   • Add a new filter condition:

     • Field: AccountId (on the Opportunity object).

     • Operator: equals.

     • Value: Use direct attribute referencing to link to the selected tab in the Tabs component:

       !TabsComponentName.activeTabValue

       (Replace TabsComponentApiName with the actual API Name of your Tabs component). This is crucial for the reactivity.

4. Optional: Add Additional Filters

   • Add a Filter

   • Field: Select StageName

   • Operator: Select not in.

   • Value: Add Closed Won and Closed Lost

5. Configure Columns:

   • Go to the Columns section in the Data Table Properties.

   • Add, remove, reorder, and customize columns as needed.

Step 6: Publish and Test

• 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, click the Setup gear icon, then select Edit Page.

• Add the Component: In the Lightning App Builder, find your "VerticalAccountOpportunities" 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.