はじめに
Outlook予定表やGoogleカレンダーなどのスケジュール管理アプリでは、タイムライン上に予定が一覧表示されていて、新たな予定を追加したいときにはタイムライン上で時間を選択して予定登録を行う事ができます。
Power Appsで何らかの予定管理を行うアプリを作成する場合、ユーザーが直感的に操作できるよう、スケジュール管理アプリと同じように予約ができるようにしたいと思うことがあります。
しかし、インターネット上で似たようなことを行っているアプリの情報が見当たらなかったため、自分でスケジュール管理アプリのように予定登録を行えるアプリを作成しました。
今回は、Power Appsで予定登録を行うために考えたアイデアを紹介します。
まだアプリの細部まで作り込んでいないのですが、完成度が上がってきたら改めて詳細な紹介ができればと思っています。
つくったもの
以下の画面のアプリを作りました。
画面の左側が予定を一覧表示するためのタイムラインで、タイムライン上で予定をクリックするとその予定の詳細が右側に表示されます。
アプリで表示する予定データは、以下のようにSharePoint Onlineリストで管理しています。
予定詳細欄の上側にある＋アイコンをクリックすると、予定詳細欄が新規入力モードになり、予定の新規登録を行えるようになります。
新規登録する予定の開始時刻と終了時刻は、左側のタイムチャート上で設定します。
予定時刻を選択するときの操作は以下のような感じになります。
青いブロックのフチに表示されている○を動かすことで時刻を変更できます。
（既存の予定と時間が重複する場合はブロックの色が赤に変わります）
アプリの中身の説明
画面はこのような構成になっています。
GalleryタイムラインのTemplateSizeプロパティとTemplatePaddingプロパティの値を0に設定して、Button予定のYプロパティとHeightプロパティの値を予約時刻に合わせて変化させることで、既存の予定を表現しています。
Container予定時刻選択は初期状態では非表示にしていますが、予定の新規登録を行うときには以下のように表示させます。
Container予定時刻選択の配下には、Slider予約開始とSlider予約終了とButton新規予約時間の3つのコントロールがあります。
Slider予約開始とSlider予約終了はスライダーコントロールですが、これらがGalleryタイムラインにかぶさるように配置して、スライダーのハンドルを操作することで予定時間を選択できるようにします。
Slider予約開始とSlider予約終了のプロパティ設定について、ハンドルを縦方向に操作するためLayoutプロパティの値をLayout.Verticalに設定し、ハンドル部分以外がすべて透明になるようRailThicknessとBorderThicknessを0に、ShowValueをfalseに設定します。
また、このアプリでは予約時間を30分単位で選択するため、Slider予約開始とSlider予約終了のMinプロパティを0、Maxプロパティを48（24時間÷30分=48）に設定します。
Button新規予約時間は、スライダーで選択した開始時間と終了時間に合わせて、YプロパティとHeightプロパティの値を変化させます。
また、本アプリではGalleryタイムライン.AllItemsの予約時間を参照して、時間が重複しているか否かでColorプロパティを変化させています。
改善したい点
次の点が課題として残っているため改善していきたいです。
- 日付を跨いだ予定を登録できない
- 複数の予定の時間帯が重複しているときにボタンが重なってしまう
（左右に位置をずらして重ならないようにしたい）
We Are Hiring!