React アプリケーションに Power BI 項目を埋め込む

[アーティクル]
01/18/2024

Power BI 埋め込み分析アプリケーションを作成する場合、Reactは、レポートの作成を含むすべてのクライアント側 API を使用しながら、ブートストラップ統合を使用してパフォーマンスを最適化するのに役立ちます。また、アプリケーションでの Power BI 埋め込みライフサイクル管理も簡略化されます。 Power BI React コンポーネントは、JavaScript と TypeScript の両方をサポートし、React Web アプリケーションに分析を埋め込むのに役立ちます。

React ライブラリを使用すると、次の Power BI 項目を埋め込むことができます。

レポート
ダッシュボード
データのプッシュ時の
レポートビジュアル
Q & A

React Web アプリに Power BI 項目を埋め込む方法

このセクションでは、Reactをアプリにインポートし、それを使用して Power BI レポートを埋め込む方法について説明します。

使用方法の詳細については、Power BI React readme ファイルを参照してください。

React ライブラリをインポートする

Power BI React コンポーネントは NPM にあります。また、 GitHub でオープンソース化されています。

Reactを Web アプリにインポートするには、以下に示すインポートを追加します。

import { PowerBIEmbed } from 'powerbi-client-react';
import { models } from 'powerbi-client';

Reactを使用してレポートを埋め込む

この例では、Reactを使用して Power BI レポートを埋め込む方法を示します。この例の下には、コードサンプルの各コンポーネントの説明があります。

embedConfig = {
    {
        type: 'report', // Supported types: report, dashboard, tile, visual, and qna.
        id: '<Report Id>',
        embedUrl: '<Embed Url>',
        accessToken: '<Access Token>',
        tokenType: models.TokenType.Embed, // Use models.TokenType.Aad if you're embedding for your organization.
        settings: {
            panes: {
                filters: {
                    expanded: false,
                    visible: false
                }
            },
        }
    }
}

eventHandlers = {
    new Map([
        ['loaded', function () {
            console.log('Report loaded');
        }],
        ['rendered', function () {
            console.log('Report rendered');
        }],
        ['error', function (event) {
            console.log(event.detail);
        }]
    ])
}

cssClassName = {
    "report-style-class"
}

getEmbeddedComponent = {
    (embeddedReport) => {
        window.report = embeddedReport;
    }
}

次の一覧には、コードスニペットの例の各コンポーネントの説明または追加情報が含まれています。

埋め込み構成 - 埋め込むコンテンツを定義し、コンテンツの設定を指定します。埋め込み構成は、次の Power BI 項目を埋め込むと変更されます。
eventHandlers - イベント名とそのハンドラーのマップオブジェクト。詳細については、「イベントを処理する方法」を参照してください。
cssClassName - 埋め込みアイテムに CSS クラス名を指定します。これにより、CSS を使用して埋め込み iframe のスタイルを制御できます。
getEmbedComponent - Power BI クライアントライブラリで許可されるすべての API を使用できるように、埋め込みインスタンスを取得するのに役立つコールバック。たとえば、レポートを埋め込むと、 Report クラスのインスタンスが取得されます。

コンポーネントをブートストラップする

powerbi.bootstrap は、開発者が Power BI 項目をより迅速に埋め込み、パフォーマンスを向上させるために使用される方法です。詳細については、「ブートストラップを使用してパフォーマンスを向上する」を参照してください。

embedConfig = {
    {
        type: 'report', // Supported types: report, dashboard, tile, visual, and qna.
        id: undefined,
        embedUrl: undefined,
        accessToken: undefined, // Keep as an empty string, null, or undefined.
        tokenType: models.TokenType.Embed
    }
}