[power apps]テニスコート申請画面を作成する Part6 日程選択フォームの実装(レスポンシブ対応/全手順公開)

やること

スケジュールマスタから取得した日付一覧をプルダウン形式で選択できるようにする。

手順

１．オブジェクト名の修正

「Part5 会場選択フォームの実装」での会場選択Formと同様に、まずはオブジェクト名の変更を行う。

２．スケジュールマスタの追加

「Part5 会場マスタフォームの実装」の会場マスタの追加と同じ手順でスケジュールマスタを追加する。

３．マスタ参照の更新

一定時間ごとに最新のマスタ情報を取得する。

会場マスタは、値が変わることが無いのでPower Appsから何度も参照をする必要がないが、スケジュールマスタは空き数という刻々と値が変わる列がある。
例えば、Aさんが申請を開始するときに9/1の空き数が1であったとする。Bさんが先に9/1の申請を済ませ、Aさんがさらに申請をしてしまうと
9/1の空き数が-1になってしまう。

この事象は、同じ日を申請する2名が同じタイミングで申請しないと起こらないレアケースであるが、きちんと対処していく。

Screenオブジェクト直下にタイマー(RefleshScheduleTable)を挿入
(+挿入 > 入力 > タイマー)

以下の通りプロパティを設定

/** プロパティ名: 設定値 */

/**
　  OnTimerEndの繰り返しを有効にする
*/
Repeat: true

/** 
　　OnTimerEnd が呼ばれる間隔
　　1000ミリ秒 = 1秒
*/
Duration: 1000

/**
　　自動でタイマーのカウントを初めるか
*/
AutoStart: true

/**
　　一定時間ごとに実行される処理
　　Refresh(データソース名)とすると、最新のデータソースを参照することができる
*/
OnTimerEnd: Refresh(スケジュールマスタ);

/**
　　このタイマーはバックグラウンドで動作するものであるため、非表示にする
*/
Visible: false

４．プロパティのデータ種別変更

プロパティのタイプはSPOリストと同じテキストであるため、これをプルダウンに変更する。

日程選択Formを選択
プロパティ > フィールドの編集 > 編集のリンクを選択
「テキストの編集」から「許可値」に変更
cardスケジュール候補日1～3の見た目がプルダウンになったことを確認

５．プルダウンの設定

valスケジュール候補日1～3に対して以下の通りプロパティを設定
```
/** プロパティ名: 設定値 */ 

/** プルダウンに空白行を追加することを許容する */ 
AllowEmptySelection: true 

/** プルダウンの選択項目をマスタから取得する */ 
Items: 　　 　　
　　Filter(
　　　　スケジュールマスタ 　　 　　　　
　　　　, Int(空き数) > 0 　　 　　
　　) 
/** 　　 　　
　　値が選択されたとき、選択行を変数に保存する
　　候補日の末尾の1~3は適宜置き換える 
*/ 
OnChange: Set (glbSelectedスケジュール候補日1, Self.SelectedText);
```
プルダウンの初期値はスケジュールマスタで一番若い「09/01」の日付が表示される。
ユーザーが何も考えず次へボタンを押し進んでいき、本当は別の日を選択したかったのに！となってしまうことを避けるため、初期値を空白で表示したい。
そのため、AllowEmptySelectionをtrueにしてプルダウンに空白行が加わることを許容する必要がある。

ItemsのFilterは会場マスタの検索に使用したLookupの親戚で、Lookupが1件の取得に対して、Filterは条件に合致するすべてのレコードを取得できる。「空き数」というのはその日に申請できる数である。空き数0件の日付もプルダウンに表示して、後から「空きがありません」とエラーを出すよりも最初から表示させないほうが親切なのでFilterの条件に加えている。

OnChangeでは、プルダウンの選択された行を変数に保存している。
理由はReflesh関数の仕様が関係している。Reflesh関数を呼び、最新のマスタを取得すると、なぜかプルダウンの選択がリセットされ空白行に戻ってしまう。そのため、変数に値を保存しておかないとどの日付を選択していたかが分からなくなってしまうからだ。
このリセットはおそらく回避する手段がないため、リセットされたらそのあとすぐに選択していた日付をもう一度設定しなおすということを行っている。設定の処理は次のDefaultプロパティで行っている。

valスケジュール候補日1～3のDefaultプロパティを以下の通り設定

/** 候補日の末尾の1~3は適宜置き換える */
If (
　　/** プルダウン未選択の場合 */
　　IsBlank(glbSelectedスケジュール候補日1)
　　　　,
　　　　/** 空欄で表示 */
　　　　Blank()
　　　　,
　　　　/** プルダウンが選択済みの場合 */
　　If(
　　　　/** ほかのユーザーが申請し、空き数が0になった場合 */
　　　　Int(LookUp(スケジュールマスタ, Int(連番) = Int(glbSelectedスケジュール候補日1.連番)).空き数) = 0
　　　　,
　　　　/** 空欄を表示 */
　　　　Blank()
　　　　,
　　　　/** 選択した日付を表示 */
　　　　LookUp(スケジュールマスタ, Int(連番) = Int(glbSelectedスケジュール候補日1.連番)).ディスプレイ日付
　　)
)

上記のプロパティを設定するとcardスケジュール候補日1～3のUpdateプロパティにエラーが出るため修正する。
```
/** 候補日の末尾の1~3は適宜置き換える */
Update: Text(valスケジュール候補日1.Selected.日付, "yyyy/mm/dd")
```
まず、UpdateというのはSPOリストに対する登録値のプロパティである。
基本的にはテキストに入力した値、プルダウンで選択した値が設定されている。
ただし、Selected.ValueのValueは配列でしか使用できないので、マスタ参照している場合は、列の名前で指定しなければいけない。
あわせて、Text関数を使って日付の表示形式を変更している。
変更しない場合 yyyy年mm月dd日 9時00分という形式で登録されてしまうからだ。

６．動作確認

プレビューモードにして、各プルダウンに9/1 ~ 9/30までの日付が表示されていることを確認する。

続いて、Share Pointからスケジュールマスタのエクセルを開く。
画面上に選択した日付の空き数を「0」に更新する。

空き数が「0」になった日付がリセットされることを確認できればOK

えんすく！

まったりプログラミング