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
tylersbrown01
Frequent Visitor

Replace replace current embedded report with new one on same page

 

Let's say I'm making a single page application and a user requests to see a new report. I want to be able to reload a new report into the existing <div id="report-container"> element. 

 

when i call the embed(config, report-container) method on a div element that ALREADY has a report embedded onto it, I receive the following error (reduced for brevity):

...which already has embedded comopnent associated, but could not find the existing comopnent in the list of active components. This could indicate the embeds list is out of sync with the DOM, or the component is referencing the incorrect HTML element.
Error: Attempted to embed using config 

Is there any way I can "re-embed" or do I need to destroy the current div and generate a new one? What's the best workflow to do this?

 

1 ACCEPTED SOLUTION

Thanks Eric. I actually figured it out using with powerbi.reset(element);

 

From the documentation... 

"If you have embedded a report within an element and want to reset the element back to its initial state, call: powerbi.reset(element); This method removes the embed from the service and removes the iframe (required to prevent the service from holding on to reference that doesn't exist in the DOM). You typically need to call reset before the containing element is removed from the DOM by the parent."

View solution in original post

3 REPLIES 3
sdaviesnz
Frequent Visitor

Here's an answer for anyone using Angular 2+ and Typescript in a component:

 

// import *  as pbi from 'powerbi-client';

// let config = { ... }

 

let reportContainer = <HTMLElement>document.getElementById("reportEmbedded");
// Embed the report and display it within the div container.
let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);
powerbi.reset(reportContainer);
let report = <pbi.Report>powerbi.embed(reportContainer, config);

Eric_Zhang
Employee
Employee


@tylersbrown01 wrote:

 

Let's say I'm making a single page application and a user requests to see a new report. I want to be able to reload a new report into the existing <div id="report-container"> element. 

 

when i call the embed(config, report-container) method on a div element that ALREADY has a report embedded onto it, I receive the following error (reduced for brevity):

...which already has embedded comopnent associated, but could not find the existing comopnent in the list of active components. This could indicate the embeds list is out of sync with the DOM, or the component is referencing the incorrect HTML element.
Error: Attempted to embed using config 

Is there any way I can "re-embed" or do I need to destroy the current div and generate a new one? What's the best workflow to do this?

 


@tylersbrown01

It is possible to re-embed another report. You can call powerbi.embedNew with a new configuration file.

 

<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">
var embedConfiguration = {
    type: 'report',
    accessToken: 'token',
    id: 'reportid',
    embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=reportid' 
}; 

var report;

window.onload = function () { 

var $reportContainer = $('#reportContainer');
 
 report= powerbi.embed($reportContainer.get(0), embedConfiguration);
 
} 


function reloadreport(){ 

var $reportContainer = $('#reportContainer');
powerbi.embedNew($reportContainer.get(0), embedConfiguration);

};
</script>

<button onclick="reloadreport()">Click me to reload</button>
<div id="reportContainer"></div>

</html>  
 

 

Thanks Eric. I actually figured it out using with powerbi.reset(element);

 

From the documentation... 

"If you have embedded a report within an element and want to reset the element back to its initial state, call: powerbi.reset(element); This method removes the embed from the service and removes the iframe (required to prevent the service from holding on to reference that doesn't exist in the DOM). You typically need to call reset before the containing element is removed from the DOM by the parent."

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.