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

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 項目を埋め込むと変更されます。

  • 報告
  • レポートのビジュアル
  • ページ分割されたレポート を する
  • スタンドアロン Q&A ビジュアル
  • ダッシュボード
  • ダッシュボード タイル

• 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
    }
}

React デモ

React リポジトリには、レポートのブートストラップ、埋め込みレポートの埋め込み、および更新の完全なフローを示すデモが含まれています。 また、[ビジュアル の削除] ボタンを クリックしたときにレポートからビジュアルを削除することで、powerbi レポート作成 ライブラリの使用方法についても説明します。

詳細については、readme ファイルの「demo」セクションを参照してください。

デモの実行

デモはリポジトリ内のサブフォルダーです。 localhost でデモを実行するには、次の手順に従います。

1. 次のコマンドを実行します。

   npm run install:demo
   npm run demo
   

2. ブラウザーで表示するには、http:/localhost:8080/にリダイレクトします。

関連コンテンツ

• レポート を埋め込む
• レポート ビジュアル を埋め込む
• ブートストラップを使用してパフォーマンスを向上
• レポート設定の構成
• レポート を作成、編集、保存する