Power Appsで勤怠報告アプリを作る②
はじめに
以前、Power AppsとPower Automateを使って、勤務報告するアプリケーションを作成しました。
今回はその続きとして、勤務報告したタイミングをデータとして保存してみましょう。
前回の記事はこちら：Power Appsで勤怠報告アプリを作る①
この記事の対象者
アプリケーションを初めて作る方、ITにあまり触れてこなかった方向けの記事となります。
今回のゴール
- ボタンを押した時間をデータとして保存できる
- 保存したデータを画面に表示する
※ PowerApps画面は処理を少しだけ追加していますが、レイアウトに特段変更はありません。
※ ワークフローは少し処理を追加しています。
システム構成
処理の流れやシステムの構成は以下となります。
Power Apps、Power Automateで処理を行い、データはSharePoint Onlineの「リスト」に保存します。
前回まではデータを保存しなかったのでSharePoint Online（今後はSPOとします）は不要でしたが、今回から必要となります。
SPOのサイトは予め作成しておいてください。リストの作成から話が始まります。
SPOのリストを作成する
データを保存する処理を作るためには、データの保存先を先に作成しないといけないので、SPOのリストから作成していきましょう。
「新規」から「リスト」をクリックします。
空白のリストをクリックします。
リストに名前をつけましょう。（なんでもいいです）
作成されたら、画面の中央付近に「タイトル」と「列の追加」が表示されていると思います。
「列の追加」からデータを保存するための列を追加していきましょう。
今回は、どのユーザーが、何時から何時まで勤務したかを把握できるようにしてみましょう。
そのため、まず「ユーザー列」を作ります。
列名を「UserInfo」として、「プロフィール写真の表示」を"はい"にしましょう。
こうすることで、SPO上で顔写真が見えるようになります。（見えなくても支障はないです）
次に、勤務した日を保存したいので、「列の追加」から「日付と時刻」を作ります。
名前は「WorkingDate」としましょう。
この列には日付のみを保存したいので、時間などは不要です。
次に、開始時間を保存したいので、「列の追加」から「テキスト」を作ります。
（日付と時刻でも問題ありませんが、処理の簡素化のためにテキストで作ります）
名前は「StartTime」としましょう。
終了時間もほしいので、同様の手順で「EndTime」を作りましょう。
一旦データを保存する形が整いました。
ここにデータを保存するための処理を、Power Automateで作っていきます。
SPOにデータを登録する
今回はPower Automateで実装してみます。
前回作成した勤怠報告ワークフローを開いてください。
今回の処理の流れですが、PowerAppsで作った勤務開始、終了ボタンをクリックするとPowerAutomateが動いて、勤務情報が登録されるイメージです。
そのため、PowerAppsのボタンが押されたときの日付、時間の情報が必要です。
今回も「引数」と呼ばれるものを使って、PowerAppsから、ボタンを押した「ユーザーのメールアドレス」、「日付」、「各種時間」をPowerAutomateに受け渡す形でデータを保存してみます。
※ 前回は勤務フラグを設定していました。
引数の設定
PowerApps(V2)をクリックし、以下のような形で「引数」を設定してください。
「UserInfo」・・・テキスト
「WorkingDate」・・・日付
「StartTime」・・・テキスト
「EndTime」・・・テキスト
右側の項目はそのままで問題ありません。
この情報を使う前提で、SPOへの登録処理を作ってみましょう。
勤務開始処理の実装
勤務開始時間を登録する処理を実装してみます。
＋マークをクリックします。（Trueの下です）
「sharepoint」で検索をし、「さらに表示」をクリックします。
下のほうにスクロールすると、「項目の作成」がありますので、それをクリックします。
登録するSPOや、リストを設定します。
今回用にご自身で作ったサイトと、リストを選択してください。
リストの選択が終わると、リストに存在する列の情報が下に表示されます。
「全てを表示」ボタンをクリックしてみましょう。
上から順番に登録する情報を設定します。
まずはUserInfo Claimsです。（これがSPOのUserInfo列です）
雷マークみたいなものをクリックし、PowerApps(V2)のUserInfoを設定してください。
他のSPOの列に対してもPowerApps(V2)の同名を設定してください。
これで勤務開始に関する処理は完了です。
続いて、勤務終了の処理を実装してみましょう。
勤務終了処理の実装
勤務終了処理の流れをイメージしてみます。
当然ながら、勤務終了する日は勤務を開始しています。
であれば、SPOに勤務を開始した情報が残っているはずです。
SPOのリストを作成した際、「EndTime」を作成しましたが、勤務開始しっぱなしだとこの「EndTime」が空欄状態です。
今回は、勤務開始した情報の「EndTime」に、勤務終了時間を保存することを実装します。
Falseの下の＋マークをクリックします。
勤務開始と同様に、sharepointのアクションを検索し、「さらに表示」をクリックします。
その後、「複数の項目の取得」をクリックします。
何故「複数の項目の取得」を行うかというと、勤務終了ボタンを押したとき、本日であり、自分自身の情報の「EndTime」に終了時間を登録したいためです。
まず、既に存在している本日の勤務情報を取得し、その「EndTime」に値を設定するという流れを実装しようとしています。
勤務開始と同様に、対象のサイトとリストを指定します。
（リスト名がIDになってますが、気にしないでください。また、フィルタークエリの部分は後続で説明します）
詳細パラメーターの「フィルタークエリ」を表示し、以下のように記載してください。
その後、「fx」をクリックします。
尚、fxは''の中をクリックしてから選択します。
先に記載した通り、本日の勤務情報を取得したいので、SPOのWorkingDateが本日、UserInfoが自分自身の情報を取得するための式を書きます。
以下のような形でfxに書いてみてください。
これで、当日の情報を取得するという設定ができました。
当日＋自分のデータに対して処理をしないといけないので、もう一つ処理を追記します。
以下が完成形です。
ユーザーを特定するには、一般的にメールアドレスを使用することが多いです。
そのため、メールアドレスが自分であるという条件を設定します。
SPO上でユーザー情報はUserInfo列に保存されています。
この列はユーザー列なので、特殊な書き方をします。
UserInfo/EMail eq 'UserInfo（PowerAppsのアウトプット）'と書いてみてください。
これで当日であり、自分自身の勤務情報を取得できました。
この情報に対して、勤務終了時間を保存します。
フローに戻り、先ほど追加した「複数の項目の取得」アクションの下の＋マークをクリックし、「項目の更新」をクリックします。
サイトとリストは先ほどまでと同様の値を設定してください。
「ID」は、「複数の項目の取得」アクションの情報を利用しますので雷マークみたいなものをクリックしてください。
新たに出てきた選択画面上に「複数の項目の取得」が出てきます。
そこに「ID」項目があるので、それを選択してください。
下のほうにある詳細パラメーターで「EndTime」を選択します。
PowerApps(V2)のアウトプットである「EndTime」を設定してください。
これでPowerAutomateの実装は完了です。
今までの作業で、勤務開始ボタンを押した際にSPOに情報を登録、勤務終了ボタンを押した際にSPOの情報を取得し、その情報に対して更新ができるようになりました。
続いて、引数の設定を行うので、PowerAppsの画面を修正していきましょう。
PowerAppsの勤務開始、終了ボタンの修正
PowerAutomate側の引数の修正を行いました。
UserInfo、WorkingDate、StartTime、EndTimeを追加したと思います。
前回フラグ値を渡したように、今回もこの4つを各ボタンのOnSelectに追加していきましょう。
まず、先ほど作成したワークフローの情報を更新します。
PowerAppsの開発画面を開き、ワークフローアイコンから、勤怠報告ワークフローを更新してください。
ボタンの左上に×マークが出てきますが、気にしないでください。
（これをしないと、引数の数が変わったことをPowerAppsが検知できないことがあります）
次に、UserInfoに設定する自分自身の情報を取得できるようにしましょう。
左のデータベースマークから、「データの追加」をクリックし、「Office 365 ユーザー」を追加します。
接続を求められたら接続してください。
実際に引数に値を渡す修正をしていきます。
勤務開始側の×マークをクリックし、「数式バーで編集」をクリックして下さい。
ボタンのOnSelectに直接飛んでも問題ありません。
"勤怠報告ワークフロー"の引数を増やします。
PowerAutomateで追加した順番で値を設定する必要があるのでご注意ください。
※ 参考までに、PowerAutomateの引数のキャプチャを載せてみます。
まずUserInfoですね。
先ほど追加したOffice365ユーザーを利用します。
Office365ユーザー.MyProfileV2を打っていくと画面上で選べるようになりますので、選択してください。
そのあと、V2の後ろに().mailを追加してください。
順番に値を設定していくと、以下のようになります。
値と値の間はカンマで区切ります。
UserInfo：Office365ユーザー.MyProfileV2().mail
→ 自分自身（画面を表示している人）のメールアドレス
WorkingDate：Text(Today(), "[$-ja]yyyy-mm-dd")
→ 今日の日付（日本式のフォーマット）
StartTime：Text(Now(), "[$-ja]hh:mm:ss"）
→ 現在時刻（12:34:50のフォーマット）
EndTime：""
→ 設定する必要なしなので""（空欄）
勤務終了ボタンも同様のやり方で、以下のように修正します。
PowerAutomateで、ユーザー情報と、勤務日と、終了時刻を使うので、利用する情報を引数に渡します。
UserInfo：Office365ユーザー.MyProfileV2().mail
→ 自分自身（画面を表示している人）のメールアドレス
WorkingDate：Text(Today(), "[$-ja]yyyy-mm-dd")
→ 今日の日付（日本式のフォーマット）
StartTime：""
→ 設定する必要なしなので""（空欄）
EndTime：Text(Now(), "[$-ja]hh:mm:ss"）
→ 現在時刻（12:34:50のフォーマット）
これで、全ての実装が完了しましたので、動かしてみてください。
動作確認
では動かしてみましょう。
PowerAppsで対象の画面を開きます。
勤務開始ボタンを押して、今回作成したSPOのリストを見てみます。
同じような流れで、勤務終了ボタンを押して、リストを見てみましょう。
※ 勤務開始ボタンをクリックしてすぐに勤務終了ボタンをクリックする想定ではないので、１分くらい待ってから勤務終了ボタンをクリックしてください。
SPOのリストはこんな感じ。
終わりに
いかがでしたでしょうか。
これで、何かしらの情報を保存できるようになったと思います。
簡単に情報を保存できることが分かったと思いますので、今回の処理をベースに必要な情報を追加してみたりすると実業務での利用ができそうですね。
次回はこの保存した情報を、一覧として画面に表示させる方法を載せられればと思います。
Discussion