Reply
Frequent Visitor
Posts: 4
Registered: ‎01-11-2017
Accepted Solution

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.


Accepted Solutions
Frequent Visitor
Posts: 4
Registered: ‎01-11-2017

Re: Angular 2 and Power BI Embedded

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


All Replies
Frequent Visitor
Posts: 4
Registered: ‎01-11-2017

Re: Angular 2 and Power BI Embedded

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.

Moderator
Posts: 1,479
Registered: ‎03-06-2016

Re: Angular 2 and Power BI Embedded

Thanks for your sharing. Smiley Happy

Frequent Visitor
Posts: 2
Registered: ‎01-10-2017

Re: Angular 2 and Power BI Embedded


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

Moderator
Posts: 1,479
Registered: ‎03-06-2016

Re: Angular 2 and Power BI Embedded

@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"));
Frequent Visitor
Posts: 4
Registered: ‎01-11-2017

Re: Angular 2 and Power BI Embedded

@GianniB and @v-lvzhan-msft

 

Awesome! Thanks for sharing that info!

Frequent Visitor
Posts: 2
Registered: ‎03-07-2017

Re: Angular 2 and Power BI Embedded

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);
    }
    
Frequent Visitor
Posts: 2
Registered: ‎03-07-2017

Re: Angular 2 and Power BI Embedded

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);
    }
    
Regular Visitor
Posts: 24
Registered: ‎01-24-2017

Re: Angular 2 and Power BI Embedded

[ Edited ]

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

 

 

Thanks.

Regular Visitor
Posts: 24
Registered: ‎01-24-2017

Re: Angular 2 and Power BI Embedded

@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