For the complete documentation index, see llms.txt. This page is also available as Markdown.

How to Create a Combobox-Filtered Data Table

Overview

In this tutorial, we have two separate Avonni Comboboxes: one shows a list of states, and the other shows a list of industries.

We use a formula text variable as the query filter to filter our Data Table dynamically. This formula updates based on what's selected in each combo box. For example, if you choose "Investor" and "Banking," the Data Table (which is linked to the Account object) will only show accounts with an investor type that belongs to the banking industry.

Final Result

Guided Steps

1. Create Your Screen Flow

  • Begin by setting up a new screen flow within your Salesforce environment.

2. Build the Layout

  • Add a Section element to your screen flow.

  • Configure the section to have two columns side-by-side.

  • In each of these columns, you'll place an Avonni Combobox component. These comboboxes will serve as our filters.

3. Insert the Avonni Data Table

  • Drag and drop the Avonni Data Table component into your screen flow. This is where your filtered data will be displayed.

4. Configure the Data Table's Data Source

  • Query Data Source: Choose this option to fetch data dynamically.

  • Select Object: Specify the Salesforce object you want to query (e.g., Accounts, Contacts, Opportunities).

  • Add Fields as Columns: Select the fields from your object that you want to display as columns in your Data Table.

5. The Magic of Dynamic Filtering – Create a Formula

  • Formula Text Variable: Create a new formula variable of the "Text" type.

  • WHERE Clause: This formula will act as the WHERE clause in your SOQL query. It will combine the selections from your Avonni Comboboxes to create a dynamic filter condition.

  • Example: Let's say your comboboxes filter by Industry and Rating. Your formula might look like

Understanding the Formula

What It Does

This formula is designed to dynamically create a filter for your Salesforce data based on selections made in two comboboxes:

  • TypeCombobox: This is the API name of the Avonni Combobox component configured to display account type picklist values (like "Account" or "Contact").

  • IndustryCombobox: This combobox lets users select an industry (e.g., "Technology," "Finance," etc.).

When a user selects these comboboxes, the formula combines their choices into a single filter condition enclosed within quotation marks. This filter is then used to retrieve only the records that match both the selected type and industry.

How It Works

  1. Type= ': In our example, we filter by the "Type" field, which is a picklist field on the Account object (as shown in the screenshot). The single quotation mark (') is added because we're looking for a specific text value, and the equal sign (=) is used to compare this picklist field to the value selected in the combobox.

  2. &{!TypeCombobox.value}&': This is where the dynamic filtering occurs. It fetches the value the user selected from the TypeCombobox (using its API name) and inserts it into the formula. The & symbols are used to concatenate (join) the different parts of the formula together. The second single quotation mark closes the text string we started earlier.

  3. AND Industry = ': This part expands the filter to include the "Industry" picklist field from the Account object. The AND operator means that a record must match the chosen Type and the chosen Industry to be displayed in the Data Table..

  4. &{!IndustryCombobox.value}&"': Similar to step 2, this pulls the user's selection from the IndustryCombobox and inserts it into the formula.

6. Make the Data Table Reactive

  • Your formula variable should be referenced within the "Query Data Source" configuration of your Avonni Data Table. This will automatically refresh the Data Table whenever the user changes the selections in the combo boxes.

How to assign the created formula as a dynamic filter

Filter Entry records by a selected Party

This pattern filters records by an ID selected through a record-backed Combobox. It differs from the picklist example above.

Use these custom-object names only as an example. Replace every API name with names from your org.

  1. Configure a Combobox query data source for Case_Role__c records.

  2. Map Label to a readable Party name.

  3. Map the required Value to the Party ID. For example, map Case_Role__c.Party__c.

  4. Configure the reactive Data Table with a Query data source for Entry__c.

  5. Confirm Entry__c has the direct Party lookup field Party__c.

The selected Value must be the same kind of ID as the lookup field. Do not map the Case Role ID when Entry__c.Party__c expects a Party ID.

Create the selected-record filter formula

Create a Text Formula resource with this formula:

In this example:

  • PartySelection is the Combobox API name.

  • PartySelection.value is the mapped stored value, which is the Party ID.

  • Party__c is the lookup field API name on Entry__c, the Data Table query object.

The first branch returns all rows when no Party is selected. To return no rows instead, use "Id = null". Choose one deliberate no-selection behavior. Never emit an incomplete WHERE clause.

Map this formula as the reactive filter on the Data Table Query data source. A selected Party renders a clause like Party__c = 'a0…'.

Selected Option versus Value

Use Value when it maps to the ID used by the target lookup. This is the simplest pattern for LookupField__c = 'selectedId'.

Use Selected Option when later Flow logic needs fields from the selected SObject. In Flow Builder, bind or assign that output to a Record variable of the same object type. Then use the UI field selector to reference its fields.

Only fields returned by the Combobox data source are available on that record. Do not rely on a hard-coded selected-option formula path.

If the selected record contains the needed Party ID, first obtain that field from its Record variable. The conceptual filter is:

selectedCaseRole and Party__c are example names. They are not product-defined names.

Lookup and relationship rules

Compare a selected record ID with the direct lookup on the query base object. For this example, use Entry__c.Party__c. Do not use a label, display column, or guessed relationship path.

Use a parent path, such as Party__r.Some_Parent_Field__c, only when filtering a field on that parent. It does not replace the direct lookup field. Verify the relationship name and parent field API name in your org.

Never infer an API name from a field label. Confirm the query object, field API name, relationship name, and Combobox Value meaning.

Quote text and IDs as shown. Text containing apostrophes needs valid SOQL escaping. See Salesforce SOQL string escape sequences.

Troubleshooting

Use this ordered diagnosis for reactive query filters.

1. Render the values

Use Display Text to show the selected Value and the fully rendered formula. A selected Party should render Party__c = 'a0…'.

Formula rendering in action using the Display Text

2. Confirm the reactive mapping

Confirm the Data Table uses a Query data source. Confirm the Text Formula is mapped as its reactive filter.

3. Verify the field reference

Confirm the formula's left side exists on the query base object. A direct lookup such as Party__c differs from a parent relationship field such as Party__r.Some_Field__c.

4. Test the exact rendered clause

Run the rendered clause with real values in SOQL. Test the same object and data source configured in the Data Table. Confirm matching rows exist and the running user can access them.

For the picklist formula, use real values:

"Type= '"&{!TypeCombobox.value}&"' AND Industry = '"&{!IndustryCombobox.value}&"'"

The rendered SOQL clause is Type = 'Investor' AND Industry = 'Banking'.

5. Validate Selected Option output

When using Selected Option, confirm its source query returns the required field. Confirm the output is bound to the correct SObject Record variable.

Common causes include a missing selected-option field, a Case Role ID used where a Party ID is required, an invalid relationship path, missing matching data, and unintended no-selection behavior.

Last updated

Was this helpful?