Forum Discussion

kcross2000's avatar
kcross2000
Regular Visitor
6 years ago
Solved

Viewing PowerBI embedded in IFrame and the report keeps refreshing every 5 seconds or so

Hello,   I have an issue where I'm showing a PowerBI report in our custom Angular 8 web application in an IFrame.  This was working fine a couple days ago, but now the reports are refreshing/reload...
Need Help
  • Anonymous's avatar
    Anonymous
    6 years ago

    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?

Anonymous's avatar
Anonymous
Not applicable
6 years ago

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?

kcross2000's avatar
kcross2000
Regular Visitor
6 years ago

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 route
        this.url = this.router.getCurrentNavigation().extras.state.url;
    }

    cleanURL(oldURL: string 😞 any {
        // Sanitize Url
        return this.sanitizer.bypassSecurityTrustResourceUrl(oldURL);
    }

    ngAfterViewInit() {
       // Ignore/detach from the change detection for this component
        this.ref.detach();
    }
}
 
HTML code:
 
<iframe style="margin-top:15px;" width="1140" height="641.25" [src]='cleanURL(this.url)' frameborder="0" allowFullScreen="true"></iframe>
  • Anonymous's avatar
    Anonymous
    Not applicable
    6 years ago

    Excellent - glad you managed to find the fix. 😀