はじめに
今回は、以下のように、Power Apps で予約データをカレンダーで表示する方法について紹介します。
データソースの作成
今回は SharePoint リストで以下のような列を作成します。予約に関するリストはかなりシンプルです。必要に応じて予約件名とかも作成ください。
装置一覧の方はもっとシンプルです。タイトル列をそのまま使っています。
OnStart
[OnStart]あまり推奨しなくなっていますが、以前作成したアプリからの流用なので・・・
ただ、こちらの処理でアプリの起動が凄く遅くなるということはないはず。
こちらで日付に関する変数を定義しています。
// ===========================
// カレンダー情報設定
// ===========================
Set(
_dateSelected,
Today()
);
Set(
_firstDayOfMonth,
DateAdd(
Today(),
1 - Day(Today()),
TimeUnit.Days
)
);
Set(
_firstDayOfWeek,
DateAdd(
Today(),
1 - Weekday(Today()),
TimeUnit.Days
)
);
Set(
_firstDayInView,
DateAdd(
_firstDayOfMonth,
-(Weekday(_firstDayOfMonth) - 2 + 1),
TimeUnit.Days
)
);
Set(
_lastDayOfMonth,
DateAdd(
DateAdd(
_firstDayOfMonth,
1,
TimeUnit.Months
),
-1,
TimeUnit.Days
)
);
Set(
_minDate,
DateAdd(
_firstDayOfMonth,
-(Weekday(_firstDayOfMonth) - 2 + 1),
TimeUnit.Days
)
);
Set(
_maxDate,
DateAdd(
DateAdd(
_firstDayOfMonth,
-(Weekday(_firstDayOfMonth) - 2 + 1),
TimeUnit.Days
),
40,
TimeUnit.Days
)
);
カレンダー日付部分
以下の部分です。今回は、一応、日から土まで枠内に入ったため、一旦、コンテナーの外に配置しています。
上の方から主要なプロパティの設定を記載します。まず、曜日を表示するギャラリーの [Items]プロパティは以下です。
次に、そのギャラリー内にラベルを配置して、[Text]プロパティに以下の設定をしています。日曜日とかだと長いためです。
Switch(
ThisItem.Value,
"日曜日", "日",
"月曜日", "月",
"火曜日", "火",
"水曜日", "水",
"木曜日", "木",
"金曜日", "金",
"土曜日", "土"
)
日付側のギャラリーの [Items]プロパティは以下です。
ギャラリー内のラベルの[Text]プロパティに以下の設定をしています。基準となる日から、数値を足している感じです。
Day(DateAdd(_firstDayOfWeek,ThisItem.Value,TimeUnit.Days))
カレンダー
カレンダー部分は以下のような部品構造になっています。
まず、ポイントは、装置を左側に一覧表示して、右側に、該当の装置が、カレンダーに表示されている日付に予約があれば、予約者を表示するようにしており、複数のギャラリーが一緒に上下スクロールするようにしている点です。
こちらを実現するため、以下のスクロール可能な画面を一旦作成し、部品を拝借しています。
具体的には、以下の部品です。
そして、装置側のギャラリーは、コンボボックスで選択した装置を ID 順に並べています。
SortByColumns(
Filter(
装置,IsBlank(ComboBox1.Selected.タイトル)||
タイトル = ComboBox1.Selected.タイトル
),
"ID"
)
右側の予約データを表示する方は、水平コンテナーの配下にギャラリーを入れ子にしています。折り返しをオンにしています。
そして、外側の垂直ギャラリーは、左側のギャラリーと同じです。こちらにより、左側の装置一覧と並びを連動させています。
そして、垂直ギャラリーの中に水平ギャラリーを入れています。こちらは、以下のようにして、上の日付と同じになるよう、日付と装置の名前を持ちます。一行あたり ７ 日分のデータを持つ感じになります。
ForAll(
Sequence(
7,
0,
1
),
{
日付: DateAdd(
_firstDayOfWeek,
ThisRecord.Value,
TimeUnit.Days
),
装置:ThisItem.タイトル
}
)
そして、水平ギャラリーの中のラベルにて、日付、装置と一致する予約データを取って来て表示しています。もし、日時ベースで予約を取れるようにしている場合は、開始日時と終了日時を日付の間にあるか確認する感じですかね。また、もし複数の予約を表示させたい場合は、カレンダーの中には入らないため、ボタンを配置して、予約がある場合はボタンを表示して、押下すると予約一覧がポップアップで表示されるようにするのがいいかなと思います。
LookUp(
装置予約,
Start = ThisItem.日付 && タイトル = ThisItem.装置
).User.DisplayName
日付の移動
以下の部分です。
日付進める場合のアイコンの[OnSelect]です。
/*changes view to next week*/
Set(
_firstDayOfWeek,
DateAdd(
_firstDayOfWeek,
7
)
);
Set(
_firstDayInView,
DateAdd(
_firstDayOfMonth,
-(Weekday(_firstDayOfMonth) - 2 + 1),
TimeUnit.Days
)
);
/*changes month view to next month*/
If(
_firstDayOfWeek > _lastDayOfMonth,
Set(
_firstDayOfMonth,
DateAdd(
_firstDayOfMonth,
1,
TimeUnit.Months
)
);
Set(
_lastDayOfMonth,
DateAdd(
DateAdd(
_firstDayOfMonth,
1,
TimeUnit.Months
),
-1,
TimeUnit.Days
)
);
);
戻る方です。
/*changes month view to previous week*/
Set(
_firstDayOfWeek,
DateAdd(
_firstDayOfWeek,
-7
)
);
Set(
_firstDayInView,
DateAdd(
_firstDayOfMonth,
-(Weekday(_firstDayOfMonth) - 2 + 1),
TimeUnit.Days
)
);
/*changes month view to previous month*/
If(
_firstDayOfWeek < _firstDayOfMonth,
Set(
_firstDayOfMonth,
DateAdd(
_firstDayOfMonth,
-1,
TimeUnit.Months
)
);
Set(
_lastDayOfMonth,
DateAdd(
DateAdd(
_firstDayOfMonth,
1,
TimeUnit.Months
),
-1,
TimeUnit.Days
)
);
);
まとめ
今回は、Power Apps で予約データをカレンダーで表示する方法を紹介しました。
コントロールの幅や高さの調整は多少試行錯誤する感じになりますが、主要な処理についてはこのような感じになると思います。作成難易度上がりますが、簡易的なカレンダーであれば、Power Apps で作成できます。
更に複雑なカレンダーとなると、部品数や、データ量によってはアプリがかなり重くなると思うため、その辺注意しながら場合によっては落としどころを見つけつつの作成になると思います。