Power AppsでPDFファイルを表示する方法

はじめに

今回、Power AppsでPDFファイルを表示する方法について紹介したいと思います。

試験段階機能ではありますが、今回紹介する方法で実現することが可能になりました。

Power AppsとPower Automateの連携技ですので、Power Platformに興味を持っている方にはちょうど良い検証になると思います。

では、さっそくやっていきましょう。

今回のゴール

今回のゴールは以下のような画面です。

Power AppsでPDFファイルを表示した画面

PDFの表示手順

手順1:PDFファイルの配置

アプリに表示させたいPDFファイルをSharePointのドキュメントライブラリに配置します。

ドキュメントライブラリ画面

手順2:フローの作成

Power Automateにてフローを作成します。

このフローは、Power Appsでギャラリーに表示されているPDFファイル一覧でファイルが選択されたときに、選択されたファイルをドキュメントライブラリに取得しにいき、Power Apps上に出力させるフローです。

トリガーはPower Apps(V2)を選択します。

フローのトリガー設定画面

次に「新しいステップ」から「ファイルコンテンツの取得」を選択します。

アクション1の設定画面

サイトのアドレスにはPDFファイルが配置されている「SharePointのサイト」を入力します。

ファイル識別子は、「Power Apps(V2)入力」を入力します。

次に「データ操作」の「作成」を選択します。

アクション2の設定画面

ここで、入力には以下のように式を入力してください。

dataUri(base64ToBinary(body('ファイル_コンテンツの取得')?['$Content']))

最後に「Power AppsまたはFlowに応答する」を選択します。

アクション3の設定画面

画像では、resultと「出力」が入力されていますが、resultは任意の文字列で大丈夫です。

「出力」については、必ず入力してください。

これで、フローの作成は完了ですので、保存をしておきましょう。

手順3:PDFファイルの表示

Power Appsの画面での操作です。

まず、新しい画面を生成します。

新規画面の追加

追加した画面内に垂直ギャラリーを配置します。

垂直ギャラリーの追加

垂直ギャラリーのデータソースとして、PDFファイルが配置してあるドキュメントライブラリを選択します。

垂直ギャラリーのデータソース設定

次にPDFビューアーを配置します。

PDFビューアーの追加

既定でサンプルが表示されていますが、表示させたいものが表示できているわけではありません。

ギャラリーの「Onselect」プロパティを以下のように変更します。

Set(変数,フロー名.Run(垂直ギャラリー名.Selected.識別子).result)

私の場合ですと

Set(pdfdocument,パンカレンダー用フロー.Run(Gallery2.Selected.識別子).result)

PDFビューアーのOnselectプロパティの設定

最後にPDFビューアーの「Document」プロパティのSet関数で宣言した変数を入力します。

PDFビューアーのDocumentプロパティの設定

以上で、完成です。

完成画面

もちろん、複数のファイルある場合でも問題なく切り替わります。

PDFファイル複数例

さいごに

Power AppsでPDFファイルを表示する方法について紹介しました。

Power AppsとPower Automateに触れることができるので、なにか機能を実装したいと思った方が挑戦するには良い題材だと思います。

ぜひ、実際に手を動かしてみてPower AppsとPower Automateに触れてみてください。

執筆担当者プロフィール
榎本 昌広

榎本 昌広(日本ビジネスシステムズ株式会社)

中部MW所属。趣味はサッカーと筋トレです。

担当記事一覧