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.

Filters are supported for AnalyticsDashboard and AnalyticsVisualization components only.

Important

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.

1analyticsComponent.addEventListener(EventName.COMPONENT_LOADED, (event) => {
2  analyticsComponent.applyFilters([
3    // UnifiedFilterJson filter definition
4  ]);
5});

Filter methods utilize UnifedFilterJson for data input and output.

The syntax for UnifiedFilterJson is

1{
2   "dataSource": "<dataSourceName>", //string
3   "fieldName": "<fieldName>", //string
4   "operator": <filterOperationEnum>, //enumeration
5   "values": [<filterValue1>, <filterValue2>, ...] //array of 1 or more filter values
6}

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:

1{
2  "dataSource": "C360SDM",
3  "fieldName": "AccountID",
4  "operator": FilterOperator.Equals,
5  "values": ["3054XF"]
6}

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

1filters = analyticsComponent.getFilters();

Apply Component Filters

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

1analyticsComponent.applyFilters([
2  {
3    dataSource: "C360S",
4    fieldName: "AccountID",
5    operator: FilterOperator.Equals,
6    values: ["3054XF"],
7  },
8]);

Clear Component Filters

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

1analyticsComponent.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