この記事では、Power Appsで変数を使って、ポップアップ機能を実装する方法について解説します。
Power Appsで変数を使いこなし、プロパティの値を制御できれば、ポップアップ機能以外にも、様々な実装ができるようになるので、ぜひ参考にしてください！
- Power Appsでポップアップ機能を実装する基本的な考え方
- 変数を使ってコントロールの表示/非表示を切り替える方法
- ギャラリーで選択したデータの詳細を表示する方法
Youtube動画で見たい方は、こちらからどうぞ！
Power Appsでポップアップを実装する方法
実装の概要
Power Appsで実装するポップアップ機能は、例えば、アイコンやボタンをクリックしたら、画面の前面にモーダルウィンドウが表示され、×を押したら、元の表示に戻るような実装です。
データ削除操作時の確認ダイアログや、ギャラリーの詳細表示に使うことができますな！
このポップアップは、ポップアップ系のコントロールの「Visible」プロパティを、True/falseで、動的に切り替えることで実現できます。
具体的な実装方法としては、以下のような手順です。
- ポップアップに使う、四角形やテキスト等のコントロールを配置し、グループ化する。
- グループ化したコントロールのVisibleプロパティを、変数でtrue/falseに切り替える実装をする。
それでは、実装の手順を詳しく解説していきます！
具体的な実装手順
Power Appsで、例えば以下のようなギャラリーで、申請一覧のデータを表示しています。
１．まずはこのギャラリー内に、ポップアップを表示するためのアイコンを挿入しましょう。
挿入タブから、「情報」と検索し、情報ボタンをギャラリー内に追加します。
この情報ボタンをクリックしたら、ポップアップが表示されるようにしたいですな…
そのため次に、ポップアップ用のコントロールを配置していきます。
２．以下のような、ポップアップ用のコントロールを配置していきます。
- 画面全体に四角形（黒色・透過あり）
- ポップアップ用の四角形（白色等）
- ポップアップに表示するテキスト
- ヘッダーに表示するテキスト
- ポップアップを閉じる×ボタン
※コントロール名は、分かりやすい名前に変更しておきます。
３．「ツリービュー」で、配置したポップアップ用のコントロールを「Ctrl」キーを押しながら全て選択し、「右クリック」＞「グループ」で、グループ化します。
※作成したグループも、分かりやすい名前に変更しておきます。
４．作成したグループのVisibleプロパティを変数で、true/falseに切り替えることで、ポップアップの表示/非表示を制御します。
ひとまず、関数式（trueが入っている部分）を削除し、ポップアップを非表示にしておきます。
ポップアップのVisibleで、表示/非表示を切り替えるため、次に変数を作成していきます。
Power Appsの変数やコレクションについては、以下の記事も参考にしてください。
５．ギャラリーの情報アイコンの「OnSelect」プロパティを以下のように編集します。
UpdateContext({locBrowseDetailPopup: true})
６．作成した変数を、ポップアップのVisibleプロパティに設定します。
locBrowseDetailPopup
７．プレビューでギャラリーの情報ボタンをクリックし、テストしてみましょう。
以下（↓）のように、ポップアップが表示されればOKです。
「変数タブ」＞「コンテキスト変数」＞「locBrowseDetailPopup」で、「三点リーダー（…）」＞「ビューブール値」を選択し、変数に入っている値を確認できます。
ギャラリーの情報ボタンをクリックした際は、以下のように、ポップアップ用の変数にtrueの値が入っていることが確認できます。
ポップアップのグループの「Visible」プロパティにもこの変数が設定されているので、Visible=Trueになり、ポップアップが表示されたのですな！
８．同様の方法で、ポップアップの×ボタンの「OnSelect」プロパティにも、ポップアップ用の変数が非表示（false）になるよう実装します。
UpdateContext({locBrowseDetailPopup: false})
９．これで、テストしてみます。
情報ボタンをクリックすると、ポップアップが表示され、ポップアップの×ボタンをクリックすると、ポップアップが非表示になるように実装できていればOKです。
これが、基本的な変数を使ったポップアップの実装方法です。
ポップアップにギャラリーの詳細を表示する方法
実装の概要
次に、ポップアップ画面に、ギャラリーで選択したデータの詳細を表示してみます。
これも、変数を使って以下の手順で実現できます。
- ギャラリーでアイコンをクリックしたときに、ギャラリーで選択したデータを、別の変数に格納する。
- ポップアップのテキストで、格納した変数のデータを表示する。
それでは、具体的な実装の手順を解説していきます！
具体的な実装手順
ポップアップを表示した際に、ポップアップ上にギャラリーで選択したデータの詳細情報を表示したい場合、これも変数に格納しておくと便利です。
１．情報ボタンの「OnSelect」プロパティを編集し、ギャラリーで選択したデータを格納する別の変数を追加します。
UpdateContext(
{
locBrowseDetailPopup: true,
locBrowseDetailData: ThisItem
}
)
今回は、ギャラリーで選択したデータを変数に入れたいので、値は「ThisItem」と書けばOKです。
２．関数式を変更したら、情報アイコンをクリックしてみましょう。
３．実際に、設定した変数にどのようにデータが入っているかを、「変数タブ」で確認します。
変数をみると以下のように、ギャラリーで選択したレコードのデータが入っています。
４．ポップアップで表示するテキストの「Text」プロパティを、以下のように編集してみます。
locBrowseDetailData.申請日
上記のように、申請日のデータが表示されます。他のデータも同様に表示してみましょう。
５．以下のようにデータを表示してみました。
"申請日：" & locBrowseDetailData.申請日 & Char(10) &
"申請者：" & locBrowseDetailData.申請者.DisplayName & Char(10) &
"カテゴリ：" & locBrowseDetailData.カテゴリ.Value & Char(10) &
"申請件名：" & locBrowseDetailData.申請件名 & Char(10) &
"ステータス：" & locBrowseDetailData.ステータス.Value & Char(10) &
"申請内容：" & locBrowseDetailData.申請内容 & Char(10) 
６．テストしてみましょう。
ギャラリーで、任意のデータの情報ボタンをクリックします。
以下（↓）のように、ギャラリーで選択したデータの詳細が表示できたらOKです。
ポップアップで詳細データを表示する実装ができましたぞ！
まとめ
この記事では、Power Appsで変数を使って、ポップアップ機能を実装する方法について解説しました。
Power Appsで、ポップアップ（モーダル）を実装したい場合、ポップアップ用の変数で、true/falseを切り替えて、「Visible」プロパティを制御します。
ギャラリーで選択した詳細データを、ポップアップで表示したい場合は、ギャラリーのデータを、別の変数に格納して表示しましょう。
変数を使いこなすことで、様々なアプリの実装が実現できるので、ぜひ参考にしてください！
