Incorporer un tableau de bord

Cet article décrit les étapes d’incorporation d’un tableau de bord dans votre application. En savoir plus sur les tableaux de bord dans Introduction aux tableaux de bord pour les concepteurs Power BI.

Conseil

Essayez d’incorporer un tableau de bord ou d’expérimenter nos API clientes dans la section Explorer nos API du terrain de jeu Power BI Embedded Analytics.

Guide pratique pour incorporer un tableau de bord

Lorsque vous incorporez du contenu Power BI dans une application, vous utilisez un objet de configuration pour définir le contenu que vous incorporez et pour spécifier les paramètres du contenu. Ensuite, vous transmettez cet objet à l’API.

Lorsque vous incorporez un tableau de bord, utilisez un objet de configuration de type IDashboardLoadConfiguration :

interface IDashboardLoadConfiguration {
    accessToken: string;
    embedUrl?: string;
    id: string;
    pageView?: models.PageView 
    tokenType?: models.TokenType;
    type: string;
}

Cette interface contient les propriétés suivantes :

• accessToken - Jeton qui vous donne accès aux données Power BI que vous incorporez. Consultez Comprendre les différentes solutions d’incorporation pour en savoir plus sur les jetons d’accès.

• embedUrl - URL du tableau de bord que vous incorporez. Cette URL devient la source de l’élément HTML iframe qui contient le tableau de bord incorporé. Plus précisément, l’API affecte l’URL à l’attribut srciframedu . Vous pouvez utiliser une API Tableaux de bord pour obtenir cette URL. En voici deux exemples:

  • Tableaux de bord - Obtenir un tableau de bord en groupe
  • Tableaux de bord - Obtenir des tableaux de bord en groupe

• id - ID du tableau de bord que vous incorporez. Utilisez une API Tableaux de bord pour obtenir cet ID. Par exemple :

  • Tableaux de bord - Obtenir un tableau de bord en groupe
  • Tableaux de bord - Obtenir des tableaux de bord en groupe

• pageView - Format utilisé par l’API pour le tableau de bord incorporé. Les possibilités sont les suivantes :

  • fitToWidth - La largeur du tableau de bord incorporé correspond à la largeur de l’élément div qui contient le tableau de bord.
  • oneColumn - Le tableau de bord incorporé s’affiche dans une colonne.
  • actualSize - L’API affiche le tableau de bord incorporé à pleine taille.

• tokenType - Type de jeton qui vous donne accès aux données Power BI que vous incorporez.

  • Permet d’incorporer models.TokenType.Aad pour votre organisation (l’utilisateur possède des données).
  • Utiliser models.TokenType.Embed pour incorporer vos clients (l’application possède des données).

  Pour plus d’informations, consultez Comprendre les différentes solutions d’incorporation .

• type - Type de contenu que vous incorporez. Utiliser 'dashboard' pour un tableau de bord.

Exemple

L’exemple suivant vous montre comment incorporer un tableau de bord unique :

// Set up the configuration object that determines what to embed and how to embed it.
let embedConfiguration = {
    accessToken: anAccessToken,
    embedUrl: anEmbedUrl,
    id: aDashboardId,
    pageView: 'fitToWidth',
    tokenType: aTokenType,
    type: 'dashboard'
};
 
// Get a reference to the HTML element that contains the embedded dashboard.
let dashboardContainer = $('#dashboardContainer')[0];
 
// Embed the dashboard.
let dashboard = powerbi.embed(dashboardContainer, embedConfiguration);

Observations et limitations

• L’incorporation de tableaux de bord sur des références SKU EM n’est pas prise en charge

• Lorsque vous incorporez du contenu, votre application affiche le contenu dans un div élément. Si vous utilisez une pageView valeur de l’incorporation d’un tableau de actualSize bord :

  • Si le tableau de bord est plus large que l’élément div , l’API utilise la largeur de l’élément div comme largeur du tableau de bord incorporé.
  • Si le tableau de bord est plus étroit que l’élément div , l’API remplit l’espace inutilisé avec l’arrière-plan incorporé. Par défaut, cet arrière-plan est blanc, mais vous pouvez le configurer pour qu’il soit transparent. Dans ce cas, le style de l’élément div est visible dans l’espace inutilisé.

Étapes suivantes

Embed a report (Intégrer un rapport)

Incorporer une vignette de tableau de bord

Utiliser le bootstrap pour améliorer les performances