Forum Discussion
Embed PowerBI Report is not showing.
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.
- Anonymous4 years ago
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 ZhouIf this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
1 Reply
- AnonymousNot applicable
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 ZhouIf this post helps, then please consider Accept it as the solution to help the other members find it more quickly.