Power BI web app

The Power BI webapp supports both the app owns data and user owns data scenarios. See Microsoft's documentation here and here for more information on app owns data and user owns data respectively.

For the app owns data scenario the web app is dependent on the Power BI code module to generate the tokens needed to authenticate against the Power BI Service when embedding reports. For the user owns data scenario the web app triggers authentication agains Azure AD (AAD) on page load and generates an access token for the user when selecting a report which it then uses to authenticate against the Power BI Service. The adal.js library is used to handle authentication agains AAD.

Both embedded tokens generated by the code module and access token from AAD have a limited lifetime. To ensure a report continues working over time, a timer is set once the report is embedded that silently generates a new token 2 minutes before the token expires. For the app owns data scenario an ajax call is made to the code module to get a new token, while in the user owns data scenario a new token is generated by performing an authorize request agains AAD in a hidden iframe.

The web app, dw-powerbi-show-report, is available in Pims R4 Dev here.

Reports available for embedding

The available reports are loaded from the data source dsPowerBIReports which looads data from atbv_DW_PowerBI_Reports.

There is another web app that let's a user register which reports should be available for embedding in this web app. A name for the report, which is displayed in this web apps dropdown, as well as an embed URL for the report from Power BI Service is registered. The embed URL for a report can be found in the Power BI Service by opening the report and selecting File --> Embed. The embed URL is the URL displayed in the first text box.

The web app for adding reports for embedding, dw-powerbi-add-report, is available in Pims R4 Dev here.


At the top of the web apps Main Script there is a set of variables that configure the web apps behavior. An explanation of them follows below.
var appOwnsData = true; var defaultGroupId = '00000000-0000-0000-0000-000000000000'; var config = { clientId: '00000000-0000-0000-0000-000000000000', popUp: true, callback: defaultAuthCallback };

Configure usage scenario

There is a variable, appOwnsData, at the top of the Main Script for the web app that controls which embedding scenario the web app uses. Set it to true for app owns data and false for user owns data.

Configuration for app owns data

For the app owns data scenario the code module will also need to be configured. See the Power Bi code module documentation for more information.

When generating embedded tokens for the app owns data scenario, the tokens are generated for a specific report within a specific workspace.

If the embed url for the report contains a groupId parameter, the value of this parameter will be used as the groupId when generating an embedded token. If not, the web app will assume the report is published to the workspace with the id specified in the variable defaultGroupId, located in the web apps Main Script, and use this id when generating a token.

Configuration for user owns data

For the user owns data scenario Azure AD authentication will need to be configured for the web app.

Register application in Azure AD

To be able to log users in to Azure AD the web app must be registered as an applicaiton within Azure AD. Details for how to do this can be found here.

When the application is created in Azure AD it must be configured as follows:

  • Authentication pane: The URL for the web app must be registered as a redirect URI with type Web and the checkboxes for Access tokens and ID tokens must be checked (found under the Advanced settings heading).
  • API permissions pane: The application needs the User.Read permission for Microsoft Graph and the Report.Read.All permission for Power BI Service

Once the application is registered and configured in Azure AD you need to copy the Application (client) ID from the Overview pane as it is needed to configure the web app.

Configure authentication in web app

At the top of the web apps Main Script there is a variable, config, that is used to configure the Azure AD authentication.

Set config.clientId to the Application (client) ID for the application registered in Azure AD.

By setting config.popUp to true, the web app will attempt to trigger the Azure AD authentication in a popup window. If set to false, the web app will trigger the authentication by redirecting to Azure AD. This is also the fallback behavior if popups are blocked for the web apps domain.

Related articles

Placeholder "LocalizeWeb2016" failed