cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
nagarjunb Frequent Visitor
Frequent Visitor

Re: Angular 2 and Power BI Embedded

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. 

nagarjunb Frequent Visitor
Frequent Visitor

Re: Angular 2 and Power BI Embedded

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. 

nagarjunb Frequent Visitor
Frequent Visitor

Re: Angular 2 and Power BI Embedded

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.

prabhuss Frequent Visitor
Frequent Visitor

Re: Angular 2 and Power BI Embedded

 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.

zalanmathew Frequent Visitor
Frequent Visitor

Re: Angular 2 and Power BI Embedded

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

 

upadsha Frequent Visitor
Frequent Visitor

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

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

}

upadsha Frequent Visitor
Frequent Visitor

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

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

 

sdaviesnz Frequent Visitor
Frequent Visitor

Re: Angular 2 and Power BI Embedded

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

pkamboj Visitor
Visitor

Re: Angular 2 and Power BI Embedded

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. 

sarfaraz0819 Frequent Visitor
Frequent Visitor

Re: Angular 2 and Power BI Embedded

Thanks for sharing.