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! :smileyhappy:

 

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

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 for your sharing. :)

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

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

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

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.

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&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.

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

}

Can any one help.

Shashi

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