> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/tutorials/reactive-query-tutorials/how-to-create-a-combobox-filtered-data-table.md).
# How to Create a Combobox-Filtered Data Table
## Overview
In this tutorial, we have two separate [Avonni Comboboxes](/flow/flow-components/combobox.md): 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
"Type= '"&{!TypeCombobox.value}&"' AND Industry = '"&{!IndustryCombobox.value}&"'"
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:
```
IF(
ISBLANK({!PartySelection.value}),
"Id != null",
"Party__c = '" & {!PartySelection.value} & "'"
)
```
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:
```
"Party__c = '" & {!selectedCaseRole.Party__c} & "'"
```
`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](https://developer.salesforce.com/docs/atlas.en-us.soql_sosl.meta/soql_sosl/sforce_api_calls_soql_select_stringescapes.htm).
## 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.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.avonnicomponents.com/flow/tutorials/reactive-query-tutorials/how-to-create-a-combobox-filtered-data-table.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.