Power BI Embedded in Ionic

Ionic Framework ionic-v3
3

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 -k

  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

  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

  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

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=) for the report to be embedded in your app.

HTML code:

TypeScript/JS code:

import * as pbi from ‘powerbi-client’;

showReport() {
// Report’s Secured Token
let accessToken = ‘’;

// 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 fellow Ionicans! :slight_smile:

2 Likes