Power BI の UI を iframe で表示する


Power BI を使った開発

こんにちは。

Power BI の UI の iframe 表示の Feedback が Preview 段階に入りました。(この Feedback には、私も Vote しました !)

この機能により、ISV 企業など、皆さんの Custom Application に Power BI の Report を表示 (統合) することができます。(ただし、後述するように、Azure AD (Office 365 など) への SignIn が前提となります。)

今週は、ISV 企業からも要望の多い本機能 (API) を紹介します。

2016/02 追記 : Power BI Service (https://app.powerbi.com) に、[Publish to Web] (Web に公開) の機能が追加されました (下図)。embed 可能なコードを生成して不特定多数に公開する場合は、この機能 (Publish to Web の機能) を使用してください。(本投稿で紹介している方法は、組織内の権限のある利用のみが参照可能な埋め込みを提供します。)

 

Power BI の UI 統合の概要

Power BI Dashboard に張り付いた 1 つ 1 つのスナップショットを Tile と呼びますが (下図参照)、現在は、この Tile の UI 統合が可能です。(Tile は、Report、DataSet、別の Dashboard、Q&A box から生成されています。)
Tile の 1 つ 1 つを対象に iframe で統合できます。

Power BI の UI (Tile) を Custom Application に統合するには、大きく下記の 3 つの Step をプログラム コードで実装します。

  1. Azure Active Directory (Azure AD) の OAuth の Flow を使って、access token を取得します。(この際、Azure AD のログイン画面が表示されます。)
  2. 取得した access token を使って、Tile の Embed Url を取得します。
  3. Tile の Embed URL を iframe で表示し、postMessage を使って Tile の load (表示) を促します。(この際、同時に access token を渡します。)

 

Azure AD への Application 登録と access token の取得

Native Application (Mobile App) で Azure Active Directory に Login するプログラミング (OAuth 紹介)」で解説した手順で、Azure Portal (現在は Azure Classic Portal) を使って、Azure AD の Application 登録をおこないます。
この際、Application の Permission として、下図の通り [Power BI service] を追加して Delegated Permission を設定します。(今回は [View all Dashboard] の Permission を付与します。)

補足 : この Permission 設定をおこなう前に、ログインしているアカウントで Power BI Service (https://powerbi.com/) にアクセスして事前に Sign Up をおこなってください。(サインアップしていない場合、Power BI Service の Application が表示されません。)

あとは、OAuth の Flow で access token を取得します。
以下に、Web Application の場合の HTTP Flow の例 (サンプル) を記載しますが、この Flow 詳細については「Native Application (Mobile App) で Azure Active Directory に Login するプログラミング (OAuth 紹介)」を参照してください。(下記の通り、resource には https://analysis.windows.net/powerbi/api を指定します。)

補足 : SPA など JavaScript のみから処理する場合は、OAuth Implicit Grant を使用します。

1) Web Browser (または Web Browser Component) を使って下記 URL を表示します。(この際、Azure AD のログイン画面が表示されます。)

GET https://login.microsoftonline.com/common/oauth2/authorize
?response_type=code
&client_id=d36fd670-b5bf-44a5-896c-5d19b713c1d6
&resource=https%3a%2f%2fanalysis.windows.net%2fpowerbi%2fapi
&redirect_uri=https%3a%2f%2flocalhost%2ftest01

2) 表示されるログイン画面で、Azure AD (Office 365) のアカウントで Login すると、下記に Redirect されます。

GET https://localhost/test01?code=AAABAAAAiL...&session_state=...

3) 上記の code を使って、下記の HTTP POST を要求します。

POST https://login.microsoftonline.com/common/oauth2/token
Content-Type: application/x-www-form-urlencoded

grant_type=authorization_code
&code=AAABAAAAiL...
&client_id=d36fd670-b5bf-44a5-896c-5d19b713c1d6
&client_secret=y2Jlb0%2Br...
&redirect_uri=https%3A%2F%2Flocalhost%2Ftest01

4) 上記の Response として、下記の通り access token が取得できます。

HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8

{
  "expires_in": "3599",
  "token_type": "Bearer",
  "scope": "Dashboard.Read.All",
  "expires_on": "1443172331",
  "not_before": "1443168431",
  "resource": "https://analysis.windows.net/powerbi/api",
  "access_token": "eyJ0eXAiOi...",
  "refresh_token": "AAABAAAAiL...",
  "id_token": "eyJ0eXAiOi..."
}

 

Tile の取得

iframe に表示する Tile の Url (Embed Url) は、https://api.powerbi.com/beta/myorg/dashboards/{DashboardID}/tiles の REST API (GET) で取得できます。
なお、{DashboardID} は各 Dashboard に紐づいた ID で、下図の通り、Dashboard の URL から簡単に取得できます。(プログラム的に Dashboard ID を取得する際は、https://api.powerbi.com/beta/myorg/dashboards の REST API を使用します。)

この要求 (Request) の結果 (Response) として、下記の通り、Tile の Embed URL が取得できます。(Authorization Header には、上記で取得した access token を設定します。)

HTTP Request

GET https://api.powerbi.com/beta/myorg/dashboards/00190933-57c6-4071-9ae6-2462eb13d39a/tiles
Accept: application/json
Authorization: Bearer eyJ0eXAiOi...

HTTP Response

HTTP/1.1 200 OK
Content-Type: application/json; odata.metadata=minimal

{
  "@odata.context": "http://wabi-west-us-redirect.analysis.windows.net/beta/myorg/$metadata#tiles",
  "value": [
    {
      "id": "036ae7c6-d69d-4007-a95a-1283e2e8d53e",
      "title": "Opportunity Count",
      "embedUrl": "https://app.powerbi.com/embed?dashboardId=00190933-57c6-4071-9ae6-2462eb13d39a&tileId=036ae7c6-d69d-4007-a95a-1283e2e8d53e"
    },
    {
      "id": "70eb9feb-f6ad-4f9a-b90b-c7ac79504526",
      "title": "Revenue",
      "embedUrl": "https://app.powerbi.com/embed?dashboardId=00190933-57c6-4071-9ae6-2462eb13d39a&tileId=70eb9feb-f6ad-4f9a-b90b-c7ac79504526"
    },
    . . .

  ]
}

特定の Tile の embedUrl を取得する場合は、https://api.powerbi.com/beta/myorg/dashboards/{DashboardID}/tiles/{TileID} で取得できます。

 

iframe を使った Tile の表示

iframe では、上記で取得された https://app.powerbi.com/embed?dashboardId={DashboardID}&tileId={TileID} 形式の embedUrl を使用します。
ただし、この URL を iframe に設定しただけでは Tile は表示されません。postMessage を使って Tile の Load (表示) を促すことで、はじめて iframe 上に Tile が表示されます。そして、この際、一緒に access token を渡します。

下記の HTML (JavaScript) は、テキストボックス (input タグ) に入力された access token を使って、iframe 上に Tile の 1 つを表示する簡単なサンプルです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Test page</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  access token:<input type="text" id="txtToken" />
  <button id="btnView">View Tile !</button>
  <div id="divView">
    <iframe id="ifrTile" width="100%" height="700"></iframe>
  </div>
  <script>
    (function () {
      document.getElementById('btnView').onclick = function() {
        var iframe = document.getElementById('ifrTile'); 
        iframe.src = 'https://app.powerbi.com/embed?dashboardId=00190933-57c6-4071-9ae6-2462eb13d39a&tileId=70eb9feb-f6ad-4f9a-b90b-c7ac79504526'
          + '&width=500&height=722'; 
        iframe.onload = function() {
          var token = document.getElementById('txtToken').value; 
          var msgJson = {
            action: "loadTile",
            accessToken: token,
            height: 500,
            width: 722
          };
          var msgTxt = JSON.stringify(msgJson);
          iframe.contentWindow.postMessage(msgTxt, "*");
        };
      };
    }());
  </script>
</body>
</html>

実行結果として、[View Tile !] ボタンを押すと、下図のように Tile の 1 つが iframe で表示されます。

標準の Power BI Dashboard では、Tile の 1 つを Click すると、それに応じた Detail の UI (元となる Report など) が表示されます。
これと同じ動きをこの統合された Application で実装する場合は、下記の通り、今度は iframe からの message (postMessage) を受信して処理します。

なお、下記では、例えば、https://app.powerbi.com/reports/… の形式の navigationUrl が渡されるので、この URL をブラウザーで表示して、通常の Power BI の Report ページを表示しています。(Web Browser 上で一度 Login している場合は、Single Sign-On により Report が表示されます。Login していない場合は、ID, Password を入力して Login する必要があります。)

. . .
<body>
  access token:<input type="text" id="txtToken" />
  <button id="btnView">View Tile !</button>
  <div id="divView">
    <iframe id="ifrTile" width="100%" height="700"></iframe>
  </div>
  <script>
    (function () {
      document.getElementById('btnView').onclick = function() {
        var iframe = document.getElementById('ifrTile'); 
        iframe.src = 'https://...'
          + '&width=...';
        iframe.onload = function() {
          ...
        };
        
        // added for click event
        if (window.addEventListener) {
          window.addEventListener("message", receiveMessage, false);
        } else {
          window.attachEvent("onmessage", receiveMessage); 
        }

      };
    }());
    
    // added for click event
    function receiveMessage(event) {
      var msgJson = JSON.parse(event.data);
      if (msgJson.event === "tileClicked") { 
        //alert(msgJson.navigationUrl);
        window.open(msgJson.navigationUrl); 
      }
    }
    
  </script>
</body>

 

ここでは詳細を述べませんが、今回の更新で、pbix ファイル (Power BI Designer で publish したファイル) の Power BI Service への Import も、REST API で可能になっています。(「Power BI Developer Blog – Upload a local PBIX file using the import API」を参照。)
つまり、API のみを使って、Power BI の Artifacts (Report など) のセットアップや、今回のような Application への UI 組み込みが可能です。

これまで Power BI の REST API では、たいした「開発」(プログラミング) はできませんでしたが、今回の更新によって、例えば、Office 365 連携アプリなど Azure AD Account を使用する Application で、より現実的な BI 機能との連携が可能になっています。
Power BI はエンドユーザー (一般の利用者) がすぐに BI を扱えるように、というコンセプトですが、開発者 (プログラマー) にとっても、だいぶ扱いやすくなってきました。

 

※ 参考情報

MSDN : Integrate a Power BI tile into an app
https://msdn.microsoft.com/en-US/library/mt450498.aspx

MSDN : Power BI REST API
https://msdn.microsoft.com/en-us/library/dn877544.aspx

Comments (0)

Skip to main content