Experience the awesomeness of a Power BI dashboard from your web portal

Embedding Power BI Dashboard in Angular JS

Power BI dashboards can be shared with users within or outside an organization in the form of

• URLs
• .pbix files or
• Embedded reports in HTML/Javascript portal.

This blog deals with the steps required to embed a Power BI report in Angular JS. The ngx-powerbi library in Angular JS will be used for embedding the dashboards.

Pre-Requisites:

• Power BI Pro Account
• Angular JS
• ngx – powerbi (Library for embedding Power Bi reports in Angular JS)
• Java

This blog deals with the steps required to embed a Power BI report in Angular JS. The ngx-powerbi library in Angular JS will be used for embedding the dashboards.

The entire process can be broken down into the following parts.

1. Create a Power BI Pro account.
2. Grant API and data permissions to your app on Azure Active Directory.
3. Grant requisite permissions to your Apps on Azure Active Directory using Azure Portal.
4. Create a sample Power BI application.
5. Write a Java API to generate Access tokens for login.
6. Create Angular JS UI to embed the dashboard.

The following steps can be followed to embed a Power BI report in Angular JS.

Step 1: Create a Power BI Pro account

A Power BI Pro should be created using your organization’s email address. Users can sign up here. A Pro account costs $9.99 per month.

Step 2: Grant API & data permissions to the App on Azure Active Directory

• Register your Power BI Application on Azure Active Directory.
• Sign In using Power BI credentials.

• Give your application a suitable name.
• Application Type should be Native as we are using this for embedding.

• Give the App permission to access all APIs.
• Register the Application.
• This will create a new App and register it under Azure Active Directory. Note down the Application ID that gets generated. This is used later for access token generation.

Step 3: Grant permissions to the App on Azure Active Directory using Azure Portal

• Sign In to Azure Portal.
• Look up Azure Active Directory -> App Registrations

• Click on the Application and then go to Settings -> Required Permissions
• Select the two API properties listed and click on Grant Permissions button under Required Permissions section. This is required for embedding the Power BI report.

Step 4: Create a Sample Power BI application

Login to Power BI portal. Create a sample Power BI report under a newly created app workspace. The report can also be a .pbix file that is generated from Power BI Desktop Application and published using Power BI Service. Then do File -> Embed.

This will generate an Embed URL that will be used for embedding the report in Angular JS UI. The embed URL will look as follows:

https://app.powerbi.com/reportEmbed?reportId=8d63c6b1-f34d-4de4-9d0a-f5fd79ece1d5&groupId=fbcba1c5-78a5-491a-8eac-4832152b8a97&autoAuth=true&ctid=e983fad9-ddbe-48d7-bb95-eec937e4b59f

The report ID and Group ID are highlighted in bold in the above URL and they are important as they are required for access token generation during login using the Angular JS UI.

Step 5: Write a Java API to generate access token

Write a simple Java API that will generate access tokens using the Application ID that was created in Step 1 when the app was registered. In addition to the application id, Power BI username and password along with the embed URL is also required.

The screenshot above shows a generic implementation of the Java API. In the code snippet below, the application id, Power BI username, password & embed URL are stored in a database and then retrieved from there.

Step 6: Create a simple Angular JS UI to embed the dashboard

An Angular JS UI with single sign on functionality should be created. Every time a user logs in, an access token will get generated from the Java API. The code snippet for embedding the dashboard in Angular JS is as follows.

It uses the ngx-powerbi library from Angular JS for embedding. The embed URL and Access token generated from the Java API are inputs for this component. The login page created in Angular JS looks like the snapshot below:

When you login using the credentials, in the backend an access token gets generated based on the Java API the embedded dashboards can be seen as shown below.

The embedded dashboards can have data connected to persistent storage. In that case, Power BI provides the facility to automatically refresh data using Power BI Gateway Service. More information on how that can be done is provided in this link.