Forum Discussion
Transferring Filters from One Report to Another and Visual is not Updating
- 2 years ago
Resolved: Resolution was ensuring the correct report instance was being used.
The way I was getting the report instance was not be differentiating between the two reports, which lead to an overlap. This was because I was using this.reportObj.getReport() for both reports. Instead, each powerbi-report should have its own ViewChild reference.
Modified the component with:
@ViewChild('report1') report1Obj: PowerBIReportEmbedComponent | undefined; @ViewChild('report2') report2Obj: PowerBIReportEmbedComponent | undefined;And then in the HTML:
<powerbi-report #report1 [hidden]="isShowReport1" [embedConfig]="reportConfig1" ...></powerbi-report> <powerbi-report #report2 [hidden]="isShowReport2" [embedConfig]="reportConfig2" ...></powerbi-report>Finally, in the event handlers:
['loaded', () => { const report = this.report1Obj?.getReport(); if (report) { this.report1Instance = report; report.setComponentTitle('Embedded report 1'); console.log('Report 1 has loaded'); } }], ... ['loaded', () => { const report = this.report2Obj?.getReport(); if (report) { this.report2Instance = report; report.setComponentTitle('Embedded report 2'); console.log('Report 2 has loaded'); } }],
Resolved: Resolution was ensuring the correct report instance was being used.
The way I was getting the report instance was not be differentiating between the two reports, which lead to an overlap. This was because I was using this.reportObj.getReport() for both reports. Instead, each powerbi-report should have its own ViewChild reference.
Modified the component with:
@ViewChild('report1') report1Obj: PowerBIReportEmbedComponent | undefined;
@ViewChild('report2') report2Obj: PowerBIReportEmbedComponent | undefined;
And then in the HTML:
<powerbi-report #report1 [hidden]="isShowReport1" [embedConfig]="reportConfig1" ...></powerbi-report>
<powerbi-report #report2 [hidden]="isShowReport2" [embedConfig]="reportConfig2" ...></powerbi-report>
Finally, in the event handlers:
['loaded', () => {
const report = this.report1Obj?.getReport();
if (report) {
this.report1Instance = report;
report.setComponentTitle('Embedded report 1');
console.log('Report 1 has loaded');
}
}],
...
['loaded', () => {
const report = this.report2Obj?.getReport();
if (report) {
this.report2Instance = report;
report.setComponentTitle('Embedded report 2');
console.log('Report 2 has loaded');
}
}],