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>
  
     
      (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, "*");         };       };     }());   </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/&#8230; の形式の 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>
  
     
      (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);       }     }       </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

Advertisements

2 thoughts on “Power BI の UI を iframe で表示する

  1. This is something which I was looking for. Do you have updated version of it as it is posted in 2015? Also, English version of this post? The online translator may miss some important words.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s