Rev. 0, Y. Nishimura, 2022/11/23
待ちに待った機能です!
これまでSharePointをデータソースとして、Power Appsで画像を扱ってきましたが、かなり苦労しました。
添付ファイルに保存したり、JSONに変換したり悪戦苦闘しました。どうしてもアプリの構成が複雑になるのです。
ここでは、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で画像を保存・閲覧する, ピディアック株式会社
以上
“SharePointのイメージ列でPower Appsの画像を操る” への1件の返信