概要
このチュートリアルを通して初心者の方でも簡単に Power Apps を使って勤怠アプリを作ることができます。
また、このチュートリアルを行う事で以下のことを理解することができます。
- Power Apps の基本的な使い方や考え方
- キャンバスアプリでのアプリの作り方
- Power Apps + Flow の接続方法
- Flow を使って SharePoint 上にある Excel（テーブル）に値を書き込む方法
全体像
PowerApps のデータを Flow を利用して SharePoint の Excel へと書き込みます。
データソースの準備
以下のような Excel を SharePoint に配置してください。（OneDriveでも構いませんが、今回のチュートリアルでは SharePoint を使用しています。）
- ファイル名 勤怠管理.xlsx
- シート名:Sheet1（変更なし）
- テーブル名:テーブル1 （変更なし）
- カラム
- ユーザー名,ステータス,時間
実装
空のキャンバスアプリを作成する
タブレット形式を選択して、空のアプリを作成します。
その後スクリーンの名前を HomeScreen に変更します
処理完了スクリーンを作成する
左上のファイルの下の「新しい画面」から「成功」を選択して画面を作成します。
作成後以下のようにそれぞれ名前を変更します。
- スクリーン名: SuccessScreen
- LblSuccessMsg1 → lab_successMessage_Success
- iconCheck1 → icn_check_Success
- iconCircle1 → icn_checkBase_Success
HomeScreen のデザインを作る
ヘッダータイトル用のラベルと勤怠管理用のボタンを４つ用意します。
色や大きさは任意で構いません。
また、それぞれの名前を以下のように変更します。
出社 → btn_puchIn_Home
退社 → btn_puchOut_Home
休憩開始 → btn_breakStart_Home
休憩終了 → btn_breakEnd_Home
タイトル → lab_headerTitle_Home
データソースに Office365ユーザーを追加する
ビュー → データソース → データソースの追加 → 新しい接続 → 「Office 365 ユーザー」を選択し、作成します。
コレクションに Office365ユーザーを追加する
0OnStart に
ClearCollect(Office365Users,Office365ユーザー.SearchUser())
を追加します。
OnStart とは
アプリが実行されたタイミングで１度だけ実行されるプロパティです。
PowerAppsのコレクションとは？
コレクションとは PowerAppsアプリ内のデータを一時的に保存しておく場所です。 Excelのようにテーブル形式で保存することができます。
今回の関数
ClearCollect()
は、 Clear() と Collect() の処理が行われる関数です。
Clear()
指定されたコレクションのデータを削除します。
Collect()
指定されたコレクションに値を追加します。指定されたコレクションが存在しない場合は、新たにコレクションを作成します。
アプリを保存する
[Ctrl+S]でアプリを任意の名前で一旦保存します。開く場合はファイルの「開く」→ PowerApps から開くことができます。
ギャラリーを配置する
挿入からギャラリー → 縦方向（空）を選択します。データソースには、先ほど OnStartプロパティで作ったコレクション「Office365Users」を選択します。
ギャラリー内にラベル、アイコン（＞）、四角を追加します。四角に関しては細くして区切り線のようにします。
各名前をそれぞれ変更していきます。
ラベル → 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 （灰色の四角）
とします。
それぞれのラベルコントロールの Text プロパティへ次の式を追加します。
LookUp(Office365Users,DisplayName = SelectUserDisplayName).DisplayName
LookUp(Office365Users,DisplayName = SelectUserDisplayName).Mail
LookUp() とは
PowerApps の LookUp() はテーブルから指定した条件に合った値の最初のレコード（行）を返してくれる関数です。ラベルの Text プロパティの場合 行ではなく 値（文字列）が必要なので、
LookUp(テーブル,条件).値
となります。（テーブル=コレクション）
これで、アイコン（＞）を選択すると中央に選択したユーザーの名前とメールアドレスが表示されるようになったと思います。
Flow を作成する
出社ボタンを選択し、アクション → Flow →「新しいフローの作成」を選択し、Flow の画面へ遷移します。
Flow の全体像
今回作成した Flow は以下の通りです。
PowerApps 空の値はそれぞれ変数へと代入し、その値を事前に準備した SharePoint の Excel に追加しています。
Flow名: 勤怠管理データ登録20181218
↑は各変数の詳細です。
上から
変数を初期化する → ユーザー名を初期化する。
名前:ユーザー名
種類:文字列
値:PowerApps で確認
変数を初期化する → ユーザーステータスを初期化する。
名前:ステータス
種類:文字列
値:PowerApps で確認
変数を初期化する → UTC現在の時間を初期化する
名前:UTC現在の時間
種類:文字列
値:utcNow()
UTC現在の時間を初期化するは他のロジック、例えば「現在の時刻」とかでも問題はありません。
PowerAppsで確認がない
「もっと見る」を選択することで、表示されます。
なぜ変数にする必要があるのか
今回は特に必要はありませんが、文字列操作などを行うときに１度変数へと格納する必要があるため、汎用性の高さを優先して変数への代入を行っています。
ロジックを削除しても変数が消えない
よく起こります。その場合は一度 Flow を作り直すしかありません。
PowerApps のボタンへ Flow を追加する
Flow を保存したら PowerApps の画面へ戻り ４つのボタンの OnSelect プロパティを以下のように設定します。
勤怠管理データ登録20181218.Run(lab_selectUserName_Home.Text,"出社");Navigate(SuccessScreen,ScreenTransition.Fade)
勤怠管理データ登録20181218.Run(lab_selectUserName_Home.Text,"退社");Navigate(SuccessScreen,ScreenTransition.Fade)
勤怠管理データ登録20181218.Run(lab_selectUserName_Home.Text,"休憩開始");Navigate(SuccessScreen,ScreenTransition.Fade)
勤怠管理データ登録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 が成功しているのが確認できます。
ボタンに応じてステータスの変更が確認できます。
