Microsoft Power Apps で勤怠アプリを作ってみる ①

　みなさんこんにちは！ 飯塚LSSの上野です．

今回は，先日の記事「社内DX・アプリ内製とは？」の続編として，実際に Microsoft Power Apps を用いたアプリ開発の様子をチュートリアル形式でご紹介したいと思います．

「プログラミング初心者でも簡単にアプリを作ってみたい！」という方にオススメの記事です． 最後までご覧いただけると幸いです．
 

今回のゴール

・今回つくるもの：勤怠管理（打刻）アプリ
・実装する機能：「出勤」「退勤」ボタンのワンプッシュで勤怠をデータベースに記録する．

【完成イメージ】

Let's  アプリ開発！

今回は，テーブル作成を行った後，画面作成と関数（機能）実装を同時並行で行います． 

テーブル設計・データベース構築

① Microsoft Power Apps に九工大アカウントでサインイン．　
　画面右上の環境を「Kyushu Institute Of Technology」から「 〇〇〇〇（自分の名前）の環境」に切り替えます．

② 左側のメニューから「テーブル」→ 「＋ 新しいテーブル（新しいテーブルを作成する）」→ 「空白から開始」の順にクリックします．

③ 以下のように，３つの列を作成します．

・テーブル名を「テーブル1」から「kintai」に変更します．

・「新しい列 *」をクリックし，列名を「新しい列」から「ID」に変更します．

・「＋ 新しい列」をクリックし，表示名を「Date」，データの種類を「日付のみ」にします．必須をONにします．

・「＋ 新しい列」をクリックし，表示名を「IN」，データの種類を「日付と時刻」にします．必須をONにします．

・「＋新しい列」をクリックし，表示名を「OUT」，データの種類を「日付と時刻」にします．必須はOFFのままです．

以上でテーブルの作成は完了です！　　次は，いよいよアプリ画面の作成と機能実装です！

UI開発

① 再度 Power Apps のメインメニューに戻り，「アプリ」をクリックします．

②「＋ 新しいアプリ」→「ページデザインで開始する」→「空のキャンバス」を選びます．

③  「データに接続する」→「データの追加」→「kintai（先ほど作ったテーブル）」を選び，UIとデータベースを繋げます．

④「＋ 挿入」→「ボタン」を選び，キャンバス内にボタンを配置し，テキストを「出勤」に変更します．

⑤ ボタンのプロパティ→詳細設定→OnSelect内に以下の関数式を入力します．

Set(
    varID,
    User().Email & "-" & Text(Today(), "yyyymmdd")
);
With(
    { rec: LookUp(kintai, ID = varID) },
    If(
        IsBlank(rec),
        With(
            {
                result: Patch(
                    kintai,
                    Defaults(kintai),
                    {
                        ID: varID,
                        Date: Today(),
                        IN: Now()
                    }
                )
            },
            Notify(
                "出勤打刻が完了しました",
                NotificationType.Success
            )
        ),
        Notify(
            "本日の出勤レコードは既に存在します",
            NotificationType.Information
        )
    )
);
Refresh(kintai);

これで，出勤ボタンの実装は完了です！　続いては，退勤ボタンの実装を行います．

① 先ほどと同様に，「＋ 挿入」→「ボタン」を選び，キャンバス内にボタンを配置し，テキストを「退勤」に変更します．

② ボタンのプロパティ→詳細設定→OnSelect内に以下の関数式を入力します．

// 今日のキーを生成（出勤側と同一）
Set(
    varID,
    User().Email & "-" & Text(Today(), "yyyymmdd")
);

// 今日の未退勤レコードを特定して更新
With(
    {
        rec: LookUp(
            kintai,
            ID = varID && IsBlank(OUT)
        )
    },
    If(
        IsBlank(rec),
        Notify(
            "未退勤のレコードが見つかりません（既に退勤処理は完了しています）",
            NotificationType.Warning
        ),
        With(
            {
                result: Patch(
                    kintai,
                    rec,
                    { OUT: Now() }
                )
            },
            Notify(
                "退勤打刻が完了しました",
                NotificationType.Success
            )
        )
    )
);

Refresh(kintai);

これで退勤ボタンの実装も完了です！

実際にボタンを押してみると...

勤怠レコードが登録されていました！

今回の記事は以上になります．

次回の記事では，UIの装飾やアプリ内での出勤ログ表示・編集・削除機能の実装についてご紹介させていただく予定です！