本記事は5回シリーズ（の予定）です。
その１はこちら：https://qiita.com/KodamaJn/items/afc40f565aca772ab67f
その２はこちら：本記事
その３はこちら：https://qiita.com/KodamaJn/items/00af61369887d4b8dff6
その４はこちら：https://qiita.com/KodamaJn/items/2765f395d807de13f785
その５はこちら：執筆中…
その２では、その１で作成したデータベースをもとに実際にアプリを作成していきます。
手順が非常に多いため、細かいプロパティの設定はかなり省略しています。
また、分かりやすく説明しようと試みた結果、少し効率の悪い手順があるかもしれません。
諸々ご了承ください。
アプリに最低限の機能を実装する
アプリはタブレット型で作成します。
利用するリストと接続をしておきます。
月別カレンダーを作成する
まずは、勤務シフト表の肝となる、月別カレンダーを作成します。
App の OnStart で、当月の初日と当月の日数を表す2つの変数 FirstDayOfMonth, DaysOfMonth と、1～31をただ格納しただけのコレクション DayTable を設定します。
記述したら、OnStart を実行しておきましょう。
Set(FirstDayOfMonth, DateAdd(Today(),1-Day(Today()),Days));
Set(DaysOfMonth, DateDiff(FirstDayOfMonth,DateAdd(FirstDayOfMonth, 1, Months),Days));
ClearCollect(DayTable, [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]);
続いて、表示月を切り替えるアイコンを追加します。
まずは表示月のラベル LabelThisMonth を追加。
続いて先月に切り替えるアイコン IconPrevMonth と、次月に切り替えるアイコン IconNextMonth を追加します。
各々の OnSelect で、先ほど定義した 当月初日格納変数 FirstDayOfMonth と当月日数格納変数 DaysOfMonth を更新します。
先月：
Set(FirstDayOfMonth, DateAdd(FirstDayOfMonth,-1,Months));
Set(DaysOfMonth, DateDiff(FirstDayOfMonth,DateAdd(FirstDayOfMonth, 1, Months),Days));
次月：
Set(FirstDayOfMonth, DateAdd(FirstDayOfMonth,1,Months));
Set(DaysOfMonth, DateDiff(FirstDayOfMonth,DateAdd(FirstDayOfMonth, 1, Months),Days));
続いて、カレンダーを挿入します。「横方向（空）」のギャラリー GalleryMain を挿入し、Items に以下を記述することで DayTable から当月の日数分だけ配列を取得できるようにします。
なお、後々微調整を容易にするため、ギャラリーの「テンプレートのパディング」は 0 にしておきましょう。
Filter(DayTable, Value<=DaysOfMonth)
続いて、ギャラリー内に日付を表示するラベル LabelDay を追加します。
テキストは Items の値そのままです。
ThisItem.Value
続いて、以後の処理で何をやっているか分かりやすくするため、日付を8桁の数値で表したラベル LabelDayValue を追加します。
Text(DateAdd(FirstDayOfMonth, ThisItem.Value-1,Days), "[$-ja]yyyymmdd")
ここまでで、月別カレンダーは完成です。
こんな感じで動きます。
勤務パターンを設定できるようにする
先ほど作成した月別カレンダーに、勤務者毎に勤務パターンを設定するためのドロップダウンリストを追加します。
の前に、まずは勤務者情報を表示する必要がありますので、「縦方向（空）」のギャラリー GalleryUser を追加します。
データソース（Items）は勤務者が格納されている"勤務シフト_ユーザー"にします。
こちらも、後々微調整を容易にするため、ギャラリーの「テンプレートのパディング」は 0 にしておきます。
各行の高さを表す「テンプレートのサイズ」は適当に60くらいにしておきます。
今追加した GalleryUser 内に、勤務者名を表示するラベル LabelUser を追加します。
ThisItem.uWorkUser.DisplayName
続いて、最初に追加したギャラリー GalleryMain 内に、入れ子となる「縦方向（空）」のギャラリー GalleryWorkPatternPerUser を追加します。
データソース（Items）は、この後勤務パターンを"勤務者毎"に設定していくため、勤務者が格納されている"勤務シフト_ユーザー"にします。
こちらも、後々微調整を容易にするため、ギャラリーの「テンプレートのパディング」は 0 にしておきます。
各行の高さを表す「テンプレートのサイズ」は先ほどの GalleryUser の値に合わせて60にしておきます。
GalleryWorkPatternPerUser の位置（Y）を何となく合わせて、その後本ギャラリー内に勤務パターンを選択するドロップダウン DropdownWorkPattern を追加します。
はじめに、未選択状態を許すため AllowEmptySelection を true にしておきます。
その後、勤務パターンを選択するので、Items は"勤務シフト_パターン"とします。
ドロップダウンの表示情報である Value は、勤務パターン名である pWorkPattern とします。
続いて、ドロップダウンの初期値を設定します。
勤務シフトデータを格納する"勤務シフト_メイン"から、とある日のとある勤務者の勤務パターンを探して初期値としますので、初期値 Default を以下のように設定します。
"とある日"はカレンダー上部にある8桁の日付数値が格納されたラベル LabelDayValue.Text から、"とある勤務者"は直属のギャラリーが勤務者情報を保持しているので ThisItem.uWorkUser から参照できます。
First(Filter(勤務シフト_メイン, mWorkDateValue=Value(LabelDayValue.Text), mWorkUser.DisplayName=ThisItem.uWorkUser.DisplayName)).mWorkPattern
うまくいけば、その１の手順で格納した値が初期値として表示されると思います。
最後に、ドロップダウンを変更した場合にリストに書き込む処理を加えます。ここはちょっと複雑です。
ここでは、以下の場合は「とある日のとある勤務者のレコード」が存在するため既存レコードを上書きし、それ以外（＝新規）の場合は新規レコードを追加する処理を行う必要があります。
- 勤務者から希望勤務が申請されている場合
- 既に１回勤務パターンを設定している場合
よって、「とある日のとある勤務者のレコード」があるかどうかを判定し、それによって処理を分岐させます。
If(IsEmpty(Filter(勤務シフト_メイン, mWorkDateValue=Value(LabelDayValue.Text), mWorkUser.DisplayName=ThisItem.uWorkUser.DisplayName)),
Patch(勤務シフト_メイン, Defaults(勤務シフト_メイン), {mWorkDate: DateAdd(FirstDayOfMonth, Value(LabelDay.Text)-1,Days), mWorkDateValue: Value(LabelDayValue.Text), mWorkUser:ThisItem.uWorkUser, mWorkPattern: DropdownWorkPattern.Selected.pWorkPattern}),
UpdateIf(勤務シフト_メイン, And(mWorkDateValue=Value(LabelDayValue.Text),mWorkUser.DisplayName=ThisItem.uWorkUser.DisplayName), {mWorkPattern: DropdownWorkPattern.Selected.pWorkPattern})
)
これで、勤務パターンを設定する作業は完了です。
おわりに
ここまでで、"最低限"勤務パターンを勤務者毎に設定できるようになりました。
こんな感じで動きます。
ただ、このままでは、素早く連続してドロップダウンを変更していくと、書き込みが追い付かずエラーとなります。
その３では、この書き込みの問題を解消する方法や、希望勤務の表示などの機能を実装します。
その３はこちら：https://qiita.com/KodamaJn/items/00af61369887d4b8dff6