【第１回】初心者、初学者でも簡単に Power Apps を使って勤怠アプリを作る【#PowerAppsTutorial】

# 概要
このチュートリアルを通して初心者の方でも簡単に Power Apps を使って勤怠アプリを作ることができます。
また、このチュートリアルを行う事で以下のことを理解することができます。

+ Power Apps の基本的な使い方や考え方
+ キャンバスアプリでのアプリの作り方
+ Power Apps + Flow の接続方法
+ Flow を使って SharePoint 上にある Excel（テーブル）に値を書き込む方法

# 全体像

![キャプチャ.JPG](https://qiita-image-store.s3.amazonaws.com/0/183354/9864f2cc-f977-63f4-42dd-5972c0d6b7b2.jpeg)

PowerApps のデータを Flow を利用して SharePoint の Excel へと書き込みます。

# データソースの準備

以下のような Excel を SharePoint に配置してください。（OneDriveでも構いませんが、今回のチュートリアルでは SharePoint を使用しています。）

![image.png](https://qiita-image-store.s3.amazonaws.com/0/183354/9fdb2ce4-bedd-e6c2-3619-508ff07af2da.png)

- ファイル名 勤怠管理.xlsx
- シート名:Sheet1（変更なし）
- テーブル名:テーブル1 （変更なし）
- カラム
    - ユーザー名,ステータス,時間


# 実装

## 空のキャンバスアプリを作成する

タブレット形式を選択して、空のアプリを作成します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/183354/7c6bb222-fc01-beb3-d446-d29e018e17f1.png)

その後スクリーンの名前を HomeScreen に変更します

![image.png](https://qiita-image-store.s3.amazonaws.com/0/183354/09386b3c-4066-774f-c70c-c49f4758ef73.png)

## 処理完了スクリーンを作成する

左上のファイルの下の「新しい画面」から「成功」を選択して画面を作成します。
作成後以下のようにそれぞれ名前を変更します。

- スクリーン名: SuccessScreen
- LblSuccessMsg1 → lab_successMessage_Success
- iconCheck1 → icn_check_Success
- iconCircle1 → icn_checkBase_Success

![image.png](https://qiita-image-store.s3.amazonaws.com/0/183354/95c18031-2713-97f0-8111-c3b22428e093.png)

## HomeScreen のデザインを作る

ヘッダータイトル用のラベルと勤怠管理用のボタンを４つ用意します。
色や大きさは任意で構いません。

また、それぞれの名前を以下のように変更します。
出社 → btn_puchIn_Home
退社 → btn_puchOut_Home
休憩開始 → btn_breakStart_Home
休憩終了 → btn_breakEnd_Home
タイトル → lab_headerTitle_Home

![image.png](https://qiita-image-store.s3.amazonaws.com/0/183354/f8a677e5-84eb-ce9d-0950-785a6a057105.png)

## データソースに Office365ユーザーを追加する

ビュー → データソース → データソースの追加 → 新しい接続 → 「Office 365 ユーザー」を選択し、作成します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/183354/af4ee69c-d81d-0361-cc57-b0570ca84ea9.png)

## コレクションに Office365ユーザーを追加する

0OnStart に

``` OnStart
ClearCollect(Office365Users,Office365ユーザー.SearchUser())
```

を追加します。

### OnStart とは

アプリが実行されたタイミングで１度だけ実行されるプロパティです。

### PowerAppsのコレクションとは？
コレクションとは PowerAppsアプリ内のデータを一時的に保存しておく場所です。 Excelのようにテーブル形式で保存することができます。

今回の関数

```
ClearCollect()
```

は、 Clear() と Collect() の処理が行われる関数です。

#### Clear()
指定されたコレクションのデータを削除します。

#### Collect()
指定されたコレクションに値を追加します。指定されたコレクションが存在しない場合は、新たにコレクションを作成します。

## アプリを保存する

[Ctrl+S]でアプリを任意の名前で一旦保存します。開く場合はファイルの「開く」→ PowerApps から開くことができます。

## ギャラリーを配置する

挿入からギャラリー → 縦方向（空）を選択します。データソースには、先ほど OnStartプロパティで作ったコレクション「Office365Users」を選択します。

ギャラリー内にラベル、アイコン（＞）、四角を追加します。四角に関しては細くして区切り線のようにします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/183354/4d8f7c03-f462-2ecd-fc0d-404a81523477.png)

各名前をそれぞれ変更していきます。
ラベル → lab_officeUserDispName_Home
アイコン → icn_officeUserNextArrow_Home
四角 → rec_officeUserSeparator_Home

## 選択したユーザーを保存できるようにする

icn_officeUserNextArrow_Home を選択し、 OnSelect プロパティに以下の式を入力します。

```
Set(SelectUserDisplayName,DisplayName)
```

### OnSelect とは？

Onselect はそのコントロール（ラベルとかボタンのこと）が選択された時に指定された式を実行します。

### Set()

Set() はグローバル変数で値を保持するときに使用します。グローバル変数はその名の通り、グローバルなのでどのスクリーンからでも値を参照することができます。
逆にスクリーン内でしか値を使わない場合はローカル変数に保存するといいです。
ローカル変数の場合は 

```
UpdateContext()
```

関数を使用します。ローカル変数は他のスクリーンから参照することはできませんので、用途に合わせて使い分けましょう。

## 選択したユーザーの詳細を表示する

中心部分にラベルを 1 つと四角を 1 つ挿入します。
名前はそれぞれ

- lab_selectUserName_Home　（上のラベル）
- lab_selectUserMail_Home　（下のラベル）
- rec_selectUserBase_Home　（灰色の四角）

とします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/183354/96f11c9c-b3d4-7ba7-3ba8-5a7d0325313e.png)

それぞれのラベルコントロールの Text プロパティへ次の式を追加します。

```:lab_selectUserNameHome
LookUp(Office365Users,DisplayName = SelectUserDisplayName).DisplayName
```

```:lab_selectUserMail_Home
LookUp(Office365Users,DisplayName = SelectUserDisplayName).Mail
```

### LookUp() とは

PowerApps の　LookUp() はテーブルから指定した条件に合った値の最初のレコード（行）を返してくれる関数です。ラベルの Text プロパティの場合 行ではなく 値（文字列）が必要なので、

```
LookUp(テーブル,条件).値
```

となります。（テーブル=コレクション）

これで、アイコン（＞）を選択すると中央に選択したユーザーの名前とメールアドレスが表示されるようになったと思います。


## Flow を作成する

出社ボタンを選択し、アクション → Flow →「新しいフローの作成」を選択し、Flow の画面へ遷移します。

## Flow の全体像

今回作成した Flow は以下の通りです。
PowerApps 空の値はそれぞれ変数へと代入し、その値を事前に準備した SharePoint の Excel に追加しています。
Flow名: 勤怠管理データ登録20181218
![image.png](https://qiita-image-store.s3.amazonaws.com/0/183354/71c425e6-398f-f133-bd7b-9ff3cff8143f.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/183354/cf81dd78-1d80-343e-e347-6ee69eb87450.png)

↑は各変数の詳細です。
上から

変数を初期化する → ユーザー名を初期化する。
名前:ユーザー名
種類:文字列
値:PowerApps で確認

変数を初期化する → ユーザーステータスを初期化する。
名前:ステータス
種類:文字列
値:PowerApps で確認

変数を初期化する → UTC現在の時間を初期化する
名前:UTC現在の時間
種類:文字列
値:utcNow()

UTC現在の時間を初期化するは他のロジック、例えば「現在の時刻」とかでも問題はありません。

### PowerAppsで確認がない
「もっと見る」を選択することで、表示されます。

### なぜ変数にする必要があるのか
今回は特に必要はありませんが、文字列操作などを行うときに１度変数へと格納する必要があるため、汎用性の高さを優先して変数への代入を行っています。

### ロジックを削除しても変数が消えない
よく起こります。その場合は一度 Flow を作り直すしかありません。

## PowerApps のボタンへ Flow を追加する

Flow を保存したら PowerApps の画面へ戻り ４つのボタンの OnSelect プロパティを以下のように設定します。


```:btn_punchIn_Home
勤怠管理データ登録20181218.Run(lab_selectUserName_Home.Text,"出社");Navigate(SuccessScreen,ScreenTransition.Fade)
```

```:btn_punchOut_Home
勤怠管理データ登録20181218.Run(lab_selectUserName_Home.Text,"退社");Navigate(SuccessScreen,ScreenTransition.Fade)
```

```:btn_breakStart_Home
勤怠管理データ登録20181218.Run(lab_selectUserName_Home.Text,"休憩開始");Navigate(SuccessScreen,ScreenTransition.Fade)
```

```:btn_breakEnd_Home
勤怠管理データ登録20181218.Run(lab_selectUserName_Home.Text,"休憩終了");Navigate(SuccessScreen,ScreenTransition.Fade)
```

### ○○.Run()

○○.Run()は PowerApps から Flow を利用するときに呼び出し方です。

```
Flow名.Run()
```

となります。この時()野中は Flowで「PowerAppsで確認」で指定した値をカンマ区切りで入力します。今回の場合は、

```
ユーザー名,ステータス
```

となります。

### Navigate()

スクリーンの移動に使用します。使い方は Navigate(スクリーン名,アニメーション)です。
アニメーションには Fade,Cover,None,UnCoverの４種類があります。

## 完了画面にナビゲーションを追加する

画面全体どこを押しても HomeScreenに遷移するようにします。
四角を１つ配置し、画面全体と同じ大きさにします。その後色を透明に変更します。この時、必ずこの資格が最前面に来るようにします。

四角の詳細は以下の通りです。

名前: rec_navigateHome_Success
Onselect: Navigate(HomeScreen,ScreenTransition.Fade)

## 完了！実際に F5 ボタンで動かしましょう

Flow が成功しているのが確認できます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/183354/820d3cbe-893c-df27-22b5-1c80e4b837d7.png)

ボタンに応じてステータスの変更が確認できます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/183354/f976d88b-4ec7-63a0-2d41-f0c92eeb9fd6.png)