はじめに
Power Appsで普通にリストアプリを作成した際、多くのApp makerが悩むのが、「どの情報を一覧に表示するか」かと思います。
表示内容が多いと、データの特定は容易になりますが、一覧性が下がります。一方で一覧性を確保するために情報を減らすと、誤選択が増えます。(ユーザーはアイテムをクリックし、詳細画面で内容を確認し、違ったらもどってまた探す)
このような状況を緩和する一つのデザインとしてFlexible Height Galleryの利用を紹介します。
Flexible Height Gallery?
Galleryコントロールを追加する際に、高さ可変ギャラリーという選択肢が表示されます。
このコントロールは、各行に含まれるコントロールの高さの合計、正確には一番下に配置された、表示対象のコントロールのY+Heightに応じて、行全体の高さが決まるというものです。
なお、非表示のコントロールは、高さには寄与しません。
このコントロールの詳細は Docsをご覧ください。
行内の表示の切り替え
ここからが今回の本題です。
一覧としての表示数を保ちながら、もう少し詳細な情報を、画面遷移なく表示する一つの方法として、高さ可変ギャラリーを利用してみます。
ポイントは「表示対象のコントロールのY+Heightの最大」です。
- 詳細情報を行の中に表示すると、全体が間延びして1ページの件数が少なくなる
- 一覧だけだと表示できる情報に限りがある
この2つの両立を、詳細情報の表示切替で実現します。
最も簡単にはチェックボックスのOn/Offで表示状態を変更できます。
チェックボックスのOn/Off CheckboxN.Value を詳細情報部分のVisibleプロパティにそのまま適用しましょう。
すると、チェックされているときは詳細が表示されて、チェックをはずしたら詳細が隠れる という挙動を実現できます。
これだけで、一覧の中で開閉があるようなコントロールが実現できました。
あとはチェックボックスのプロパティにあるすべてのColor型の変数をTransparentに変更してあげると、下記サンプルのような見た目になります。
完成しました！
— Hiro (@mofumofu_dance) January 8, 2020
Flexible height Galleryを利用した、Airline status board app✈️ with #PowerApps#PowerListChallenge pic.twitter.com/SyMqGcVkbK
おまけ
詳細情報の表示にはContainerコントロールを利用するのが便利です。このContainerコントロールは以前はEnhanced Groupコントロールと呼ばれていたもので、基本的には複数のコントロールのグループ化です。
便利なのは、Container内に配置したコントロールは、Containerの表示切替だけで、表示/非表示されるところです。チェックボックスで切替るだけで、すべてのラベルに表示/非表示の設定を行う必要はありません。
Container controlはまだプレビュー機能ですので、本番稼働するようなアプリではGA後に利用されることをお薦めします。
このようにありもののコントロールをうまく活用することで、画面遷移を減らしたり、ユーザーに見やすいアプリを作ることができますので、ぜひトライしてみてください！
追記
@hrfmjp 太田さんからコメントいただいたので、詳細部分を動的に変更した場合の挙動も載せておきます。
この場合はSin型で高さを時間に応じて変えていますが、ギャラリーの行の高さがそれに応答している様子がわかります。
