【2年目エンジニアの挑戦】Power Platformタスク管理アプリ開発奮闘記 #3

こんにちは。「タスク管理アプリ」の作成について解説する連載の第3回目です。

今回は、打刻時間や打刻に応じたアイコンの表示、打刻履歴の表示といった機能を実装していきたいと思います。

前回までの振り返り
今回のゴール
Power Appsの構築
躓きポイント
今回の作業を実施した当時の感想
次回予告

前回までの振り返り

第2回では、タスク管理アプリに打刻機能を実装する方法について紹介しました。

前回のゴールの時点では以下の様なイメージです。

今回のゴール

今回のゴールは、打刻時間の表示や打刻に応じたアイコンの表示、打刻履歴の表示を実装することです。

この機能を実装することで以下が実現できます。

当日の打刻時間の閲覧
現在の在籍状況のアイコン表示
過去の打刻情報の閲覧

では、さっそく作成していきます。

Power Appsの構築

打刻時間の表示

※コントロールの名前は任意で修正してください。（例：Label1 → lblText）

1. galUserの配下にあるbtnEndWorkを選択した状態で、 [挿入]タブ>[テキストラベル]からラベルを2つ作成します。

2. ラベルがgalUserの配下に作成されたら、それぞれのTextプロパティを"勤務開始"、"勤務終了"にします。

3. 作成したラベルの文字の大きさや太さを変え、以下のように配置します。

▼画像内のラベル設定値

Size（フォントサイズ）：10
FontWeight　　　　　：FontWeight.Bold（太字）

4. galUserの配下にあるlblStartWorkを選択した状態で、[挿入]タブ>[垂直ギャラリー]の順に選択します。

5. galUser配下に作成されたら、そのギャラリー（以下、galTodayStamp）を選択し、[プロパティ]>[レイアウト]>[画像、タイトル、サブタイトル]をクリックします。

レイアウトのリストが表示されたら[タイトルとサブタイトル]を選択します。

6. galTodayStampのサイズを変え、ステータス欄の部分に配置します。

※もし操作5の結果、galTodayStampがツリービューの一番下に移動した場合は、[ツリービュー]>[galTodayStamp]>[･･･]>[再配列]>[最前面へ移動]を選択します。

7. galTodayStamp内にある以下のコントロールを削除します。

Rectangle5
NextArrow5

8. galTodayStampのItemsプロパティに以下の関数を記載します。

※各関数の説明は省略しますが、処理の詳細はコメントに記載しました。

▼関数

With(
    //打刻管理リストにある自分の情報をmyStampListに格納（委任問題を回避するための処置）
    {myStampList:Filter(打刻管理リスト,ユーザー名.Email = myInfo.mail)},
    
    //myStampListにある、勤務開始時間が今日のアイテムを取得し、勤務開始時間の昇順に並べ替え、上位3レコード分を表示
    FirstN(
        Sort(
            Filter(myStampList,Text(勤務開始時間,"yyyy/mm/dd") = Text(Now(),"yyyy/mm/dd")),
            勤務開始時間
        ),3
    )
)

※本来は以下の関数で記載してもよいのですが、委任の警告が発生するため、これを回避するために上記のような関数を記載しました。

▼関数

FirstN(
        Sort(
            Filter(打刻管理リスト,ユーザー名.Email = myInfo.mail,Text(勤務開始時間,"yyyy/mm/dd") = Text(Now(),"yyyy/mm/dd")),
            勤務開始時間
        ),3
)

※打刻管理リストの作成方法は以下を参照してください。

blog.jbs.co.jp

9. galTodayStamp内にある2つのラベルのプロパティを以下のように変えます。

▼lblStartWorkTime

Text：Text(ThisItem.勤務開始時間,"hh:mm")
Size：10

▼lblEndWorkTime

Text：Text(ThisItem.勤務終了時間,"hh:mm")
Size：10

10. galTodayStampの中にラベルを配置し、Textプロパティに"～"を記載します。記載したらlblStartWorkTimeとlblEndWorkTimeの間に配置します。

11. galTodayStamp内にあるSeparatorの色と幅を変え、上部に配置します。

▼画像内の図形設定値

Height：1
Fill：RGBA(39, 67, 125, 1)

12. galTodayStampのTemplateSizeプロパティを20に設定します。

13. galTodayStampのSelectableプロパティをfalseにします。

14. lblStartWorkTimeとlblEndWorkTimeのFontWeightプロパティに記載されている

　関数を削除し、FontWeight.Normalを記載する。

15. 打刻管理リストにいくつかテストデータを登録し、アプリに打刻情報が表示されていることを確認出来たらOKです。

打刻に応じたアイコンの表示

1. galUserの配下にあるbtnEndWorkを選択した状態で、[挿入]タブ>[アイコン]から以下のアイコンをそれぞれ作成します。

チェック（バッチ）
キャンセル（バッチ）
時計

2. 各アイコンの色を修正します。

3. 各アイコンの大きさを変更し、ユーザー画像の右下に配置します。

4. icoPresence（緑のアイコン）のVisibleプロパティに以下の関数を記載します。

▼関数

If(myStatus="勤務中", true , false )

5. icoLeave（赤のアイコン）とicoRest（黄のアイコン）のVisibleプロパティにも以下の関数を記載します。

▼icoLeaveの関数

If(myStatus="退勤中", true , false )

▼icoRestの関数

If(myStatus="休憩中", true , false )

6. btnStartWork（勤務開始ボタン）、btnEndWork（勤務終了ボタン）のOnSelectプロパティの一番最後に以下の関数を記載します。

▼関数

Set(myStatus,Last(Filter(打刻管理リスト,ユーザー名.Email=myInfo.mail)).ステータス.Value);

7. chkStartBreak（休憩チェックボックス）のOnCheckとOnUnCheckプロパティに以下の関数を記載します。

▼関数

Set(myStatus,Last(Filter(打刻管理リスト,ユーザー名.Email=myInfo.mail)).ステータス.Value);

8. 勤務開始ボタンや休憩チェックを押して、正常にアイコンが切り替わればOKです。

【補足】

icoRestのTooltipプロパティに以下の関数を記載すると、アイコンにカーソルを合わせた際に休憩時間が表示されます。

▼関数

"休憩中です "&Text(Last(Filter(打刻管理リスト,ユーザー名.Email=myInfo.mail,ステータス.Value="休憩中")).休憩開始時間,"HH:mm")&"～"

打刻履歴の表示

画面の作成

1. [新しい画面]>[空]から新しい画面を作成します。

2. 作成した画面（以下、StampHist Screen）のFillプロパティに、RGBA(49,59,78,1)を記載します。

3. StampHist Screenに以下のアイコンや図形を配置します。（好みです）

4. [挿入]タブ>[テキストラベル]からラベルを作成し、そのラベルのTextプロパティに以下の関数を記載します。

▼関数

Text(Now(),"m")&"月の勤怠履歴"

5. ラベルの文字の大きさ、太さ、色を修正します。

6. [挿入]タブ>[レイアウト]>[水平ギャラリー]の順に選択し、ギャラリーを作成します。

7. 作成したギャラリー（以下、galStampHist_SHC）を選択し、[プロパティ]>[レイアウト]>[タイトル、サブタイトル]をクリックします。

レイアウトのリストが表示されたら[空白]を選択します。

8. galStampHist_SHCのサイズを変え、白背景に収まる部分に配置します。

※もし操作7の結果、galTodayStampがツリービューの一番下に移動した場合は、[ツリービュー]>[galTodayStamp]>[･･･]>[再配列]>[最前面へ移動]を選択します。

9. galStampHist_SHC内にラベルを作成します。

10. galStampHist_SHCのItemsプロパティに以下の関数を記載します。

※各関数の説明は省略しますが、処理の詳細はコメントに記載しました。

▼関数

With(
    //打刻管理リストにある自分の情報をmyStampListに格納（委任問題を回避するための処置）
    {myStampList:Filter(打刻管理リスト,ユーザー名.Email = myInfo.mail)},
    
    //myStampListにある、勤務開始時間が今月のアイテムを取得し、勤務開始時間を日単位で重複を削除するし、勤務開始時間を昇順で並べ替えして表示
    Sort(
        Distinct(
            Filter(
                myStampList,Text(勤務開始時間,"yyyy/mm")　= Text(Now(),"yyyy/mm")
            ),
            Text(勤務開始時間,"yyyy/mm/dd")
        ),Value
    )
)

11. galStampHist_SHC内にあるラベルのプロパティを以下に修正します。

Text：Substitute(Text(DateValue(ThisItem.Value),"yyyy/mm/dd（dddd）"),"曜日","")
Size：12
FontWeight：FontWeight.Bold

12. galStampHist_SHCのWrapCountプロパティを9に設定します。

13. galStampHist_SHCのTemplateSizeプロパティを370に設定します。

14. galStampHist_SHC内にあるlblStampDate_SHCを選択した状態で、[挿入]タブ>[四角形]の順で選択する。

15. 作成した図形のHeightプロパティを1に修正し、ギャラリーの一番下に配置します。

16. Home ScreenにあるgalTodayStampをコピーし、StampHist ScreenにあるgalStampHist_SHC内にあるshpSeparate_SHCを選択した状態で貼り付けます。

※サイズ等は好みで調整してください。

※ コピーや貼り付けにはショートカットキー（Ctrl + C, Ctrl + V）が便利です。

17. galTodayStamp_SHC内にあるshpStampBorder_SHCの位置を下に移動させます。

18. galTodayStamp_SHCのItemプロパティを以下の関数に修正します。

▼関数（修正箇所：青色）

With(
    //打刻管理リストにある自分の情報をmyStampListに格納（委任問題を回避するための処置）
    {myStampList:Filter(打刻管理リスト,ユーザー名.Email = myInfo.mail)},
    
    //myStampListにある、勤務開始時間が今日のアイテムを取得し、勤務開始時間の昇順に並べ替え、上位3レコード分を表示
    FirstN(
        Sort(
            Filter(myStampList,Text(勤務開始時間,"yyyy/mm/dd") = Text(DateValue(ThisItem.Value),"yyyy/mm/dd")),
            勤務開始時間
        ),3
    )
)