Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.
Hi
Im new to Power BI and this forum but I am struggling to embed a report onto a web page using react js.
I have npm installed the library
npm install --save powerbi-client
included the library at the top of my page
import * as pbi from 'powerbi-client';
I can now see that there is an Embed method under the pbi
var config = {
type: 'report',
tokenType: models.TokenType.Embed,
accessToken: txtAccessToken,
embedUrl: txtEmbedUrl,
id: txtEmbedReportId,
permissions: permissions,
settings: {
filterPaneEnabled: true,
navContentPaneEnabled: true
}
};
pbi.Embed(/* Service */, /*Html Element */ ,config)
I can see that I need a service and to reference a HTML Element
I have managed to get a simple example working in plain JS from following:
https://microsoft.github.io/PowerBI-JavaScript/demo/v2-demo/index.html
Is there any documentation or an example on how this is called from react?
Solved! Go to Solution.
I am replying to myself as I think I have got closer and it might help others looking at this.
@Eric_Zhang I looked at the Angular example yesterday and kinda reverse engineered in our example.
The problem was that I was trying to call an abstract which was wrong
pbi.Embed(/* Service */, /*Html Element */ ,config)
In the end I did the following:
New up the powerBi Service:
let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);
and call it passing in the config
// Embed the report and display it within the div container.
var reportContainer = document.getElementById('reportContainer');
var report = powerbi.embed(reportContainer, config);
@IanControlF1 wrote:
Hi
Im new to Power BI and this forum but I am struggling to embed a report onto a web page using react js.
I have npm installed the library
npm install --save powerbi-clientincluded the library at the top of my page
import * as pbi from 'powerbi-client';I can now see that there is an Embed method under the pbi
var config = {
type: 'report',
tokenType: models.TokenType.Embed,
accessToken: txtAccessToken,
embedUrl: txtEmbedUrl,
id: txtEmbedReportId,
permissions: permissions,
settings: {
filterPaneEnabled: true,
navContentPaneEnabled: true
}
};
pbi.Embed(/* Service */, /*Html Element */ ,config)I can see that I need a service and to reference a HTML Element
I have managed to get a simple example working in plain JS from following:
https://microsoft.github.io/PowerBI-JavaScript/demo/v2-demo/index.html
Is there any documentation or an example on how this is called from react?
I don't know about react, however as per the response from the Power BI client author, you could reference the Angular sample, see this. For further request, I'd suggest you post in that git lib.
I am replying to myself as I think I have got closer and it might help others looking at this.
@Eric_Zhang I looked at the Angular example yesterday and kinda reverse engineered in our example.
The problem was that I was trying to call an abstract which was wrong
pbi.Embed(/* Service */, /*Html Element */ ,config)
In the end I did the following:
New up the powerBi Service:
let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);
and call it passing in the config
// Embed the report and display it within the div container.
var reportContainer = document.getElementById('reportContainer');
var report = powerbi.embed(reportContainer, config);
This worked like a charm.
idk why this is not explicity in the documentation, thanks anyway.
Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City
Check out the April 2024 Power BI update to learn about new features.
User | Count |
---|---|
12 | |
2 | |
1 | |
1 | |
1 |