Rev. 0, Y. Nishimura, 2022/11/23

待ちに待った機能です！

これまでSharePointをデータソースとして、Power Appsで画像を扱ってきましたが、かなり苦労しました。

添付ファイルに保存したり、JSONに変換したり悪戦苦闘しました。どうしてもアプリの構成が複雑になるのです。

参考：PowerAppsで画像を保存・閲覧する

ここでは、SharePointのイメージ列を使って、Power Appsから画像を保存・読み出しする手法をご紹介します。

比較的簡単な方法ですので、アプリ開発者の皆様にお勧めの機能です。

SharePointリスト

SharePointのリストを作成します。ここでは、「イメージ列」という名前を付けました。

ID、タイトルはリストの既存列です。

Photo列を新たに追加します。

列の追加から、イメージを選びます。

ここでは、名前をPhotoとして保存します。

以下のようにサンプルを数行入力します。

Power Appsのアプリ作成

SharePointからアプリの作成

統合 > Power Apps > アプリの作成　をクリックします。

アプリの作成画面が現れますので、名前を入力して、作成をクリックします。

Power Appsがアプリを作成するまで、しばらくお待ちください。

以下のような画面が現れます。

検索画面の修正

画像の読み出しはアプリのパフォーマンスに影響を及ぼします。

イメージ列からの画像読み出しのサイズは、Full, Large, Medium, Smallの4種類を選ぶことができます。

この検索画面では、パフォーマンスへの影響を最小限にするために、画面のサイズをSmallとしましょう。

Image1のImageプロパティの関数fxを以下のように設定します。

BrowseScreen1.BrowseGallery1.Image1.Image = ThisItem.Photo.Small

詳細画面の修正

詳細画面では、画面の表示数が少ないので、きれいな画面としましょう。

Photo_DataCard1のDefaultプロパティの関数fxを以下のように設定します。

DetailScreen1. DetailForm1. Photo_DataCard1. Default = ThisItem.Photo.Full

編集画面の修正

添付ファイル_DataCard1　を削除します。

ここでも、詳細画面と同様にきれいな画像を表示するように設定しましょう。

Photo_DataCard2のDefaultプロパティの関数fxを以下のように設定します。

EditScreen1. EditForm1. Photo_DataCard2. Default = ThisItem.Photo.Full

プレビューモードで、動作を確認しましょう。

「タップまたはクリックして画像を追加」と表示されている部分をクリックします。

ローカルフォルダーにある別の画像を選ぶと、その画像に変更されます。

画像の変更を元に戻す

もともと表示されていた画像に戻すために、アイコンを追加しましょう。

「リセット」アイコンを、Photo_DataCard2に追加します。

このアイコンのプロパティを以下のように設定します。

Icon1.OnSelect = Reset(AddPicture1)

プレビューモードで動作を確認しましょう。

リセットアイコンをクリックすると、もとの画像に戻ったことが分かります。

次に、この画像を削除するアイコンを追加しましょう。

「ゴミ箱」アイコンを、Photo_DataCard2に追加します。

このアイコンのプロパティを以下のように設定します。

Icon2.OnSelect = Set(vDeleteImage1,true)

画像コントロールImage2のプロパティを以下のように設定します。

Image2.Image = If(IsBlank(AddPicture1.Media), If(vDeleteImage1,Blank(),Parent.Default), AddPicture1.Media)

編集画面が表示されたときに、この変数の初期値をfalseに設定します。

EditScreen1.OnVisible = Set(vDeleteImage1,false)

プレビューモードで動作を確認しましょう。

ごみ箱アイコンをクリックすると、画像が消去されたことが分かります。

画面上部のチェックマークを押すと、詳細画面に戻ります。画像が消去されたことが分かります。

SharePointのリスト「イメージ列」でも、該当のPhotoがブランクになっていることが分かります。

比較的簡単に、Power Appsで画像を扱えるようになりましたね。

Power Apps / SharePointで画像を扱うときにお勧めの機能です。

参考文献

• Read & Write SharePoint Image Column in Power Apps | Patch to Related List of Images, YouTube, Reza Dorrani
• SharePoint Image column in Power Apps limitations, Microsoft Documentation, SharePoint
• PowerAppsで画像を保存・閲覧する, ピディアック株式会社

以上