Jaa

Embed a Power BI item in a React application

  • Artikkeli

When you create a Power BI embedded analytics application, React can help you optimize performance with bootstrap integration, while using all of the client-side APIs, including report authoring. It also simplifies the Power BI embed lifecycle management in your application. The Power BI React component supports both JavaScript and TypeScript and helps you embed your analytics in a React web application.

The React library lets you embed the following Power BI items:

  • Reports
  • Dashboards
  • Dashboard tiles
  • Report visuals
  • Q&A

How to embed a Power BI item in a React web app

This section describes how to import React into your app and use it to embed a Power BI report.

For detailed usage information, see the Power BI React readme file.

Import the React library

The Power BI React component can be found on NPM. It's also open sourced on GitHub.

To import React into your web app, add the imports listed:

import { PowerBIEmbed } from 'powerbi-client-react';
import { models } from 'powerbi-client';

Embed the report with React

This example shows how to embed a Power BI report using React. Below the example you can find a description for each component in the code sample.

embedConfig = {
    {
        type: 'report', // Supported types: report, dashboard, tile, visual, and qna.
        id: '<Report Id>',
        embedUrl: '<Embed Url>',
        accessToken: '<Access Token>',
        tokenType: models.TokenType.Embed, // Use models.TokenType.Aad if you're embedding for your organization.
        settings: {
            panes: {
                filters: {
                    expanded: false,
                    visible: false
                }
            },
        }
    }
}

eventHandlers = {
    new Map([
        ['loaded', function () {
            console.log('Report loaded');
        }],
        ['rendered', function () {
            console.log('Report rendered');
        }],
        ['error', function (event) {
            console.log(event.detail);
        }]
    ])
}

cssClassName = {
    "report-style-class"
}

getEmbeddedComponent = {
    (embeddedReport) => {
        window.report = embeddedReport;
    }
}

The following list includes descriptions or additional information for each component in the code snippet example.

  • Embed config - Defines the content that you're embedding, and specifies the content's settings. The embed configuration changes when you embed the following Power BI items:

  • eventHandlers - A map object for event names and their handlers. See How to handle events for more information.

  • cssClassName - Gives the embedded item a CSS class names that let you control the style of the embedded iframe using CSS.

  • getEmbedComponent - A callback that helps you get the embedded instance, so that you can use all of the APIs the Power BI Client library allows. For example, when embedding a report, you get an instance of the Report class.

Bootstrap a component

powerbi.bootstrap is a method used to help developers embed Power BI items faster and get better performance. For more information, see Use bootstrap for better performance.

embedConfig = {
    {
        type: 'report', // Supported types: report, dashboard, tile, visual, and qna.
        id: undefined,
        embedUrl: undefined,
        accessToken: undefined, // Keep as an empty string, null, or undefined.
        tokenType: models.TokenType.Embed
    }
}

React demo

The React repository includes a demo that illustrates the complete flow of bootstrapping a report, embedding, and updating the embedded report. It also demonstrates the usage of the powerbi report authoring library by deleting a visual from a report upon clicking the Delete a Visual button.

For more information, see the demo section of the readme file.

An animated gif that shows the Power B I React Demo.

Running the demo

The demo is a subfolder in the repository. To run the demo on localhost, follow these steps:

  1. Run the following commands:

    npm run install:demo
npm run demo

  2. To view in your browser, redirect it to http:/localhost:8080/.

Related content