Power Apps シンプルなポップアップ（ダイアログ）を構築する方法｜グループよりコンテナがおすすめ

ポップアップのつくり方の質問をもらったのでメモ。簡単なポップアップのつくり方を紹介。

スポンサーリンク

グループよりコンテナがおすすめ

ポップアップ内のコントロールをまとめるとき、グループ化する方法とコンテナを使う方法があって、個人的にはコンテナがおすすめ。

↓グループ化で作成したポップアップ。

↓コンテナで作成したポップアップ、こちらが個人的におすすめ。

理由はこんな感じで絶対的な理由があるわけではないので、どちらで構築するかは好みで。

  • Visibleの切り替えがコンテナのみですむ
  • ポップアップ内のコントロールを相対座標で指定できる
  • ポップアップ内のコントロールが増えてきたとき、コントロール整理が楽
  • 画面上でグループ内のコントロールを選択しようとすると、グループが選択されてしまう
  • 個人的にコンテナの方が好き

この記事ではコンテナを使用して、シンプルなポップアップを作る方法を紹介。

構築

見た目の構築

まずは画面にコンテナを追加し、
XとYを0に、WidthとHeightを親（画面）に合わせる。
そしてFillにRGBAで黒の透過を指定。透過の度合い（例は0.6）は好みで。
続いて四角形を追加し、
Fillを白にし、高さと幅は任意、XとYは画面中央に配置されるよう式を入力。
// 横方向に画面中央に配置される式
(Parent.Width - Self.Width) / 2
// 縦方向に画面中央に配置される式
(Parent.Height - Self.Height) / 2
ボタンを追加し、こちらも高さと幅は任意で、Xは画面中央に配置されるよう式を入力、
Yは先ほど追加した四角形から任意の幅（例では30）内側に配置されるよう設定する。
// X
(Parent.Width - Self.Width) / 2
// Y
【四角形の名前】.Y + 【四角形の名前】.Height - Self.Height - 30
// サンプルの式
Rectangle.Y + Rectangle.Height - Self.Height - 30
最後にラベルを追加し、X, Y, Height, Widthのすべてを四角形に合わせ、文字を中央寄せにして、パディングで位置を調整する（例では中央よりちょっと上）。
ボタンをラベルより前面に持ってきて、見た目の構築は完了。

動作の構築

まずはOKボタンに以下の式を入力し、ボタン押下時に変数（例では「showPopup」）にfalseを代入する。
UpdateContext({showPopup:false});
そしたらコンテナのVisibleに変数「showPopup」を入力。
ポップアップを表示するコントロール（例では「ポップアップ表示」ボタン）の押下処理（OnSelect）などで、変数「showPopup」にtrueを代入する。

以上で動作の構築も完了。

動作確認

ポップアップ表示ボタンを押すと、
ポップアップが表示され、OKボタンを押すと、
ポップアップは消える。

おまけ1：×ボタン（閉じるボタン）を追加したい場合

ポップアップコンテナの中にアイコン「キャンセル」を追加し、
Xを四角形の内側に配置されるよう設定し、
Yも四角形の内側に配置されるよう設定（例ではX、Yともに15内側）。
// X
【四角形の名前】.X + 【四角形の名前】.Width - Self.Width - 15
// Y
【四角形の名前】.Y + 15

// 例のXとY
Rectangle.X + Rectangle.Width - Self.Width - 15
Rectangle.Y + 15
OnSelectで変数「showPopup」にfalseを代入するよう式を入力し、完成。

おまけ2：領域外をクリックしたときにポップアップを閉じたい場合

コンテナに四角形を挿入し、
最背面に移動。
XとYに0を設定し、HeightとWidthは親（コンテナ）を参照するよう設定。
色を透明にし、
OnSelectで変数「showPopup」にfalseを代入するよう式を入力し、完成。
ポップアップ表示中に領域外をクリックすると、
ポップアップは消える。

おまけ3：追加したコントロールにわかりやすい名前を付ける

最後に追加したコントロールにわかりやすい名前を付けると、他の人に引き継いだときに優しいかも。

コメント

タイトルとURLをコピーしました