Forum Discussion

tylersbrown01's avatar
tylersbrown01
Frequent Visitor
9 years ago
Solved

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 ...
Need Help
  • tylersbrown01's avatar
    tylersbrown01
    9 years ago

    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."

sdaviesnz's avatar
sdaviesnz
Frequent Visitor
8 years ago

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);