Help us understand the problem. What is going on with this article?

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

はじめに

Power Appsで普通にリストアプリを作成した際、多くのApp makerが悩むのが、「どの情報を一覧に表示するか」かと思います。
表示内容が多いと、データの特定は容易になりますが、一覧性が下がります。一方で一覧性を確保するために情報を減らすと、誤選択が増えます。(ユーザーはアイテムをクリックし、詳細画面で内容を確認し、違ったらもどってまた探す)
このような状況を緩和する一つのデザインとしてFlexible Height Galleryの利用を紹介します。

Flexible Height Gallery?

Galleryコントロールを追加する際に、高さ可変ギャラリーという選択肢が表示されます。
このコントロールは、各行に含まれるコントロールの高さの合計、正確には一番下に配置された、表示対象のコントロールのY+Heightに応じて、行全体の高さが決まるというものです。
なお、非表示のコントロールは、高さには寄与しません。

このコントロールの詳細は Docsをご覧ください。

image.png

行内の表示の切り替え

ここからが今回の本題です。
一覧としての表示数を保ちながら、もう少し詳細な情報を、画面遷移なく表示する一つの方法として、高さ可変ギャラリーを利用してみます。

ポイントは「表示対象のコントロールのY+Heightの最大」です。

  • 詳細情報を行の中に表示すると、全体が間延びして1ページの件数が少なくなる
  • 一覧だけだと表示できる情報に限りがある

この2つの両立を、詳細情報の表示切替で実現します。

最も簡単にはチェックボックスのOn/Offで表示状態を変更できます。

image.png

チェックボックスのOn/Off CheckboxN.Value を詳細情報部分のVisibleプロパティにそのまま適用しましょう。
すると、チェックされているときは詳細が表示されて、チェックをはずしたら詳細が隠れる という挙動を実現できます。

ezgif.com-video-to-gif.gif

これだけで、一覧の中で開閉があるようなコントロールが実現できました。
あとはチェックボックスのプロパティにあるすべてのColor型の変数をTransparentに変更してあげると、下記サンプルのような見た目になります。

おまけ

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

image.png

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

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

追記

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away