Forum Discussion

teroman's avatar
teroman
Frequent Visitor
8 years ago
Solved

Embedded Reports error if multiple objects are embedded on a page

Hi all,   I'm trying to embed multiple reports in a single web page. When I do so the "dataSelected" and "rendered" events do not work. If I embed a single report then all is well.   If I add an ...
Need Help
  • teroman's avatar
    teroman
    8 years ago

    Hi Eric,

     

    Thanks for taking a look at this.

     

    I tried to repro and of course my reduced example worked just fine! Got stuck into the debugger and found it was because my divs didn't have id attributes. When embedding Power BI uses the id to decide if the embed is going into the same element.

     

    I can work around for now by assigning a random id to the div, I don't know if you'd want to fix this or at least call out the requirement in the docs. There the examples have an id, but don't state it is mandatory.

     

    Function where the problem occurs: (powerbi-client v2.4.2)

     

      addOrOverwriteEmbed(component: embed.Embed, element: HTMLElement): void {
    // remove embeds over the same div element.
    this.embeds = this.embeds.filter(function(embed) {
      return embed.element.id !== element.id;
    });

    this.embeds.push(component);
  }

     

    Full Example:

    <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="x-ua-compatible" content="IE=Edge">
    <script src="../Js/promise.min.js"></script>
    <!--PM> Install-Package Microsoft.PowerBI.JavaScript-->
    <script src="../scripts/powerbi.min.js"></script>
    <script>
        function loadPowerBIReport(embedUrl, accessToken, div){

            var models = window['powerbi-client'].models;

            var view = models.ViewMode.View;
            var display = models.DisplayOption.FitToPage;
            var filterPane = false;
            var navPane = false;
            var tokenType = models.TokenType.Aad;
            var type = "report";

            var config = {
                view: view,
                displayOption: display,
                type: type,
                tokenType: tokenType,
                accessToken: accessToken,
                embedUrl: embedUrl,
                settings:{
                    filterPaneEnabled:filterPane,
                    navContentPaneEnabled:navPane
                }
            };

            report = powerbi.embed(div, config);

            //report.on("filtersApplied", function(){ });
            report.on("dataSelected", function(e){
                alert("dataSelected!");
            });

            report.on("rendered", function(event){
                alert("rendered!");
            });
        }
        
        window.onload = function(){
            var accessToken = "my token";
            var report1 = "https://app.powerbi.com/reportEmbed?reportId=some guid";
            var report2 = "https://app.powerbi.com/reportEmbed?reportId=another guid";
            var divs = document.body.querySelectorAll("div")
            var div1 = divs[0];
            var div2 = divs[1];
            loadPowerBIReport(report1, accessToken, div1);
            loadPowerBIReport(report2, accessToken, div2);
        }
    </script>
</head>

<body>
    <div style="height:500px;width:500px"></div>
    <div style="height:500px;width:500px"></div>
</body>

</html>
teroman's avatar
teroman
Frequent Visitor
8 years ago

Hi Eric,

 

Thanks for taking a look at this.

 

I tried to repro and of course my reduced example worked just fine! Got stuck into the debugger and found it was because my divs didn't have id attributes. When embedding Power BI uses the id to decide if the embed is going into the same element.

 

I can work around for now by assigning a random id to the div, I don't know if you'd want to fix this or at least call out the requirement in the docs. There the examples have an id, but don't state it is mandatory.

 

Function where the problem occurs: (powerbi-client v2.4.2)

 

  addOrOverwriteEmbed(component: embed.Embed, element: HTMLElement): void {
    // remove embeds over the same div element.
    this.embeds = this.embeds.filter(function(embed) {
      return embed.element.id !== element.id;
    });

    this.embeds.push(component);
  }

 

Full Example:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="x-ua-compatible" content="IE=Edge">
    <script src="../Js/promise.min.js"></script>
    <!--PM> Install-Package Microsoft.PowerBI.JavaScript-->
    <script src="../scripts/powerbi.min.js"></script>
    <script>
        function loadPowerBIReport(embedUrl, accessToken, div){

            var models = window['powerbi-client'].models;

            var view = models.ViewMode.View;
            var display = models.DisplayOption.FitToPage;
            var filterPane = false;
            var navPane = false;
            var tokenType = models.TokenType.Aad;
            var type = "report";

            var config = {
                view: view,
                displayOption: display,
                type: type,
                tokenType: tokenType,
                accessToken: accessToken,
                embedUrl: embedUrl,
                settings:{
                    filterPaneEnabled:filterPane,
                    navContentPaneEnabled:navPane
                }
            };

            report = powerbi.embed(div, config);

            //report.on("filtersApplied", function(){ });
            report.on("dataSelected", function(e){
                alert("dataSelected!");
            });

            report.on("rendered", function(event){
                alert("rendered!");
            });
        }
        
        window.onload = function(){
            var accessToken = "my token";
            var report1 = "https://app.powerbi.com/reportEmbed?reportId=some guid";
            var report2 = "https://app.powerbi.com/reportEmbed?reportId=another guid";
            var divs = document.body.querySelectorAll("div")
            var div1 = divs[0];
            var div2 = divs[1];
            loadPowerBIReport(report1, accessToken, div1);
            loadPowerBIReport(report2, accessToken, div2);
        }
    </script>
</head>

<body>
    <div style="height:500px;width:500px"></div>
    <div style="height:500px;width:500px"></div>
</body>

</html>
Yaostha's avatar
Yaostha
Helper II
8 years ago

I am using this below code to embed the report into web application.

When pageName parameter is set to default page of the report, it shows only that page.

When we set the pageName to other page names in the report, it still shows the default page name only.

 

pageName and below settings together won't work?

pageName: 'Page3',
settings: {
filterPaneEnabled: false,
navContentPaneEnabled: false 
} 

 

 

<script src="~/jquery-1.9.1.min.js"></script>
<script src="~/adal.min.js"></script>
<script src="~/powerbi.js"></script>

<script type="text/javascript">
(function() {

"use strict";

var subscriptionId = 'tenantname.onmicrosoft.com';
// Copy the client ID of your AAD app here once you have registered one, configured the required permissions, and
// allowed implicit flow https://msdn.microsoft.com/en-us/office/office365/howto/get-started-with-office-365-unified-api
var clientId = 'guid';
var config = {
subscriptionId: subscriptionId,
clientId: clientId,
postLogoutRedirectUri: window.location.origin,
resource: 'https://analysis.windows.net/powerbi/api',
prompt: 'none',
cacheLocation: 'localStorage', // enable this for IE, as sessionStorage does not work for localhost.
embedUrlBase: 'https://app.powerbi.com/reportEmbed',
reportId: 'guid of dashboard',
groupId: 'guid of group',
response_type:'id_token'
};

// AuthenticationContext is coming from ADAL.min.js
var authContext = new AuthenticationContext(config);

// Check For & Handle Redirect From AAD After Login
var isCallback = authContext.isCallback(window.location.hash);

authContext.handleWindowCallback();
if (isCallback && !authContext.getLoginError()) {
window.location = authContext._getItem(authContext.CONSTANTS.STORAGE.LOGIN_REQUEST);
}

// If not logged in force login
var user = authContext.getCachedUser();

if (!user) {
//alert('user login required');
authContext.login();
//alert('user login completed');
}

// Acquire token for resource.
authContext.acquireToken(config.resource, function(error, token) {
// alert('acquireToken fn called');
// Handle ADAL Errors.
if (error || !token) {
alert('ADAL error occurred: ' + error);
console.log('ADAL error occurred: ' + error);
return;
}

// Store our token
config.authToken = token;

$(document).ready(function(){

var models = window['powerbi-client'].models;

// Embed configuration used to describe the what and how to embed.
// This object is used when calling powerbi.embed.
// This also includes settings and options such as filters.
// You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.

var embedUrl = "https://app.powerbi.com/dashboardEmbed?reportId="+ config.reportId;

// alert(embedUrl);
var pbiconfig = {
type: 'report',
tokenType: models.TokenType.Aad,
accessToken: config.authToken,
embedUrl: embedUrl,
id: config.reportId,
pageView: 'fitToWidth',

pageName: 'Page3',
settings: {
filterPaneEnabled: false,
navContentPaneEnabled: false
}
};
var pbiconfigmessage = JSON.stringify(pbiconfig);


// Get a reference to the embedded dashboard HTML element
var dashboardContainer = $('#divDashBoardContainer')[0];

// Embed the dashboard and display it within the div container.
var dashboard = powerbi.embed(dashboardContainer, pbiconfig);

// Get a reference to the embedded dashboard.
var dashboard1 = powerbi.get(dashboardContainer);

// Displays the dashboard in full screen mode.
dashboard1.fullscreen();
// push the message.
// iframe.contentWindow.postMessage(message, "*");;
});

});
})();

</script>

<div id="divDashBoardContainer" style="height:758px; border-style: double; border-color: aqua; border-width: thick; "></div>