Power BI Embedded in Ionic

Ionic Framework ionic-v3
1

Has anybody tried putting together Power BI Embedded within Ionic 2 app?

Any pointers will be highly appreciated.

1 Like
2

Looks like I am the first one to try this…

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
4

Hi there, I am using the same code that you have given here, but I am getting error at config in the below line.

let report = powerbi.embed(reportContainer, config)

It is showing the below error.
[ts]
Argument of type ‘{ type: string; accessToken: string; embedUrl: string; id: string; settings: { filterPaneEnabled:…’ is not assignable to parameter of type ‘IEmbedConfigurationBase’.
Types of property ‘settings’ are incompatible.
Type ‘{ filterPaneEnabled: boolean; navContentPaneEnabled: boolean; }’ has no properties in common with type ‘ISettings’.
(local var) config: {
type: string;
accessToken: string;
embedUrl: string;
id: string;
settings: {
filterPaneEnabled: boolean;
navContentPaneEnabled: boolean;
};
}

Thanks in Advance.

5

Hi @vjknnr,

It’s been a while and I had done it for a PoC that time. And later we didn’t go that route. Also, since Microsoft is changing stuff (in fact, they have stopped Power BI Embedded now, I heard) I am sure something has changed in the API.

As we decided not to use Power BI Embedded, I am also not very familiar and up-to-date with any changes.

I will definitely get back to you if I find something though.

6

Thankyou for your information…

7

We have to add the below lines in config.xml to allow the app to communicate with a particular site. I made it as *, so it can connect to all domains.

<platform name="ios"> <allow-intent href="itms:*" /> <allow-intent href="itms-apps:*" /> <access origin="*" /> <allow-navigation href="*" /> ............ </platform>

8

@gauz09 Its needed an Embedded version of PowerBI to use this code, so to generate the token?