Embedding Basics

Power BI reports can now be embedded into your own applications. There are two different authentication methods for embedding depending on which Power BI Service that you use. Both use access tokens, but when using Power BI Embedded the tokens are issued by your own service and are specific to a report, while the tokens used for PowerBI.com are issued by Azure Active Directory (AAD) and are specific to a user.

Power BI Embedded (Azure)

When using Power BI Embedded, the tokens issued are for a specific report, and the token should be associated with the embed URL on the same element to ensure each has a unique token. This allows embedding multiple reports using the same service instance.

Provide an embed configuration using attributes:

<div
	powerbi-type="report"
	powerbi-access-token="eyJ0eXAiO...Qron7qYpY9MI"
	powerbi-report-id="5dac7a4a-4452-46b3-99f6-a25915e0fe55"
	powerbi-embed-url="https://embedded.powerbi.com/appTokenReportEmbed"
></div>

Embed using javascript:

<div id="reportContainer"></div>

var embedConfiguration = {
	type: 'report',
	accessToken: 'eyJ0eXAiO...Qron7qYpY9MI',
	id: '5dac7a4a-4452-46b3-99f6-a25915e0fe55',
	embedUrl: 'https://embedded.powerbi.com/appTokenReportEmbed'
};
var $reportContainer = $('#reportContainer');
var report = powerbi.embed($reportContainer.get(0), embedConfiguration);

Notice how the attributes and embed configuration hold the same data, just provided to the service in different ways.

PowerBI.com

When using PowerBI.com the tokens issued are for a specific user who can view many different reports. This means you can add this as a global token reused for all embedded visuals as shown below.

It is not required, but you can assign a global access token on an instance of the Power BI service which will be used as a fallback if a local token isn't provided.

<script>
	powerbi.accessToken = '{{AccessToken}}';
</script>

Provide embed configuration using attributes (notice that the access token does not need to be supplied because it will fall back to using the global token):

<div
	powerbi-type="report"
	powerbi-report-id="5dac7a4a-4452-46b3-99f6-a25915e0fe55"
	powerbi-embed-url="https://app.powerbi.com/reportEmbed"
></div>

Embed using javascript:

var embedConfiguration = {
	type: 'report',
	id: '5dac7a4a-4452-46b3-99f6-a25915e0fe55',
	embedUrl: 'https://app.powerbi.com/reportEmbed'
};
var $reportContainer = $('#reportContainer');
var report = powerbi.embed($reportContainer.get(0), embedConfiguration);

Note: You can still choose to supply a AAD access token (instead of one issued from your own service) in the embed configuration. This allows you to have apps that embed reports using both authentication methods.

Also, notice how the embed experience across both services is nearly identical except for how you specify the access token.

Set the size of embedded components

The report will automatically be embedded based on the size of its container. To override the default size of the embeds simply add a CSS class attribute or inline styles for width & height.

Launch an embedded report in fullscreen mode

The code below assumes element with id myReport already contains an embedded report:

var element = document.getElementById('#myReport');
var report = powerbi.get(element);

report.fullscreen();

Print a report

The code below assumes element with id myReport already contains an embedded report:

var element = document.getElementById('#myReport');
var report = powerbi.get(element);

report.print()
  .catch(error => { ... });

Reload a report

The code below assumes element with id myReport already contains an embedded report:

var element = document.getElementById('#myReport');
var report = powerbi.get(element);

report.reload()
  .catch(error => { ... });

Refresh a report

Refresh the underlined data of a report without reset current filters and user interactions. Works only in Direct Query mode. The code below assumes element with id myReport already contains an embedded report:

var element = document.getElementById('#myReport');
var report = powerbi.get(element);

report.refresh()
  .catch(error => { ... });