Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
karthikeayan
New Member

Power BI Logo blinks in iFrame when integrating Power BI report into Web App

I have followed this doc "https://powerbi.microsoft.com/en-us/documentation/powerbi-developer-integrate-report-get-report" to integrate Power BI report into my web application.

 

All steps went fine, but finally in my iFrame, I am not seeing the Power Bi report, instead getting blinking Power BI icon.

 

Anyboy faced same kind of issue already?

2 ACCEPTED SOLUTIONS
Eric_Zhang
Employee
Employee


@karthikeayan wrote:

I have followed this doc "https://powerbi.microsoft.com/en-us/documentation/powerbi-developer-integrate-report-get-report" to integrate Power BI report into my web application.

 

All steps went fine, but finally in my iFrame, I am not seeing the Power Bi report, instead getting blinking Power BI icon.

 

Anyboy faced same kind of issue already?


@karthikeayan

What is the output in the browser console(F12, console tab)? I can embed a report without any issue, see a demo with below static HTML. Just replace the accesstoken and reportid with yours and save it in a .html file, then open it in Chrome.

 

<html>

 <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/jquery/dist/jquery.js"></script>

<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js"></script>
 
<script type="text/javascript">
window.onload = function () {  
 

var embedConfiguration = {
    type: 'report',
    accessToken: 'your access Token here',
    embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=yourReportIDhere' 

}; 
 

var $reportContainer = $('#reportContainer');
 
var report = powerbi.embedNew($reportContainer.get(0), embedConfiguration);
 
}
</script>

<div id="reportContainer" ></div>

</html>

 

View solution in original post

okay, I found the issue. My javascript was screwed up.

 

I was getting 403 in my console window.

 

Now I fixed it!

View solution in original post

2 REPLIES 2
Eric_Zhang
Employee
Employee


@karthikeayan wrote:

I have followed this doc "https://powerbi.microsoft.com/en-us/documentation/powerbi-developer-integrate-report-get-report" to integrate Power BI report into my web application.

 

All steps went fine, but finally in my iFrame, I am not seeing the Power Bi report, instead getting blinking Power BI icon.

 

Anyboy faced same kind of issue already?


@karthikeayan

What is the output in the browser console(F12, console tab)? I can embed a report without any issue, see a demo with below static HTML. Just replace the accesstoken and reportid with yours and save it in a .html file, then open it in Chrome.

 

<html>

 <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/jquery/dist/jquery.js"></script>

<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js"></script>
 
<script type="text/javascript">
window.onload = function () {  
 

var embedConfiguration = {
    type: 'report',
    accessToken: 'your access Token here',
    embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=yourReportIDhere' 

}; 
 

var $reportContainer = $('#reportContainer');
 
var report = powerbi.embedNew($reportContainer.get(0), embedConfiguration);
 
}
</script>

<div id="reportContainer" ></div>

</html>

 

okay, I found the issue. My javascript was screwed up.

 

I was getting 403 in my console window.

 

Now I fixed it!

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.

Top Solution Authors