Power AppsからExcelのデータにアクセスして一覧で表示する
Power Appsで業務アプリを作ろうとすると高い確率で巡り合うギャラリーコントロール、今回はこのコントロールでアプリを作ってみます。
完成図
Power AppsでExcelのデータを表示しようと思います。Excelのデータには画像の一覧と各画像の詳細が記録されています。 今回はタブレットのレイアウトで画面遷移をしないシンプルなアプリとします。
参照するExcelについて
ExcelはOneDrive上に保存しています。また、画像本体もOneDriveに保存しています。
1つ目のデータは画像の一覧です。ID、取得日時、ファイル名、画像のURLが記録されています。
↓
2つ目のデータは画像の詳細です。ID、取得日時、ファイル名、判定結果の項目、判定結果の割合が記録されています。
↓
この2つのテーブルはIDと取得日時で紐づきます。 後者のテーブルは少し冗長になっていますが、これは他のアプリでも使う予定だったためです。今回の話では使わない列があるので不要な部分は見えないフリをしていただけると嬉しいです。
Power Appsを起動してアプリを作る
ギャラリーの配置とExcelの指定
画像の一覧を表示するためギャラリーを設置します。縦方向で画像が配置されたギャラリーを選択します。
データソースをExcelにするのですが、OneDriveに保存しているのでOneDriveのコネクタを検索します。 そうすると右側にファイルの一覧が表示されるので該当のExcelファイルを選びます。 さらにExcelのテーブル一覧が出てくるので選択します。
↓
↓
これだけでデータの一部が入ってきました。簡単ですね。
データが読み込まれない場合はExcelを閉じよう
取り込もうとしているExcelを開いているとデータの取り込みに失敗することがあります。そういったときはExcelを閉じてしばらく待ってからデータを再読み込みしてみましょう。 再読み込みはRefresh関数で出来ます。また左ペインのからも再読み込みできます。
画像を表示する
ギャラリー内のイメージコントロールに画像を表示ます。イメージコントロールを選択した状態でImageのプロパティに画像のURLを指定します。 これで画像が表示されます。
Image1.Image = ThisItem.imageUrl
日時を表示する
IDが表示されている部分を日時に変更します。ラベルのコントロールを選択してfileNameを指定します。
Subtitle1.Text = ThisItem.fileName
選択したデータの画像を大きく表示する
イメージコントロールをさらに追加してギャラリーで選択したデータの画像を表示します。選択しているギャラリーのレコードははSelectedで取得できます。
↓
Image2.Image = Gallery1.Selected.imageUrl
解析結果をデータテーブルコントロールで表示する
データテーブルコントロールを挿入してExcelの2つ目のデータを読み込みます。データの読み込みの方法は前述したやり方と同様です。
↓
そのままでは何も表示されませんので、表示するフィールドを指定します。右ペインの「フィールドの編集」から「フィールドの追加」を選択し、表示したい項目を挿入します。
項目の並べ替えはドラッグ＆ドロップでできます。
解析結果が全て表示されてしまっているので絞り込んで並べ替える
データテーブルコントロールにはすべての解析結果が表示されてしまっています。これを画像のIDと取得日時で絞り込みます。 データテーブルのItemsプロパティでFILTER関数を使って絞り込みます。さらに判定結果の項目で並べ替えたいのでSORT関数も入れます。
DataTable1.Items = Sort(Filter('テーブル2',And(id=Gallery1.Selected.id,datetime=Gallery1.Selected.dateTime)),tagName)
テーマを変える
そのままだとそれっぽくないのでテーマを変えます。好きなテーマを選びましょう
以上で完成です。
その他
データテーブルの書式を変える方法が私の検索能力では見つけられませんでした。右寄せや中央寄せをしたかったのですが分かりませんでした。 %表示はテキストに式を追加することで実現できます。
probability列(_C)1.Text = RoundDown(ThisItem.probability*10000,0)/100 & "%"
ということで
今回はデータソースがExcelでしたが、別のデータでも同じことができるはずです。 業務アプリを作ろうとするとギャラリーを使う機会は多くなってくるのでその性質はおさえておきたいところですね。
ちなみに
以下の記事を合わせると、なんとドローンの画像を解析して一覧で確認する流れが完成します。参考になればと思います。
