Solved: Embedded Reports error if multiple objects are emb...

teroman · ‎11-30-2017

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 embedded tile or dashboard with a report this causes the same problem.

I'm just doing the following, twice for two different reports (or once for a report, and then again for a dashbaord/tile):

var pbi = powerbi.embed(pbicontainer, config);

pbi.on("dataSelected", function(){
alert();
});

pbi.on("rendered", function(){
alert();

});

If I have two report, only the second fires events.

If I add a Tile instead I can capture an error in tile.ts on the line

let messageData = JSON.parse(event.data);

event.data is an object, it looks like a response as it has properties like body, headers, method url etc. The body has dataPoint, filters etc.

It looks a bit like the "message" event is being captured by all Power BI javascript objects, but this is a bit of a guess, I've not gone hunting through the code.

Can anyone repo this or is there a solution? Please let me know if any more detail is required.

Thanks

Colin

teroman · ‎12-01-2017

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>

View solution in original post

Eric_Zhang · ‎11-30-2017

@teroman wrote:

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 embedded tile or dashboard with a report this causes the same problem.

I'm just doing the following, twice for two different reports (or once for a report, and then again for a dashbaord/tile):

var pbi = powerbi.embed(pbicontainer, config);

pbi.on("dataSelected", function(){
        alert();
});

pbi.on("rendered", function(){
        alert();

});

If I have two report, only the second fires events.

If I add a Tile instead I can capture an error in tile.ts on the line

    let messageData = JSON.parse(event.data);

event.data is an object, it looks like a response as it has properties like body, headers, method url etc. The body has dataPoint, filters etc.

It looks a bit like the "message" event is being captured by all Power BI javascript objects, but this is a bit of a guess, I've not gone hunting through the code.

Can anyone repo this or is there a solution? Please let me know if any more detail is required.

Thanks

Colin

@teroman

At this moment, embedding dashboards only supports the events tileClicked and error, see here.

As to "If I have two report, only the second fires events.", I don't reproduce that issue, could you post more code?

teroman · ‎12-01-2017

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 · ‎07-25-2018

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
}

// 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>