Power BI Overview and Angular Embedding How-to

8 min readApr 26, 2018

A brief overview of Microsoft’s Power BI data visualization service and steps to embed a Power BI report in an Angular web application.

Excerpt from Microsoft’s Power BI page: Power BI is a suite of business analytics tools that deliver insights throughout your organization. Connect to hundreds of data sources, simplify data prep, and drive ad hoc analysis. Produce beautiful reports, then publish them for your organization to consume on the web and across mobile devices. Everyone can create personalized dashboards with a unique, 360-degree view of their business. And scale across the enterprise, with governance and security built-in.

There are multiple ways to access Power BI reports:

Power BI service (web portal: app.powerbi.com).
Power BI desktop application.
Power BI Embedded reports.
More… (out of scope of this article)

In this article, we will be embedding the Power BI reports in our Angular client application. This gives us the following benefits:

User doesn’t need to know or care about the technology behind the reports. The reports will be shown as part of the web application.
User doesn’t need a Power BI account.

Power BI Angular Library

I have released a Power BI Embedding library for Angular 6+. The library can be installed using the following command:

npm install ngx-powerbi

Here are the relevant links:

More information about the library: https://medium.com/@ramandeep.singh.1983/ngx-powerbi-a-basic-typescript-wrapper-library-for-power-bi-b056150b3f25

NPM: https://www.npmjs.com/package/ngx-powerbi

GitHub: https://github.com/ramandeep-singh-1983/ngx-powerbi

Power BI Accounts

Power BI provides free, pro and a premium versions of their service. For our use case, we are concerned with the following offerings:

Power BI Pro: This is a user-based license. This is required to access the Power BI embedding APIs and controls. Free v/s Pro account comparison can be found here: https://docs.microsoft.com/en-us/power-bi/service-free-vs-pro.
Power BI Premium: This is a capacity-based license available for the Power BI reports so that larger data volumes can be handled and widespread distribution of content can be achieved. Details can be found here: https://docs.microsoft.com/en-us/power-bi/service-premium.

For our development purposes, we only need a Power BI Pro account. Premium account will be required during production deployment.

Power BI FAQs

Source: https://docs.microsoft.com/en-us/power-bi/service-premium-faq. Some relevant FAQs are listed here:

What is Power BI Premium?

Power BI Premium is a new capacity-based offering that includes:

Flexibility to publish reports broadly across an enterprise, without requiring recipients to be licensed individually per user.
Greater scale and performance from dedicated capacity in the Power BI service.
The ability to maintain BI assets on-premises with Power BI Report Server.
One API surface, a consistent set of capabilities and access to the latest features for embedded analytics.

Do I need Power BI Pro to use Power BI Premium?

Yes. Power BI Pro is required to publish reports, share dashboards, collaborate with colleagues in work spaces and engage in other related activities.

Do I have the option to return my Power BI Pro licenses if I want to switch to Power BI Premium?

No. Power BI Premium is an add-on to Power BI Pro; therefore Premium requires Pro licenses.

Power BI Account Summary

From the available documentation and FAQs, we can summarize the following Power BI account requirements:

A Power BI Pro account during development.
An organization-wide Power BI Premium account and a single Power BI Pro account for production release.

Embedding Scenarios

There are 2 ways in which a Power BI report can be embedded in an application:

Embedding for your organization: User owns data: Users need their own Power BI account to access the reports.
Embedding for your customers: App owns data: Users don’t need a Power BI account.

For our use case, we will be following the “App owns data” flow. We will embed a Power BI report in an Angular application and the end users won’t need a Power BI license to access it.

Step-by-step guide: Embedding a Power BI report in an Angular application

Power BI reports can be embedded into any kind of application using the given REST API, JavaScript library, C# SDK etc. In our scenario, we will be using the JavaScript library and a 3rd party Angular component to embed a Power BI report into an Angular based web application.

Power BI Account and Application Setup

Azure Active Directory tenant is required to embed items from Power BI.
Create a Power BI Pro account: An organization sign-in account is needed for this so any public email domains (e.g. gmail, yahoo etc.) won’t work.
Register an application for Power BI using this link: https://dev.powerbi.com/apps. More details can be found here: https://docs.microsoft.com/en-us/power-bi/developer/register-app. Specify the following:

a. App name.
b. App type: should be “Native app” as we are embedding content for our customers.
c. Redirect URL.
d. API permissions.

4. Click the “Register App” button. It will create a new app and register it under your Azure Active Directory tenant with the required permissions.

5. Grant permissions to the app in Azure Active Directory settings on Azure portal:

a. Go to Azure Portal.
b. Find Azure Active Directory > App registrations > Application > Settings > Required Permissions: Ensure that the app has access to the following:

i. Windows Azure Active Directory
ii. Power BI Service (Power BI): validate the permissions available to the app

c. Click the “Grant Permissions” button under the Required Permissions section. This is an important step and embedding won’t work without clicking the grant permissions button.
d. Note down the Application ID of the app in the Azure portal. This will be required to get the Azure AD access token later.

Create a sample Power BI report

Navigate to the Power BI service portal (https://app.powerbi.com). Create an app workspace under workspaces section and add a sample Power BI report under the Reports tab in the app workspace. The Power BI report can be a .pbix file generated from Power BI desktop application. An app workspace is also known as group in Power BI. (Reference article: https://docs.microsoft.com/en-us/power-bi/developer/embedding-content#create-app-workspaces).
Open the report in Power BI service portal and save the URL from the browser location bar. The URL contains important data that will be required to access the reports in our web app later. The URL is of the following form:

a. URL: https://app.powerbi.com/groups/30c614f2-ca7e-4f75-aa86-9ce1cc4f156a/reports/63b91fa2-f2cc-4f0e-9879-2534b8157153/ReportSection
b. Group id or workspace id from the above URL (marked in BOLD): https://app.powerbi.com/groups/30c614f2-ca7e-4f75-aa86-9ce1cc4f156a/reports/63b91fa2-f2cc-4f0e-9879-2534b8157153/ReportSection
c. Report id from the above URL (marked in BOLD): https://app.powerbi.com/groups/30c614f2-ca7e-4f75-aa86-9ce1cc4f156a/reports/63b91fa2-f2cc-4f0e-9879-2534b8157153/ReportSection
d. Save the group and report id from the URL.

Report id and group id are not available anywhere in the Power BI service portal so we have to get it from the URL as mentioned above.

3. Now, we can use the Power BI JavaScript library or REST APIs provided by Microsoft to embed our reports in a web application.

Embed the Power BI report in an Angular web application

The Power BI JavaScript library or REST APIs provide a way to embed the Power BI reports into an application. Before we can access these APIs, we need to authenticate the application using the access token of the Power BI Pro account that we used to register our app and create an app workspace. This authentication is not part of the provided APIs and we need a separate mechanism to fetch the access token for our web app.

2. Proof of concepts: 2 sample POCs have been created to demonstrate the embedded Power BI reports in an Angular web application. The POCs can be found here: https://github.com/ramandeep-singh-1983/powerbi-embedded-poc . The POCs are pretty rudimentary and have just been added to show a basic working example of embedded Power BI reports. The aforementioned repository contains the following POCs:

poc1: using a free available 3rd party angular library: https://github.com/diego-d5000/PowerBI-Angular2
poc2: using official JavaScript library provided by Microsoft: https://github.com/Microsoft/PowerBI-JavaScript

3. Both POCs require an access token, report id and embed URL as input:

a. Embed URL and report id: https://app.powerbi.com/reportEmbed?reportId=63b91fa2-f2cc-4f0e-9879-2534b8157153&groupId=30c614f2-ca7e-4f75-aa86-9ce1cc4f156a. Replace these with the correct report id and group id obtained from the Power BI service portal.
b. Access token: This is explained below. We need to run the sample application provided by Microsoft or create our own application that fetches the access token from Azure AD.

4. Run the apps using the following commands from the poc root directories:

a. npm install: this will install all required dependencies for the application.
b. ng serve -o: this will run the app and launch a browser instance for http://localhost:4200 and then you should be able to see the embedded reports.

Sample POCs repository URL: https://github.com/ramandeep-singh-1983/powerbi-embedded-poc .

Generate access tokens for the Power BI Service

The application we created through the Power BI convienance portal (https://dev.powerbi.com/apps) resides inside our Azure AD and for accessing any of the Power BI APIs, we need an access token:

Microsoft has provided a nice sample (https://github.com/Microsoft/PowerBI-Developer-Samples/tree/master/App%20Owns%20Data) that includes code for fetching the access token using the Power BI Pro account credentials. The access token is then used to embed a Power BI report in a web application.
To see an embedded report, dashboard or tile, the following details need to be filled in web.config of the project:

a. clientId — Id of AAD application registered as a NATIVE app. This is the application id from the Azure portal that we noted down earlier.
b. groupId — group or workspace Id in Power BI which contains reports, dashboards and tiles we want to embed.
c. pbiUsername — Power BI username (e.g. Email). Must be an admin of the group above.
d. pbiPassword — password of Power BI user above.

3. Getting access token:

a. Run the application, search and put a breakpoint in the following line inside the EmbedReport function:

var tokenCredentials = new TokenCredentials(authenticationResult.AccessToken, “Bearer”);

b. Click the “Embed Report” option in the UI
c. The breakpoint we added will be hit, save the value of authenticationResult.AccessToken and provide this value in the 2 POC applications above.

4. Run the POC applications and you should be able to see the embedded Power BI report.

Azure AD access tokens are valid for a limited time (1 hour by default) and need to be renewed before expiry, details can be found here: https://docs.microsoft.com/en-us/azure/active-directory/active-directory-configurable-token-lifetimes

Update: I have created a GitHub gist of the backend code for generating the access token. This code checks if the current token is valid and returns the same otherwise it generates a new token. The gist link is here:
https://gist.github.com/ramandeep-singh-1983/0350b22130884ecefdb54f41a92ba232