Web ページに Power BI レポートまたはダッシュボードを追加する

powerbi Liquid タグを使用して、Power BI レポートまたはダッシュボードを Web ページへ追加できます。 Web ページの コピー フィールド、またはWeb テンプレートの ソース フィールドで powerbi タグを使用します。

Power BI の新しいワークスペースで作成した Power BI のレポートやダッシュボードを追加する場合は、認証タイプを powerbiembedded として powerbi リキッドタグで指定する必要があります。

例:

{% powerbi authentication_type:"powerbiembedded" path:"https://app.powerbi.com/groups/00000000-0000-0000-0000-000000000000/reports/00000000-0000-0000-0000-000000000001/ReportSection01" %}

ダッシュボードのパスやダッシュボード タイルの ID を取得する方法については、本記事の後半セクションを参照してください。

Azure Analysis Services に接続するダッシュボード、またはレポートを使用する

Azure Analysis Services に接続するダッシュボードやレポートで powerbi リキッド タグ を追加することができます。

Azure Analysis Services に接続してダッシュボードやレポートを追加するには、接続文字列に CustomData パラメータを使用します。

例:

{% powerbi authentication_type:"powerbiembedded" path:"https://app.powerbi.com/groups/<GroupID>/reports/<ReportID>" roles:"<roles associated with report>" customdata:"<customdata>" %}

オプションの customdata タグは、文字列として設定することも、オブジェクトの属性に基づいて動的に生成することもできます。ピリオド (".") または角括弧 ("[]) を使用して、オブジェクトと属性を 2 つの角括弧の間で区切ります。

例:

• customdata: {{ object.attribute }}
• customdata: {{ object[attribute] }}

customdata タグは文字列を返すため、DAX クエリではこの文字列を整数に変換する必要が発生する可能性があります。

Azure Analysis Services および Roles (RLS)

ロールタグは、Azure Analysis Services ベースのレポートとダッシュボードでは任意となります。 使用しない場合、既定のロールは Azure Analysis Services でアプリが割り当てられているロールになります。

しかし、このタグは、複数の利用可能なロールの中から特定のロールを指定するために必要となる場合があり、行レベルのセキュリティを使用する場合にも必要になる場合があります。

ロールは、他の Power BI レポートタイプとは異なり、レポートではなく Azure Analysis Services データベース内に含まれます。

• リキッド コードではロールを提供しません。

  リキッド コードでロールが指定されていない場合、Azure Analysis Services のロールは、アプリがアクセスできるロール (複数可) によって決定され、ロール (複数可) の DAX クエリに対して与えられたカスタム データに基づいて結果をフィルタリングします。 つまり、使用可能なすべてのロールはアクセスを結合しますが、提供されたカスタム データと関連する場合はフィルタリングします。 このシナリオは、Azure Analysis Services のレポートやシングル タイルのダッシュボードの場合に当てはまります。

• リキッド コードではロールを提供します。

  Azure Analysis Services ロールは、RLS ロールと同様に、リキッド コードで提供できます。 複数のロールが用意されており、ページに対して特定のロールを使用する場合、これらロールが必要になる場合があります。 接続文字列で任意のロールを使用する場合、Azure Analysis Services のロールを指定する必要があります。 たとえば、RLS タイルで Azure Analysis Services タイルを使用するマルチ タイル ダッシュボードが挙げられます。

  ダッシュボードで Azure Analysis Services タイルを使用する場合は、次の考慮事項について検討する必要があります:

  • ロールを必要とする他のタイルと、Azure Analysis Services タイルを一緒にダッシュボードで使用する場合は、Azure Analysis Services ロールをロールのリストに追加する必要があります。
  • 異なる Azure Analysis Services のソースからの複数のタイルをそれぞれのロールで使用できますが、カスタム データはそれぞれに同じものでなければならず、複数のカスタム データ値をリキッド コードで使用することはできません。 EffectiveIdentity の customdata タグと customdata パラメータは、文字列の値のみを取ります。

ダッシュボードまたはレポートのパスを取得します。

1. Power BI にサインインします。

2. ポータルで埋め込むダッシュボードまたはレポートを開きます。

3. アドレス バーから URL をコピーします。

   

ダッシュボード タイルの ID を取得

1. Power BI にサインインします。

2. Web サイトでタイルを埋め込むダッシュボードを開きます。

3. タイルをポイントし、その他のオプションを選択してから、フォーカス モードで開くを選択します。

   

4. アドレス バーで URL からのタイル ID をコピーします。 タイル ID は /tiles/ の後ろの値です。

   

Power Pages での powerbi-client JavaScript ライブラリの使用方法

Web サイトで Power BI Embedded レポートやダッシュボードの powerbi-client JavaScript ライブラリ を使用できます。 powerbi-client JavaScript ライブラリの詳細については、Power BI JavaScript wiki を参照してください。

以下は、レポートの設定更新や、イベントの処理に使用する JavaScript のサンプルです。 このサンプルでは、フィルタペインを無効にし、ページナビゲーションを無効にし、dataSelected イベントを有効にしています。

$(document).ready(function () {
    var embedContainer = $(".powerbi")[0];
    if (embedContainer) {
        var report = powerbi.get(embedContainer);
        report.on("loaded", function () {
            report.updateSettings({
                panes: {
                    filters: {
                        visible: false
                    },
                    pageNavigation: {
                        visible: false
                    }
                }
            }).catch(function (errors) {
                console.log(errors);
            });
        })
    }
});

カスタム JavaScript を Web ページに追加する方法:

1. ポータル管理アプリを開きます。
2. 左のペインで、Web ページを選択します。
3. Power BI レポートまたはダッシュボードを含む web ページを選択します。
4. 詳細ルタブを選択します。
5. カスタムJavaScript セクション内の JavaScriptを コピーして貼り付けます。
6. 保存して閉じるを選択します。

それでは、サンプルの JavaScript 操作とその他オプションについて解説します。

埋め込み型レポート HTML への参照を取得する

埋め込み型レポート HTML への参照を取得します。

var embedContainer = $(".powerbi")[0];

詳細情報 : 要素を指定して、既存の Power BI コンポーネントへの参照を取得する

埋め込み型レポートへの参照を取得する

var report = powerbi.get(embedContainer);

Power BI ペインで作業する

ペインの設定を利用して、Web ページ上で Power BI ペインを操作することができます。 例えば、フィルターの設定でペインの表示/非表示を切り替えたり、ページ ナビゲーションの設定で作業したりすることができます。

以下は、フィルター ペインを削除するサンプルです:

report.updateSettings({
            panes: {
                filters :{
                    visible: false
                }
            }
        }).catch(function (errors) {
            console.log(errors);
        });

以下は、ページ ナビゲーションとフィルターの両方で機能するサンプルです:

report.updateSettings({
            panes: {
                filters :{
                    visible: false
                },
                pageNavigation:{
                    visible: false
                }
            }
        }).catch(function (errors) {
            console.log(errors);
        });

詳細情報 : 設定の更新 と 構成の埋め込み - 設定

イベントの処理

埋め込み型コンポーネントは、実行されたコマンドの完了時にイベントを発生させることができます。 たとえば、以下は dataSelected イベントで使用するサンプルです。

//Report.off removes a given event listener if it exists
    report.off("dataSelected");
//Report.on will add an event list
    report.on('dataSelected', function(event){
        console.log('Event - dataSelected:');
        console.log(event.detail);
    })

詳細情報 : イベントの処理

参照

• Power BI コンポーネントを Web ページに追加する
• Power BI 統合の設定
• Power BIの Liquid タグ