Forum Discussion
Viewing PowerBI embedded in IFrame and the report keeps refreshing every 5 seconds or so
I cant confirm that the same would work in an Angular project... but a React project I have worked on, relied on the component hosting the Embedded Report (IFrame) tracking its own state.
Then, when re-render events occur, the component decides IF the call to embed needs to be made.
By tracking the current report ID/URL and the state of the embedded object (PreLoad/Loading/Rendered) - I could determine if a reload was required. It sounds as though some external events are causing your component to refresh/re-render - and your code is calling back into the embed function - even though it has already completed and doesn't need to be done again.
Wiki page for tracking events is here: https://github.com/microsoft/PowerBI-JavaScript/wiki/Handling-Events
It's difficult to know for sure without seeing the code - but maybe some verbose debugging/console outputs willl help track it down?
Hi kcross2000
I can't think of any embedding settings that would cause this.
I am not familiar with Angular enough to know if it is the cause - but is it possible it is something in your application that is causing the parent component to re-render?
Otherwise, this comes to mind... https://docs.microsoft.com/en-us/power-bi/create-reports/desktop-automatic-page-refresh
Might be worth checking?
I do have "Page Refresh" off for both reports. I've also still yet to find the issue, but I do think it's something in the web app that's causing this reload/refresh behavior. I know that even in the older version of the web app, if you resize or move a browser window the report would reload. Is there a way to prevent that behavior some how? If so, maybe I can give that a try.
I cant confirm that the same would work in an Angular project... but a React project I have worked on, relied on the component hosting the Embedded Report (IFrame) tracking its own state.
Then, when re-render events occur, the component decides IF the call to embed needs to be made.
By tracking the current report ID/URL and the state of the embedded object (PreLoad/Loading/Rendered) - I could determine if a reload was required. It sounds as though some external events are causing your component to refresh/re-render - and your code is calling back into the embed function - even though it has already completed and doesn't need to be done again.
Wiki page for tracking events is here: https://github.com/microsoft/PowerBI-JavaScript/wiki/Handling-Events
It's difficult to know for sure without seeing the code - but maybe some verbose debugging/console outputs willl help track it down?I think you are exactly right. I think the new signalR events that are occuring in the background of the web app are triggering some onchange events to the IFrame in which I'm showing the PBI embedded reports. I was able to fix this in Angular by using the changeDetection: ChangeDetectionStrategy.OnPush component option and basically ignoring all event changes in the report component that houses the IFrame. I've attached my code in case anyone else runs in to this. Hope it helps someone. I've bolded the code that is relevant to this issue.
import { Component, ChangeDetectionStrategy, ChangeDetectorRef, AfterViewInit} from '@angular/core';import {ActivatedRoute} from '@angular/router';import { Router } from '@angular/router';import { SafeUrl, DomSanitizer } from '@angular/platform-browser';Component code:@Component({selector: 'dep-request-detail-report',changeDetection: ChangeDetectionStrategy.OnPush,templateUrl: './request-detail-report.component.html',styleUrls: ['./request-detail-report.component.scss']})export class RequestDetailReportComponent implements AfterViewInit {public url: any;constructor(private ref: ChangeDetectorRef,private readonly router: Router,private route: ActivatedRoute,private sanitizer: DomSanitizer) {// Get the Url parameter from the activated routethis.url = this.router.getCurrentNavigation().extras.state.url;}cleanURL(oldURL: string 😞 any {// Sanitize Urlreturn this.sanitizer.bypassSecurityTrustResourceUrl(oldURL);}ngAfterViewInit() {// Ignore/detach from the change detection for this componentthis.ref.detach();}}HTML code:<iframe style="margin-top:15px;" width="1140" height="641.25" [src]='cleanURL(this.url)' frameborder="0" allowFullScreen="true"></iframe>Excellent - glad you managed to find the fix. 😀