マイクロソフトは2016年9月1日に、Power BIでJavaScript APIを提供開始したことを発表しました。

以下はその発表内容を和訳したものです。

本日、我々は新たにPower BIレポートと、カスタムアプリケーション間で双方向で通信可能なJavaScript APIの提供を開始しました。JavaScript API は簡単にアプリケーションへレポートを埋め込み、プログラム的にレポートを操作することで、アプリケーションとレポートがより連携可能になります。本日発表する2つの主な機能として、高度なレポートフィルターと、ページナビゲーションのコントロール機能です。

これらの新しい機能により、正しいコンテキストでのユーザー向けのレポートをアプリケーション側で開くことができ、レポートがロードされたあとに、コンテキストを変更することも可能になりました。例えば、顧客に特化したレポートを開き、ユーザーがアプリケーションの他の部分を選択した場合に、自動的に顧客を変更するといったことが可能です。

Power BIの組み込みはどのように動くか

Power BI JavaScript APIのメリットを理解するには、Power BIが組み込まれる仕組みを解説しましょう。 Power BI レポートをアプリケーションを埋め込むには、現行はiframeを利用し、アプリ内の一部としてホストされます。iFrameがアプリケーションとPower BIレポートをつなげ合わせる役割を担っています。iframeへ情報を送信したりすることはできないため、アプリケーションの操作によって、レポートを操作するといったことはできません。iframeを利用することで、埋め込み作業が非常に簡単になりますが、Power BIとのインタラクションがアプリからとれないため、アプリの一部というよりかは独立したものに感じられます。

今回のPower BI JavaScript API により、コードを書き込むことで、iframeとの境目を超えることができ、アプリケーション側のプログラムからレポートに対してのアクションをとり、レポート内で発生するアクションに対してのイベントを監視することが可能になります。

Power BI JavaScript APIで何ができるか

JavaScript API では、レポートを管理したり、レポートの別のページへ移動したり、埋め込みイベントのハンドリングや、レポートのフィルターも可能です。以下図では、APIの構造が掲載されています。

レポートの管理

JavaScript APIによって、レポートとページレベルで挙動の管理ができます：

レポートの埋め込みについて詳細を学ぶ（英語）

レポート内でのページを移動する

JavaScript APIにより、どのページでも参照可能にし、表示するページを設定することができます。こちらのナビゲーションデモアプリケーションをご覧ください（英語）

ページナビゲーションについて詳細を学ぶ（英語）

レポートをフィルターする

JavaScript APIにより、単純もしくは、高度な フィルター機能を埋め込んだレポートやレポートページで利用できます。フィルタリングデモアプリケーションをお試し頂き、以下で簡単なコーディング方法をご覧ください。

基本フィルター

基本フィルタ（basic filter）は列もしくは階層レベルに設定され、含めるもしくは除外する値にリストで制御します。
const basicFilter: pbi.models.IBasicFilter = {
$schema: “http://powerbi.com/product/schema#basic“,
target: {
table: “Store”,
column: “Count”
},
operator: “In”,
values: [1,2,3,4]
}

高度フィルター

高度フィルター（Advanced filters）では、ANDまたはORの演算子を利用でき、1つもしくは2つの条件を設定し、個別に別の演算子や条件を設定することができます。利用可能は条件は

  • None（なし）
  • LessThan（より少ない）
  • LessThanOrEqual（以下）
  • GreaterThan（より多い）
  • GreaterThanOrEqual（以上）
  • Contains（～を含む）
  • DoesNotContain（～を含まない）
  • StartsWith（～から始まる）
  • DoesNotStartWith（～から始まらない）
  • Is（～である）
  • IsNot（～ではない）
  • IsBlank（空白）
  • IsNotBlank（空白でない）

const advancedFilter: pbi.models.IAdvancedFilter = {
$schema: “http://powerbi.com/product/schema#advanced“,
target: {
table: “Store”,
column: “Name”
},
logicalOperator: “Or”,
conditions: [
{
operator: “Contains”,
value: “Wash”
},
{
operator: “Contains”,
value: “Park”
}
]
}

フィルタリングについての詳細を学ぶ（英語）

イベントハンドリング

iframeへデータを送信する以外にも、以下のイベントによる情報をアプリケーション側でデータを受信することも可能です：

  • 埋め込み
  • レポート
    • ページの変更
    • 選択されたデータ（近日公開予定）

イベントハンドリングについて詳細を学ぶ（英語）

次のステップ

Power BI JavaScript APIについての詳細は、以下のリンクをご覧ください：