Flexible Height Gallery (高さ可変ギャラリー)のススメ

はじめに

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に変更してあげると、下記サンプルのような見た目になります。

完成しました！
Flexible height Galleryを利用した、Airline status board app✈️ with #PowerApps#PowerListChallenge pic.twitter.com/SyMqGcVkbK

— Hiro (@mofumofu_dance) January 8, 2020

おまけ

詳細情報の表示にはContainerコントロールを利用するのが便利です。このContainerコントロールは以前はEnhanced Groupコントロールと呼ばれていたもので、基本的には複数のコントロールのグループ化です。
便利なのは、Container内に配置したコントロールは、Containerの表示切替だけで、表示/非表示されるところです。チェックボックスで切替るだけで、すべてのラベルに表示/非表示の設定を行う必要はありません。

Container controlはまだプレビュー機能ですので、本番稼働するようなアプリではGA後に利用されることをお薦めします。

このようにありもののコントロールをうまく活用することで、画面遷移を減らしたり、ユーザーに見やすいアプリを作ることができますので、ぜひトライしてみてください！

追記

@hrfmjp 太田さんからコメントいただいたので、詳細部分を動的に変更した場合の挙動も載せておきます。
この場合はSin型で高さを時間に応じて変えていますが、ギャラリーの行の高さがそれに応答している様子がわかります。