Create a Dynamically Linked Account-Contact View

Overview

In this tutorial, you'll learn how to build a Flow showing a list of accounts on the left and their related contacts on the right. Whenever you select an account, the contact list automatically updates to show only the contacts for that account.

POWER TIP: Alternatives to Screen Flows for Data Display

If you're currently using Screen Flows to display information on a page (without any complex logic), consider switching to Avonni Dynamic Components package. You'll get faster loading times and a more straightforward setup for your data queries on Lightning Pages.

Final Result

Guided Steps

Flow Layout

• Start by creating a flow with a two-column section.

• Place an Avonni Data Table component in the left column. This table will display a list of accounts.

• Place another Avonni Data Table component in the right column. This table will display the contacts related to the selected account(s).

Dynamic Query

• Configure the right-side Data Table to use a dynamic query. This query will filter contacts based on the selectedRowsKeyValueCommaSeparated attribute from the left-side Data Table.

Formula Text Variable (WHERE Clause)

• Create a formula text variable to build the WHERE clause for your query dynamically. The formula should look like this:

  "AccountId IN (" & {!dataTable.selectedRowsKeyValueCommaSeparated} & ")"

  The query will filter records based on the Account IDs selected in the left-side Data Table.

Understanding the Formula

This formula is designed to dynamically create a filter condition for a SOQL query, specifically targeting the AccountId field within Salesforce. Here's how it breaks down:

• "AccountId IN (: This sets up the beginning of the IN clause, which is used to filter for records where the AccountId matches any of the values within the parentheses. The quotation marks are essential here to indicate that "AccountId" is a text string, not a variable.

• {!dataTable.selectedRowsKeyValueCommaSeparated}: This variable is specific to the Avonni Data Table component. It retrieves the IDs of all the currently selected rows in the table and formats them into a comma-separated list.

• ")": This closes the parentheses and the quotation marks, completing the IN clause and the text string.

This formula generates a filter that says, "Show me all records where the AccountId matches any of the IDs currently selected in the Data Table." This is why the query becomes dynamic, as the list of AccountIds in the filter will change based on what the user selects in the Data Table.

Example:

If the user selects two accounts in the Data Table with IDs '001A0000018fG8ZIAU' and '001A0000018fG8ZIAV', the formula will generate the following filter:

"AccountId IN ('001A0000018fG8ZIAU','001A0000018fG8ZIAV')"

This filter will then be used in the SOQL query to retrieve only the records associated with these two account IDs.

Mapping to Query Data Source

• Connect this formula variable to the "Filter" field in the Query Data Source settings of the right-side Data Table.

Troubleshooting

To ensure your formula works as intended, you can use a Display Text element to see the actual value your formula returns. This helps you confirm if the result makes sense and can be used effectively in a SOQL query.

Result

Now, whenever you select one or more accounts in the left-side Data Table, the right-side Data Table will automatically update to show the relevant contacts. This creates a seamless, user-friendly way to view and manage relationships between accounts and contacts in your Flows