2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

PowerAppsで備品管理アプリを開発しました!

Last updated at Posted at 2024-02-22

PowerAppsでの簡単な備品管理アプリ開発を行ったので、初めてPowerApps利用される方にも参考にしていただけるよう、また筆者における備忘の意味合いも含めて、作成手順を記します。

アプリの概要

・「誰が」「何の備品を」「いつ」持ち出ししたかを管理できるアプリ
・OneDrive上で、社員一覧・備品一覧・持ち出し履歴を管理できる仕組みとしている

アプリ作成手順

① エクセルを準備する

・管理したい項目が社員一覧・備品一覧・持ち出し履歴の3つなので、それぞれのテーブルを準備する※PowerAppsとの接続の際に、テーブル化が必須のため
・作成したエクセルをOneDriveに格納

(例)社員一覧のテーブル化
社員のテーブル化.jpg

② PowerAppsで新規作成

・PowerAppsで作成>空のアプリ>空のキャンバスアプリを押下
・アプリ名を入力し、今回はiPadでの利用だったので、タブレットを選択して「作成」
アプリ新規作成.jpg

③ 作成したエクセルと連携する

・データ>データの追加>OneDrive for Business選択
・格納したエクセルを選択した上で、作成したテーブルを選択し「接続」を押下
※今回は、エクセル上で3つのテーブル(持ち出し履歴、社員名、備品一覧)を作成したため、3つを選択

3エクセル連携.jpg

④ 初期画面を作成(Screen1)

・挿入より、四角形を選択
・挿入より、テキストラベルを選択
・テキストラベルには「備品管理アプリ」と記載。右側の「プロパティ」より、フォントサイズや色を選択する
・四角形とテキストラベルを上部に持っていき、見出しのようにする
4_見出しの作成.jpg

・挿入より、ボタンを選択
・ボタンの文言を「はじめる」に変更し、フォントサイズや文字色を変更
・ボタン選択した状態で、左上を「On Select」にし下記を入力
※手動でエクセルファイルを更新した時に、PowerAppsにも反映されるようRefresh関数を使用しています。
・ツリービュー>新しい画面>空 を選択し、「Screen2」を作成

Refresh(社員名); //'「社員名」テーブルを更新
Refresh(備品一覧); //'「備品一覧」テーブルを更新
Navigate(Screen2,ScreenTransition.None) // 'On Select(ボタン押下)時にScreen2に移動。「ScreenTransition」では、画面切り替え時のユーザへの見せ方を変更可能

Refreshは、OneDriveのエクセルを手動で更新した時に、意識せずにPowerAppsに反映されるように、設定しています。

5.はじめる.jpg

⑤ 社員番号選択画面を作成(Screen2)

・挿入>垂直ギャラリーを選択し、データソースを「社員名」とする
・プロパティにて、レイアウトを「タイトルとサブタイトル」にし、文字の大きさを変更
・社員番号と社員名のフォントサイズを変更
※垂直ギャラリーでは、一番上の枠箇所だけ(今回でいうと、テスト1記載箇所)修正すれば、以降については、その設定を反映してくれます。

6_表示例.jpg

・挿入より、四角形を選択
・挿入より、テキストラベルを選択
・テキストラベルには「社員選択」と記載。右側の「プロパティ」より、フォントサイズや色を選択する
・垂直ギャラリーで左上箇所を、OnSelectにして、下記を入力
※最終的に、誰が何をいくつ選択したかを記憶する必要があるので、変数を使用しています。

Set(gblCD,ThisItem.社員番号); //'「gblCD」という変数に社員名を格納
Set(gblName,ThisItem.社員名); //'「gblName」という変数に社員名を格納
Navigate(Screen3,ScreenTransition.None) // 'On Select(ボタン押下)時にScreen3に移動

7_Onselect例.jpg

⑥ 備品選択画面を作成(Screen3)

・ほぼ⑤と同じなので、割愛します。
・垂直ギャラリーのレイアウトを「タイトル」にする。
・OnSelect内は、下記を入力

Set(gblItem,ThisItem.備品一覧);
Navigate(Screen4,ScreenTransition.None)

⑦ 数量入力画面の作成(Screen4)

・挿入より、四角形・テキストラベルを選択。テキストラベルは「数量選択」
・挿入より、垂直ギャラリーを選択
・垂直ギャラリーのItemsに下記を設定

["1","2","3","4","5","6","7","8","9","0","","AC"]

・右側のプロパティより、折り返しの数を「3」に設定
・垂直ギャラリーの「OnSelect」を下記に設定

If(
ThisItem.Value = "AC",
UpdateContext({typeNum: Blank()}), //'ACボタン押下時は「typeNum」変数を空白にする
UpdateContext({typeNum: typeNum & ThisItem.Value}); //'数字押下時は「typeNum」変数に数値を格納する
)

・垂直ギャラリーの中に、挿入より、ボタンを作成(1つのみ)
※垂直ギャラリーの幅を大きくすれば、Itemに設定した数だけ、ボタンが表示されます。
・作成したボタンの「Text」を「ThisItem.Value」に設定
・作成したボタンの「Visible」を「If(ThisItem.Value="",false,true)」に設定

8_数量.jpg

・挿入より、テキストラベルを選択。テキストを「typeNum & "個"」にし、フォントサイズやテキストのアライメントを右配置に変更
・挿入より、ボタンを選択。テキストをOKに設定
・ボタンの「OnSelect」を下記に設定

Set(gblNum,typeNum); //'typeNum(ローカル変数)の値をgblNum(グローバル変数)に格納
UpdateContext({typeNum:Blank()}); //'typeNumの値をブランクに設定
Navigate(Screen5,ScreenTransition.None) //'Screen5に移動

9_数量2.jpg

⑧ 最終確認画面の作成(Screen5)

・挿入より、四角形とテキストラベルを選択し、テキストラベルに「確認」を入力
・挿入より、テキストラベルを選択し、Textに下記を入力

"担当者名:" & gblName & Char(10) &
"備品名 :" & gblItem & Char(10) &
"数量 :" & gblNum & " 個"

・挿入より、ボタンを2つ選択し、1つは「TOPへ戻る」もう一つは「OK」とする
・「TOPへ戻る」ボタンの「OnSelect」は、下記を設定

Set(gblCD,Blank()); //gblCD(社員コード)をブランクにする
Set(gblName,Blank()); //gblName(社員名)をブランクにする
Set(gblItem,Blank()); //gblItem(備品名)をブランクにする
Set(gblNum,Blank()); ////gblNum(数量)をブランクにする
Navigate(Screen1,ScreenTransition.None)

・「OK」ボタンの「OnSelect」には、下記を設定

Patch(持ち出し履歴,Defaults(持ち出し履歴), //持ち出し履歴テーブルに、各値を入力
{担当者名:gblName, //'担当者名列に、gblNameを設定
備品名:gblItem, //'備品名列に、gblItemを設定
数量:gblNum, //'数量列に、gblNumを設定
日時:Text(Now(),"yyyy/mm/dd hh:mm","ja-JP")}); //'日時を設定
Set(gblCD,Blank()); //'gblCD(社員コード)をブランクにする
Set(gblName,Blank()); //'gblName(社員名)をブランクにする
Set(gblItem,Blank()); //'gblItem(備品名)をブランクにする
Set(gblNum,Blank()); //'gblNum(数量)をブランクにする
Navigate(Screen1,ScreenTransition.None) //'Screen1に遷移

【アプリの実行結果】
上記で作成したアプリを実行していくと、下記のような結果が得られます。
※右上のプレビューボタンから、任意のタイミングで操作確認できます。

<最終画面>
10_最終.jpg

<OK押下後>
OneDrive上のエクセルに、上記の情報が自動連携されることが確認できます。
※データ接続を行うと、各テーブルに自動で「PowerAppsId」という列が増えていますが、気にしなくて大丈夫です。
11_最終2.jpg

【所感】

今回作成したような、簡単なアプリであれば、調べながらであれば十分作成可能でした。
実際の作成物は、各ページに1ページ前に戻るボタンやTOPページに戻るボタンをつけたり、備品数はもっと膨大なので、カテゴリ別に表現したりもしていますが、大枠は、本記事の内容で、作成しました。

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?