Microsoft Fabric Community Conference 2025, March 31 - April 2, Las Vegas, Nevada. Use code MSCUST for a $150 discount.
Register nowThe Power BI DataViz World Championships are on! With four chances to enter, you could win a spot in the LIVE Grand Finale in Las Vegas. Show off your skills.
Using the powerBI-client-react sdk for embedding powerbi Report.
I was able to load the report by manually setting the reportID, the embedURL and the embedtoken.
but when I'm trying programatically, only the log is showing and I get this response in the console.
Power BI SDK iframe is loaded but powerbi.embed is not called yet.
Can anyone help me wit this.
Solved! Go to Solution.
Hi @matsuguitan ,
You can refer to below offical blog to learn more details. And there is a demo in this blog.
For reference:
Embed a Power BI component in a React application
Try this code:
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;
}
}
Best Regards,
Rico Zhou
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
Hi @matsuguitan ,
You can refer to below offical blog to learn more details. And there is a demo in this blog.
For reference:
Embed a Power BI component in a React application
Try this code:
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;
}
}
Best Regards,
Rico Zhou
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
User | Count |
---|---|
10 | |
4 | |
3 | |
3 | |
3 |