Skip to content

Aquent | DEV6

Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

Embedding Microsoft Power BI into React

Written by: Ali Hamoody

In this short blog, I will share with you the components I used to embed Power BI Reports in a React application.

TL; DR

  • You need a Power BI license, and account for authentication.
  • Creating and publishing Power BI Reports is not discussed here
  • Use the npm package powerbi-client 
  • Code snippets.

Intro

Microsoft Power BI reports are increasing in popularity, due to the charming yet professional visualizations and interaction capabilities. This blog doesn’t go into the details of Power BI Reports authoring or publishing, instead, it picks up from that point to embed the report into your React application.

Steps and flow

Let’s get right to it. Here are the steps you need to follow:

  1. Assuming the Power BI Report is already published in a suitable workspace. You need to get the Report ID and the Dataset ID associated with that report from the report author. This is needed once per report.
  2. Call the Power BI API to get an “embed token”. This is the token that authorizes the user to access the report and allows the report to be loaded in the webpage. This should happen every time the web page containing the report is accessed.

To do that:

POST to https://api.powerbi.com/v1.0/myorg/GenerateToken

Example POST payload:

{
  "datasets": [
    {
	// This is the dataset ID	
      "id": "cfafbeb1-8037-4d0c-896e-a46fb27ff229".
    }
  ],
  "reports": [
    {
      "allowEdit": true,
	// This is the report ID	
      "id": "b2e49b01-2356-4456-bfb9-3f4c2bc4ddbd"
    },
    {
	// This is another report ID (if you have more than one)
      "id": "759908bb-ead8-4a43-9645-7ffbf921c68d"
    }
  ]
}  

The HTTP response for this POST operation contains the embed token.

Note that calling the API to obtain the embed token requires the user to be logged on to their Microsoft Azure AD account (or have an Azure app id and secret in base of B2C).

The logged on user has an access token that must be available in the header of the HTTP POST of the embed token API call.

For details, see:

https://docs.microsoft.com/en-us/rest/api/power-bi/embedtoken/generatetoken

  1. Use the embed token in the configuration object used to initialize the powerbi-client instance in your JavaScript code, as in the following code snippet:
// Lazy load the powerbi-client
const pbi = await import('powerbi-client');

// Get models. models contains enums that can be used.
const { models } = pbi;

// Embed Token
const tokenType = models.TokenType.Embed;

// Set required report permissions
const permissions = models.Permissions.All;

// Prepare the embed URL
const reportEmbedUrl = `https://app.powerbi.com/reportEmbed?reportId=${reportId}`;

// Embed configuration used to describe the what and how to embed.
// This object is used when calling powerbi.embed.
// This also includes settings and options such as filters.
// You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.

const config: IEmbedConfiguration = {
  type: 'report',
  tokenType,
  accessToken: liveEmbedToken, // this is the embed token obtained from the API
  embedUrl: reportEmbedUrl,
  permissions,
  settings: {
    filterPaneEnabled: true,
    navContentPaneEnabled: true,
  },
};
// Create the powerbi instance
const powerbi = new pbi.service.Service(
  pbi.factories.hpmFactory,
  pbi.factories.wpmpFactory,
  pbi.factories.routerFactory,
);

// Reset the report in case there was one displayed previously.
powerbi.reset(embedContainerRef.current);

// Embed the report and display it within the div container.
const report = powerbi.embed(embedContainerRef.current as HTMLElement, config);

The above code is derived from Microsoft examples found at:

https://microsoft.github.io/PowerBI-JavaScript/demo/v2-demo/index.html

  1. You might be wondering, what “embedContainerRef” is all about. Have a look at this trimmed down JSX code snippet:
  const embedContainerRef = useRef<HTMLDivElement>(null);
…

  return (
    <div ref={embedContainerRef} />
  );

Here we are using the React useRef to capture a reference to the <div> HTML element that contains the report. The powerbi-client injects the report contents inside this <div>

There you have it. You can now try it on your own, to embed your own Power BI Reports into your React-based website.

I only included minimal code examples that is necessary for the reports to work. The rest is on you.

I hope this is beneficial.

See you in the next blog.