Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!
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.
Solved! Go to Solution.
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.
User | Count |
---|---|
15 | |
2 | |
1 | |
1 | |
1 |
User | Count |
---|---|
17 | |
11 | |
5 | |
4 | |
3 |