次の方法で共有


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

注意

  • 2022 年 10 月より、Power Apps ポータルは Power Pages です。
  • このトピックは、レガシ機能に適用されます。 最新情報については、Microsoft Power Pages のドキュメントを参照してください。

ヒント

この記事では、powerbi のリキッド タグを使用して Power BI レポートやダッシュボードを追加する方法について説明します。 ポータルスタジオを使用して、 Power BI コンポーネントを Web ページに追加するには、ポータル スタジオを使用して Power BI コンポーネントを Web ページに追加する に移動します。

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

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

注意

  • powerbi Liquid タグの認証の種類として Microsoft Entra ID を指定した場合、安全な Power BI レポートやダッシュボードをポータルの Web ページに追加する前に、必要なユーザーと共有する必要があります。 詳細: Power BI ワークスペースの共有Power BI ダッシュボードとレポートの共有
  • powerbiembedded は、Azure Analysis Services に接続する Power BI ダッシュボードとレポートに対応しています。 また、リキッド コードで "customdata" プロパティを使用して、CustomData プロパティの値を渡すことも可能です。
  • ページ分割された Power BI レポートはサポートされていません。

例:

{% 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 をコピーします。

    Power BI ダッシュボードのパスを取得する。

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

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

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

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

    フォーカス モードで Power BI ダッシュボード タイルを開く。

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

    Power BI ダッシュボード タイル ID。

ポータルでの powerbi-client JavaScript ライブラリの使用方法

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

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

重要

  • powerbi-client JavaScript ライブラリを使用して、フィルター ペインを無効または有効にします。 ただし、データへのアクセスを制限したり、セキュリティを構成したりする場合は、Power BI での行レベルのセキュリティ (RLS) を使用します。 フィルターペインを無効にしても、データへのアクセスは制限されません。これは JavaScript ライブラリのコードを使って再び有効にすることができます。
  • powerbi-client JavaScript ライブラリは、PowerBI Embedded フローでのみサポートされています。
$(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 ペインで作業する

ペインの設定を利用して、ポータルのウェブページ上で 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);
    })

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

関連項目

注意

ドキュメントの言語設定についてお聞かせください。 簡単な調査を行います。 (この調査は英語です)

この調査には約 7 分かかります。 個人データは収集されません (プライバシー ステートメント)。