Forum Discussion

sivakar7's avatar
sivakar7
Frequent Visitor
1 year ago
Solved

How to pass a parameter from Angular powerBI client to report to get the subset of data

Hi, We have Embeded the PowerBI report in Angular application using PowerBI Client and AppOwns data. Now I need to pass a parameter from Angular UI for example Id=100 to the report to get only those...
  • Anonymous's avatar
    Anonymous
    1 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-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