Power AppsだけでどんなファイルもSharePointに保存する方法(Power Automate無しで)【添付コントロール】
PowerAppsの添付コントロールを使って、ギャラリーの各レコードでエクセル、ワード、PDF、画像ファイルなど、どんなファイルもSharePointリストに保存するやり方をステップバイステップでお見せします。
(動画時間:11:16)
Udemy.comでオンラインコースを運営しています。
マイクロソフトPowerApps 中級編【SharePointで、実務で使える業務アプリの作り方:勤怠管理アプリ編】
⇒ 半額になる「ディスカウントリンクページ」へ
ギャラリー内のデータ毎に色んなファイルを保存する。
こんにちは、リーンシグマ、ブラックベルトのマイク根上です。
業務改善コンサルをしています。
以前Power Automateを使った画像ファイルの保存方法をやりました。
⇒「【PowerApps】画像ファイルをSharePointに保存するやり方(Power Automate使用)」
今回はPowerApps単体でやるやり方で、
画像を扱うにはこれが一番良い方法だと思っています。

まずは完成例をお見せします。
上図がギャラリーコントロールで作った顧客一覧表です。
中央の「ファイルの添付」アイコンをクリックすると、
下図の様な一時的画面が表示されます。
あまり知られていないですが、
PowerAppsにはこの「添付コントロール」があり、
下図中央のコントロールがそれです。

その中の「ファイルを添付」をクリックするとフォルダーが開き、
添付したいファイルを選択できます。
複数のファイルを添付する様にもできますが、
今回は単純な一つのファイルだけを添付するやり方をお見せします。
携帯のカメラで撮った画像も添付ファイルとして保存ができる。
このコントロールのすごい所はこれを携帯で使うと、
携帯のカメラで撮った画像も添付ファイルとして使えます。
下図が、スマホ内で添付コントロール内の「ファイルを添付」をタップした後の画像です。

この画像ではiPhoneの英語版ですが、
「Take Photo」をタップしたらカメラが起動して
写真を撮り、それを添付ファイルとして取得できます。
そして添付コントロールの下の「ファイルを添付」ボタンをクリックすると、
その画像がSharePointリストに保存されるのです。
SharePointリストに添付されたファイルを閲覧する。
SharePointリストには自分で追加した列以外にも沢山の列が自動で作成されます。
その中に「添付ファイル」列があり、
その列にさっきの添付ファイルが保存されるのです。

上図がそのSharePointリストで、
上図の右下の部分の様にさっき撮影した画像が保存されます。

PowerAppsに戻って、添付ファイルが保存されたら
上図の様にクリップアイコンが表示されて、その右に
その添付ファイルのファイル名を表示する様にしました。
そのクリップアイコンをクリックすると、
ブラウザの新しいタブが開いてその画像を閲覧できます。
スマホで撮った画像はJPGファイルでしたが、
他の画像ファイルやPDFも同じ様に開けられますし、
エクセルやワードファイルもOfficeオンラインで直ぐに見る事ができます。
これにより、顧客やプロジェクトのデータであれば
顧客やプロジェクト毎に関連するファイルを保存し閲覧が簡単にできるので、
業務改善の幅が広がると思います。
ファイルの添付機能を表示させる一時的画面の作り方。
それではこのファイルの添付機能の作成の図解をします。
下図は前回の記事で扱ったギャラリーです。
その作り方は次のリンクのリンク先の記事をご覧下さい。
⇒「【Power Apps】ギャラリー内での編集機能の作り方(DisplayMode、Visible、Reset属性の使い方)」

そのギャラリーの中に適当なアイコン二つ(添付/閲覧用)と
添付ファイルの名前を表示するラベルを追加しています。
その左のアイコンがファイルの添付アイコンで
その「OnSelect」属性に
UpdateContext関数で変数:「添付Vis」に「true」を入れています。
添付アイコンの「OnSelect」属性
=UpdateContext({添付Vis:true})
それをクリックすると変数:「添付Vis」が「true」になり、
さっきの様なラベルとキャンセルアイコンで作った
一時的画面の「Visible」属性に同じ変数:「添付Vis」が入っていて、
それが「true」になるので表示される仕組みなのです。
一時画面の全てのコントロールの「Visible」属性
=添付Vis
一時画面内のキャンセルアイコンの「OnSelect」属性で
またUpdateContext関数で変数:「添付Vis」に「false」を入れているので、
そのアイコンをクリックすれば一時的画面は非表示になるのです。
ユーザーにはいつもキャンセルできる選択肢を与えてあげましょう。
キャンセルアイコンの「OnSelect」属性
=UpdateContext({添付Vis:false})
編集フォームコントロールの添付コントロールを使用する。
次に今日のメインイベントの添付コントロールの作成をします。
しかし、メニューバーの「挿入」タブ内のどこを探しても
「添付コントロール」が見当たりません。
実はこの手法は裏技でして、
「挿入」タブ内の「フォーム」内の
「編集(フォーム)」コントロール内にあります。
それを追加して、まず「データベース」属性で
さっきのギャラリーと同じSharePointリストを選びます。

すると上図の様に、フォーム内左下に
「添付ファイル」と書いている部分の
添付コントロールがあるのです。
それ以外のカードは要らないので全て削除します。
それでもう添付するファイルを選択する機能が出来上がったのです。
このままだと複数のファイルの添付ができてしまいます。
そこで、そのコントロールを選んだ状態で
画面右のプロパティ内の「添付ファイルの最大数」属性を
「1」にすると二つ以上添付できない様にできます。
(もしくは数式バーで「MaxAttachments」属性に「1」を入れる)
次にフォーム本体の「Item」属性に表示するレコードを指定します。
ここでは「Gallery2.Selected」とし、
これでギャラリー内で選択したレコードの「添付ファイル」列に
選択したファイルの保存ができるのです。
フォーム本体の「Item」属性
=Gallery2.Selected
最後にボタンを一つ追加して、それが「クラウド保存」ボタンになり、
その「OnSelect」属性に「SubmitForm」関数で
そのフォーム名を指定すると、
ボタンのクリック後に選択されたファイルがクラウド保存されます。
また、ここではファイルを添付した後に
一時的画面は非表示にした方が親切なので、
同じ「OnSelect」属性に、UpdateContext関数で
変数:「添付Vis」に「false」を入れます。
クラウド保存ボタンの「OnSelect」属性
=SubmitForm(Form1);UpdateContext({添付Vis:false})
追加したボタンと編集フォームの「Visible」属性にも
変数:「添付Vis」を入れておく必要があります。
これで添付ファイルを保存した後に直ぐにギャラリーに戻れます。
閲覧ボタンの自動表示と添付ファイル名の表示の仕方。

ギャラリー内のクリップアイコンの閲覧ボタンは
添付ファイルがある時だけ表示された方が直観的ですね。
その「Visible」属性で、「ThisItem.」とタイプすると、
「添付ファイルあり」属性があります。
これはSharePointリストの「添付ファイル」列に
添付ファイルがあると「true」を返してくれて、
これで都合よく添付ファイルがある行だけに
このアイコンが表示させる事ができるのです。
クリップアイコンの閲覧ボタンの「Visible」属性
=ThisItem.添付ファイルあり
その隣のラベルに添付ファイル名を表示させたいです。
その「Text」属性に「ThisItem.」とタイプしたら、
サジェスチョンに「添付ファイル」列があります。
そして、それを選択するとエラーが出てしまいます。
データ型を見ると「テーブル」型で、
これは添付ファイルを複数保存ができる様にするために
この列はテーブル型になっているのです。
「Text」属性内ではどのレコードの
どの列の値かを指定する必要があるので、
今回は添付数を1に制限しているので、
単純にFirst関数を使ってレコードを指定して、
次の数式を入れるとファイル名が出てきます。
ラベルの「Text」属性
=First(ThisItem.添付ファイル).DisplayName
複数ファイルを選択できる様にするには
もっと複雑な式にする必要がありますが、
今回は割愛します。
添付ファイルの閲覧機能の作り方。
そして最後の閲覧機能を作りましょう。
閲覧ボタンの「OnSelect」属性にLaunch関数で、
次の数式を入れます。
閲覧ボタンの「OnSelect」属性
=Launch(First(ThisItem.添付ファイル).AbsoluteUri)
さっきの「DisplayName」の代わりに
「AbsoluteUri」を使っています。
これは何かと言うと、まずデータ型は「Hyperlink」型です。
これで添付ファイルの保存されているURIを取得するのです。
これとLaunch関数でブラウザ内でファイルを開ける事ができるのです。
しかし、ここで一つ問題があります。
試しにWordファイルを添付し、閲覧ボタンを押してみます。
するとエクセル、ワード、パワーポイントなどのOfficeのファイルは
ブラウザで開かずにそのファイルはダウンロードされてしまいます。
その方が良いのであればそのままでいいですが、
ブラウザで直ぐに見れた方が、親切でしょう。
その為には「AbsoluteUri」の後に「 & “?web=1″」を入れます。
これによりOfficeオンラインで開けれる様にできのです。
閲覧ボタンの「OnSelect」属性
=Launch(First(ThisItem.添付ファイル).AbsoluteUri & “?web=1”)
実はもう一つやる事があります。
ユーザーは添付ファイルを入れ替えたい時がありますね。
その時はもう一度「添付の追加」アイコンをクリックして、
添付コントロール右上の「X」をクリックします。(下図参照)

すると削除されたようにファイル名が灰色になりますが、
データソースからは削除されていません。
またその後に入れ替える添付ファイルを
選択できない状態になっています。
そこで、添付コントロールを選んで、
「OnRemoveFile」属性というのがあります。
これは添付コントロールでファイルが削除された後に実行される属性です。
ここにさっきの「クラウド保存」ボタンの様にSubmitForm関数で
フォーム名を指定する式を入れます。
添付コントロールの「OnRemoveFile」属性
=SubmitForm(Form1)
また削除の「X」をクリックすると今度は
そのファイルはデータソースから削除されて、
次のファイルを選択できる様になります。
これで一通りのファイルの添付機能の完成です。
最近は全ての業務で色んなファイルを使うので、
今回のやり方を使えばそれらのファイルを
アプリ内でデータ毎に整理ができ、とても高度な業務改善ができるので、
この機能をぜひご活用下さい。
「こちらの記事も読まれてます。」