Steps to Load a Power BI Report on your React Application.

[Guest Julia_Muiruri]

Set the scenario

 

 

“Constoso is a fictitious company that deals computers, furniture, software and electronics”

 

"Developer walks into Sales Managers office"

 

Sales Manager: Good morning. I recently learned how to use Power BI to get great visualization and analysis/ breakdown of our products and regions, our key contributors for revenue and to even detect any anomalies in the data using Artificial Intelligence. However, I wanted to view this report with real time & interactive visuals on our company website using my admin portal. How can you help?

 

 

 

Developer: Good morning – I’m glad Power BI is helping you understand the breakdown of our products here at Contoso and we can absolutely load the Power BI report on our website built using React. Give me a day and I will get back to you with the feature update.

 

 

 

This blog contains a step-by-step guide on how to create a React project and embed a Power BI Report. Follow along to learn how you can achieve this today!

 

 

 

Section 1: Prepare your Power BI Report

 

 

If this is your first time working with Power BI, this section takes you through how you can add an Artificial Intelligence BI Sample Report in your Power BI Service account to use it for this project. If you already have a report that you want to embed in a new React project, skip to section 2.

 

 

 

Step 1: Get a free M365 Developer Account that includes a Power BI free license.

 

 

 

 

Step 2: Open the Power BI Service at (app.powerbi.com) and select `Learn` in the Left navigation.

 

 

 

 

 

 

 

Step 3. Click on the ‘Artificial Intelligence Sample’ and it will be saved in your Workspace.

 

 

Take a minute to look through the report then leave it open on the browser. We’ll come back to it.

 

 

Section 2: Create a new React Application

 

Step 1: Open command prompt in the file directory/ folder where you’d like to create your project and create a new react project (we’ll call it bi-embedded) using

 

 

 

 

npx create-react-app bi-embedded

 

 

 

 

 

 

 

 

 

 

Step 2: Navigate into the project using the line below then use code . to open the project on Visual Studio Code

 

 

 

 

cd bi-embedded

 

 

 

 

 

 

 

 

Step 3: Open the App.js file in the src folder and remove the default code in the App function

 

 

 

 

 

 

Step 4: To embed a Power BI Report/ dashboard/ visual, we need to use the Power BI React component.

 

 

But before using the component, we need to install the powerbi-client-react package into the project. To do this, use Ctrl + shift + ` to open the terminal and run the command below to install the latest version.

 

 

 

 

 

npm I powerbi-client-react

 

 

 

 

 

 

 

 

Step 4: We now need to import the component to use in the project.

 

 

We will also import ‘models’ which we will use to set the token type since we will be using Azure Active Directory authentication to embed Software as a Service (Saas), that is Power BI Service. Add the below imports at the top of the App.js file

 

 

 

Import { PowerEmbed } from ‘powerbi-client-react’;

import { models } from 'powerbi-client';

 

 

 

 

 

Step 5: Add the code below to embed our report on the react page.

 

 

 

 

<section className="App">

<h1>Constoso Sales Manager Power BI (Business Intelligence)</h1>

<section id="bi-report">

<PowerBIEmbed

embedConfig = {{

type: 'report', // Since we are reporting a BI report, set the type to report

id: '<Report Id>', // Add the report Id here

embedUrl: '<Embed Url>', // Add the embed url here

accessToken: '<Access Token>', // Add the access token here

tokenType: models.TokenType.Aad, // Since we are using an Azure Active Directory access token, set the token type to Aad

settings: {

panes: {

filters: {

expanded: false,

visible: true

}

},

background: models.BackgroundType.Transparent,

}

}}

 

eventHandlers = {

new Map([

['loaded', function () {console.log('Report loaded');}],

['rendered', function () {console.log('Report rendered');}],

['error', function (event) {console.log(event.detail);}],

['visualClicked', () => console.log('visual clicked')],

['pageChanged', (event) => console.log(event)],

])

}

 

cssClassName = { "bi-embedded" }

 

getEmbeddedComponent = { (embeddedReport) => {

window.report = embeddedReport; // save report in window object

}}

/>

</section>

</section>

 

 

 

 

 

 

AI Bonus

 

 

I love GitHub Copilot because apart from just suggesting code snippets while you build your project, you can use it to learn as you build. In this case, let’s assume you do not know what the above code does. Instead of searching online for explanations of what the code might be doing, you can now ‘Ask Copilot’ within Visual Studio Code to explain a piece of code to you in natural language

 

1. First, install the Copilot Labs extension

 

2. Second, highlight the block of code that you want to understand more

 

3. Lastly, click on ‘Ask copilot’ and an instant explanation of your code will be showed right there on your editor.

 

 

 

 

 

 

 

Step 6: Next action is to get the report id, embed url and access token to load the report from your Power BI Service account

 

 

 

 

 

 

 

Go back to your Power BI Service page to view the report and copy the report id from the url as shown below, then paste the id in the ‘id’ property on your code

 

 

 

 

 

 

To get the embed url, we will use the Power BI REST APIs and access the ‘Get report endpoint’ Note: If you want to add a report from a shared workspace, use the Get report in group endpoint.

 

 

 

Reports - Get Report - REST API (Power BI Power BI REST APIs) | Microsoft Learn

 

1. Click on Try it and sign in using the email address with your Power BI Service. Note: The account should have AAD and a free M365 Developer plan includes AAD for free.

 

2. Paste in the report id on the parameter field and click ‘Run’

 

 

 

 

 

Copy the embed url from the response body and paste in the ‘embedurl’ property on your code

 

 

 

 

 

 

To copy the Access token, go back to your Power BI Service page to view the report, right click on the page and select ‘Inspect’ to open your browser dev tools.

 

On the console, type the line below and hit enter.

 

 

 

copy(PowerBIAccessToken)

 

 

 

 

 

 

 

 

Note: You’ll see ‘Undefined’ on the console, but do not panic. The token is already copied, so head back to your code and paste it in the ‘accesstoken’ property

 

Use this command to start your development server which will load a react page with a header title and a report that is not very clear (the report is too small)

 

 

 

 

 

npm start

 

 

 

 

 

 

Step 7: Use CSS to make our report more presentable.

 

 

Since we already set a CSS class name (bi-embedded) on our App.js, add the below piece of code on your App.css file

 

 

 

 

 

.bi-embedded {

display: inline-block;

width: 90%;

height: 800px;

vertical-align: -0.125em;

fill: currentColor;

overflow: hidden;

}

 

 

 

 

 

 

Check out your react page to see the full BI Report which is interactive.

 

 

 

Extra Resources

 

 

Power BI embedded analytics documentation - Power BI | Microsoft Learn

 

Power BI REST APIs for embedded analytics and automation - Power BI REST API | Microsoft Learn

 

Continue reading...