Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
gauz09
New Member

Angular 2 and Power BI Embedded

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.

1 ACCEPTED SOLUTION
gauz09
New Member

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! Smiley Happy

 

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

View solution in original post

20 REPLIES 20

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.