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

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

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

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

（例）社員一覧のテーブル化
![社員のテーブル化.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2745850/3ccc2456-d95f-656c-bce4-b85afd33e6ed.jpeg)

### ② PowerAppsで新規作成
・PowerAppsで作成＞空のアプリ＞空のキャンバスアプリを押下
・アプリ名を入力し、今回はiPadでの利用だったので、タブレットを選択して「作成」
![アプリ新規作成.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2745850/c31d9bdb-08cc-b3d1-9c6f-d2cf0025a322.jpeg)

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

![3エクセル連携.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2745850/b06548e0-eeaa-cfd2-cb45-22be9f12abd4.jpeg)

### ④ 初期画面を作成（Screen1）
・挿入より、四角形を選択
・挿入より、テキストラベルを選択
・テキストラベルには「備品管理アプリ」と記載。右側の「プロパティ」より、フォントサイズや色を選択する
・四角形とテキストラベルを上部に持っていき、見出しのようにする
![4_見出しの作成.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2745850/c4ccefab-b951-b940-92bc-867a93b17350.jpeg)

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

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

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

![5.はじめる.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2745850/0a4ac221-8449-60ae-b31c-45c6afa4cc6c.jpeg)

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

![6_表示例.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2745850/76e325a2-b35a-1b14-64cc-4b50ba4191ca.jpeg)

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

```vb
Set(gblCD,ThisItem.社員番号); //'「gblCD」という変数に社員名を格納
Set(gblName,ThisItem.社員名); //'「gblName」という変数に社員名を格納
Navigate(Screen3,ScreenTransition.None) // 'On Select（ボタン押下）時にScreen3に移動
```
![7_Onselect例.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2745850/00d150c3-24df-1037-2b7d-d54db738e02a.jpeg)
### ⑥ 備品選択画面を作成（Screen3）
・ほぼ⑤と同じなので、割愛します。
・垂直ギャラリーのレイアウトを「タイトル」にする。
・OnSelect内は、下記を入力

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

### ⑦ 数量入力画面の作成（Screen4）
・挿入より、四角形・テキストラベルを選択。テキストラベルは「数量選択」
・挿入より、垂直ギャラリーを選択
・垂直ギャラリーのItemsに下記を設定

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

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

```vb
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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2745850/bc1931b7-cc8a-7ba5-702b-22b5c79eba8a.jpeg)

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

```vb
Set(gblNum,typeNum); //'typeNum(ローカル変数)の値をgblNum（グローバル変数）に格納
UpdateContext({typeNum:Blank()}); //'typeNumの値をブランクに設定
Navigate(Screen5,ScreenTransition.None) //'Screen5に移動
```
![9_数量2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2745850/b2e90c94-e8fa-9a5d-ae35-3326cb92e452.jpeg)

### ⑧ 最終確認画面の作成（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」には、下記を設定

```vb
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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2745850/81544b32-1dd7-8883-fd39-c934858a06a1.jpeg)

＜OK押下後＞
OneDrive上のエクセルに、上記の情報が自動連携されることが確認できます。
※データ接続を行うと、各テーブルに自動で「__PowerAppsId__」という列が増えていますが、気にしなくて大丈夫です。
![11_最終2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2745850/f48f5fe7-01b9-1521-8f5e-a1cd2cbd0481.jpeg)

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