Filter Data Tables with Multi-Select Comboboxes

Overview

This tutorial shows you how to create a dynamic filtering experience where users can select multiple values from a combobox, and a data table automatically updates to show only the matching records. This creates an interactive, real-time filtering system without requiring users to click a search or filter button.

Example Scenario: We'll demonstrate this using car data. Users can select multiple car manufacturers (like Tesla, Ford, and Honda) from a multi-select combobox. As they make selections, a data table below automatically filters to show only car models from the chosen manufacturers. When they add or remove manufacturers, the table updates instantly.

Note: The car manufacturer example is for illustration purposes only. You can apply this technique to filter any data table based on any multi-select combobox values, such as filtering accounts by industry, opportunities by stage, cases by priority, or any custom object by any picklist or lookup field.

What You'll Learn

By the end of this tutorial, you'll know how to:

Configure a multi-select combobox to capture multiple user selections
Create a reactive formula that converts selected values into a filter condition
Connect the formula to a data table to enable real-time filtering
Build an interactive user interface that responds immediately to user selections

Prerequisites

Before starting this tutorial, you should have:

The Avonni Components for Flows package installed.
Basic familiarity with Salesforce Flow Builder
Understanding of how to add components to a flow screen
Knowledge of the object and field you want to filter (e.g., Car object with a Car_Make__c field)
The Avonni Components package installed in your Salesforce org

What You'll Build

You'll create a flow screen with two components:

Multi-Select Combobox: Allows users to select multiple values (e.g., car manufacturers)
Data Table: Displays records filtered by the selected values (e.g., car models from those manufacturers)

The data table will automatically update whenever users change their selections in the combobox.

Step-by-Step Instructions

Create Your Screen Flow

In Salesforce Setup, search for "Flows" and click Flows
Click New Flow
Select Screen Flow and click Create
Click the + icon to add a new screen element
Give your screen a descriptive name (e.g., "Filter Cars by Manufacturer")
Click Done

You now have a blank screen where you'll add your components.

Add the Multi-Select Combobox

This combobox will allow users to select multiple values to use as filters.

Add the Component
- From the component palette on the left, find Avonni Combobox
- Drag it onto your screen at the top
Configure Basic Settings
- Label: Enter "Select Car Manufacturers" (or customize based on your use case, like "Select Industries," "Select Priorities," etc.)
- API Name: Note the auto-generated name (e.g., "combobox"). You'll need this for the formula
Enable Multi-Select
- In the properties panel, find the "Is Multi Select" option
- Check this box to enable multi-select functionality
- This allows users to select multiple values instead of just one
Configure Data Source
- Source Type: Select "Picklist" (or "Custom" if you're providing manual values)
- Object: Select your object (e.g., "Car__c")
- Field: Select the field containing your filter values (e.g., "Car_Make__c")
Alternative: If you don't want to use a picklist, you can select "Custom" as the source type and manually enter the values you want users to choose from.
Optional Settings
- Show Search: Enable this if you have many options
- Placeholder: Add helpful text like "Choose one or more manufacturers..."
- Required: Check this if users must make at least one selection

What you've accomplished: Users can now select multiple values from your combobox. The selected values are automatically stored in a collection that we'll use in the next step.

Add the Data Table

This data table will display the filtered records based on the combobox selections.

Add the Component
- From the component palette, find Avonni Data Table
- Drag it onto your screen below the combobox
Configure Basic Settings
- Label: Enter "Car Models" (or customize based on your data, like "Filtered Accounts," "Matching Cases," etc.)
- API Name: Note the auto-generated name (e.g., "dataTable")
Configure Data Source
- Object: Select the same object you used in the combobox (e.g., "Car__c")
- Fields to Display: Select the fields you want to show in the table (e.g., Model Name, Year, Price, etc.)
- Sort Order: Choose how records should be sorted
Configure the Number of Records
- Set the maximum number of records to display (e.g., 50 or 100)
- Enable pagination if you expect many results

Don't configure the filter yet - we'll do that in the next step using a reactive formula.

Create the Reactive Formula for Filtering

This is the crucial step that connects your combobox selections to the data table filter. The formula will automatically update whenever users change their selections.

Create the Formula Resource
- Click the Manager tab in Flow Builder
- Click New Resource
- Configure the resource:
  - Resource Type: Select "Formula"
  - API Name: Enter "FilterFormula" (or a descriptive name like "ManufacturerFilter")
  - Description: Add a note like "Filters data table by selected manufacturers"
  - Data Type: Select "Text"
Write the Formula Copy and paste this formula into the formula editor:

Important

The formula below is specific to our car manufacturer example. Do not copy and paste it as-is - you must customize it to match your actual object and field names.

   "Car_Make__c IN (" & {!combobox.valueCollection} & ")"

Customize the Formula for Your Use Case Important: You need to replace two parts of this formula with your specific details:
- Replace "Car_Make__c" with the API name of your filter field:
  - For filtering accounts by industry: use "Industry"
  - For filtering cases by priority: use "Priority"
  - For filtering opportunities by stage: use "StageName"
  - To find your field's API name: Go to Setup → Object Manager → Select your object → Fields & Relationships → Find your field and copy its API Name
- Replace "combobox" with the actual API name of your combobox component:
  - Look at the combobox properties panel for its API Name
  - It might be "combobox1", "manufacturerSelector", etc.
  - Use exactly what appears in the API Name field
Example formulas for different scenarios: Filtering accounts by industry:

   "Industry IN (" & {!industryCombobox.valueCollection} & ")"

Filtering cases by priority:

   "Priority IN (" & {!prioritySelector.valueCollection} & ")"

Filtering opportunities by stage:

   "StageName IN (" & {!stageCombobox.valueCollection} & ")"

Understanding the Formula Let's break down each part:
- Let's break down each part of the formula structure:
  - "YOUR_FIELD_API_NAME IN (": This is the start of a SOQL filter condition. The IN operator checks if the field value matches any value in a list.
  - {!YOUR_COMBOBOX_API_NAME.valueCollection}: This references the collection of values selected in your multi-select combobox. As users select or deselect values, this collection automatically updates.
  - & ... &: These are concatenation operators that combine text strings together.
  - ")": This closes the IN clause with the required closing parenthesis.
  Result example: When users select "Tesla" and "Ford" in our car example, the formula generates:
  Car_Make__c IN (Tesla, Ford)
  This is a valid SOQL filter condition that the data table can use.
  Your result: When users select values in your combobox, your formula will generate:
  Your_Field__c IN (Value1, Value2, Value3)
Save the Formula
- Click Done to save your formula resource

What you've accomplished: You now have a dynamic formula that automatically generates a filter condition based on whatever users select in the combobox.

Connect the Formula to the Data Table Filter

Now we'll apply the formula to the data table so it filters the displayed records.

Select the Data Table
- Click on your Avonni Data Table component in the flow canvas
- The properties panel appears on the right
Locate the Filter Section
- In the properties panel, find the "Filter" field
- This is where you specify which records to display
Map the Formula
- Look for the {x} button or "Mapped" option and click it
- A resource picker will appear
- Select your formula resource (e.g., "FilterFormula")
Understanding What Happens Here's the complete flow of data:
1. User selects manufacturers in the combobox (e.g., Tesla, Ford)
2. The combobox's valueCollection updates automatically
3. The formula detects the change and regenerates the filter condition
4. The data table receives the new filter condition
5. The data table re-queries and displays only matching records
This all happens automatically and in real-time!

What you've accomplished: The data table now filters dynamically based on combobox selections. No additional configuration needed!

Test Your Dynamic Filtering

Save Your Flow
- Click Save in the top right
- Give your flow a descriptive name (e.g., "Car Filter Dashboard")
Activate the Flow
- Click Activate
Run and Test
- Click Run to test your flow
- Initial State: The combobox should be empty, and the data table may show all records or no records (depending on your configuration)
- Select One Value: Choose a single manufacturer and verify the table filters correctly
- Select Multiple Values: Add more manufacturers and watch the table expand to include models from all selected makers
- Remove a Selection: Remove one manufacturer and verify the table updates to exclude those models
- Clear All: Remove all selections and observe what the table displays
Verify the Experience
- Confirm the filtering happens instantly without delays
- Check that the table shows the correct records for each combination of selections
- Test edge cases like selecting all values or selecting none

Troubleshooting

The data table doesn't filter - it shows all records

Verify the formula is mapped to the data table's WHERE Clause field
Check that you switched to "Mapped" mode, not manual text entry
Confirm the field API name in the formula matches your object's field exactly (including capitalization and underscores)

The data table shows no records even when I make selections

Check for syntax errors in your formula
Verify the combobox API name in the formula matches the actual component name
Ensure your combobox has "Is Multi Select" enabled
Test the formula by running the flow in debug mode to see the generated filter string

I get an error message when running the flow

The field API name might be incorrect - double-check it in Object Manager
Make sure your formula data type is set to "Text"
Verify the WHERE Clause field is expecting a text formula

The filtering works but seems slow

Consider limiting the number of records with additional filter criteria
Add indexes to the filtered field in Salesforce (requires admin)
Reduce the number of columns displayed in the data table

The formula shows syntax errors

Ensure you're using straight quotes ("), not curly quotes ("")
Check that the ampersands (&) are in the correct positions
Verify the closing parenthesis and quote are included: & ")"

Advanced Customization

Once you understand the basic concept, you can create more sophisticated filtering:

Multiple Filter Criteria

Combine selections from multiple comboboxes:

"Car_Make__c IN (" & {!makeCombobox.valueCollection} & ") AND " &
"Year__c IN (" & {!yearCombobox.valueCollection} & ")"

Optional Filtering

Only apply the filter if something is selected:

IF(
  ISBLANK({!combobox.valueCollection}),
  "Id != null",
  "Car_Make__c IN (" & {!combobox.valueCollection} & ")"
)

Text Search Combined with Multi-Select

Combine multi-select filtering with a text search field:

"Car_Make__c IN (" & {!combobox.valueCollection} & ") AND " &
"Model_Name__c LIKE '%" & {!searchInput.value} & "%'"

Date Range with Multi-Select

Add date range filtering:

"Car_Make__c IN (" & {!combobox.valueCollection} & ") AND " &
"Year__c >= " & TEXT({!startYear.value}) & " AND Year__c <= " & TEXT({!endYear.value})

Key Takeaways

Multi-select comboboxes capture multiple values in a valueCollection
Reactive formulas automatically update when combobox selections change
The IN operator in SOQL filters for records matching any value in a list
Formula syntax: "FieldAPIName IN (" & {!combobox.valueCollection} & ")"
Map the formula to the data table's WHERE Clause for automatic filtering
This technique works with any object and any field that supports the IN operator
You can combine multiple filter criteria for advanced filtering scenarios

Next Steps

Now that you understand multi-select filtering, consider:

Adding multiple comboboxes for compound filtering
Combining with date range pickers or text search fields
Creating pre-set filter combinations users can choose from
Building filter templates that users can save and reuse
Adding visualizations (charts, metrics) that also respond to the filters

Need More Help?

If you have questions about implementing multi-select filtering for your specific use case, or if you encounter any issues with the formula or configuration, don't hesitate to reach out. We're here to help you create powerful, interactive filtering experiences with Avonni components

Last updated 2 days ago

Was this helpful?