Using Power BI Embedded with Angular and Node Application

After searching on the internet I couldn’t find a proper tutorial that shows how to embed a power bi report in an angular and node application. So in this tutorial, I will show you guys how you can embed a power bi report in an angular and node application.

How power bi embedding works:

This is a simple flow chart of the main components of power bi and how they interact with each other. For simplicity, you could think of Power BI Client as the frontend angular app and the Power BI REST API as the backend node app.

PowerBI Embedded Flow Diagram

1. To embed the report on the frontend we first need an Embed Token, so we send a request for it to the backend.
2. After getting the request we first authenticate ourselves by using Power BI user name and password or by using Service Principal.
3. In return, AAD sends the backend an access token to our backend.
4. Then we can use this access to get embed token in return from the Power BI Service, this token prevents unauthorized access to different reports which are present in the same workspace.
5. We get this embed token and return it to the frontend app.
6. Then we use the Power BI Client and the embed token to display the power bi report on the frontend app.

Setting up Power BI Client:

1. First, we need to install Power bi client on Angular

$ npm install powerbi-client

2. Then we create in the environment file you can add all the important API links, you will get group ID and report ID from the Power BI Service after publishing your report

powerBI: {
    reportBaseURL: 'https://app.powerbi.com/reportEmbed',
    qnaBaseURL: 'https://app.powerbi.com/qnaEmbed',
    tileBaseURL: 'https://app.powerbi.com/embed',
    groupID: '<group-id>',
    reportID: '<report-id>'
}

3. We need to create a container in the component.html, where the embedded iframe will be displayed

<section id="report">
  <div style="width: 100%; height: 100%" #reportContainer></div> 
</section>

4. We can import the powerbi-client and environment file in the component.ts

import * as pbi from 'powerbi-client';
import { environment } from 'src/environments/environment';

5. Then we declare the required variables in the component.ts

report: pbi.Embed;
@ViewChild('reportContainer', { static: false }) reportContainer: ElementRef;

6. Then we can embed the report as follows, we will see how to get the embed token in the next section

showReport(Token) {
  // Embed URL    
  let embedUrl = environment.powerBI.reportBaseURL;
  let embedReportId = environment.powerBI.reportID;
let settings: pbi.IEmbedSettings = {
    filterPaneEnabled: false,
    navContentPaneEnabled: false,
  };
let config: pbi.IEmbedConfiguration = {
    type: 'report',
    tokenType: pbi.models.TokenType.Embed,
    accessToken: Token.token,
    embedUrl: embedUrl,
    id: embedReportId,
    filters: [],
    settings: settings
  };
let reportContainer = this.reportContainer.nativeElement;
  let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);
  this.report = powerbi.embed(reportContainer, config);
  this.report.off("loaded");
this.report.on("loaded", () => {
    console.log("Loaded");
    this.setTokenExpirationListener(Token.expiration, 2);
  });
this.report.on("error", () => {
    console.log("Error");
  });
}

Setting up Power BI REST API:

You can refer this repo for getting the embed token from the Node app, and you can edit the code inside it according to your needs. You can easily do the setup here and it will provide you the Application ID, then you edit the ‘config.json’ as follows

{
    "authorityUrl" : "https://login.microsoftonline.com/common/",
    "resourceUrl" : "https://analysis.windows.net/powerbi/api",
    "apiUrl" : "https://api.powerbi.com/",
    "appId" : "<app-id>",
    "workspaceId" : "<workspace-id>",
    "reportId" : "<report-id>",
    "username" : "<power-bi-username>",
    "password" : "<power-bi-password>"
}

Add the app-id here, and the other details you can get after publishing your report on the power bi service. After doing this you can simply run the Node app and send a request to it when you need the embed token.

Conclusion:

Now that you have learned how to embed Power BI reports, you can learn more on how to apply filters, custom settings by reading these docs. You can also learn more about how to refresh the embed token automatically on the frontend by reading this.