Power Apps で非常食備蓄確認アプリを作ってみた。 - 業務ハックLab -とある情シスの備忘録-

皆さんこんにちは
業務ハックLabのよ〜よんです。

今回は前から作ろうと思っていた非常食備蓄確認用のアプリを作成したので
その作成方法を皆さんにも共有できればと思っています。

皆さんは普段、非常食の管理はどのように行っていますか？
我が家では特に管理をしていなくて、たまに防災リュックを確認し、賞味期限チェックをしているのですがもう少し簡単に管理ができないかなと思ってこのアプリを作りました。
それでは早速、説明していきましょう！！

ではまず非常食を登録しておくためのデータベース格納先としてSharepointリストを作成します。
今回のリストの構成はこんな感じ。

非常食備蓄リスト

ちなみにpicture列に関しては複数行テキストにしています。
アプリ上で撮影したカメラのデータを文字列で格納しています。
この辺の設定に関しては下記ブログを参考にさせていただきました。
@h-nagao さん、@Econoshift さんありがとうございます。

では次にアプリの方の説明に移りたいと思います！

今回は「データから開始」で上記で作成したSharepointリストを元に作成していきます。

Power Appsの左側にあるメニューから「作成」をクリック
「データから開始」の「SharePoint」をクリック
リストを作成したSharePointサイトを指定します。
今回、私はPower Apps連携用というサイトにリストを作成したので下記のような形で指定をします。
「一覧の選択」という画面になるので先ほど作成した「非常食備蓄リスト」をクリックし、右下にある「接続」をクリック
少し待っていると「非常食備蓄リスト」を元に作成されたアプリの編集画面が立ち上がります。
「新しい画面」で「空」の画面を３画面追加し、任意の名称を付けます。
今回私は「HomeScreen」「RegisterScreen」「CompleteScreen」と名称をつけ、BrowseScreen1も「StockcheckScreen」にしました。

アプリ画面の構成は下記のとおりです。

スクリーン名	用途
HomeScreen	ホーム画面登録開始ボタン、備蓄確認ボタンを配置
RegisterScreen	備蓄品登録要画面
StockcheckScreen	登録備蓄確認用画面
DetailScreen1	備蓄詳細確認画面削除ボタン、保管場所変更、個数変更ボタンを配置
EditScreen1	保管場所変更、個数変更用画面
CompleteScreen	完了画面

f:id:yo-yon:20210215153605p:plain

登録開始ボタンOnSelect

備蓄確認ボタンOnSelect

f:id:yo-yon:20210215153715p:plain

コントロール名	用途
TX_product	商品名入力欄
DP_purchasedate	購入日選択
DP_bestbefore	賞味期限選択
D_location	保管場所選択 Items=["防災リュック(大)","防災リュック(中)","パントリー","階段下収納"]
TX_qty	備蓄品個数入力欄
Camera1	備蓄品画像撮影用 OnSelectへ※1のコードを入力
Gallery	Camera1タップ時に設定されるPhotoGalleryデータを参照 Img_Photoを格納し、Camera1で撮影した写真を表示 Items=PhotoGallery Image=ThisItem.Photo
CancelIcon	撮影画像クリア用アイコン OnSelectへ※2のコードを入力
HomeIcon	ホーム画面遷移用アイコン OnSelectへ※3のコードを入力
Bt_Confirm	登録確定用ボタン OnSelectへ※4のコードを入力