業務改善と標準化を同時に実現:MS 365業務システム開発

【PowerApps】 画像承認アプリの作り方:前編(フォームで選択されている画像をギャラリーに表示する方法)

  
【PowerApps】 画像承認アプリの作り方:前編(フォームで選択されている画像をギャラリーに表示する方法)
\ この記事を共有 /
【PowerApps】 画像承認アプリの作り方:前編(フォームで選択され...

社内で画像を使った承認業務を自動化できるPowerAppsで作った画像承認アプリの紹介と、作成のキーとなるフォームコントロールの説明、フォーム内に添付した画像をギャラリーに表示する方法を実演しています。

(動画時間:8:42)

Udemy.comでオンラインコースを運営しています。
マイクロソフトPowerApps 中級編【SharePointで、実務で使える業務アプリの作り方:勤怠管理アプリ編】
⇒ 半額になる「ディスカウントリンクページ」へ


画像承認アプリをPower Automate無しで作る。

こんにちは、リーンシグマ、ブラックベルトのマイク根上です。
業務改善コンサルをしています。
今日はこのPowerAppsのご質問からです。

リクエスト文は長文だったのでまとめると

  1. 一画面に複数枚の任意の写真を表示させ、且つ写真を見ながらテキストの入力が出来るようにする。
  2. JPG形式の写真をSharePointリストの一列に格納する。
  3. 格納後に、管理者が各々チェックできる仕組みの構築をする。

1,2の部分が今日の主題でフォームコントロールで解決できます。
3については続編で次の記事でお見せします。

ryo_ej20 さん、ご質問ありがとうございました。
つまり画像承認アプリを作るという事でした。
これをPower Automate無しで作れますので、
色んな事に応用が効くと思います。

実際に作ったデモアプリを最初にお見せして、
今回のシナリオもご理解頂けます。
もし、フォームについての説明を直ぐにお知りになりたい方は
後ろの章に飛んでみて下さい。

画像承認アプリの完成版の実演

画像承認アプリ完成例

上図がその画像承認アプリです。
ユーザーがこのアプリを使い始める時、
つまり、トリガーは製品番号を修正する必要が出てきた時です。
その時に最初のドロップダウンで既存のその製品番号を選び、
新しい製品番号を次のテキスト入力に入力し、
その修正作業の前後で必要な写真を4枚撮ります。

このアプリをタブレットやスマホで使う場合、
「画像の添付」欄の「クリックし、画像を添付」をタップすると
その端末のカメラでそのまま写真が撮れます。

もし、端末がPCなら保存されたファイルから選びます。

するとその画像が隣のギャラリーで表示されるのです(下図参照)。
これで質問者さんの要望であった、
写真を見ながらテキストの入力ができます。

画像承認アプリ完成例

しかし、まだ説明欄での入力がされていないので「提出」ボタンが使えません。
これが間違い防止になるのです。

そして、その説明欄で説明を入力して提出できます。

するとその作業者の確認担当者に自動でメールが送信され、
その中のリンクをクリックすると、ブラウザが開いて、
アプリが起動し作業者の入力した情報と画像が表示されます(下図参照)。

PowerApps 画像承認アプリ完成例

ここで担当者が、それらを見て、「合格」か「再提出」を判断して、
再提出ならコメントを入れて「送信」ボタンを押します。

するとその決裁結果がクラウドに保存され、
作業者にもメールでその結果が伝えられます。
この様に画像を使って承認業務を簡単に行えます。

PowerAppsで細かいアクセス権管理もできます。

PowerAppsで作ったユーザー管理画面

また、管理者用アプリに上図の様なユーザー管理画面を作って、
ユーザー毎に利用可能な画面を制限したり、
誰がどのユーザーの確認を担当するかなどの設定もできます。

PowerAppsの既定では誰にこのアプリを共有するかの
簡単なセキュリティー機能しかありませんが、
ユーザー管理画面を作って細かいアクセス権管理機能を作る事も可能なのです。

フォームコントロールと他のコントロール+Patch関数の比較

それではこのアプリをどう作っているかを見てみましょう。
このアプリの最初の画像選択、閲覧の部分で
フォームコントロールを上手く使っています。

フォームコントロールでは、
指定したデータソースのレコードの内容を閲覧したり、編集をして
またそれをデータソースに保存したりできますが、
その機能なら、他のコントロールを組み合わせて
Patch関数を使っても作れます。

その二つの方法の違いが分かる比較表を作りましたので、
どういう時にどっちを使うかを考えてみましょう。

フォームコントロールと他のコントロール+Patch関数の比較表

上図がその比較表です。まとめると、
フォームコントロールでは、複雑なデザインや複雑な保存はできませんが、
速く簡単に作れます。
もし、複雑に作る必要がある場合に
他のコントロールとPatch関数を使うと良いのです。

フォームから添付ファイルをデータソースに保存する仕組み

今回は複雑なデザインや保存の必要が無いので
フォームコントロールを使いました。
それではその使い方を見てみましょう。

メニューバーの「挿入」、「入力」から、
その「編集フォーム」を追加できます。
画面右の「データソース」属性でご自分のSharePointリストを指定します。

PowerApps 画像承認アプリ 開発画面

データソースがSharePointリストであれば、
それを選んだ後に既定でそのフォームの中に
「添付ファイル」コントロールが入っていて、

先ほどお見せした画像の選択やスマホで写真を撮る機能が
最初から備わっている優れものなのです。

次に、今回のシナリオではこの画面で既存データの編集はしないので、
画面右の「規定モード」は新規にしています。

そして「提出」ボタンの「OnSelect」属性に
SubmitForm関数でこのフォームを指定するだけで、
他のデータと一緒に選択した画像がSharePointリストの
「添付ファイル」列に保存ができます。

「提出」ボタンの「OnSelect」属性
=SubmitForm(Form1)

実はこの添付ファイルコントロールについての詳細動画を
以前作ってますので次のリンクからご覧になってみて下さい。
⇒「Power AppsだけでどんなファイルもSharePointに保存する方法(Power Automate無しで)【添付コントロール】」

フォームで添付した複数画像をギャラリーに表示する方法

次に今日の主題のこの添付ファイルコントロールの
選択中の画像をどう表示しているか、
実際に作るのをお見せしましょう。

まず「挿入」、「レイアウト」から、「空の垂直ギャラリー」を追加して、
その中に「挿入」、「メディア」から、
「画像」コントロールを追加して、配置を整えます。

PowerApps 画像承認アプリ 開発画面2

次に、ギャラリーの「Items」属性で
画像の集まりをどう指定するかが問題です。

フォーム内の「添付ファイル」コントロールの名前は
「DataCardValue9」となっていました。
これを「Items」属性にコピペしましょう。
その後に「.(ピリオド)」を入れると、
下のサジェスチョンに「Attachments」が出てきます。
それを使うのです。

ギャラリーの「Items」属性
=DataCardValue9.Attachments

そして、さっき追加した画像コントロールの「Image」属性に、
「ThisItem.」と入れて、サジェスチョンの「Value」を選ぶと、
「添付ファイル」コントロールで選択中の画像が見える様になるのです。

ギャラリー内の画像コントロールの「Image」属性
=ThisItem.Value

おまけですが、「提出」ボタンの「DisplayMode」属性を見てみましょう。

提出ボタンの「DisplayMode」属性
=If(
  IsBlank(DataCardValue4.Text) Or IsBlank(DataCardValue5.Text) Or IsBlank(DataCardValue8.Text) Or CountRows(DataCardValue9.Attachments) <= 3,
  DisplayMode.Disabled,
  DisplayMode.Edit
)

この式はテキスト入力のどれか一つが空であったり、
添付ファイルコントロール内の画像が3枚以下であれば
ボタン押下不可になり、これで間違い防止をしていたのです。

もう一つ隠れテクニックがありまして、
最初のテキスト入力の真上にドロップダウンを置いていました。

PowerApps 画像承認アプリ 開発画面3

上の画像ではそのドロップダウンを少しずらしています。
その下のテキスト入力の「Default」属性に、
そのドロップダウンの選択値を指定しています。(上図数式バー参照)
これによってユーザーは選択肢から選べるようになり
利便性を上げる事ができるのです。

このデジタル時代だからこそ可能になった画像承認業務は
今後もっと活用されていくと思います。
ぜひマスターしてみて下さい。

次の記事で後半の確認担当者とのやり取りをする
仕組みの作り方をお見せします。

「こちらの記事も読まれてます。」