IT Hands-on Lab

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

トップ > PowerPlatform > 【Power Apps】QRコード読込機能付き 備品管理アプリ2
最終更新日

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

PowerPlatform アプリ開発

PowerApps QRコード読込による棚卸機能付き備品管理アプリ２

 

前の記事の続きになります。
Microsoft社が提供するローコード開発ツール「Power Platform」のアプリ機能(Power Apps)を使用した、QRコード読込による棚卸機能付き備品管理アプリの作成例を紹介します。
  • 操作環境：
    • OS：Windows 11
    • Webブラウザー：Edge
  • 使用プラン：Microsoft 365 Business Premium
  • アプリ使用環境：
    • OS：Android 14
    • アプリ：PowerApps

 

 

アプリ実装:編集画面:項目整備

必要項目の追加、コントロールの種類変更

取扱い項目が多いと、画面に必要が項目の一部が表示されていないことがあります。
左の[ツリービュー](下のツリーオブジェクトでも良い)より、[EditScreen1>EditForm1]を選択し、右の[プロパティ]の[ディスプレイ>フィールド]の[8件選択済み]を選択し、[フィールドの追加]を選択します。
編集画面に表示されていない必要項目すべてにチェックをつけ、[追加]を選択します。

図表6-1 編集画面の必要項目の追加

図表6-1 編集画面の必要項目の追加

 

取扱い項目のうち、以下2項目について、コントロールの種類を変更します。

  • user_name：許可値
  • memo：複数行テキストの編集

図表6-2 編集画面のコントロールの種類変更

図表6-2 編集画面のコントロールの種類変更

 

項目の非表示設定、画面タイトル変更

アプリ内の処理で必要でも表示させたくない項目を非表示にします。
編集フォーム上の項目[ID]の全体領域を選択し、[ディスプレイ>表示]をオフに変更します。
なお、不要項目は削除もできますが、エラーが出て扱いが面倒なので、非表示にした方が楽です。

図表6-3 編集画面の非表示項目の設定

図表6-3 編集画面の非表示項目の設定

 

IDは編集画面のタイトルにラベル表示する形とします。
[備品一覧]と記載されたタイトルを選択し、以下の通りプロパティを変更します。

  • Text："備品管理 (ID:" & DataCardValue18.Text & ")"

図表6-4 編集画面のタイトル変更

図表6-4 編集画面のタイトル変更

 

編集不可項目の色変更

SharePointリストで自動保持される登録日時・登録者・更新日時・更新者はアプリ上で手動変更しません。対応必須ではありませんが、編集項目でないことが分かるよう、データ領域の背景色を変更します。
データ領域を選択し、左側プロパティの[ディスプレイ]タブを選択し、背景色のアイコンを選択し、カラーパレットから灰色を選択します。

図表6-5 編集画面の編集不可項目の色変更

図表6-5 編集画面の編集不可項目の色変更

 

項目のレイアウト調整

少々扱いに癖がありますが、左側プロパティの[詳細設定]タブの下の方にある、[Height]、[Width]、[X]、[Y]に値設定すると意図したレイアウトになります。

  • 0行目：status(幅270),equipment_name(幅370)
  • 1行目：category(幅320),equipment_code(幅320)
  • 2行目：maker(幅320),acquired_date(幅320)
  • 3行目：user_name(幅320),place(幅320)
  • 4行目：is_fixed_assets(幅320),disposed_date(幅320)
  • 5行目：inventory_date(幅320)
  • 6行目：memo(幅640)
  • 7行目：登録日時(幅320),登録者(幅320)
  • 8行目：更新日時(幅320),更新者(幅320)

図表6-6 編集画面の項目レイアウト変更

図表6-6 編集画面の項目レイアウト変更

 

Office365ユーザー情報の取得・加工

項目user_nameについて、組織内ユーザーとその所属組織からリスト選択させる形とします。
左メニューのデータソースアイコンを選択し、[データの追加]を選択し、[コネクタ>Office365ユーザー]を選択します。
[接続の追加]、[接続]を選択します。

図表6-7 データソース追加

図表6-7 データソース追加

 

左メニューのツリービューアイコンを選択し、ツリービューの[EditScreen1]を選択し、[OnVisible]プロパティを以下の通り設定します。

UpdateContext({ loc_error_message:"" });
ClearCollect(col_users, Filter(Office365ユーザー.SearchUserV2(
  {searchTerm:"", isSearchTermRequired:false}).value,
  JobTitle<>"リソース,"@xxxxxx.com" in Mail));
ClearCollect(col_user_name, AddColumns(col_users, join_value, DisplayName));
ClearCollect(col_user_dept, AddColumns(col_users, join_value, Department));
ClearCollect(col_user_merge, Collect(col_user_name, col_user_dept));
*編集画面を表示したときに以下処理が実行されます。
  • loc_error_message：別件(statusとdisposed_dateの項目間整合チェック)で使用するコンテキスト変数で、初期化しています。
  • col_users：図表6-7で追加したOffice365ユーザー情報を取得し、会議室等のリソース(役職がリソースでない)と組織外ユーザー(Mailのドメインが組織のドメインでない)を除外しています。
  • col_user_name,col_user_dept：それぞれcol_usersに対し、join_valueという列名で、ユーザーの表示名と所属名を追加しています。
  • col_merge：col_user_nameとcol_user_deptを結合しています。この後、このコレクションのjoin_value列をuser_nameのリスト選択肢として使用します。

図表6-8 編集画面のコンテキスト変数,コレクション設定

図表6-8 編集画面のコンテキスト変数,コレクション設定

 

選択肢項目の新規登録時の初期値設定

新規登録時に選択肢項目の初期値を設定することができます。
編集フォーム上の項目[status]のデータ領域を選択し、以下の通りプロパティを変更します。

  • DefaultSelectedItems：If(EditForm1.Mode=FormMode.New,Choices([@備品一覧].status,"使用中"),ThisItem.status)
    *新規登録時は”使用中”、変更時は既存の値を選択状態にします

図表6-9 編集画面の選択肢項目の初期値設定(status)

図表6-9 編集画面の選択肢項目の初期値設定(status)

 

同様に、編集フォーム上の項目[is_fixed_assets]のデータ領域を選択し、以下の通りプロパティを変更します。

  • DefaultSelectedItems：If(EditForm1.Mode=FormMode.New,Choices([@備品一覧].is_fixed_assets,"いいえ"),ThisItem.is_fixed_assets)
    *新規登録時は”いいえ”、変更時は既存の値を選択状態にします

図表6-10 編集画面の選択肢項目の初期値設定(is_fixed_assets)

図表6-10 編集画面の選択肢項目の初期値設定(is_fixed_assets)

 

user_nameについてはSharePointリスト上一行テキストのため、statusやis_fixed_assetsとは設定が異なります。編集フォーム上の項目[user_name]のデータ領域を選択し、以下の通りプロパティを変更します。

  • Defalut：If(EditForm1.Mode=FormMode.New,User().FullName,Parent.Default)
    *新規登録時はアプリ使用者のユーザ名、変更時は既存の値を選択状態にします

図表6-11 編集画面の選択肢項目の初期値設定(user_name)

図表6-11 編集画面の選択肢項目の初期値設定(user_name)

 

選択肢項目の手入力許容設定

選択肢項目の手入力を許容することができます。
編集フォーム上の項目[category]の全体領域を選択し、以下の通りプロパティを変更します。

  • Update：If(IsBlank(DataCardValue11.Selected), {Value:DataCardValue11.SearchText}, DataCardValue11.Selected)
    *未選択時は手入力欄の値、選択時は選択値にて更新します

図表6-12 編集画面の選択肢項目の手入力許容設定(category)

図表6-12 編集画面の選択肢項目の手入力許容設定(category)

 

同様に、編集フォーム上の項目[maker]の全体領域を選択し、以下の通りプロパティを変更します。

  • Update：If(IsBlank(DataCardValue12.Selected), {Value:DataCardValue12.SearchText}, DataCardValue12.Selected)
    *未選択時は手入力欄の値、選択時は選択値にて更新します

図表6-13 編集画面の選択肢項目の手入力許容設定(maker)

図表6-13 編集画面の選択肢項目の手入力許容設定(maker)

 

同様に、編集フォーム上の項目[place]の全体領域を選択し、以下の通りプロパティを変更します。

  • Update：If(IsBlank(DataCardValue15.Selected), {Value:DataCardValue15.SearchText}, DataCardValue15.Selected)
    *未選択時は手入力欄の値、選択時は選択値にて更新します

図表6-14 編集画面の選択肢項目の手入力許容設定(place)

図表6-14 編集画面の選択肢項目の手入力許容設定(place)

 

 

 

条件に応じた必須項目の制御

必須項目の制御を条件に応じて変えることができます。
編集フォーム上の項目[user_name]の全体領域を選択し、以下の通りプロパティを変更します。

  • Required：If(DataCardValue16.Selected.Value="使用中",true,false)
    *statusが”使用中”なら必須、それ以外は任意とします

図表6-15 編集画面の必須項目の条件設定(user_name)

図表6-15 編集画面の必須項目の条件設定(user_name)

 

同様に、編集フォーム上の項目[disposed_date]の全体領域を選択し、以下の通りプロパティを変更します。

  • Required：If(DataCardValue16.Selected.Value="処分済",true,false)
    *statusが”処分済”なら必須、それ以外は任意とします

図表6-16 編集画面の必須項目の条件設定(disposed_date)

図表6-16 編集画面の必須項目の条件設定(disposed_date)

 

保存時の項目間整合チェックとカスタムエラーメッセージ表示

編集画面右上の保存アイコンを押した時に、項目間の整合チェックを行い、カスタムエラーメッセージを返すことができます。
編集フォーム右上の保存アイコンか左側のツリービューの[IconAccept1]を選択し、[Onselect]プロパティを以下の通り変更します。

If(DataCardValue16.Selected.Value <> "処分済" && IsBlank(DataCardValue17.SelectedDate)=false,
  UpdateContext({loc_error_message:"statusが処分済でなければdisposed_dateを空にしてください"}),
  UpdateContext({loc_error_message:""});SubmitForm(EditForm1)
)
*statusが処分済以外かつdisposed_dateに値がある場合、カスタムエラーメッセージをコンテキスト変数に格納します。この条件に合致しない場合は、画面の値を確定させます

図表6-17 編集画面の保存アイコンの設定

図表6-17 編集画面の保存アイコンの設定

 

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

  • Text：Parent.Error & " " & loc_error_message
    *disposed_date欄の標準のエラーメッセージに続けて、カスタムエラーメッセージ(図表6-17で値を格納したコンテキスト変数)を表示します

図表6-18 編集画面の廃棄日のエラーメッセージ設定

図表6-18 編集画面の廃棄日のエラーメッセージ設定

 

user_nameのコレクションによる選択肢設定

最後に、user_nameの選択肢を設定します。編集フォーム上の項目[user_name]のデータ領域を選択し、以下の通りプロパティを変更します。

  • AllowEmptySelection：true
    *これにより選択済の値をクリックすると消去できるようになります
  • Items：Distinct(col_user_merge, join_value)
    *編集画面表示時に設定したコレクションcol_user_mergeのjoin_valueを重複を排除して表示します

図表6-19 編集画面の使用者名の設定

図表6-19 編集画面の使用者名の設定

 

アプリ使用時のuser_nameの選択肢のイメージです。

図表6-20 編集画面の使用者名の選択肢の挙動

図表6-20 編集画面の使用者名の選択肢の挙動

 

参考まで、選択肢の元データとしたテナント内のユーザーの一覧(Entra IDの管理画面)です。
Office365ユーザー情報から意図した選択肢を作れない場合は、Office365ユーザーのデータを正しくを入力するか、それが難しければ別のSharePointリストにマスタを設けて参照するなどの形で良いと思います。

図表6-21 Entraユーザー一覧から選択肢として必要なユーザーの絞り込み

図表6-21 Entraユーザー一覧から選択肢として必要なユーザーの絞り込み

 

アプリ実装:詳細画面:項目整備

必要項目の追加

左の[ツリービュー](下のツリーオブジェクトでも良い)より、[DetailScreen1>DetailForm1]を選択し、右の[プロパティ]の[ディスプレイ>フィールド]の[8件選択済み]を選択し、[フィールドの追加]を選択します。
詳細画面に表示されていない必要項目すべてにチェックをつけ、[追加]を選択します。

図表7-1 詳細画面の必要項目の追加

図表7-1 詳細画面の必要項目の追加

 

項目の非表示設定、画面タイトル変更

詳細フォーム上の項目[ID]の全体領域を選択し、[ディスプレイ>表示]をオフに変更します。

図表7-2 詳細画面の非表示項目の設定

図表7-2 詳細画面の非表示項目の設定

 

編集画面と同様、IDは詳細画面のタイトルにラベル表示する形とします。
[備品一覧]と記載されたタイトルを選択し、以下の通りプロパティを変更します。

  • Text："備品管理 (ID:" & DataCardValue21.Text & ")"

図表7-3 詳細画面のタイトル変更

図表7-3 詳細画面のタイトル変更

 

項目のレイアウト調整

少々扱いに癖がありますが、左側プロパティの[詳細設定]タブの下の方にある、[Height]、[Width]、[X]、[Y]に値設定すると意図したレイアウトになります。

  • 0行目：status(幅270),equipment_name(幅370)
  • 1行目：category(幅320),equipment_code(幅320)
  • 2行目：maker(幅320),acquired_date(幅320)
  • 3行目：user_name(幅320),place(幅320)
  • 4行目：is_fixed_assets(幅320),disposed_date(幅320)
  • 5行目：inventory_date(幅320)
  • 6行目：memo(幅640)
  • 7行目：登録日時(幅320),登録者(幅320)
  • 8行目：更新日時(幅320),更新者(幅320)

図表7-4 詳細画面の項目レイアウト調整

図表7-4 詳細画面の項目レイアウト調整

 

削除・編集アイコンの表示制御

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

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

図表7-5 詳細画面の削除アイコンの表示制御

図表7-5 詳細画面の削除アイコンの表示制御

 

同様に編集アイコンを選択し、以下の通りプロパティを変更します。

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

図表7-6 詳細画面の編集アイコンの表示制御

図表7-6 詳細画面の編集アイコンの表示制御

 

アプリ実装:詳細画面:QRコード読込棚卸機能

コンテナー・バーコードリーダーの追加

QRコード読込機能は一覧画面のスキャンアイコンを押した時しか表示しないため、それを制御するためのコンテナーを追加します。
上メニューの[挿入>レイアウト>コンテナー]を選択します。
コンテナーのサイズを調整(幅:640(アプリのサイズ),高さ:88)し、位置をアプリタイトル領域のすぐ下に移動します。
なお、コンテナーの表示/非表示制御はこの後設定します。

図表8-1 詳細画面のバーコードリーダー用コンテナー追加

図表8-1 詳細画面のバーコードリーダー用コンテナー追加

 

コンテナー内の[+]アイコンを選択し、[メディア>バーコードリーダー]を選択します。
追加されたバーコードリーダーの幅と位置、Textの値を適宜調整します。

図表8-2 詳細画面のコンテナー内へのバーコードリーダー追加

図表8-2 詳細画面のコンテナー内へのバーコードリーダー追加

 

さらにそのままバーコードリーダーを選択した状態で、 [OnScan]プロパティを以下の通り変更します。

UpdateContext({loc_equipment_code:Last(BarcodeReader1.Barcodes).Value});
Patch(備品一覧, LookUp(備品一覧,equipment_code=loc_equipment_code),
  {inventory_date:Today()}
);
UpdateContext({loc_col:LookUp(備品一覧,equipment_code=loc_equipment_code)});
*QRコードをスキャンしたときに以下処理が実行されます。
  • loc_equipment_code:QRコードから読み取った最後の値(備品コード)を格納します
  • Patch～:備品コードが合致するSharePointリストデータの棚卸日を本日に更新します
  • loc_col: 備品コードが合致するSharePointリストデータをコレクション変数に格納します(詳細フォームにデータ表示するために使用します)

図表8-3 詳細画面のバーコードリーダー設定

図表8-3 詳細画面のバーコードリーダー設定

 

画面表示時の変数初期化

図表8-3のOnScanプロパティで使用したコンテキスト変数の初期化処理を設定します。
ツリービューの[DetailScreen1]を選択し、以下の通りプロパティを変更します。

  • OnVisible：UpdateContext({ loc_col:Blank(), loc_equipment_code:"" })

図表8-4 詳細画面表示時のコンテキスト変数設定

図表8-4 詳細画面表示時のコンテキスト変数設定

 

コンテナー・詳細フォームの表示制御

一覧画面のスキャンアイコンを押した時しかコンテナーを表示しないよう制御します。
コンテナーを選択し、以下の通りプロパティを変更します。

  • Visible：If(glb_action="scan",true,false)
*この段階ではエラーが出ますが、一覧画面でグローバル変数を定義すれば解消します(次の記事で紹介)

図表8-5 詳細画面のコンテナーの表示制御

図表8-5 詳細画面のコンテナーの表示制御

 

コンテナーの表示/非表示に応じて、詳細フォームの表示位置を制御します。
詳細フォーム([DetailScreen1>DetailForm1])を選択し、以下の通りプロパティを変更します。

  • Y： If(glb_action="scan",88+88,88)
*この段階ではエラーが出ますが、一覧画面でグローバル変数を定義すれば解消します(次の記事で紹介)

図表8-6 詳細画面のコンテナーの表示に応じた詳細フォームの縦位置設定

図表8-6 詳細画面のコンテナーの表示に応じた詳細フォームの縦位置設定

 

詳細フォームの表示データ制御

詳細フォームの表示データについて、QRコードスキャンしたデータを表示するのか、一覧画面の検索結果のデータを表示するのか制御します。
詳細フォーム([DetailScreen1>DetailForm1])を選択し、以下の通りプロパティを変更します。

  • Item： If(glb_action="scan", loc_col, BrowseGallery1.Selected)
*この段階ではエラーが出ますが、一覧画面でグローバル変数を定義すれば解消します(次の記事で紹介)

図表8-7 詳細画面の詳細フォームの表示データ制御

図表8-7 詳細画面の詳細フォームの表示データ制御

 

次の記事に続きます。

 

 

当ブログ内の連載記事

elmgrn.hatenablog.com

elmgrn.hatenablog.com