topic Re: Angular 2 and Power BI Embedded in Developer

Angular 2 and Power BI Embedded

gauz09 — Thu, 12 Jan 2017 02:13:46 GMT

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.

Re: Angular 2 and Power BI Embedded

gauz09 — Thu, 12 Jan 2017 23:14:51 GMT

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!

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

Re: Angular 2 and Power BI Embedded

Eric_Zhang — Fri, 13 Jan 2017 07:59:31 GMT

Thanks for your sharing. 🙂

Re: Angular 2 and Power BI Embedded

GianniB — Fri, 13 Jan 2017 08:43:28 GMT

@gauz09 wrote:

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

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

Re: Angular 2 and Power BI Embedded

Eric_Zhang — Fri, 13 Jan 2017 08:57:06 GMT

@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"));

Re: Angular 2 and Power BI Embedded

gauz09 — Fri, 13 Jan 2017 20:35:59 GMT

@GianniB and @Eric_Zhang

Awesome! Thanks for sharing that info!

Re: Angular 2 and Power BI Embedded

Anuj_Shaubhari — Tue, 07 Mar 2017 15:10:44 GMT

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);
    }

Re: Angular 2 and Power BI Embedded

Anuj_Shaubhari — Tue, 07 Mar 2017 15:17:19 GMT

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);
    }

Re: Angular 2 and Power BI Embedded

Anonymous — Mon, 20 Mar 2017 16:20:52 GMT

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

Thanks.

Re: Angular 2 and Power BI Embedded

Anonymous — Fri, 17 Mar 2017 03:14:59 GMT

@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

Re: Angular 2 and Power BI Embedded

nagarjunb — Tue, 04 Apr 2017 21:14:18 GMT

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.

Re: Angular 2 and Power BI Embedded

nagarjunb — Tue, 04 Apr 2017 21:26:49 GMT

Hello,

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.

Re: Angular 2 and Power BI Embedded

nagarjunb — Tue, 04 Apr 2017 21:28:51 GMT

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.

Re: Angular 2 and Power BI Embedded

prabhuss — Tue, 24 Oct 2017 10:08:27 GMT

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.

Re: Angular 2 and Power BI Embedded

Anonymous — Wed, 02 May 2018 13:25:50 GMT

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

Variable 'powerbi' must be of type 'Service', but here has type 'Service'.

upadsha — Mon, 11 Jun 2018 08:51:04 GMT

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&groupId=49ae0a55-8a74-406f-99f9-6d4e3c23f66c';

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);

}

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

upadsha — Mon, 11 Jun 2018 09:31:43 GMT

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:

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';

}

Can any one help.

Shashi

Re: Angular 2 and Power BI Embedded

sdaviesnz — Fri, 13 Jul 2018 03:00:47 GMT

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

Re: Angular 2 and Power BI Embedded

pkamboj — Tue, 31 Jul 2018 20:25:16 GMT

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.

Re: Angular 2 and Power BI Embedded

sarfaraz0819 — Thu, 02 Aug 2018 12:38:02 GMT

Thanks for sharing.