このページではPower Appsアプリの演習として、従業員の打刻を管理するアプリを以下の手順で作成していきます。
- SharePointリストの作成
- Power Appsアプリの作成
- Power AppsアプリとSharePointリストの接続
- 打刻機能の実装
- 打刻履歴表示機能の実装
1. SharePoint リストの作成
最初に打刻を記録するSharePointリストを作成していきます。
チームサイトを作成し、[サイトコンテンツ]から[新規]→[リスト]を選択します。 ※チームサイト作成時の設定項目はすべて任意の値で問題ありません。
[空白のリスト]を選択し、
任意の名前を付け、作成を押下します。
リストの作成が完了したら、出勤時刻、退勤時刻を保持する列を作成します。
[列の追加]から[日付と時刻]を選択し、
出勤時刻を意味する列名をつけ、「時間を含める」オプションを「はい」にして、保存します。
同様に退勤時刻を保持する列を作成し、SharePointリストは完成です。
最後にSharePointサイトのタイムゾーンを日本時間に合わせます。
右上の歯車マークから[サイト情報]を選択し、
[すべてのサイトの設定を表示]をクリックします。
[地域の設定]をクリックし、
タイムゾーンとロケールを日本に合わせ、OKを押します。
※もともと日本時間になっている場合は変更は不要です。
これで打刻（出勤時刻と退勤時刻）を保持するSharePointリストの作成が完了しました。
2. Power Appsアプリの作成
続いてPower Appsアプリを作成します。
Power Appsの[作成]タブより[空のアプリ]を選択し、
[空のキャンバスアプリ]の作成をクリックします。
空のアプリが表示されたら、Power Appsアプリの作成が完了です。
3. Power AppsアプリとSharePointリストの接続
これまでの章で作成したPower AppsアプリとSharePointリストを接続します。
左側の円柱マークから[データの追加]→[SharePoint]を選択し、
[+接続の追加]を押下後、[直接接続]を選択します。
※SharePointへの接続を作成済みの場合は、その接続を選択して問題ありません。
リストを作成したサイトを選択し、 ※作成したサイトが表示されるまで数分かかることがあります。 作成したサイトが表示されない場合は、作成したサイトのURLを上部のテキストボックスに入力し、[接続]を押下してください。
先ほど作成したリストを選択し、[接続]を押下します。
これでSharePointとの接続は完了です。
4. 打刻機能の実装
それでは、Power Appsアプリに打刻機能を構築していきます。
[挿入]→[ボタン]から、画面にボタンを追加し、ボタンのテキストを「出勤」に変えます。
続いて[挿入]→[編集フォーム]を選択し、SharePointリストを編集するフォームを追加します。
追加した編集フォームを選択し、以下の操作を行い画像のようなUIに変更します。
- データソースに作成したSharePointリストを選択、
- 列を3から1に変更
- 「添付ファイル_Datacard」を削除
※添付ファイル_Datacardの削除は[フィールドの編集]から行えます。
続いてフォームコントロール内の各コントロールを編集していきます。
まずはタイトルDataCard内の「タイトル」と書いてあるラベルを選択し、[詳細設定]タブから鍵マークをクリックしてDataCardの編集ロックを解除します。
タイトル_DataCard内のテキストインプットのDefaultプロパティに以下の式を入れ、ユーザーが入力をしなくても自動でログインユーザーの名前が入るよう設定します。
User().FullName
ユーザーが自動で入力したユーザー名を変更できないように、DisplayModeプロパティに「DisplayMode.View」を入れます。
最後にタイトル_DataCardのUpdateプロパティに以下の式を入れ、フォームをSubmitした際に、ユーザーを特定する一意値（メールアドレス）がSPOリストに入るよう設定します。
User().Email
続いて、出勤_DataCardも同様にロックを解除します。
日時を編集するコントロールのDisplayModeプロパティを「DisplayMode.View」に変更し、
Updateプロパティに以下の式を書きます。
こちらの式で
・新規打刻時（FormModeがNewのとき）はボタン押下時の時刻
・退勤打刻時（FormModeがNew以外のとき）は出勤時刻がそのまま
が、列「出勤時刻」に代入されます。
// Form1は追加したフォームの名前に合わせて変更してください
// 「.ClockIn」はSharePointリストの列「出勤時刻」の名称に合わせて変更してください
If(Form1.Mode=FormMode.New, Now(), ThisItem.Clockin)
最後にボタンのOnSelectプロパティに以下の式を書きます。
SubmitForm(Form1)
これで「出勤打刻機能」の実装は完了したので、動作を確認します。
Form1のプロパティを以下のように変更し、
・DefaultModeプロパティを「FormMode.New」
・Itemプロパティを「Self.LastSubmit」
右上の再生（三角）ボタンを押下します。
アプリが起動するので出勤ボタンを押下し、出勤時刻が打刻されることを確認します。
SharePointリストも確認し、出勤時刻が保存されていることを確認します。
続いて退勤打刻機能を追加します。
出勤打刻機能実装時と同様に、退勤打刻_DataCardの鍵マークを押して編集を可能にし、日時を入力できるコントロール3つのDisplayModeをDisplayMode.Viewに設定します。
退勤打刻_DataCardのUpdateプロパティに以下の式を入力します。
この式で
・退勤打刻時（FormMode.Editのとき）はボタン押下時の時刻
が、列「退勤打刻」に代入されます。
// Form1は追加したフォームの名前に合わせて変更してください。
If(Form1.Mode=FormMode.Edit, Now())
さらに退勤時（FormMode.Editのとき）はボタンのテキストが「退勤」なるよう、ボタンのTextプロパティに以下の式を代入します。
If(Form1.Mode=FormMode.New, "出勤", Form1.Mode=FormMode.Edit, "退勤")
これで「退勤打刻」機能が完成したので、動作確認を行います。
「退勤」ボタンを再生モードで押下し、画面上に打刻時の時間が表示されることを確認し、
SharePointリストにも退勤時の時間が登録されることを確認します。
再度出勤が記録できるよう、リセットボタンを配置します。
[挿入]から[再読み込み]アイコンを追加し、
OnSelectプロパティに以下の式を設定します。
// Form1は追加したフォームコントロールの名称に合わせて変更してください。
ResetForm(Form1)
追加したアイコンをクリックするとフォームがリセットされ、再度出勤の登録が可能になります。
4. 打刻履歴表示機能の実装
打刻履歴表示の画面を作成します。
左側のツリービューの[画面]タブから[新しい画面]→[空]を選択し、
追加された新しい画面上で[挿入]→[データテーブル（プレビュー）」を選択します。
追加したデータテーブルのデータソースにSharePointリスト「TimeCard」を設定します。
使用しない列「添付ファイル」は削除し、
Itemsプロパティの式を以下のように変え、自身の打刻履歴のみを表示するように設定します。
// Title列がログインユーザーと一致するデータのみにフィルターする
Filter(TimeCard, Title=User().Email)
最後に打刻画面に、履歴画面へ移動するためのボタンを作成し、
Navigate(Screen2);
打刻履歴画面に、前の画面に戻る機能を持ったアイコンを作成して、アプリは完成です。
Back();
このアプリにはまだまだ以下のような課題がありますので、自身で様々な改修を行ってみましょう。
- 現在の時刻がわからない（タイマーコントロールで現在時刻の表示）
- デザインがデフォルトのまま
- 出勤打刻後、アプリを再起動すると再度「出勤」前の状態になってしまう
- 退勤打刻が2回以上できてしまう
- 出勤時刻、退勤時刻の編集ができない
- 日付が変わった際は、自動で「出勤」前の状態に戻した方がユーザーフレンドリー
