July 21, 2024 1 min to read

テンプレートスクリーンのカレンダーで選択した予定（イベント）の詳細情報をポップアップでアプリに表示する方法 #PowerApps

概要

今回は、Power Appsを使ってテンプレートスクリーンのカレンダーで選択した予定の詳細情報をポップアップで表示する方法をご紹介します。この機能を追加することで、カレンダーの使い勝手がさらに向上します。

テンプレートスクリーンとは、新しい画面などから追加できるスクリーンのことです。今回は、その中のカレンダーに機能を追加していきます。このスクリーンは、カレンダー機能とその日の予定を表示する機能を持っています。

まずはポップアップを作成します。以下の手順で進めていきます。

コンテナーコントロールの追加: 画面全体に広げ、背景色を黒色に設定し、透明度を50%にします。
二重のコンテナーコントロール: 追加したコンテナーコントロールの中にさらにコンテナーコントロールを追加し、大きさを調整して背景色を白に設定します。ドロップシャドウをBoldに設定します。

次に、予定の詳細を表示するための設定を行います。

テキストラベルの追加: 白のコンテナーの中にテキストラベルを追加します。選択した予定は変数「_selectedCalendarEvent」に入っているので、これを利用して予定のタイトルを表示します。予定のタイトルは _selectedCalendarEvent.Subjectで表示されます
HTMLテキストコントロールの利用: 予定の詳細はHTML形式のため、HTMLテキストコントロールを利用します。変数「_selectedCalendarEvent.Body」を指定することで、予定の詳細が表示されます。

最後に、ポップアップの表示と非表示を切り替えるための設定を行います。

バボタンの追加: 白のコンテナーの中にモダンコントロールのボタンコントロールを追加します。幅やアイコンの表示境界半径などを調整し、丸い×ボタンを作成します。
変数の作成: UpdateContext関数を使って「showDetail」という変数を作成し、値にはfalseを設定します。黒のコンテナーコントロールのVisibleプロパティにこの変数を設定します。
オンセレクトプロパティの設定: CalendarEventsGallery1の中のTitle3コントロールのOnSelectプロパティに、先ほどと同じアUpdateContext関数を追加し、値にはtrueを設定します。

以上が、テンプレートスクリーンのカレンダーで選択した予定の詳細情報をポップアップで表示する方法です。ぜひ試してみてください！