Power Appsで表示順を変更したい「再配列」

先日Power Appsでポップアップ画面を表示する方法を公開しましたが、YouTubeの方でリスナーさんからコメントを頂きました。
内容としては、「ポップアップ作成後に追加したラベルがポップアップより上に表示されてしまい、ポップアップで隠すことができない」とうもの。
解決方法についてはコメントの方に返信しておりますが、ポップアップ以外でも今後必要になる場合があるかもしれないので、今回「表示順を変更する方法」についてまとめていきたいと思います。

参考として動画での紹介もしています。

参考画像（この状態になっている）

発生原因

今回の事象の原因はレイアウトの表示順です。
Power Appsに限らずPower PointやExcelも同じですが、画像などを貼り付けると通常最新のものが上になるようにレイヤーが追加されています。
このレイヤーは下位のものから描画されるため、重なった場合は上位のレイヤー画像が表示され、下位のレイヤー画像は見えなくなってしまいます。
今回のPower Appsでも同様のことが起きており、ポップアップ作成後にラベルを追加したためレイヤーがポップアップより上位になっており、ポップアップを上書く形でラベルが描画されたものです。

解決策

では、実際の解決策を紹介します。
方法は簡単で、レイヤーの順番を変えてあげ、ポップアップが上位のレイヤーになるように変更を行います。

• ツリービューを確認する

Power Appsの編集画面の左側に表示される「ツリービュー」を確認し、現在の表示順を確認します。表示順はツリービューの下から順番に表示されるようになっております。
私の場合はポップアップ画面をグループ化しているため「Group」というのがポップアップになり、その上に「Label4」というLabelがいるため、ポップアップ画面で隠すことができなくなっています。



• 再配列を行う

表示順を確認できたら移動させたいコントロールを「右クリック」もしくは「右の三点マークをクリック」をします。すると選択項目が表示されるので、「再配列」の位置までカーソルを移動させます。
するとさらに候補が表示されるので、選択したコントロールの移動を行います。



今回はGroupつまりポップアップを最上位に表示させたいので、Groupを右クリックして「再配列」、「最全面へ移動」を選択します。



すると下記の画像のように順番が入れ替わります。この状態でポップアップ表示を行うと、今までポップアップ画面の上に表示されてしまっていたラベルが消えていることが確認できます。

以上の手順でコントロールの表示順を変更することができます。

結果確認

先ほどGroupの配置を変更したことにより、Label4のテキストがポップアップ画面で隠れるように修正できています。
念のため確認をしておきます。

1. ポップアップ画面あり

Label4のテキストはポップアップ画面を表示すると見えない状態になっています。


2. ポップアップ画面なし

ポップアップ画面を消すと、Label4のテキストが表示され見えるようになるので、正しく修正できていることが分かります。

ポップアップ画面にかかわらずPower Apppsで画面を作成する際には、配列を意識する必要があります。
通常ラベルなどを追加すると自動的に上位に配置されてしまうので、配置後にそれぞれの上下関係を意識し、上に表示したいものをツリービューで上位にくるよう配置変更をしていきます。

さいごに

ということで今回はPower Appsの再配列について紹介しました。
カスタマイズを重ねていくと表示順を弄らないといけないときが来るので、この再配列のやり方を覚えておくと便利です！
是非参考にしてみてください。今回はこの辺で、ではまた！