Controlling a Power BI filter from an Angular application

Question

I'm working on developing a POC with a sample report. Goal is to verify that everything is set to develop a new Angular + .NET Core application that is integrated with our customer's Power BI reports.

We have been provided application credentials, capability, and required IDs to generate embed token and URL.

Now I started creating a blank Angular project where I just try to integrate the report that results from the parameters generated by the .NET backend. Currently, there is no even AJAX. I copy and paste the console output of .NET Core into Angular project, it's a POC I'll use to tell the customer everything is set and we'll kick the project off.

Okay, let's get to the code.

App Component HTML

<powerbi-report [embedConfig]="embedConfig" cssClassName="powerbi-frame"></powerbi-report>

<select [(ngModel)]="selectedState" (ngModelChange)="changeState()">
  <option *ngFor="let s of STATES" value="s">{{s}}</option>
</select>

This displays the PBI report in a huge frame and a drop down box containing the US states.

App Component Typescript

export class AppComponent implements OnInit {
  title = 'powerbi-poc';
  embedConfig!: IReportEmbedConfiguration;


  STATES = US_STATES;
  selectedState: any;

  ngOnInit(): void {
    this.embedConfig = {
      groupId: '..',
      id: '..',
      embedUrl: EMBED_URL,
      accessToken: EMBED_TOKEN,


      type: 'report',
      tokenType: TokenType.Embed,
      viewMode: ViewMode.View,
      settings: {
        customLayout: {
          pageSize: {
            type: PageSizeType.Widescreen,
          },
          displayOption: DisplayOption.FitToPage,
        },
        panes: {
          filters: {
            expanded: true,
            visible: true
          }
        },
        background: BackgroundType.Transparent,
      },
    };

  }


  changeState() {
    let filter: IBasicFilter = {
      $schema: "http://powerbi.com/product/schema#basic", filterType: FilterType.Basic,
      values: [this.selectedState],
      operator: 'In',
      target: {
        column: 'State',
        table: 'Confirmed cases',
      }
    };
    this.embedConfig.filters = [filter]
  }
}

Changing the selection inside the drop down has no effect. The above code is capable only of initializing the PBI report. I'm not even sure (maybe I'll have to check with the customer) about the table and column names.

Desired goal

Changing the selected value of state inside the page should trigger a filtering inside the report, just as clicking on any US state in the map.

Question

How can I update the report with filters driven from outside the report itself? I guess there could be an object on which to trigger an update, it's probably not sufficient to update the backed object from Typescript method.

Answer 1

If you want to apply filters to your report refer to the code below.

• Make sure you installed powerbiclient library for updateFilters function.
• If you only update the filters the DOM sometimes not updated. Make sure you are returning the response so the DOM will get updated.

 changeState() {
    const filter: IBasicFilter = {
      $schema: "http://powerbi.com/product/schema#basic", filterType: FilterType.Basic,
      values: [this.selectedState],
      operator: 'In',
      target: {
        column: 'State',
        table: 'Confirmed cases',
      }
    };
    try {
        const response = await report.updateFilters(models.FiltersOperations.Add, [filter]);
        console.log("Report filter was added.");
        return response
        }
        catch (errors) {
        console.log(errors);
        }
    }

By clicking on any state visual in the map you can do that with eventHandlers also. You can find the code from Angular wrapper.

Find the References here:

https://docs.microsoft.com/javascript/api/overview/powerbi/control-report-filters https://github.com/microsoft/powerbi-client-angular