PowerApps で本格的な勤怠管理アプリを作る【テレワーク対策】

PowerAppsを使った本格的な勤怠管理アプリを作ったのでこの記事でその作りをご紹介してます。PowerAppsだと二重送信の防止、送信した情報の閲覧、編集また、他の仕事仲間の勤務状況の閲覧機能等も付けられます。

PowerApps で本格的な勤怠管理アプリを作る【テレワーク対策】

(動画時間:7:47)

 

マイクロソフトPowerAppsでのテレワークへの対応を考える

 

こんにちは、リーンシグマ、ブラックベルトのマイク根上です。
業務改善コンサルをしています。

 

前回の記事で、現代のテレワーク移行の流れに対応するために
マイクロソフトFormsでリモートの勤怠管理をする方法をご紹介しました。
⇒「マイクロソフトFormsでテレワークに対応する簡単な方法、IT勤怠管理」

 

その方法では各従業員の毎日の出退勤時間を回収する
最低限の機能を直ぐに始める方法でした。

 

しかし、二重送信の防止や、送信した情報の閲覧、編集、
また、他の仕事仲間の勤務状況も知りたいなどのニーズには答えられません。

 

それは同じマイクロソフト365のPowerAppsで携帯アプリを作る事で達成できます。

 

今日はそれを作ってみましたので、その機能をお見せして、
どの様に作ったかの概要も後半で説明しますので、
皆さんの仕事への参考にして頂けたらと思います。

 

それでは早速デモを見てみましょう。

 

PowerAppsの勤怠管理アプリのデモンストレーション

 

このアプリは三つのタブがあります。

  • 出退勤の打刻をするための「打刻画面」のタブ、
  • 自分の打刻を修正する「修正画面」のタブ、
  • 自分の部署の同僚の出勤状況が分かる「チーム勤務表」画面のタブです。

 

勤怠管理アプリのタブ

 

出退勤の打刻をするための「打刻画面」

 

毎朝仕事始めにこのアプリを立ち上げると上図の打刻画面が開きます。

 

勤怠管理アプリの出勤形態のドロップダウン

 

このドロップダウンから今日の出社、在宅勤務等の勤務形態を選び、
「出勤」のボタンを押すと下図の確認画面が出てきます。

 

勤怠管理アプリ ボタンの確認画面

 

PowerAppsは意外とボタンの反応がすごく良くて、
ユーザーさんから「間違って押した時が心配」と言うご意見から、
この様な確認画面を出す様にしました。

 

「確認」ボタンを押すと、その時の時間とアプリのユーザー名、
選択された勤務形態がクラウド保存され、
下の出退勤記録表にその保存内容が追加されます。

 

勤怠管理アプリの退勤ボタン

 

次に今日の仕事を終了した時にまたこのアプリを開けます。

 

さっきは「退勤」ボタンが灰色で押せないようになっていましたが、
今度は「出勤」ボタンが灰色で退勤ボタンしか押せません。(上図参照)

 

この様にPowerAppsでは誤操作防止の施策が沢山できるのです。

 

休憩時間を記録し、また備考欄を使って簡単な状況の報告などもできます。
もちろんこのアプリを改良して必要な日報の報告ができる様にもできます。

 

退勤ボタンを押します。そしたら
「勤務時間が0時間以下ですので、クラウド保存できません。」
と言われています。

 

勤怠管理アプリのエラー画面

 

今はテストで勤務時間が短く、休憩時間を1時間にしたからです。
この様にPowerAppsでは誤入力、誤操作防止の施策が沢山できるのです。

 

勤怠管理アプリのエラー画面

 

休憩時間は必須入力ですので、今回は0を入れます。
今度は上手くいってこれらの情報が全てクラウドに保存されました。

 

PowerAppsで本格的な実務機能を実装する

 

勤怠管理アプリ 出退勤記録

 

出退勤記録表の退勤時間のカッコが休憩時間になります。
またその中に「場所」ボタンが出ています。

 

このアプリをスマホで出勤ボタンと退勤ボタンを押した時に
同時にその場所の位置情報もクラウドに保存するようにしました。

 

この「場所」ボタンをクリックしたらその位置情報を使って
地図アプリにその場所を提示します。

 

このボタンはあまり使う事は無いかもしれませんが、
従業員にこの事を伝えておくと、偽の報告をする抑止効果はあると思います。

 

自分の打刻を修正する「修正画面」

 

次に修正機能を見てみましょう。
上の「修正画面」タブをクリックしてからカレンダーから日付を選ぶか、
出退勤記録内の鉛筆アイコンをクリックしても良いです。(上図参照)

 

この画面で出退勤時間を変更して、「修正」、「確認」ボタンを
クリックするとその様に修正されます。

 

勤怠管理アプリ 修正画面

 

もし、従業員にこの修正機能を使わせたくないという事でしたら
もちろんその様にもできます。

 

同僚の出勤状況が分かる「チーム勤務表」画面

 

最後に「チーム勤務表」タブです。
既定では自分の部署のメンバーの今週の勤務状況を示しています。

 

勤怠管理アプリ チーム勤怠表画面

 

勤務形態をクリックして詳細を見る事もできるし、
他の部署や過去の結果も参照できる様にしました。

 

勤怠管理アプリ チーム勤怠表画面2

 

僕のクライアントさんは翌週の予定を最初に提出させるような
もっと高機能な要望がありました。

 

この様に便利で必要な機能をPowerAppsでいくらでも作る事ができるのです。

 

このPowerApps 勤怠管理アプリの作りの概要

 

次にどうやってこれらを作っているかの概要です。

 

勤怠管理アプリ 開発画面

 

これがPowerAppsの作業画面です。
この様に三つの画面を別々に作っています。

 

タブの作り方

 

上のタブの部分は図形の四角形と直角三角形を使いました。
この時に画面右のプロパティ内の幅、高さ、位置の属性を見ながらやると
速くきれいに繋げて作れます。

 

勤怠管理アプリ タブの自作

 

その部分の「OnSelect」属性に各Navigate関数を入れて、
全タブをグループ化し、それを他の画面にコピペし、
タブと文字の色を変えるとタブとして機能します。

 

ボタンの間違い防止機能の作り方

 

ボタンの間違い防止機能は「DisplayMode」属性で行えます。

 

例えば「出勤」ボタンの「DisplayMode」属性にこの数式を入れ

If(
CountRows(Filter(Tbl_Employees,Employee1=User().FullName &&
Last_Day_Start_Clicked=Today())
)>0,
Disabled,
Edit
)

 

「データベースにその日の出勤時間が存在すれば出勤後ですので
このDisplayModeをDisabledにし、
そうでなければEditにする」と言う条件式を入れています。

 

各注意画面や確認画面の作り方

 

各注意画面や確認画面はそれぞれ作成して、
その「Visible」属性にtrueかfalseの入った変数を入れています。(例:確認Vis)
trueならその画面が表示されて、falseなら非表示になります。

 

そして各ボタンの「OnSelect」属性にUpdateContext関数で
その変数にtrueとfalseを入れる操作をする事で実現できます。

UpdateContext({確認Vis:true})

 

時間の選択コントロールの自作の仕方

 

次に修正画面です。

 

日付の選択には専用のコントロールがありますが、
時間の選択ができる専用のコントロールがありません。
ですのでドロップダウンコントロールを二つ使って自作しています。

 

下の画像が時間の時の選択をするドロップダウンの「Items」属性です。

PowerApps 時間の選択コントロールを自作する

 

また、修正画面では最初に既存のデータを表示する必要がありますので、
各部品の「Default」属性を上手く使うのがポイントです。

 

PowerAppsでのクロス集計の仕方

 

最後のチーム勤務表ではデータテーブルコントロールを使っています。

 

PowerAppsでクロス集計をする

 

ここでは各曜日の勤務形態を横に並べたいので、
クラウド保存されたデータのクロス集計をしています。

 

エクセルだったらピボットテーブルで簡単に実現できますが、
PowerAppsでは少し難しいです。
それには「Items」属性でGroupBy関数を使うとできます。

 

Qiita.comで、このGroupBy関数の詳しい使い方の記事
を書きましたので、ご参考にして下さい。
⇒「PowerAppsでピボットテーブルみたいな集計をする。(GroupBy、AddColumns関数)」

 

PowerAppsでこの様な実務で使える業務アプリを作る事ができます。
ご質問やご要望があれば個別にでもご連絡下さい。

 

「こちらの記事も読まれてます

 

Comments