Forum Discussion
How to pass a parameter from Angular powerBI client to report to get the subset of data
- Anonymous1 year ago
Hi sivakar7 ,
Please review the following links, hope they can help you.
How to embed Power BI content in an Angular app | Microsoft Learn
Use filters in a Power BI embedded analytics report | Microsoft Learn
In addition, you can follow the steps below to get it:
1. Ensure you have the Power BI Client installed in your Angular project.
npm install powerbi-client2. Embed the report with the filters
import { Component, OnInit } from '@angular/core'; import * as pbi from 'powerbi-client'; @Component({ selector: 'app-powerbi-report', templateUrl: './powerbi-report.component.html', styleUrls: ['./powerbi-report.component.css'] }) export class PowerbiReportComponent implements OnInit { constructor() {} ngOnInit() { this.embedReport(); } embedReport() { const embedContainer = document.getElementById('embedContainer'); const reportConfig = { type: 'report', tokenType: pbi.models.TokenType.Embed, accessToken: 'YOUR_EMBED_TOKEN', embedUrl: 'YOUR_EMBED_URL', id: 'YOUR_REPORT_ID', permissions: pbi.models.Permissions.All, settings: { filterPaneEnabled: false, navContentPaneEnabled: false } }; const powerbi = new pbi.service.Service( pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory ); const report = powerbi.embed(embedContainer, reportConfig); // Apply a filter when the report is loaded report.on('loaded', () => { this.applyFilter(report, 100); // Pass the ID or parameter you need }); } applyFilter(report, id) { const filter = { $schema: 'http://powerbi.com/product/schema#basic', target: { table: 'YourTableName', column: 'YourColumnName' }, operator: 'In', values: [id] }; report.updateFilters(pbi.models.FiltersOperations.Replace, [filter]) .then(result => { console.log('Filter applied successfully'); }) .catch(error => { console.error('Error applying filter', error); }); } }Best Regards
Hi sivakar7 ,
Please review the following links, hope they can help you.
How to embed Power BI content in an Angular app | Microsoft Learn
Use filters in a Power BI embedded analytics report | Microsoft Learn
In addition, you can follow the steps below to get it:
1. Ensure you have the Power BI Client installed in your Angular project.
npm install powerbi-client
2. Embed the report with the filters
import { Component, OnInit } from '@angular/core';
import * as pbi from 'powerbi-client';
@Component({
selector: 'app-powerbi-report',
templateUrl: './powerbi-report.component.html',
styleUrls: ['./powerbi-report.component.css']
})
export class PowerbiReportComponent implements OnInit {
constructor() {}
ngOnInit() {
this.embedReport();
}
embedReport() {
const embedContainer = document.getElementById('embedContainer');
const reportConfig = {
type: 'report',
tokenType: pbi.models.TokenType.Embed,
accessToken: 'YOUR_EMBED_TOKEN',
embedUrl: 'YOUR_EMBED_URL',
id: 'YOUR_REPORT_ID',
permissions: pbi.models.Permissions.All,
settings: {
filterPaneEnabled: false,
navContentPaneEnabled: false
}
};
const powerbi = new pbi.service.Service(
pbi.factories.hpmFactory,
pbi.factories.wpmpFactory,
pbi.factories.routerFactory
);
const report = powerbi.embed(embedContainer, reportConfig);
// Apply a filter when the report is loaded
report.on('loaded', () => {
this.applyFilter(report, 100); // Pass the ID or parameter you need
});
}
applyFilter(report, id) {
const filter = {
$schema: 'http://powerbi.com/product/schema#basic',
target: {
table: 'YourTableName',
column: 'YourColumnName'
},
operator: 'In',
values: [id]
};
report.updateFilters(pbi.models.FiltersOperations.Replace, [filter])
.then(result => {
console.log('Filter applied successfully');
})
.catch(error => {
console.error('Error applying filter', error);
});
}
}
Best Regards