Forum Discussion

julianmbs's avatar
julianmbs
Advocate II
10 years ago

Power BI Embedded report does not respond well

Hi,

 

I have embedded a simple Power BI report (using Import Data option) in my ASP.NET application, and it displays fine. But when I try to click on something, there is a problem. If I try to change the tab, nothing happens. If I click on one of the bars on a chart, one of them reacts as usual (it slices the rest of the visuals on the page), but clicking on others provides no response at all. Right-clicking on one bar shows the tooltip and "See Records" option, and right-clicking on another shows the standard browser menu. Both the tooltip and "See Records" are not displayed clearly.

 

Here is the chart in Power BI Desktop:

 

Here is the same chart in Power BI Embedded:

 

Other charts do the same thing. Other reports do the same thing. I have tried both IE and Chrome, it looks the same. What could be the problem?

 

 

Thanks,

Julia

Need Help

2 Replies

  • jocaplan-MSFT's avatar
    jocaplan-MSFT
    Microsoft Employee
    10 years ago

    It feels like something could be in the way. Any chance that some part of your applications UI is covering part of the iframe?

    • julianmbs's avatar
      julianmbs
      Advocate II
      10 years ago

      No, there shouldn't be anything in the way. It's a simple page that shows company logo and a few links to reports on the left side, and iframe on the right side. When a link on the left is clicked, the iframe loads the report. I was using this sample.

       

       

      <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
// Update embed report
function updateEmbedReport() {
// Check if the embed url was selected
var embedUrl = document.getElementById('<%=tb_EmbedURL.ClientID%>').value;
// To load a report do the following:
// 1: Set the url
// 2: Add a onload handler to submit the auth token
var iframe = document.getElementById('iFrameEmbedReport');
iframe.src=embedUrl;
iframe.onload = postActionLoadReport;
}
// Post the auth token to the iFrame. 
function postActionLoadReport() {
// Get the app token.
accessToken = document.getElementById('<%=hidReportAppToken.ClientID%>').value;
// Construct the push message structure
var m = { action: "loadReport", accessToken: accessToken };
message = JSON.stringify(m);
// Push the message.
iframe = document.getElementById('iFrameEmbedReport');
iframe.contentWindow.postMessage(message, "*");
}
</script>

<div style="overflow:hidden; height:100%">
<table width="100%" height="100%" cellspacing="0" cellpadding="0"><tr><td width="300" height="100%" style="background-color:#124C8F" valign="top">
<br />
<div align="center"><img src="images/NMBS-logo.png" width="200" /></div>
<br /><br /><br /><br />
<asp:Panel ID="PanelReports" runat="server" Visible="true">
<table width="100%" cellpadding="4" border="0"><tr><td valign="top">
<asp:PlaceHolder runat="server" ID="ContentReportLinks"></asp:PlaceHolder>
</td></tr></table>
<asp:HiddenField ID="hidReportAppToken" runat="server"></asp:HiddenField>
<input type="hidden" id="tb_EmbedURL" style="width: 1024px;" runat="server" />
</asp:Panel>

</td>
<td>

<iframe ID="iFrameEmbedReport" src="" height="100%" width="100%" frameborder="0" seamless></iframe>
</td></tr></table>
</div>
</asp:Content>