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. This allows you to create your own custom filter pane to match the brand of your application, and to 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
  });

When building a custom filter pane control you must keep the pane 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;
});

report.removeFilters();

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.

Filters are just javascript objects that 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 that describe their required properties. These interfaces come from the 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"
    }
  ]
}

• Basic filters have a single operator with 1 or more values
• Advanced filters have a logical operator and accept 1 or 2 conditions that 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". The reason is that the logical operator is ignored when being parsed by Power BI because there is only one condition and when it is serialized it will default to "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"
  }
]);