How To Embed Power BI Report In Angular 6

Introduction

 

Lately, analytics and visualization play a significant role in boosting up businesses.  To that end, PowerBi is one of the most powerful visualization tools in the present market. On the other hand, Angular SPA has become more popular. So today you're going to learn how to embed PowerBi reports in angular applications.

 

Prerequisite

• Angular App.
• Sample PowerBi report.
• power-client. 

Step 1 - Create Angular App using Angular CLI.

 

We are going to create a sample Angular application to embed PowerBi reports using Angular CLI. Use the below command to generate the Angular application.

 

ng new angular-powerbi

 

The generated code structure looks like this.

 

 

Step 2 - Install powerbi-client npm.

 

powerbi-client is an official plugin from powerbi community. Reference link. Use below command to install.

 

npm install --save powerbi-client

 

Step 3 - Code Configuration.

 

After AD authentication you'll get the access token.(If AD is not integrated, we need to write an API to get access token). PowerBi has two categories of reports.

1. Application Own App(Single license).
2. User Own App(AD).

After getting access token, you need to configure in your component and html as follow.

 

View

<div style=" width: 100%;" [ngStyle]="{ 'height': (screenHeight-150)+ 'px' }" #reportContainer></div>

Component

 

Import powerbi-client first like below. 

import * as pbi from 'powerbi-client';

Later add element reference.

public screenHeight:number;
 @ViewChild('reportContainer') reportContainer: ElementRef;

Write an function "ShowReport" which takes access token as parameter.

showReport(accessToken) {
    // Embed URL
    let embedUrl = POWERBI.BASE_URL + POWERBI.REPORT_ID + "&groupId=" + POWERBI.GROUP_ID;
    let embedReportId = POWERBI.REPORT_ID;
    let config = {
        type: 'report',
        accessToken: accessToken,
        embedUrl: embedUrl,
        id: embedReportId,
        settings: {}
    };
    let reportContainer = this.reportContainer.nativeElement;
    let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);
    let report = powerbi.embed(reportContainer, config);
    report.off("loaded");
    report.on("loaded", () => {
        console.log("Loaded");
    });
    report.on("error", () => {
        this.getToken();
    });
}

Replace you're  POWERBI.REPORT_ID, POWERBI.GROUP_ID.

 

Call show report method in page load.

ngOnInit() {
       this.screenHeight = (window.screen.height);
       var token =this.getToken();
       this.showReport(token);
   }

That's it. Pwerbi report is embedded and starts rendering in your Angular application.

 

Step 4 - Settings 

 

Remove filter panel from the report. Change your embedded url like this:

let embedUrl = POWERBI.BASE_URL + POWERBI.REPORT_ID + "&groupId=" + POWERBI.GROUP_ID + "&filterPaneEnabled=false";

Remove Navigation pane from the report. Change your embedded url like this:

let embedUrl = POWERBI.BASE_URL + POWERBI.REPORT_ID + "&groupId=" + POWERBI.GROUP_ID + "&navContentPaneEnabled=false";

To render a specifice page, Replace POWERBI.DASHBOARD_REPSECTION with your page sectionId

let embedUrl = POWERBI.BASE_URL + POWERBI.REPORT_ID + "&groupId=" + POWERBI.GROUP_ID + "&pageName=" + POWERBI.DASHBOARD_REPSECTION";

Filters

let embedUrl = this.appConstants.powerBiBaseUrl + this.appConstants.pbiReportId + "&groupId=" + this.appConstants.pbiGroupId + "&pageName=" + this.appConstants.pbiOrgListingRepSection + "&$filter=" + this.appConstants.pbiTransactionRepFilter + "'" + yourfilterName+ "'";

Summary

 

In this article, I discussed how to embed a PowerBI report in an Angular application and how to configure settings like remove filter & nav pane and how to render specific pages, and also how to add filters to it. I hope this article is useful.