Hello everyone!
My name is Amit Shuster, a Product Manager of Power BI embedded analytics
And in this video we are going to learn how to embed Power BI in a React application
Power BI embedded analytics let you embed Power BI reports
and other artifacts into your web application
providing your users with analytics where they need it the most
We're going to cover how to start a new React application
And how to use the React library to embed a Power BI report
So the first thing we are going to do, we are going to create a new React application
In order to create a React application, we are going to use Node.js
You can install Node.js by going to Nodejs.org
After installing Node.js
We are going to create a React application using these three commands
You can find these commands in the Reactjs.org website
Under the docs create a new React application
So let's start, we are going to take these three commands
And we are going to our React application folder
Here, I'm clicking on Shift and doing right click
And opening a PowerShell window here
Now we are going to run these three commands
There three commands will create the React app called my app
It will change the directory to my-app folder
And then will use NPM start to run the React application
After these three commands finished running
The node server will start and we will see the following screen
The next thing we need to do is edit the source app js
And save to reload
We are going to add the Power BI client React
The Power BI client React is a React component
That let you embed Power BI report
Dashboard, dashboard tile, report visual or Q&A
In your React application
What we need to do is import Power BI Embed from Power BI client React
And then use this component
So let's go and install this package
I'm going to the folder where I installed my app
In my app I'm going to click here again, right click and Shift
And click on open PowerShell window here
Now I'm going to write code dot
This will open the visual studio code in the current folder
And this is what I'm going to use for this video
We go first to the package JSON
In the package JSON we need to add our library in the dependencies
So I'm going to write here, Power BI client React
And add the current version
1.3.0
So this is the latest version
And I'm going to click on save
So I have here now the Power BI client React
And the next thing I need to do, is just go to my app
And run NPM install
To install the new package I just added to the package JSON
So while this is installing the new node modules
We can go and start modifing our application
We go to source and open the App.JS
Here you can see the app that was rendered
What we are going to do first is delete all the text that we have here
And we are going to add the import
At the top
So let's go back to the quick start
And I'm going to copy this first line
Import Power BI Embed
So let's just add it here, import Power BI Embed from
Power BI client React
And the next thing I'm going to do, I'm just going to copy
The example from here the embed a Power BI report
So let's copy this example and paste it
In my application
So I'm going to paste it just under the React logo
So I'm adding it here and I'm going to select all this code area
And going to click on Alt + Shift + F
This will format it to the right position
So now, you can see here I have type of report
I need to add here the report ID, embed URL and access token
And I also need to specify the token type
Here we are using the models
So in order to use the models I also need to import that
And I'm going to import models from the Power BI client
and the Power BI client is going to be installed with the Power BI client React
The Power BI client React is basically a wrapper
Specifically for React, for the Power BI client library
And the last thing I'm going to do before I'm going to modify these
ID, embed URL and access token
Is that I go here to the bottom
And here you can see we have this report equals embed report as report
And this example is written in TypeScript
So we are going to use JavaScript for this video
So I'm just going to delete the "as report"
And instead of using "this.report"
I just want to save it on the window
So "window.report" equals the "embeddedReport"
That I get from the get embed component
Okay, so let's go and find our report ID, embed URL and access token
So we are going to Power BI service and finding the report that we want to embed
In order to embed a Power BI report I need to get the embed URL
and to get a token
So for this video I'm just going to use
The REST APIs try it to get the embed URL
In a real life application you should do this REST call before embedding the report
So here we are going to use the get report in group
And we are going to click on Try It
Now I'll need to sign to Azure
And after signing in I can specify here a group ID and a report ID
And just run this REST API
So I'm going to get the group ID and the report ID
From the URL
So I'm coping here the group ID and I'm coping the report ID from here
And I'm going to click Run
In the response body we got the embed URL
So we are going to copy this embed URL to our application
Now I also need the report ID, which I already copied here
So I'll go here to the top and just copy the report ID into my application
And the last thing I need is an access token
We can either generate an embed token
By using the REST API for generate token
We can use the Generate Token to get embed token for multiple reports and datasets
Or just use the Reports Generate Token In Group
To generate the token for the specific report and dataset
For this application and for our development
I'm going to open the developer tools in the Power BI service
I'm just going to write copy and getting the Power BI access token
So here we are going to use our own
Azure AD access token to embed a report
So here is the access token that we are currently going to use
And as I mentioned this is not an embed token, this is an AAD token
So I'll change this one to AAD
Now after we did these changes
Let's go and build our application
So here we can see that the node modules installation is finished
And I can go now and run npm run build
To build my application
So as you can see now we only have the React log
And under the React logo we have our report embedded in our application
So let's do some CSS modifications, so everything will look better
So the first thing we need to do is go here to the bottom
And see the CSS class name
Here we can give a class name to our embedded report
So let's call it embed container
Now let's go to the CSS file and define some styling for this class
I'm going to add here a new class styling
For the embed container
I'm going to set the height of it
To be 500 pixels and the width to be 800 pixels
The last thing I'm going to do is I'm going to change the height of the app logo
So let's just change it to 10 vmin
And let's go see our application
So now you can see that the embedded report is here
But I see that the background is transparent
So the last modification I'm going to do
Is go to this App.js and I'm going to remove here the background property
So instead of having the background transparent
I just want to have the original background of the report
I can also change here the settings for example I can say
Whether the filters pane will be expanded or visible
So let's just show the filters pane
So now I'm going here, I'm going to hit refresh
And now you can see that we have the embedded report in our React application
But before we are going to finish, I'm going to teach you
How to use our APIs with this report
So if you remember, we just added a new window object called report
So this report is the report object
From the Power BI client library
And now you can go and use all the APIs that we have
You can go and do report.getFitlers
Now because all of our APIs return promise
In order to get the result I can just write
await report.getFilters to see the value
So now I'm getting here an array of filter objects
And you can see that we have filter
That is a basic filter
And it's filtering the "date" table and the "year" column to 2014
As you can see here at the top
And that's all for this video
So now the next thing you need to do is
To get an authentication to your application
This can be either an Azure sign in, if you are embedding for your organization
and for internal users
Or you can use a server side to generate embed tokens
For your end users, when they don't have Power BI license
I hope you enjoyed this video, don't forget to click the like button and subscribe
See you in the next one