Comments (4)
For the benefit of anyone else arriving here and getting stuck on the same problem, this is how I managed to get the component working;
- Firstly you need to get a Azure auth token to be able to talk to the Power BI API - there are a couple of options for this but I used a service principle, you can read more about that here https://docs.microsoft.com/en-us/power-bi/developer/embedded/embed-service-principal, this video https://youtu.be/qvG1cjFsaI0?t=466 is also useful.
- Next you need to make two calls to the Power BI API (passing the token from above to authenticate yourself), I used Microsoft's c# library to make the API calls (https://github.com/microsoft/PowerBI-CSharp)
- The first call you need to make is to https://docs.microsoft.com/en-us/rest/api/power-bi/reports/get-report-in-group, this gives you the embed URL, report id, name, report type, data set id & data set workspace id parameter's
- The second call is to https://docs.microsoft.com/en-us/rest/api/power-bi/embed-token/generate-token to get the embedded report token parameter - this is what tripped me up for a while, I'd mistakenly believed that the token I'd got from step 1 was what was required for the token parameter and lead to some esoteric errors that didn't give much in the way of clues as to what was going wrong.
Looking at the browser networking tab in developer tools (add seeing a 403 on the Power BI Embedded calls) combined with reading the Power BI API documentation cleared things up for me. - Once you have all the above data you can expose it in a controller action, call it from Angular and set the parameters on an IReportEmbedConfiguration object and bind that to the Power BI report component.
Here is what my angular component looks like;
template;
<powerbi-report [embedConfig]="reportConfig" [eventHandlers]="eventHandlersMap" [cssClassName]="reportClass">
</powerbi-report>
ts file;
public reportConfig: IReportEmbedConfiguration; // binds to embedConfig on the powerbi-report component above
// called from onInit - builds the reportConfig property
public async embedReport(): Promise<void> {
// call to my controller action from step 5, requestedReport contains report id, work set id & data set id
let embedConfig = await this.powerBiService.GetEmbeddedReportConfig(this.requestedReport);
this.reportConfig = {
type: 'report',
embedUrl: embedConfig.embedUrl,
id: embedConfig.id,
accessToken: embedConfig.token,
tokenType: models.TokenType.Embed,
settings: {
panes: {
filters: {
expanded: false,
visible: false
}
},
background: models.BackgroundType.Transparent
},
};
}
Some pitfalls to be aware of;
- Make sure you get your various id's correct (work group / set id, report id, dataset id)
- If you are using Row Level Security (RLS) in your reports make sure you provide identities in your call to the generate token API end point, also make sure you get the role name/s correct in your identities
- If you are not using RLS do not provide any identities or you'll get bad request responses from the generate token end point
- If you are struggling to get the right data in your calls to the Power BI API I found it useful to test calls through Postman
- I wasn't involved in the configuration side of things for the service principle but if you are tasked with that also the YouTube link above has content on setting up a service principle and app id.
from powerbi-client-angular.
@eddyizm As best as I can tell, it is not ready to be used, which is a shame, because it is very nearly functional.
As of now, my solution is to use React, or just embed in a regular IFrame and make the user log in to view the report. There is no telling what the intended replacement is for "https://aka.ms/CaptureViewsReportEmbedConfig", or if there even is one yet.
Hopefully this will become functional and documented early next year, and we'll get to use it.
from powerbi-client-angular.
So much information online and almost none of it works or is useful. Anything that looks solid is out of date, even as recently as 2020. Stumbled across this library but not sure how to implement, wish microsoft would do a better and singular location to house their docs, It all ends up being a circular rabbit hole that never ends and people have to hack together. I dread anything to do with powerBI.
Hope you get this to work and would love to see your solution! @DomTripodi93
from powerbi-client-angular.
Looks like I finally got it to work late last month. Forgot to come back here but just wanted to let you that it was possible. Or at least I believe I used this library lol
from powerbi-client-angular.
Related Issues (20)
- Make it possible to set the active page from outside the powerbi-client HOT 1
- Can't work with a low version of angular HOT 1
- TypeError: Cannot read properties of null (reading 'postMessage') HOT 2
- Missing fonts and styles in power bi embedded reports HOT 2
- Doesn't work with Angular 15 HOT 4
- Does powerbi-cilent-angular library supports server side rendering? HOT 2
- Support for reseting a report HOT 6
- FrontLoadException conceptualSchema Exception: Unexpected end of JSON input
- Event Handlers not working for paginated reports. HOT 1
- Embeding PowerBI Desktop Report HOT 1
- Angular 16 Support HOT 5
- Can someone please explain how the token is delivered? HOT 8
- Optimization Npm Builed Failed when adding powerbi-client-angular in our Angular 16 app HOT 2
- Want to send additional parameters with request which we made to get the report HOT 2
- The PoberBI report stays in small iframe HOT 3
- How to show two or more PowerBI reports in the same page? HOT 2
- Unexpected results with LayoutSwitch
- Property 'changeType' does not exist on type 'VisualDescriptor'.
- Warning CommonJS or AMD dependencies
- NaN issues while using zoom sliders on the visuals HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from powerbi-client-angular.