Filters

As you may have read from the Embed Configuration Details page, you can apply additional filters when loading a report. You can also change filters dynamically which allows you to create your own custom filter pane which can match the brand of your application or automatically apply filters on some other context of your application to help show the user the correct visual/information.

Retrieving filters:

report.getFilters()
 .then(filters => {
     ...
 });

Applying filters: (See section below on Constructing Filters)

const filter = { ... };

report.setFilters([filter])
  .catch(errors => {
    // Handle error
  });

Keeping your application in sync with the report

When building a custom filter pane control it will be required to keep this updated with the state of the report. You can do this by adding an event handler for the filtersApplied event as shown below:

report.on('filtersApplied', event => {
   const filters = event.details.filters;
   this.appliedFilters = filters;
});

Removing Filters

report.removeFilters();

Page Level and Visual Level filters

As you may have read in Understanding the Object Hierarchy report, page, and visual objects all implement the IFilterable interface which means each of these objects can also use getFilters, setFilters, and removeFilters just like reports.

It's important to understand that all of these filters are independent and adding or removing to one level does not implicitly change another.

Constructing Filters

Filters are just javascript objects which have a special set of properties. There are two types of filters: Basic and Advanced which match the types of filters you can create through the filter pane. There are corresponding interfaces IBasicFilter and IAdvancedFilter which describe their required properties. These interfaces come from the [powerbi-models](https://github.com/Microsoft/powerbi-models) repo where you can see more details.

Sample of filters:

const basicFilter: pbi.models.IBasicFilter = {
  $schema: "http://powerbi.com/product/schema#basic",
  target: {
    table: "Store",
    column: "Count"
  },
  operator: "In",
  values: [1,2,3,4]
}

const advancedFilter: pbi.models.IAdvancedFilter = {
  $schema: "http://powerbi.com/product/schema#advanced",
  target: {
    table: "Store",
    column: "Name"
  },
  logicalOperator: "Or",
  conditions: [
    {
      operator: "Contains",
      value: "Wash"
    },
    {
      operator: "Contains",
      value: "Park"
    }
  ]
}

Differences between the types of filters

• Basic filters have a single operator with 1 or more values
• Advanced filters have a logical operator and accept 1 or 2 conditions which have their own operator and value.

There are two constructor functions pbi.models.BasicFilter and pbi.models.AdvancedFilter which help with the creation of these objects.

Note: If you are creating an AdvancedFilter with only a single condition then the logicalOperator should be set to "And". This reason is that the logical operator is ignored when being parsed by Power BI since there is only one condition and when it is serialized it will default to "And" and this ensures the filters returned when calling getFilters match the ones you set using setFilters. The AdvancedFilter helper method will help ensure you follow this practice.

const advancedFilter = new pbi.models.AdvancedFilter({
  table: "Store",
  column: "Name"
}, "And", [
  {
    operator: "Contains",
    value: "Wash"
  },
  {
    operator: "Contains",
    value: "Park"
  }
]);