Embed a dashboard tile
Tip
Try embedding a dashboard tile or experiment with our client APIs in the Explore our APIs section of the Power BI Embedded Analytics Playground.
This article covers the steps for embedding a dashboard tile in your application. Learn more about dashboard tiles in Intro to dashboard tiles for Power BI designers.
How to embed a dashboard tile
When you embed Power BI content in an app, you use a configuration object to define the content that you're embedding and to specify the content's settings. Then you pass that object to the API.
When you embed a dashboard tile, use a configuration object of type ITileLoadConfiguration:
interface ITileLoadConfiguration {
accessToken: string;
dashboardId: string;
embedUrl: string;
id: string;
tokenType?: models.TokenType;
type: string;
}
This interface contains the following properties:
accessToken- The token that gives you access to the Power BI data that you're embedding. See Understand the different embedding solutions to learn more about access tokens.dashboardId- The ID of the dashboard that contains the tile that you're embedding. You can use a Dashboards API to obtain this ID. Two examples are:embedUrl- The URL of the dashboard tile that you're embedding. This URL becomes the source of the HTMLiframeelement that contains the embedded dashboard tile. Specifically, the API assigns the URL to thesrcattribute of theiframe. You can use a Dashboards API to obtain this URL. Two examples are:id- The ID of the dashboard tile that you're embedding. You can use a Dashboards API to obtain this ID. Two examples are:tokenType- The kind of token that gives you access to the Power BI data that you're embedding.- Use
models.TokenType.Aadif you're embedding for your organization (the user owns the data). - Use
models.TokenType.Embedif you're embedding for your customers (the app owns the data).
See Understand the different embedding solutions for more information.
- Use
type- The kind of content that you're embedding. Use'tile'for a dashboard tile.
Example
The following example shows you how to embed a single dashboard tile:
// Set up the configuration object that determines what to embed and how to embed it.
let embedConfiguration = {
accessToken: anAccessToken,
dashboardId: aDashboardId,
embedUrl: anEmbedUrl,
id: aTileId,
tokenType: aTokenType,
type: 'tile'
};
// Get a reference to the HTML element that contains the embedded dashboard tile.
let tileContainer = $('#tileContainer')[0];
// Embed the dashboard.
let tile = powerbi.embed(tileContainer, embedConfiguration);