【Power Apps】QRコード読込機能付き備品管理アプリ3

前の記事の続きになります。
Microsoft社が提供するローコード開発ツール「Power Platform」のアプリ機能(Power Apps)を使用した、QRコード読込による棚卸機能付き備品管理アプリの作成例を紹介します。

操作環境：

OS：Windows 11
Webブラウザー：Edge

使用プラン：Microsoft 365 Business Premium
アプリ使用環境：

OS：Android 14
アプリ：PowerApps

アプリ実装:一覧画面:ヘッダー整備
アプリ実装:一覧画面:検索項目整備
- コンテナーの追加
- コンテナー内への部品追加・移動
アプリ実装:一覧画面:一括棚卸機能
アプリ実装:一覧画面:検索結果項目整備
おわりに(設定要素まとめ)

アプリ実装:一覧画面:ヘッダー整備

一覧画面のタイトル変更

[備品一覧]と記載されたタイトルを選択し、以下の通りプロパティを変更します。

Text："備品管理"

QRコード棚卸アイコン追加・設定

リフレッシュアイコンをコピー&ペーストし、表示位置を調整します。
右側プロパティの[ディスプレイ>アイコン]を[スキャン]に変更します。

スキャンアイコンを選択し、以下の通りプロパティを変更します。

OnSelect：Set(glb_action, "scan");Navigate(DetailScreen1, ScreenTransition.None)
*式の意味：スキャンアイコン選択時はグローバル変数glb_actionに”scan”を格納し詳細画面に遷移します(この変数は詳細画面のデータ表示の判定で使用します)
tooltip："QRコード読取棚卸へ"

左側のツリービューよりスキャンアイコンの名前も分かりやすい値に変更します。

新規登録アイコンの表示制御(詳細画面と同じ)

新規登録アイコンをシステム管理者(所属組織が管理部(IT)のユーザーで判断)のみ表示するよう制御します。
新規登録アイコンを選択し、プロパティを以下の通り変更します。

Visible：If(Office365ユーザー.UserProfileV2(User().Email).department="管理部(IT)",true,false)

アプリ実装:一覧画面:検索項目整備

コンテナーの追加

今回は部品が多くなるため、コンテナーを用意してその中に部品を追加する構成とします。
左の[ツリービュー] の[BrowserScreen1]を選択し、上メニューの[挿入]より[レイアウト>コンテナー]を選択します。
コンテナーの表示位置や大きさ(幅640,高さ423)を調整します。

検索結果領域[BrowserGallery1]の位置を少し下にずらします。マウス操作がしにくい場合は、[詳細設定>Y]で値入力でも対応できます(この例ではY=520)。
さらに、検索項目の配置やラベル名を調整します。

コンテナー内への部品追加・移動

コンテナーを選択した状態で、上メニューの[挿入]より以下部品を追加します。

テキストラベル(5個)
アイコン>消去(3個)
入力>ドロップダウン(3個)
入力>切り替え
入力>チェックボックス
入力>ボタン

前の工程のスキャンアイコンのように、部品名を変更しておきます。
また、元々用意されていた検索ボックス等もコンテナーの下に移動(切り取り・貼り付けで移動可能)します。

以下の表のように、追加・移動した部品の配置やラベルのテキスト等を調整します。

部品名	Height	Weight	X	Y	Text	その他の設定項目
lblCategory	200	70	0	0	"category:"
drpCategory	349	60	212	5		Items:Distinct(Sort(備品一覧, category.Value, SortOrder.Ascending),category.Value)
IconCategory	60	60	570	5		OnSelect:Reset(drpCategory)
lblPlace	200	70	0	70	"place:"
drpPlace	349	60	212	75		Items:Distinct(Sort(備品一覧, place.Value, SortOrder.Ascending),place.Value)
IconPlace	60	60	570	75		OnSelect:Reset(drpPlace)
lblUserName	200	70	0	140	"user_name:"
drpUserName	349	60	212	145		Items:Distinct(Sort(備品一覧, user_name, SortOrder.Ascending),user_name)
IconUserName	60	60	570	145		OnSelect:Reset(drpUserName)
lblEquipmentName	200	70	0	210	"equip_name:"
TextSearchBox1	416	60	212	215		HintText:"備品名のキーワード"
lblStatus	200	70	0	280	"処分済を含む"
tglStatus	171	49	212	288		Default:false
chkInventory	280	80	0	350	"全選択(棚卸用)"	(後の工程で設定)
btnInventory	280	70	336	355	"一括棚卸"	(後の工程で設定)

図表10-4 一覧画面の検索項目のレイアウト調整(設定値)

さらに、3個のドロップダウンについて、以下の通りプロパティを変更します。

ArrowEmptySelection:true
Default:(コメントアウト)

一通り調整すると、このようになります。なお、ドロップダウンの選択値は再選択することでクリアできますが、消去アイコンの方が操作性が良いので設けています。

図表10-5 一覧画面の検索項目のレイアウト調整(設定値) — 図表10-5 一覧画面の検索項目のレイアウト調整(調整後イメージ)

アプリ実装:一覧画面:一括棚卸機能

検索結果領域へのチェックボックス追加

[全選択(棚卸用)]のチェックボックスをコピーして検索結果領域にこれを貼り付けることで部品を追加します。
[全選択(棚卸用)]のチェックボックスを選択して右クリックして[コピー>コピー]を選択します。
[BrowserGallery1]の下の部品(どれでも構いません)を選択して右クリックして[貼り付け>貼り付け]を選択します。

ペーストしたチェックボックスの配置を調整し、左側のツリービューにて分かりやすい名前に変更します。
右側プロパティの[詳細設定]にて、以下の通りプロパティを変更します。

OnCheck,OnUncheck：false
Default：chkInventory.Value
Text：(値なし)

全選択チェックボックスの処理

全選択チェックボックスを選択し、以下の通りプロパティを変更します。

OnCheck：(コメントアウト)
OnUncheck：RemoveIf(備品一覧,chkInventoryEach.Value=true)

この設定により、図表11-2で検索結果領域に追加したチェックボックスと連動するようになります。

一括棚卸ボタンの処理

一括棚卸ボタンを選択し、[OnSelect]プロパティを以下の通り変更します。

Clear(col_gallery);
Collect(col_gallery, Filter(BrowseGallery1.AllItems, chkInventoryEach.Value=true));
ForAll(col_gallery,
  Patch([@備品一覧], ThisRecord,
    {inventory_date:Today()}
  )
);

*チェックのついた各データについて、一括棚卸を行っています(棚卸日を本日に更新)

アプリ実装:一覧画面:検索結果項目整備

検索ロジックの変更

今回追加した検索項目を踏まえた検索ロジックに変更します。
左側の[ツリービュー]の[BrowseGallery1]を選択し、左上のリストから[Items]を選択し、以下の通り変更します。

Sort(
  If(tglStatus.Value=true,
    Filter([@備品一覧],
      IsBlank(drpCategory.SelectedText.Value) || category.Value = drpCategory.SelectedText.Value,
      IsBlank(drpPlace.SelectedText.Value) || place.Value = drpPlace.SelectedText.Value,
      IsBlank(drpUserName.SelectedText.Value) || user_name = drpUserName.SelectedText.Value,
      TextSearchBox1.Text in equipment_name
    ),
    Filter([@備品一覧],
      IsBlank(drpCategory.SelectedText.Value) || category.Value = drpCategory.SelectedText.Value,
      IsBlank(drpPlace.SelectedText.Value) || place.Value = drpPlace.SelectedText.Value,
      IsBlank(drpUserName.SelectedText.Value) || user_name = drpUserName.SelectedText.Value,
      TextSearchBox1.Text in equipment_name,
      status.Value <> "処分済"
    )
  ),
  equipment_name,
  If(SortDescending1, SortOrder.Descending, SortOrder.Ascending)
)

*statusのトグルがオンの場合はcategory,place,user_nameの選択値(未選択は全件)とequipment_nameの部分一致で検索し、statusのトグルがオフの場合はstatusが処分済以外でcategory,place,user_nameの選択値(未選択は全件)とequipment_nameの部分一致で検索します。表示順はequipment_nameの昇順とします(右上の並び替えアイコンで降順に切り替え可)

検索結果の項目変更

左側の[ツリービュー]の[BrowseGallery1>Title1]を選択し、以下の通りプロパティを変更します。

Text： "【" & ThisItem.status.Value & "】" & ThisItem.category.Value & " > " & ThisItem.equipment_name

左側の[ツリービュー]の[BrowseGallery1>Subtitle1]を選択し、以下の通りプロパティを変更します。

Text： "使用場所:" & ThisItem.place.Value & " / 使用者名・組織名:" & ThisItem.user_name

左側の[ツリービュー]の[BrowseGallery1>Body1]を選択し、以下の通りプロパティを変更します。

Text： "ID:" & ThisItem.ID & " / 備品コード:" & ThisItem.equipment_code & " / 取得日:" & Text(ThisItem.acquired_date, "yyyy-mm-dd", "ja-JP") & " / 棚卸日:" & Text(ThisItem.inventory_date, "yyyy-mm-dd", "ja-JP")

検索結果の背景色変更等

検索結果のstatusの値に応じて背景色が変わるようにします。
左側の[ツリービュー]の[BrowseGallery1>]を選択し、以下の通りプロパティを変更します。

TemplateFill ：If(ThisItem.status.Value in ["処分済"], RGBA(219,219,219,1), If(ThisItem.status.Value in ["遊休", "故障中"], RGBA(153,217,234,1),RGBA(0,0,0,0)))
*処分済は灰色、遊休・故障中は青色、その他(使用中)は白色とします
OnSelect：Set(glb_action, "edit");Navigate(DetailScreen1, ScreenTransition.None)
*検索結果データ選択時はグローバル変数glb_actionに”edit”を格納し、詳細画面に遷移します(この変数は詳細画面のデータ表示の判定で使用します)

アプリが完成しました。右上の公開アイコンを選択すると、このバージョンを公開できます。

おわりに(設定要素まとめ)

このアプリの作成において、特にポイントになりそうな設定要素を挙げておきます。何かアプリを作成する時の参考になれば幸いです。

なお、このアプリはプレミアムコネクタを使用していないため、365のBusiness Premiumのプランなら追加料金なしで使用できます。また、QRコード付きラベル作成時にExcelファイルを読み込んでいるので、データソースはSharePointリストではなくExcelファイルをOneDrive上に置いて使用しても良いでしょう。

当ブログ内の連載記事

elmgrn.hatenablog.com

IT Hands-on Lab

小規模組織向けIT環境の構築・運用に役立つ情報を、ハンズオン形式で紹介しています。