# Using Filters in Tableau Next Components

Analytics components leverage filters to narrow down the data displayed. When embedding these components, filters are crucial for refining the data your users see, allowing them to concentrate on specific details. For instance, if a component presents account insights, you can apply a filter based on account ID to ensure only information relevant to the account the user is currently viewing is rendered.

:::important
Filters are supported for `AnalyticsDashboard`, `AnalyticsMetrics`, and `AnalyticsVisualization` components only.
:::

For embedded components, perform filter operations only after the component has rendered. Alternatively, you can use the `COMPONENT_LOADED` event, performing filter operations within its callback.

```javascript
analyticsComponent.addEventListener(EventName.COMPONENT_LOADED, (event) => {
  analyticsComponent.applyFilters([
    // UnifiedFilterJson filter definition
  ]);
});
```

Filter methods utilize `UnifedFilterJson` for data input and output.

The syntax for `UnifiedFilterJson` is

```json
{
   "dataSource": "<dataSourceName>", //string
   "fieldName": "<fieldName>", //string
   "operator": <filterOperationEnum>, //enumeration
   "values": [<filterValue1>, <filterValue2>, ...] //array of 1 or more filter values
}
```

The `dataSource` is the API name of the semantic model the component is retrieving the data from. The `fieldName` is the API name of a field present in the data source. Use one of the `FilterOperation` enumerated values to specify the filter action. Then specify one or more values to use for the filter. These values can be text, numerical, boolean, or date types, but the types can’t be mixed. They must all be the same type.

A natural language filter like “show the data from the semantic model, C360SDM, where the account id equals 3054X'”, is represented in `UnifiedFilterJson` as:

```json
{
  "dataSource": "C360SDM",
  "fieldName": "AccountID",
  "operator": FilterOperator.Equals,
  "values": ["3054XF"]
}
```

## Get the Component Filters

To see the current filters for a component, use the `getFilters` method. This method returns a list of `UnifiedFilterJson` objects.

### Example

```javascript
filters = analyticsComponent.getFilters();
```

## Apply Component Filters

To apply filters in your component, use the `applyFilters` method.

```javascript
analyticsComponent.applyFilters([
  {
    dataSource: "C360S",
    fieldName: "AccountID",
    operator: FilterOperator.Equals,
    values: ["3054XF"],
  },
]);
```

## Clear Component Filters

To clear all filters for your component, use the `clearFilters` method.

```javascript
analyticsComponent.clearFilters();
```

## Supported Filter Operators

Valid values for the `FilterOperator` enumeration are:

- `Between`
- `Contains`
- `ContainsIgnoreCase`
- `CurrentFiscalQuarter`
- `CurrentFiscalQuarterToDate`
- `CurrentFiscalYear`
- `CurrentFiscalYearToDate`
- `CurrentMonth`
- `CurrentMonthToDate`
- `CurrentQuarter`
- `CurrentQuarterToDate`
- `CurrentWeek`
- `CurrentYear`
- `CurrentYearToDate`
- `DoesNotEndWith`
- `DoesNotEndWithIgnoreCase`
- `DoesNotEquals`
- `DoesNotEqualsIgnoreCase`
- `DoesNotStartWith`
- `DoesNotStartWithIgnoreCase`
- `EndsWith`
- `EndsWithIgnoreCase`
- `Equals`
- `EqualsIgnoreCase`
- `GreaterThan`
- `GreaterThanOrEqualTo`
- `IsEmpty`
- `IsNotEmpty`
- `IsNotNull`
- `IsNull`
- `LastNDays`
- `LessThan`
- `LessThanOrEqualTo`
- `NextFiscalQuarter`
- `NextFiscalYear`
- `NextMonth`
- `NextNDays`
- `NextQuarter`
- `NextWeek`
- `NextYear`
- `NotContains`
- `NotContainsIgnoreCase`
- `NotInValues`
- `PreviousFiscalQuarter`
- `PreviousFiscalQuarterToDate`
- `PreviousFiscalYear`
- `PreviousFiscalYearToDate`
- `PreviousMonth`
- `PreviousMonthToDate`
- `PreviousQuarter`
- `PreviousQuarterToDate`
- `PreviousWeek`
- `PreviousYear`
- `PreviousYearToDate`
- `StartsWith`
- `StartsWithIgnoreCase`
- `Tomorrow`
- `Values`
- `Yesterday`

## Filter Errors

Filters require specific values to work as expected and should be tested before production use. If you add code to let your users define filters, make sure you build in validation and error handling.

Here are possible errors for filters at runtime.

| Error Code       | Error Message                              | Resolution                                                                                           |
| ---------------- | ------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
| `INTERNAL_ERROR` | `Invalid fieldName in filter JSON`         | Check the `fieldName` in the filter code or prompt your user to provide a valid `fieldName` value.   |
| `INTERNAL_ERROR` | `Invalid filter operator in filter JSON`   | Check the `operator` in the filter code or prompt your user to provide a valid `operator` value.     |
| `INTERNAL_ERROR` | `Invalid data source in filter JSON`       | Check the `dataSource` in the filter code or prompt your user to provide a valid `dataSource` value. |
| `INTERNAL_ERROR` | `Cannot find enum for name <OperatorName>` | Check the `operator` in the filter code or prompt your user to provide a valid `operator` value.     |
| `INTERNAL_ERROR` | `Invalid values in the filter JSON`        | Check the `values` in the filter code or prompt your user to provide valid `values`.                 |

**See Also**

- [`AnalyticsFilter`](/docs/analytics/sdk/references/sdk-js-v2/AnalyticsFilter.md)
- [`FilterOperator`](/docs/analytics/sdk/references/sdk-js-v2/FilterOperator.md)
- [`UnifiedFilterJson`](/docs/analytics/sdk/references/sdk-js-v2/UnifiedFilterJson.md)