業務ハックLab

とある社内SEの備忘録的なものです。

【スポンサーリンク】

Power Apps で非常食備蓄確認アプリを作ってみた。

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

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

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

 

非常食リストを格納するSharepointリストを作成

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

  • 非常食備蓄リスト
    列名 列の種類 備考
    product 一行テキスト 商品名
    purchasedate 日付と時刻 購入日
    bestbefore 日付と時刻 賞味期限
    location 一行テキスト 保管場所
    qty 一行テキスト 個数
    picture 複数行テキスト 写真データ格納場所
    (書式なしテキストにしておく)

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

qiita.com

qiita.com

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

非常食備蓄確認アプリの作成

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

SharePointリストからアプリの作成

  1. Power Appsの左側にあるメニューから「作成」をクリック

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

  2. 「データから開始」の「SharePoint」をクリック

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

  3. リストを作成したSharePointサイトを指定します。
    今回、私はPower Apps連携用というサイトにリストを作成したので下記のような形で指定をします。

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

  4. 「一覧の選択」という画面になるので先ほど作成した「非常食備蓄リスト」をクリックし、右下にある「接続」をクリック
    f:id:yo-yon:20210215132803p:plain

  5. 少し待っていると「非常食備蓄リスト」を元に作成されたアプリの編集画面が立ち上がります。

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

  6.  「新しい画面」で「空」の画面を3画面追加し、任意の名称を付けます。
    今回私は「HomeScreen」「RegisterScreen」「CompleteScreen」と名称をつけ、BrowseScreen1も「StockcheckScreen」にしました。

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

アプリ画面の構成

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

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

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

登録開始ボタンOnSelect

備蓄確認ボタンOnSelect

RegisterScreen

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のコードを入力

※1:Camera1 OnSelect

※2:CancelIcon OnSelect

※3:HomeIcon OnSelect

※4:Bt_Confirm OnSelect

StockcheckScreen

表示させる項目はお好みで設定してください。
Galleryについてはデフォルトのコードに加え、賞味期限チェックボックスがTrueになっている時、賞味期限切れ一ヶ月前の物のみを表示するコードを追加しています。

BrowseGallery_Stock Items

BB_Checkbox OnCheck

BB_Checkbox OnUnCheck

DetailScreen1

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

こちらも表示させる項目はお好みで設定してください。
今回、作成したアプリではデフォルトの際に画面上部にあった削除アイコン、編集アイコンの機能をボタンへ切り替えしています。

Bt_Change OnSelect

Bt_Del  OnSelect

EditScreen1

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

この画面では保管場所の変更と個数の変更のみを実施できるようにしています。
ですのでEditFormで表示させているフィールドは「location」と「qt」のみです。

CompleteScreen

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

この画面はRegisterScreenで登録ボタンを押した際に表示される画面になります。
Timerを利用して2秒後に自動的にHomeScreenに遷移するよう設定しています。
Timerの設定

プロパティ名 数式
AutoStart true
Duration 2000
OnTimerEnd Navigate(HomeScreen, ScreenTransition.None)

 

以上で全画面の設定は完了です。
如何だったでしょうか?
ちなみにそんなに難しい仕組みにしていないのでPower Appsに慣れている方であればそんなに時間がかからずに作れると思います。
備えあれば憂い無し!
皆さんも是非試してみてください。
それでは皆さん良い業務ハックライフを~


免責事項