How to show two or more PowerBI reports in the same page?

[RupenAnjaria]

I am trying to show two or more PowerBI reports on the same angular page. Here is my code:

.html:

            <div class="container">
                <div class="controls">
                    <ng-container>
                        <p-button (click)="loadTroubleshootData(2)">Show Report</p-button>
                    </ng-container>
                    <ng-container *ngIf="isEmbedded; else embedReportFlow"></ng-container>
                    
                    <ng-template #embedReportFlow>
                        <label class="display-message position">
                            {{ displayMessage }}
                        </label>
                    </ng-template>

                    <ng-container *ngIf="isEmbedded">
                        <powerbi-report [embedConfig]="reportConfig" 
                                        [cssClassName]="reportClass" 
                                        [phasedEmbedding]="phasedEmbeddingFlag" 
                                        [eventHandlers]="eventHandlersMap">
                        </powerbi-report>
                    </ng-container>

                </div>
            </div>
         <div class="container">
                <div class="controls">
                    <ng-container>
                        <p-button (click)="loadTroubleshootData(3)">Show Report</p-button>
                    </ng-container>
                    <ng-container *ngIf="isEmbeddedAnalytics; else embedReportFlowAnalytics"></ng-container>
                    
                    <ng-template #embedReportFlowAnalytics>
                        <label class="display-message position">
                            {{ displayMessage }}
                        </label>
                    </ng-template>

                    <ng-container *ngIf="isEmbeddedAnalytics">
                        <powerbi-report [embedConfig]="reportConfig" 
                                        [cssClassName]="reportClass" 
                                        [phasedEmbedding]="phasedEmbeddingFlag" 
                                        [eventHandlers]="eventHandlersMap">
                        </powerbi-report>
                    </ng-container>

                </div>
            </div>

As you can see I have two powerbi-report tags and both are wrapped under if condition to check different variables. *ngIf="isEmbedded"

compoent:

loadTroubleshootData(target: number) {

   if (target === 2) {
      
      this.loadUserReportDetails('Report1',target);

    } else if (target === 3) {
      this.loadUserReportDetails('Report2', target);

    }

}

loadUserReportDetails(reportName:string, target:number){


    this.MyService.getReportDetails( reportName ).subscribe({
      next: (resp: any) => {
        // Update the reportConfig to embed the PowerBI report
        this.reportConfig = {
          ...this.reportConfig,
          id: resp.reportId,
          embedUrl: resp.embedUrl,
          accessToken: resp.embedToken,
        };

        console.log(this.reportConfig);
      },
      error: (error: any) => {
        this.displayMessage = `Failed to fetch config for report. Status: ${error.status} ${error.statusText}`;
        console.error(this.displayMessage);
        return;
      },
    });

    if (target === 2){
      this.isEmbedded = true;
    } else if (target === 3) {
      this.isEmbeddedAnalytics = true;
    }
    // Update the display message
    this.displayMessage = '';

}

so when we click on the first button it loads report correctly, however, upon click of second button, it shows error message in console that reads as below and the first report gets replace by second report.

Refused to frame 'https://app.powerbi.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' https://teams.powerbi.com https://teams.microsoft.com https://gov.teams.microsoft.us https://dod.teams.microsoft.us https://outlook.office.com https://outlook-sdf.office.com https://outlook.office365.com https://outlook-sdf.office365.com https://www.office.com https://scuprodprv.www.office.com https://www.microsoft365.com https://local.loop.microsoft.com https://dev.loop.microsoft.com https://df.loop.microsoft.com https://loop.microsoft.com".

Have anyone tried showing multiple reports on the same page? Thank you.

[Macht59]

I had the same issue. The root reason for me was not properly formatted embedUrl value. Please, make sure that it looks like https://app.powerbi.com/reportEmbed?reportId=YOUR-REPORT-ID\u0026groupId=YOUR-GROUP-ID.

[KotanaSai21]

@RupenAnjaria ,

Check the reply above by @Macht59 , and it will work.

Please reach out to us, if you still have issue with embedding two reports in the same application.