Power Appsでポップアップ画面を表示する方法
Power Appsでポップアップ画面を表示する方法
最近はPower Automate以外にもPower Appsにも力を入れており、会社では色々アプリ作成に挑戦しています。
その中でも標準コントロールにはないポップアップ画面を自作することで機能の幅を広げることができ、結構重宝しているので今回はこちらで紹介したいと思います。
アプリの画面内で完結できないけど別画面にするほどではない。など、悩んでいることないでしょうか。
AndroidやiOSなどのスマホアプリでは当たり前になっているポップアップ機能はなんとPowerAppsには標準搭載されておらず、自分で構築しないといけません。
スマホアプリを作成しているひとであれば何となく作り方がわかると思いますが、ローコード開発で初めてPowerAppsを触ってアプリ開発に慣れていない人にとっては１から構築するにはかなり難易度の高いものかと思います。そのため、今回はポップアップ画面の作成と表示のコントロールの方法をまとめましたので参考にしていただければと思います。
なお本内容はYoutubeにもアップロードしているので、是非参考にしてみてください。
画面の作成
先に手順だけ説明しておくと、透過グレーと白などのLabelを画面全体にはめ込み、その上に文字を表示するためのLabelなどを用意。ポップアップ画面で一律表示・非表示したいコントロールをすべてグループ化を行います。
グループ化を行う理由については、表示・非表示をするためのVisibleの値を一つ一つ入力するのが大変なのと管理のしやすさの観点になります。文字表示くらいなら別にグループ化しなくても制御は可能です。
では早速画面を作成していきたいと思います。
トップラベルとボタンだけはすでに配置済みです。
- 透過グレーのLabel
- 白のLabel
- メッセージ用のLabel
- ポップアップ画面を閉じるボタン
- 閉じるボタンで変数設定
- ポップアップ画面の用コントロールをグループ化
- グループ全体のVisibleに変数を設定
- ポップアップ表示ボタンで変数設定
ポップアップ画面の強調と表示している間に下画面を操作できなくするために、ポップアップ画面の下地となるlabelを配置します。
Labelを画面全体に被さるように配置して、背景色を設定します。
ただ、通常の状態で色を設定すると、透過しないためポップアップ画面の下画面が一切見えない状態になってしまいます。なので「カスタム」から「A」の値を75あたりに設定、これにより若干透過させることができます。
ポップアップ画面の下地を作成できたのでメインとなる部分を作成します。
Labelを追加し、任意のサイズと位置を設定します。今回は下記のように配置しています。
この部分は必要に応じてLabel以外も追加することになりますが、今回はシンプルなポップアップ画面を紹介するのでメッセージのみにします。
先程作成した白のLabel部分に、新しいLabelを追加します。位置や文字サイズは任意にしますが、私は下記のように設定しました。
ポップアップ画面を閉じるボタンも用意しないといけません。なので×ボタンを配置します。
配置箇所は任意のため、それっぽい場所に配置しサイズを調整をします。
ポップアップ画面が作成できたら、開いたり閉じたりするための仕組みを導入する必要があります。
開閉の仕組みには変数で制御を行います。そのためにまず配置した閉じるボタンクリックアクションに変数isPopupにfalse設定する関数を設定しておきます。
先程の工程で変数に値を設定できるようになったので、そのPopup変数を開閉したいコントロール全体に設定をしていきます。
一つ一つ設定していくのでも良いのですが、制御するコントロールが多い場合にはグループ化して一括で制御するほうが簡単です。そのためまずはグループ化する方法から説明します。
一括制御したいコントロールはシフトキーを押しながら選択します。その後右クリックでグループ化を選択することでグループ化することが可能です。
制御したいコントロールをグループ化できたので、グループ全体のvisibleの値に閉じるボタンで設定していたisPopup変数を設定します。
最後にポップアップ画面を表示するためのボタンに変数制御を組み込んでいきます。内容としては閉じるボタンに組み込んだものと同様で値をtrueにします。
表示ボタンを押下して画面が表示されるか、閉じるボタンで画面が消えるかを確認し、問題なく機能することを確認します。
さいごに
Power Appsは簡単にアプリを開発できるのですが、ポップアップのような細かい機能自体はデフォルトでは用意されておらず自分で作成しないといけません。
ある程度アプリを開発したことのある人であればそこまで苦労せずに実現できると思いますが、そうでない人もPower Appsを使うと思うので、少し優しくないなぁと感じます。。。それでも基本的な動作は自動で作成してくれたりと便利な機能ではあるので何とも言えないですが。
とはいえ、今回のポップアップ画面についてはそこまで複雑なものではないので、ぜひ挑戦してプラスαの機能を実装してみてください。今回はこのへんで、ではまた！
コメント
コメントを投稿