
Power BI dashboards can be shared with users within or outside an organization in the form of
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.
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.
Check out our Advanced Analytics Services
Read More
The entire process can be broken down into the following parts.
The following steps can be followed to embed a Power BI report in Angular JS.
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.
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:
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.
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.
Leverge your Biggest Asset Data
Inquire Now
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.
By Indium
By Indium
By Uma Raj
By Uma Raj
By Abishek Balakumar