Embedding Power BI in a React Application

Embedding Power BI into your web applications can enhance user engagement and provide valuable insights right where users need them. In this guide, we’ll walk through the process of embedding Power BI reports into a React application using the Power BI client library. This will cover everything from setting up your React environment to utilizing Power BI APIs for enhanced functionality.

Setting Up Your React Application

To start embedding Power BI, you first need to create a new React application. This requires Node.js, which can be downloaded from [Nodejs.org](https://nodejs.org). Once Node.js is installed, you can create a React application using a few commands:

1. Open your terminal or command prompt.

2. Navigate to your desired directory.

3. Run the following commands:

* npx create-react-app my-app

* cd my-app

* npm start

After executing these commands, your React application will start, and you should see the default React welcome screen.

Integrating Power BI Client for React

Next, you need to integrate the Power BI client library into your React application. This library allows you to embed various Power BI artifacts such as reports, dashboards, and visuals. Here’s how to do it:

1. Open your project in a code editor, like Visual Studio Code.

2. Navigate to the package.json file in your project.

3. Add the Power BI Client React library to your dependencies:

* "powerbi-client-react": "1.3.0"

5. Save the changes and run npm install to install the new package.

With the Power BI client library installed, you can now import it into your React components.

Embedding a Power BI Report

To embed a Power BI report, you will modify the App.js file in your React application:

1. Import the Power BI Embed component at the top of your App.js file:

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

1. Remove any existing content and add the Power BI Embed component in the render method:

<PowerBIEmbed

embedConfig={{

type: 'report',

id: '',

embedUrl: '',

accessToken: '',

tokenType: models.TokenType.Aad

}}

cssClassName={"embed-container"}

getEmbeddedComponent={(embeddedReport) => {

window.report = embeddedReport;

}}

/>

Make sure to replace <YOUR\_REPORT\_ID>, <YOUR\_EMBED\_URL>, and <YOUR\_ACCESS\_TOKEN> with actual values from your Power BI service.

Obtaining Embed URL and Access Token

To successfully embed a Power BI report, you need the embed URL and access token. Here’s how to obtain these:

1. Log into the Power BI service and navigate to the report you want to embed.

2. Use the Power BI REST API to get the report embed URL:

Make a GET request to */reports/getEmbedUrl** for the specific report.

* Copy the embed URL from the API response.

4. To generate an access token, you can use the Azure Active Directory token. Open the developer tools in your browser and run the following command:

copy(window.localStorage.getItem('accessToken'))

1. Ensure the token type is set correctly in your embed configuration. For Azure AD tokens, it should be set to models.TokenType.Aad.

Styling the Embedded Report

To improve the appearance of the embedded report, you can add some CSS styles. In your CSS file, define a class for the embedded container:

.embed-container {

height: 500px;

width: 800px;

}

Adjust the height and width according to your layout needs. This styling ensures that the embedded report is displayed correctly within your application.

Interacting with the Embedded Report

Once your report is embedded, you can use the Power BI client API to interact with it. For example, you can retrieve the filters applied to the report:

const filters = await window.report.getFilters();

This command returns an array of filter objects, which you can then manipulate or display as needed in your application. This interaction allows for dynamic reporting experiences tailored to user needs.

Authentication Considerations

When embedding Power BI reports, authentication is crucial. If you are embedding for internal users, Azure Active Directory authentication is typically used. For external users, you may need to generate embed tokens on the server-side. This approach allows you to control access and ensure users who don’t have a Power BI license can still view reports.

Final Thoughts

Embedding Power BI in a React application opens up a world of possibilities for data visualization and analysis. By following the steps outlined in this guide, you can integrate Power BI reports seamlessly, providing your users with powerful insights directly within your application. Don’t forget to explore additional APIs for enhanced functionality and interaction.

Thank you for following along! If you found this guide helpful, please click the like button and subscribe for more content on Power BI and React development.

kpikings.com