7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Power Appsのカレンダーをカスタマイズしてアドベントカレンダーを作ってみた

Last updated at Posted at 2020-12-22

#概要
Power Apps の 挿入→新しい画面→カレンダーで追加できるカレンダー。
今回は、Advent Calendar企画ということでカレンダーをカスタマイズして、クリスマスシーズン用のオリジナルカレンダーを作成してみました!

#今回の記事のテーマ

  • カレンダーのカスタマイズ方法(この記事)
  • コンポーネントの作成と活用方法(別に書きます)
  • 参考にした情報

です!

#完成したカレンダー
2020AdventCalender1.png
デザインはクリスマス仕様で:relaxed:
タブレット表示で作成。

2020AdventCalender2.png
カレンダー用の予定表を事前にOutlookで作成しておきます。
予定が登録されている日付をクリックするとポップアップ画面で内容が表示されます。
「×」アイコンクリックでポップアップ表示を消します。
クリスマスのアドベントカレンダーですが、内容は年末年始の個人的なタスクを登録しています:sweat_smile:

2020AdventCalender3.png
画面のヘッダーと背景画像はコンポーネントを使いました。
今回は画面は一つであまり使わないかもしれませんが、
「複数画面に入れた共通パーツを一括でドンと更新したい時にコンポーネントは使えるな」
と思ったので研究のため使いました。

  • コンポーネントを作成する際の制限がある
  • コンポーネントのカスタムプロパティの作成方法
  • ヘッダーに入れた画面のタイトルを手動で入力せずに、効率よく変更する方法

について後で書きます。

#作成環境とキャンバスアプリからのデータ接続

  • Power Apps
  • Office365ユーザー(データ接続)
  • Office365Outlook(データ接続)

#カレンダー表示の仕組みを調べてみた

###参考URL
キャンバス アプリのカレンダー スクリーン テンプレートの概要

基本は
Power Apps の 挿入→新しい画面→カレンダーをキャンバスアプリに配置してカスタマイズします。

画面に追加するとデフォルトでは下のような画面になります。
スクリーンショット 2020-12-18 11.24.19.png
左上のプルダウンで、表示させたい予定表を選ぶことで初めて対象のカレンダーが表示される仕組みです。

##プルダウンのitemsプロパティ
Office365Outlook.CalendarGetTables().value
予定表のテーブル一覧を取得

##プルダウンのOnChangeプロパティ
Select(dropdownCalendarSelection1)

##プルダウンのOnSelectプロパティ
// ... 略
//↓で表示させたい予定表を選択
Set(_myCalendar, Self.Selected);
// ... 略

//↓で選択した予定表に登録されているイベントを取得
ClearCollect(MyCalendarEvents, Office365Outlook.GetEventsCalendarViewV2(_myCalendar.Name, Text(_minDate, UTC), Text(_maxDate, UTC)).value);
// ... 略
ですね。

#プルダウン選択なしで指定したカレンダーを表示する
今回は、最初から表示させたい予定表が決まっているので、アプリを起動したらすぐにカレンダーが表示されるように、設定を変更してみました。

先ほどのプルダウンのOnSelectプロパティの記述にアレンジを加えて、アプリのOnStartプロパティに↓の記述を入れます。
スクリーンショット 2020-12-18 12.19.07.png
事前にOutlookで作成しておいたアドベントカレンダー用の予定表の名前を指定します。

###記述方法の参考URL
カレンダーを指定する
###注意点
ClearCollect(MyCalendarEvents, Office365Outlook.GetEventsCalendarViewV2(_myCalendar.Name, Text(_minDate, UTC), Text(_maxDate, UTC)).value);

Office365Outlook.GetEventsCalendarViewV3
に変更しないとエラーが出ます。

####参考情報
Office 365 Outlook

Get calendar view of events (V2) [DEPRECATED]
This action has been deprecated. Please use Get calendar view of events (V3) instead.

GetEventsCalendarViewV2は現在は非推奨になっているので、
GetEventsCalendarViewV3を使ってください、
ということです。

#カレンダーを構成しているギャラリー
2020AdventCalender4.png
スクリーンショット 2020-12-18 13.24.08.png
ギャラリーの名前やパーツの名前は変更せず、サイズや色を調整します。

###参考URL
カレンダー ギャラリー
#ポップアップ画面を作成する
スクリーンショット 2020-12-18 13.34.08.png
##1.ポップアップ用のパーツを配置してグループ化
スクリーンショット 2020-12-18 13.40.04.png

  • CalendarEventsGallery:デフォルトのイベントが表示されるエリアのギャラリーのまま。
  • 日付とイベントタイトルを表示させる2つのラベルを配置します。
  • ポップアップ用のパーツをグループ化します。グループ化したポップアップ用のパーツのVisibleプロパティに↓の記述を入れます。

スクリーンショット 2020-12-18 13.48.24.png
##イベントが登録されていない日は、日付をクリックしてもポップアップ画面が表示されないようにする

スクリーンショット 2020-12-18 13.58.55.png
If(CountRows(Filter(MyCalendarEvents, Text(DateValue(start),"[$-ja]yyyy/mm/dd") = Text(_dateSelected,"[$-ja]yyyy/mm/dd")))<>0, Set(_calendarVisible, true), Set(_calendarVisible, false))

表示させたいOutlookの予定表に登録された、リストのコレクション(MyCalendarEventsコレクション)に対して、フィルターをかけ、クリックした日付のポップアップ画面を表示させます。

もしカレンダー上でクリックした日付に登録されているイベントの数が0ではない時、
ポップアップの表示(グローバル変数の**_calendarVisible**)をtrueに、
ゼロの時はfalseにします。

MyCalendarEvents のコレクション↓
スクリーンショット 2020-12-18 14.06.57.png

###引っかかりポイント
GetEventsCalendarViewV2

GetEventsCalendarViewV3
では、生成されるコレクションの、イベント開始時刻の列の文字列とデータ型が違う。

ClearCollect(MyCalendarEvents,Office365Outlook.GetEventsCalendarViewV3(_myCalendar.Name,Text(_minDate,UTC),Text(_maxDate,UTC)).value)

を使いますが、通常Power Appsで挿入→新しい画面→カレンダーの追加で追加されるカレンダーで現在使われている
GetEventsCalendarViewV2
と違いがあるので注意。

作成するコレクションのイベントスタート時間は
列のイベントのスタート時間を格納している列の文字列とデータ型が異なりました。

GetEventsCalendarViewV2、Startは日付型
GetEventsCalendarViewV3、startはテキスト型

ですので、
スクリーンショット 2020-12-21 13.15.10.png

Text(DateValue(start),"[$-ja]yyyy/mm/dd") = Text(_dateSelected,"[$-ja]yyyy/mm/dd")

のように、=の左と右のデータ方をテキスト型で一致させるように記述を変えました。

#コンポーネントの作成と活用方法
長くなったので別記事に書きます!
カレンダー画面、関数をいろいろ見てみると発見がありました。

7
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?