Power Apps のギャラリーコントロールは、データの表示・絞り込み・選択・編集・応用UI まで、アプリ開発のあらゆる場面で登場します。この記事では、ギャラリーを使いこなすために知っておくべき内容を5つのテーマに整理して解説します。各テーマの詳細記事へのリンクも掲載しているので、自分の課題に合った記事を選んで読み進めてください。
ギャラリーコントロールとは
ギャラリーコントロールは、データソースのレコードを一覧表示するためのコントロールです。SharePoint リスト・Dataverse テーブル・コレクションなどを Items プロパティに設定するだけで、データを繰り返し表示できます。
ギャラリーの特徴は、テンプレートと呼ばれる1行分のデザインを1つ作るだけで、全行に同じレイアウトが適用されるという点です。テンプレートを変更すれば全行に反映されるため、デザイン変更が簡単です。ギャラリーコントロールの基本的な使い方はギャラリーコントロールの基礎記事でも確認できます。
この記事ではギャラリーを5つのテーマに分けて解説します。テーマ①表示・レイアウト、テーマ②フィルター・絞り込み、テーマ③選択と変数管理、テーマ④編集グリッド、テーマ⑤応用UIの順に進みます。
テーマ①：表示・レイアウト
ギャラリーの見た目はテンプレート内のコントロールで自由にカスタマイズできます。Power Apps が用意しているデフォルトのレイアウトには Image・Title・Subtitle・Body の4種類があり、どれを選ぶかによって初期配置が変わります。
各フィールドのバインド変更（どのデータソース列を表示するか）はプロパティパネルから直感的に設定できます。ルックアップ列のドット記法や、複数列を連結して表示する方法など、実際の業務でよく使うカスタマイズをギャラリーのレイアウト設定記事でまとめています。
選択された行をハイライト表示する方法も押さえておきたいポイントです。TemplateFill プロパティに条件式を書くことで選択行の背景色を変えられますが、Gallery.Selected を使ったパターンと varRecord を使ったパターンでは挙動が異なります。TemplateFill の基本的な設定方法はギャラリーで選択行をハイライトする記事で解説しています。
テーマ②：フィルター・絞り込み
ギャラリーに表示するデータを絞り込むには Filter 関数を使います。Filter 関数は条件が true になる行だけを返します。ドロップダウンやテキスト入力と連動させることで、ユーザーが操作しながらリアルタイムに絞り込めるUIが作れます。
Filter 関数の基本構文とドロップダウン連動の書き方はFilter 関数入門の記事で詳しく解説しています。
ドロップダウンに全件表示のための選択肢（すべて）を追加したい場合は、IsBlank を使った条件分岐が定番パターンです。Table 関数で手動テーブルを作って Distinct と結合する方法も含めて、全件表示の追加方法の記事でまとめています。
And・Or・範囲指定・StartsWith を組み合わせた複合フィルターの書き方は複合フィルターの記事に詳しいです。委任の制約も記事内で触れています。
Dataverse のルックアップ列をフィルター条件にする場合は、文字列ではなく GUID による一致が必要です。これは SharePoint のルックアップ列とは仕組みが異なります。Dataverse フィルターの書き方の記事でその仕組みを解説しています。
テーマ③：選択と変数管理
ギャラリーで選択したレコードをフォームに渡す方法として、Gallery.Selected を使うのはよくある間違いです。Gallery.Selected は便利に見えますが、新規入力モードとの組み合わせで選択ズレが発生し、保存後にフォームが前のレコードに戻るというバグが起きます。
これを解決するのが varRecord 変数を使ったパターンです。OnSelect で UpdateContext({varRecord: ThisItem}) を実行して選択レコードを変数に格納し、フォームの Item は varRecord を参照させます。詳しい置き換え手順はGallery.Selected を使ってはいけない理由と varRecord への置き換え方の記事で解説しています。
varRecord を導入した後の新規追加・保存後のレコード選択・プレースホルダーUIの実装パターンまでをまとめた記事がギャラリーとフォームを変数でつなぐ記事です。OnSuccess での LastSubmit 活用など、実用的な実装パターンが一通り揃っています。
テーマ④：編集グリッド
Excel のように行を直接編集できるUIが编集グリッドです。ギャラリーテンプレート内に TextInput や Dropdown を配置して、コレクションを中間バッファとして使うのが基本設計です。
ClearCollect でコレクションを初期化する際の列型定義のコツや、DisplayMode プロパティで編集・閲覧モードを切り替える方法は編集グリッドの基本設計の記事でまとめています。
行ごとの保存（Patch）・IsNew フラグを使った新規行と既存行の判別・削除確認ダイアログ・ForAll を使った一括保存の実装パターンは編集グリッドのデータ保存の記事で解説しています。
テーマ⑤：応用UI
ギャラリーの応用パターンとして、フレキシブル高さ・展開折りたたみ・複数選択・タブUIの4つを紹介します。
フレキシブル高さギャラリー
通常ギャラリーは行の高さが固定ですが、フレキシブル高さギャラリーは内容量に応じて行の高さが自動で変わります。コメント一覧や説明文など、テキスト量がばらつくデータに向いています。AutoHeight プロパティや TemplateSize の仕組みはフレキシブル高さギャラリー入門の記事で解説しています。
展開・折りたたみ（アコーディオン）
行をクリックすると詳細が展開されるアコーディオンUIは、Toggle・ネストギャラリー・コレクション Patch の3パターンで実装できます。行ごとに独立した状態を持てる理由と、Expand All / Collapse All の実装方法は展開・折りたたみの実装パターンの記事で詳しく解説しています。
複数選択チェックボックス
ギャラリーの複数行にチェックを入れて一括操作するUIは、Gallery.AllItems プロパティを使って実現します。選択済みアイテムの取得・選択数の表示・Select All / Deselect All の実装は複数選択チェックボックスの実装記事でまとめています。選択中のときだけアクションエリアを表示するコンテナを使ったUIの作り方は複数選択時のアクションエリアの記事で解説しています。
タブUI
モダンコントロールのタブが制限的な場面では、ギャラリーをタブバーとして使うパターンが有効です。コレクションでタブ一覧を管理して varSelectedTab で切り替える設計は、デザインの自由度が高くレスポンシブ対応も容易です。実装の流れ全体はギャラリーをタブUIとして使う記事で解説しています。
📷 画像生成プロンプト：白背景のクリーンな概念図。ギャラリーの5つの応用パターン（フレキシブル高さ・アコーディオン・複数選択・タブUI・編集グリッド）を5つのアイコンと短いキャプションで横並びに示すインフォグラフィック風の図解。各パターンは独立したブロックとして表現し、矢印やつながりは不要。白背景・シンプル・クリーン。
まとめ：ギャラリーの5テーマ早見表
| テーマ | 内容 | 主な記事 |
|---|---|---|
| ① 表示・レイアウト | フィールドのバインド・ハイライト | レイアウト設定・TemplateFill |
| ② フィルター | 単一・複合・全件表示・Dataverse | Filter基本〜Dataverseフィルター |
| ③ 選択と変数管理 | varRecord・フォーム連携 | varRecord・ギャラリー×フォーム |
| ④ 編集グリッド | 行内編集・保存・削除・一括保存 | 編集グリッド基本・保存パターン |
| ⑤ 応用UI | フレキシブル・折りたたみ・複数選択・タブ | グループE各記事 |
ギャラリーコントロールは Power Apps の中でも使う頻度が特に高い部品です。表示から始めて、フィルター・変数管理・編集グリッドと段階的に習得していくと、できることの幅が大きく広がります。一つひとつ手を動かしながら積み重ねていきましょう。
