SharePoint Online のモダン ページでは、Office ドキュメントや画像や予定やニュースや Forms のフォームなど、さまざまな情報をひとつのページに配置して整理、共有することができます。

そうしたページに PowerApps で作成したアプリも含めることができますので、その方法を紹介したいと思います。

PowerApps Web パーツ

もっとも簡単な方法は、標準 Web パーツとして用意されている「Microsoft PowerApps」Web パーツを利用する方法です。(現時点では、まだプレビューという位置付けのようです)

この Web パーツは設定も簡単で、ページに配置後に PowerApps で作成したアプリの URL またはアプリの ID を指定するだけです。

アプリの URL やアプリの ID は、アプリの詳細画面から取得することができます。

「Web リンク」や「アプリ ID」と書かれてあるところです。

埋め込み Web パーツ

もうひとつの方法は、こちらも標準 Web パーツとして用意されている「埋め込み」Web パーツを利用する方法です。

こちらの Web パーツで表示するためには、自身で iframe タグを書いて指定する必要がありますが、ルールを知ってしまえばこちらも簡単です。

PowerApps を埋め込むための iframe タグは下記のように書きます。

<iframe width="100%" height="330" src="https://web.powerapps.com/webplayer/iframeapp?source=iframe&screenColor=rgba(0,0,0,1)&appId=/providers/Microsoft.PowerApps/apps/[AppId]"></iframe>

幅(width)や高さ(height)は作成したアプリの画面レイアウトに応じて変更してください。また、[AppId] のところにはアプリ ID を指定しますが、これはアプリの詳細画面から取得することができます。

その他、スクリーンカラー(screenColor)については、好きな色で構いませんが、アプリのアイコンの色と揃えるなどが分かり易いのかもしれないですね。

SharePoint Online のページに埋め込むと、つぎのように表示されます。

iframe で埋め込む場合の URL のパラメータについては、下記のページが公式ドキュメントのようです。

Integrate canvas apps into websites and other services
https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/embed-apps-dev

PowerApps Web パーツと比較して、埋め込み Web パーツを利用した方がパーツの幅や高さを自由に設定できるというメリットがあります。ただしこの場合、ブラウザのウインドウサイズに応じて Web パーツの表示サイズも変化してしまうため、アプリ側の表示も自動で変化させる必要があり、PowerApps のアプリ作成時に工夫が必要になります。

そのあたりのアプリ側での工夫は、また今度ブログに書きたいと思います。

さいごに

このように、PowerApps アプリも SharePoint のページに配置して利用することができます。それによって、ユーザーは SharePoint 上でより多くのことが出来るようになります。

今回のサンプルのようにフォームを作成するのも良し、リスト内のデータや他のサービスのデータを表示するのも良しで、使いどころは多そうに思います。