Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
gauz09
New Member

Angular 2 and Power BI Embedded

Hi,

 

I am trying to embed a Power BI report in an Angular 2 app (and also Ionic 2 app) and I have managed to "import" my PBIX file from my local to my Workspace in Azure Cloud. I used Node JS baser powerbi-cli tool/plugin to do that.

 

Now that the report is there on my cloud I would like to embed it in a simple HTML in my Angular 2 app. I am not sure how to go about it, I am new to this and not able to figure out a way.

 

Can somebody please help me on what I need to write in my TypeScript file and what needs to be done in the HTML of my Angular 2 app. If possible a sample code will be of great help!

 

I would highly appreciate if you could please help me.

 

Thanks.

1 ACCEPTED SOLUTION
gauz09
New Member

Done!

 

If anybody wants, you can use following libraries to do this.

* powerbi-cli
* powerbi-client

 

You will need the following also:

1. Azure Cloud access to create a Workspace Collection and Workspace with Power BI Embedded by logging into Azure Cloud

 

2. Then using powerbi-cli command on your prompt, config the workspace with its Access Key. Like:

 

     powerbi config -c <workspace-name> -k <workspace-access-key>

 

3. Create an actual workspace using using following command. This will give you workspace-id.

 

    powerbi create-workspace

 

4. Add the above generated workspace-id to the configuration as below:

 

    powerbi config -w <workspace-id>

 

5. Go to the directory where you have your Power BI report (.pbix). Import the report file from your local to the workspace on Azure using following command. You would create this file using Power BI Desktop.

 

    powerbi import -f <./report-file-name.pbix> -n <report-name>

 

6. Run following command to get the report-id of the report(s) you have imported in the previous steps.

 

    powerbi get-reports

 

7. And finally, using the following command, create a secured token for the report(s) you want to embed in your app by providing the report's report-id.

 

    powerbi create-embed-token -r <report-id>

 

Once the above steps are done, you will use the secured token created in step #7, the report-id and the embed URL with report-id (https://embedded.powerbi.com/appTokenReportEmbed?reportId=<report-id>) for the report to be embedded in your app.

 

HTML code:

 

<div id="reportContainer" style="height:500px;"></div>

 

TypeScript/JS code:

 

import * as pbi from 'powerbi-client';

showReport() {
    // Report's Secured Token
    let accessToken = '<ADD-THE-SECURED-TOKEN-FOR-REPORT-HERE>';

    // Embed URL
    let embedUrl = 'https://embedded.powerbi.com/appTokenReportEmbed?reportId=<YOUR-REPORT-ID>';

    // Report ID
    let embedReportId = '<YOUR-REPORT-ID>';

    // Configuration used to describe the what and how to embed.
    // This object is used when calling powerbi.embed.
    // This also includes settings and options such as filters.
    // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
    let config= {
        type: 'report',
        accessToken: accessToken,
        embedUrl: embedUrl,
        id: embedReportId,
        settings: {
            filterPaneEnabled: true,
            navContentPaneEnabled: true
        }
    };

    // Grab the reference to the div HTML element that will host the report.
    let reportContainer = <HTMLElement>document.getElementById('reportContainer');

    // Embed the report and display it within the div container.
    let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);
    let report = powerbi.embed(reportContainer, config);

    // Report.off removes a given event handler if it exists.
    report.off("loaded");

    // Report.on will add an event handler which prints to Log window.
    report.on("loaded", function() {
        console.log("Loaded");
    });
}

I spent quite a lot of time figuring this out. Hope this will save some time for somebody! Smiley Happy

 

P.S. - Your secured token for the report expires after some time. Don't know the default.

View solution in original post

20 REPLIES 20
prabhuss
Helper I
Helper I

 I copied the code to embed power bi report in angular -2 app, but seems like code has errors. Can somebody point me to full code please. Do we have git repository . any help on this well appreciated.

Anuj_Shaubhari
Frequent Visitor

import { Component, Inject, OnInit, ElementRef }  from '@angular/core';
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
import { ActivatedRoute }     from '@angular/router';
import { Observable }         from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import * as pbi from 'powerbi-client';
@Component({
    templateUrl: '../../template/dashboard/dashboard.html'
})
export class DashboardComponent implements OnInit {

    PBmodel: pbi.IEmbedConfiguration;
    title: string;
    report: pbi.Report;
    pages: pbi.Page[];
    currentPage: pbi.Page;
    //report: any;


    constructor(private route: ActivatedRoute) {
        this.title = "Sample Check";    
    }
    
	ngOnInit(){
		this.showReport();
	}
    apply(): void {
       let advanceFilter = {
            $schema: "http://powerbi.com/product/schema#advanced",
            target: {
                table: "Meter",
                column: "MeterDate"
            },
            logicalOperator: "And",
            conditions: [
                {
                    operator: "GreaterThanOrEqual",
                    value: "2017-01-01T00:00:00.000Z"
                },
                {
                    operator: "LessThanOrEqual",
                    value: "2017-01-31T00:00:00.000Z"
                }
            ]
        };
        console.log(advanceFilter);
        console.log(this.report);
        
        this.report.getFilters().then(allTargetFilters=> {
            //for (var i = 0; i < allfilter.length; i++) {
            allTargetFilters.push(advanceFilter);
            //}
            // Set filters
            
            this.report.setFilters(allTargetFilters);
        });
    }

    showReport(PBIData: pbi.IEmbedConfiguration) {

        let config = {
            type: 'report',
            accessToken: PBIData.accessToken,
            embedUrl: PBIData.embedUrl,
            id: PBIData.id,
            settings: {
                filterPaneEnabled: false
            }
        };

        // Grab the reference to the div HTML element that will host the report.
        let reportContainer = <HTMLElement>document.getElementById('pbi-report');

        // Embed the report and display it within the div container.
        
        this.powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);
        this.report = <pbi.Report>this.powerbi.embed(reportContainer, config);
        
        // Report.off removes a given event handler if it exists.
        this.report.off("loaded");

        this.report.on("loaded", this.loadReport);

        this.report.off("pageChanged");

        this.report.on("pageChanged", e => {
            console.log(e);
            //this.currentPage = e;
            ////pageName.innerText = e.detail.newPage.displayName;

            //if (this.pages.length === 0) {
            //    return;
            //}

            //pageIndex = pages.findIndex(function (el) {
            //    return el.name === e.detail.newPage.name;
            //});
        });
    }

    loadReport()
    {
        this.report.getPages()
            .then(reportPages => this.pages = reportPages);
        console.log(this.pages);
    }
    

I am having some dependency issues while using this. Is there something else that you did? Maybe added some extra packages?

 

Anonymous
Not applicable

@Anuj_Shaubhari, What is this suppose to represent as opposed to the previous HTML posted?

 

 

Thanks.

gauz09
New Member

Done!

 

If anybody wants, you can use following libraries to do this.

* powerbi-cli
* powerbi-client

 

You will need the following also:

1. Azure Cloud access to create a Workspace Collection and Workspace with Power BI Embedded by logging into Azure Cloud

 

2. Then using powerbi-cli command on your prompt, config the workspace with its Access Key. Like:

 

     powerbi config -c <workspace-name> -k <workspace-access-key>

 

3. Create an actual workspace using using following command. This will give you workspace-id.

 

    powerbi create-workspace

 

4. Add the above generated workspace-id to the configuration as below:

 

    powerbi config -w <workspace-id>

 

5. Go to the directory where you have your Power BI report (.pbix). Import the report file from your local to the workspace on Azure using following command. You would create this file using Power BI Desktop.

 

    powerbi import -f <./report-file-name.pbix> -n <report-name>

 

6. Run following command to get the report-id of the report(s) you have imported in the previous steps.

 

    powerbi get-reports

 

7. And finally, using the following command, create a secured token for the report(s) you want to embed in your app by providing the report's report-id.

 

    powerbi create-embed-token -r <report-id>

 

Once the above steps are done, you will use the secured token created in step #7, the report-id and the embed URL with report-id (https://embedded.powerbi.com/appTokenReportEmbed?reportId=<report-id>) for the report to be embedded in your app.

 

HTML code:

 

<div id="reportContainer" style="height:500px;"></div>

 

TypeScript/JS code:

 

import * as pbi from 'powerbi-client';

showReport() {
    // Report's Secured Token
    let accessToken = '<ADD-THE-SECURED-TOKEN-FOR-REPORT-HERE>';

    // Embed URL
    let embedUrl = 'https://embedded.powerbi.com/appTokenReportEmbed?reportId=<YOUR-REPORT-ID>';

    // Report ID
    let embedReportId = '<YOUR-REPORT-ID>';

    // Configuration used to describe the what and how to embed.
    // This object is used when calling powerbi.embed.
    // This also includes settings and options such as filters.
    // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
    let config= {
        type: 'report',
        accessToken: accessToken,
        embedUrl: embedUrl,
        id: embedReportId,
        settings: {
            filterPaneEnabled: true,
            navContentPaneEnabled: true
        }
    };

    // Grab the reference to the div HTML element that will host the report.
    let reportContainer = <HTMLElement>document.getElementById('reportContainer');

    // Embed the report and display it within the div container.
    let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);
    let report = powerbi.embed(reportContainer, config);

    // Report.off removes a given event handler if it exists.
    report.off("loaded");

    // Report.on will add an event handler which prints to Log window.
    report.on("loaded", function() {
        console.log("Loaded");
    });
}

I spent quite a lot of time figuring this out. Hope this will save some time for somebody! Smiley Happy

 

P.S. - Your secured token for the report expires after some time. Don't know the default.

Hi ! @gauz09 I tried every steps but still my code isn't working. Can you look over this issue? Any advice will be appriciatable.

 

HTML Code:

 

                <div id="pbicontainer" style="height:800px;"></div>

Type script:

 

import { NgxPowerBiService } from 'ngx-powerbi';

 getReport() {
        
        const config = {
            type: 'report',
            id: 'b5f50796-6e97-4dc5',
            embedUrl:
                'https://app.powerbi.com/dashboardEmbed? 
                 dashboardId=b5f50796-6e97&groupId=be8908da-da25- 
                 452ed&config=eyJjbHVzdGVyVXJsIj',
            accessToken: "H4sIAAAAAAAEAB1Wt86F",
            settings: {
                filterPaneEnabled: true,
                navContentPaneEnabled: true
            }
        };

        // Grab the reference to the div HTML element that will host the report.
        let pbicontainer = <HTMLElement>document.getElementById('pbicontainer');
        let report = this.powerBiService.embed(pbicontainer, config);


        // Report.off removes a given event handler if it exists.
        report.off("loaded");

        // Report.on will add an event handler which prints to Log window.
        report.on("loaded", function () {
            console.log("Loaded");
        });
    }

 

Hi 

I am trying to embed MS-BI report but getting error.

 

I have group Id and report Id which i am appending to embedUrl and have set the config as per desc.

 

Error:

ERROR in C:/Users/Shashikanth.Kumbashi/Desktop/Flex/node_modules/angular2-powerbi/node_modules/powerbi-client/dist/powerbi.d.ts (13,9): Subsequent variable declarations must have the same type.  Variable 'powerbi' must be of type 'Service', but here has type 'Service'.

 

My Code:

 

showReports(projectsListReportLink,listOfProjects,noId) {
// Get models. models contains enums that can be used.
var models = window['powerbi-client'].models;

// We give All permissions to demonstrate switching between View and Edit mode and saving report.
var permissions = models.Permissions.All;
var projList = this.addSelectedProjectToLink(listOfProjects,noId);
console.log(projList);


var basicFilter = {
$schema: "http://powerbi.com/product/schema#basic",
target: {
table: "dim_projects",
column: "ProjectName"
},
operator: "eq",
values: projList
}


// Report's Secured Token
let accessToken = 'myToken';

// Report ID
let embedReportId = '3c46197b-6bee-4097-8635-c1fdb01d5058';

// Embed URL
let embedUrl = 'https://embedded.powerbi.com/appTokenReportEmbed?reportId=3c46197b-6bee-4097-8635-c1fdb01d5058&group...';

let config = {
type: 'report',
accessToken: accessToken,
embedUrl: embedUrl,
filters: [basicFilter],
id: embedReportId
};

// Grab the reference to the div HTML element that will host the report.
let reportContainer = document.getElementById('reportContainer');

// Embed the report and display it within the div container.
let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);
let report = powerbi.embed(reportContainer, config);

}

 

Can any one help.

Shashi

 

Hi 

I am trying to embed Power BI report using config having token and filter , but getting this error.

 

I have a groupId and report Id, which i have added to embedUrl and have given the report id to config. 

 

node_modules/angular2-powerbi/node_modules/powerbi-client/dist/powerbi.d.ts (13,9): Subsequent variable declarations must have the same type.  Variable 'powerbi' must be of type 'Service', but here has type 'Service'.

 

my code :

 

showReports(projectsListReportLink,listOfProjects,noId) {
// Get models. models contains enums that can be used.
var models = window['powerbi-client'].models;

// We give All permissions to demonstrate switching between View and Edit mode and saving report.
var permissions = models.Permissions.All;
var projList = this.addSelectedProjectToLink(listOfProjects,noId);
console.log(projList);


var basicFilter = {
$schema: "http://powerbi.com/product/schema#basic",
target: {
table: "dim_projects",
column: "ProjectName"
},
operator: "eq",
values: projList
}


// Report's Secured Token
let accessToken = 'eyJrIjoiNWFhOGUwN2ItNDBmYS00NzBmLWIyNGMtMjZmYTAwNjNhYzQ0IiwidCI6IjA3ZjAyYzczLTI1NDktNDNiZS05ZWRkLWY5NDc4YmY4MDhlOSIsImMiOjZ9';

// Report ID
let embedReportId = '3c46197b-6bee-4097-8635-c1fdb01d5058';

// Embed URL
let embedUrl = 'https://embedded.powerbi.com/appTokenReportEmbed?reportId=3c46197b-6bee-4097-8635-c1fdb01d5058&group...';

let config = {
type: 'report',
accessToken: accessToken,
embedUrl: embedUrl,
filters: [basicFilter],
id: embedReportId
};

// Grab the reference to the div HTML element that will host the report.
let reportContainer = document.getElementById('reportContainer');

// Embed the report and display it within the div container.
let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);
let report = powerbi.embed(reportContainer, config);

}

Hello,

Thanks for sharing the code. We are able to integrate the power bi reports in our Angular 2 app. But, the problem is, we are seeing empty areas with in the iframe around the report. Is it possible to set viewPage property in the config settings as below. If so, how are we going to get the powerbi-client using window object in Angular 2, and use its models to set the pageView setting on the configuration . Below is not working for us(Source: https://microsoft.github.io/PowerBI-JavaScript/demo/code-demo/index.html - in edit mode.)

let models = window['powerbi-client'].models;
var config = {
type: 'report',
accessToken: this.pbiToken,
embedUrl: CONFIGURATION.baseUrls.PowerBIEmbedURL + this.ReportID,
id: this.ReportID,
pageName: this.PageName,
permissions: models.Permissions.All,
pageView: models.PageView.fitToWidth,
settings: {
filterPaneEnabled: false,
navContentPaneEnabled: false
}
};

Thanks.

Hello,

 

   Thanks for sharing the code. We are able to integrate the power bi reports in our Angular 2 app. But, the problem is, we are seeing empty areas with in the iframe around the report. Is it possible to set viewPage property in the config settings as below. If so, how are we going to get the powerbi-client using window object in Angular 2, and use its models to set the pageView setting on the configuration . Below is not working for us(Source: https://microsoft.github.io/PowerBI-JavaScript/demo/code-demo/index.html - in edit mode.)

 

    let models = window['powerbi-client'].models;
    var config = {
      type: 'report',
      accessToken: this.pbiToken,
      embedUrl: CONFIGURATION.baseUrls.PowerBIEmbedURL + this.ReportID,
      id: this.ReportID,
      pageName: this.PageName,
      permissions: models.Permissions.All
      pageView: models.PageView.fitToWidth,
      settings: {
        filterPaneEnabled: false,
        navContentPaneEnabled: false
      }
    };

 

Thanks. 

Hello,

 

   Thanks for sharing the code. We are able to integrate the power bi reports in our Angular 2 app. But, the problem is, we are seeing empty areas with in the iframe around the report. Is it possible to set viewPage property in the config settings as below. If so, how are we going to get the powerbi-client using window object in Angular 2, and use its models to set the pageView setting on the configuration . Below is not working for us(Source: https://microsoft.github.io/PowerBI-JavaScript/demo/code-demo/index.html - in edit mode.)

 

    let models = window['powerbi-client'].models;
    var config = {
      type: 'report',
      accessToken: this.pbiToken,
      embedUrl: CONFIGURATION.baseUrls.PowerBIEmbedURL + this.ReportID,
      id: this.ReportID,
      pageName: this.PageName,
      permissions: models.Permissions.All
      pageView: models.PageView.fitToWidth,
      settings: {
        filterPaneEnabled: false,
        navContentPaneEnabled: false
      }
    };

 

Thanks. 

Anonymous
Not applicable

@gauz09, I am new to html. I suppose I combine the HTML and JS in one HTML file and then try to open the file via a browser? I have tried to do this but the page is blank just showing the "import" code on the top.

 

 

 

Thanks,bdiouf

import { Component, Inject, OnInit, ElementRef }  from '@angular/core';
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
import { ActivatedRoute }     from '@angular/router';
import { Observable }         from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import * as pbi from 'powerbi-client';
@Component({
    templateUrl: '../../template/dashboard/dashboard.html'
})
export class DashboardComponent implements OnInit {

    PBmodel: pbi.IEmbedConfiguration;
    title: string;
    report: pbi.Report;
    pages: pbi.Page[];
    currentPage: pbi.Page;
    powerbi: pbi.service.Service;
    //report: any;


    constructor(private route: ActivatedRoute) {
        this.title = "Sample Check";    
    }
    
	ngOnInit(){
		this.showReport();
	}
    apply(): void {
       let advanceFilter = {
            $schema: "http://powerbi.com/product/schema#advanced",
            target: {
                table: "Meter",
                column: "MeterDate"
            },
            logicalOperator: "And",
            conditions: [
                {
                    operator: "GreaterThanOrEqual",
                    value: "2017-01-01T00:00:00.000Z"
                },
                {
                    operator: "LessThanOrEqual",
                    value: "2017-01-31T00:00:00.000Z"
                }
            ]
        };
        console.log(advanceFilter);
        console.log(this.report);
        
        this.report.getFilters().then(allTargetFilters=> {
            //for (var i = 0; i < allfilter.length; i++) {
            allTargetFilters.push(advanceFilter);
            //}
            // Set filters
            
            this.report.setFilters(allTargetFilters);
        });
    }

    showReport(PBIData: pbi.IEmbedConfiguration) {

        let config = {
            type: 'report',
            accessToken: PBIData.accessToken,
            embedUrl: PBIData.embedUrl,
            id: PBIData.id,
            settings: {
                filterPaneEnabled: false
            }
        };

        // Grab the reference to the div HTML element that will host the report.
        let reportContainer = <HTMLElement>document.getElementById('pbi-report');

        // Embed the report and display it within the div container.
        
        this.powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);
        this.report = <pbi.Report>this.powerbi.embed(reportContainer, config);
        
        // Report.off removes a given event handler if it exists.
        this.report.off("loaded");

        this.report.on("loaded", this.loadReport);

        this.report.off("pageChanged");

        this.report.on("pageChanged", e => {
            console.log(e);
            //this.currentPage = e;
            ////pageName.innerText = e.detail.newPage.displayName;

            //if (this.pages.length === 0) {
            //    return;
            //}

            //pageIndex = pages.findIndex(function (el) {
            //    return el.name === e.detail.newPage.name;
            //});
        });
    }

    loadReport()
    {
        this.report.getPages()
            .then(reportPages => this.pages = reportPages);
        console.log(this.pages);
    }
    

Thanks so much @Anuj_Shaubhari. That was a great help getting the PowerBI-Javascript library going with Typescript and Angular 2+.

Thanks @Anuj_Shaubhari for the sample code. When i am trying the code i can see the embedded report but the  loaded event or in fact any other event doesn't fire. 


@gauz09 wrote:

I spent quite a lot of time figuring this out. Hope this will save some time for somebody! Smiley Happy

 

P.S. - Your secured token for the report expires after some time. Don't know the default.


 

I think it expires after 1 hour but I'm not sure. After that you can send a request to obtain a refresh_token (which has longer duration)

https://docs.microsoft.com/azure/active-directory/active-directory-protocols-oauth-code

Thanks for sharing.

@GianniB

Actually you can generate some token never expiring, though not recommended. Check power-bi-embedded-integrate-report-into-web-app.

 

                var embedToken = PowerBIToken.CreateReportEmbedToken(this.workspaceCollection, this.workspaceId, report.Id, Convert.ToDateTime("2099-12-31"));

@GianniB and @Eric_Zhang

 

Awesome! Thanks for sharing that info!

Thanks for your sharing. 🙂

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.