Power Appsのギャラリーコントロール。リスト表示の基本と検索・選択との組み合わせ

2026年3月16日 2026年3月16日

ギャラリーコントロールはPower Appsで一覧表示を作るときに使う、最も基本的なコントロールです。SharePointリストのデータを並べて見せる、タップした行の詳細を表示するといった操作の起点になります。

ギャラリーの基本設定

ギャラリーコントロールを追加したら、まずItemsプロパティにデータソースを設定します。SharePointリストを直接指定するだけで、リストの全件が一覧表示されます。

Items = タスク管理リスト

ギャラリーの左側にある鉛筆アイコン（テンプレートの編集）をクリックすると、1行分のテンプレートを編集できる状態になります。ここに配置したラベルやアイコンがすべての行に繰り返し表示されます。

テンプレート内のラベルでSharePointリストの値を表示するにはThisItemを使います。

// タイトルを表示するラベルのTextプロパティ
ThisItem.タイトル

// 担当者を表示するラベルのTextプロパティ
ThisItem.担当者名

// 日付を表示するラベルのTextプロパティ
Text(ThisItem.期日, "yyyy/mm/dd")

ThisItemは「現在この行のデータ」を指すキーワードです。ギャラリーが1行ずつデータをループして表示するとき、その行のレコードがThisItemに入ります。

ギャラリーで行をタップすると、その行がギャラリーのSelectedプロパティに格納されます。タップした行の値を別の場所に表示したいときはこれを使います。

// 選択された行のタイトルを別のラベルに表示
ギャラリー1.Selected.タイトル

さらに一歩進めると、タップしたときに詳細画面に遷移してその行のデータを引き渡すことができます。Navigate関数の第3引数にSelectedを渡す方法です。

// ギャラリーのOnSelectプロパティ
Navigate(詳細画面, ScreenTransition.Cover, {selectedRecord: ThisItem})

画面遷移とデータの受け渡しの詳しい解説はNavigate関数の解説にまとめています。ギャラリーとNavigateはセットで覚えると実用的なアプリが作れます。

どの行を選んでいるかを視覚的に示したい場合は、ギャラリーのテンプレート背景色をSelectedの状態で切り替えます。

// テンプレートのFillプロパティ
If(ThisItem.IsSelected, RGBA(0, 120, 212, 0.1), RGBA(0, 0, 0, 0))

IsSelectedはその行が現在選択されているかを示すプロパティです。選択時だけ薄い青背景にするだけで、ユーザーが今どの行を選んでいるか一目でわかります。

テキスト入力コントロールを検索ボックスとして使い、ギャラリーのItemsプロパティにSearch関数を組み合わせると、文字を入力するたびに一覧が絞り込まれます。

Items = Search(タスク管理リスト, 検索ボックス.Text, "タイトル", "担当者名")

Search関数の第2引数に検索ボックスの入力値を渡し、第3引数以降に検索対象のフィールド名を指定します。複数のフィールドを指定すると、そのうちいずれかに一致する行を返します。

ドロップダウンで選んだステータスに一致する行だけを表示したい場合はFilter関数を使います。Search関数と組み合わせることもできます。

Items = Filter(
    Search(タスク管理リスト, 検索ボックス.Text, "タイトル"),
    ステータス = ステータスドロップダウン.Selected.Value
)

検索と絞り込みを同時に使うときは、Filter関数の第1引数にSearch関数をネストします。Filter・Search・LookUpの使い分けや委任の注意点についてはFilter・Search・LookUp関数の解説を参照してください。

SharePointリストのレコード数が500件を超えると、Filter関数やSearch関数を使ったときに委任の警告（黄色い三角マーク）が出ることがあります。

委任の警告が出ると、実際には条件に合うデータが500件以上あってもアプリ側で最初の500件しか取得できず、検索結果が不完全になります。リストが大きくなりそうな場合は早めに対策が必要です。委任の警告の意味と対処法は委任の警告の解説で詳しく説明しています。

ギャラリーはテンプレートに自由にコントロールを配置できます。ラベルだけでなくボタン・アイコン・画像なども置けます。ただし詰め込みすぎると視認性が下がります。

私が現場で作ったアプリでは、ギャラリーの1行に表示するのはタイトル・ステータス・担当者の3つだけにしています。詳細はタップしてから詳細画面で見せる設計にすることで、一覧がスッキリしてユーザーが迷いません。Power Appsの見た目と使いやすさについてはUI/UX設計の考え方も参考にしてください。

ギャラリーコントロールの要点はItemsプロパティ・ThisItem・Selectedの3つです。これを押さえると、一覧表示から検索・詳細遷移まで一通りのフローが作れます。

最初はシンプルなリスト表示から始めて、慣れてきたら検索ボックスや絞り込みを追加していくのがおすすめです。アプリ開発の全体像はPower Apps開発の全体マップで整理しています。

この記事を書いた人

物流会社の非エンジニアサラリーマン。Power Platformを独学で学び、営業職からDX担当に職務変更し、社内ツールを作っています。個人事業のデザイン業務にもPower Platformを活用し、市民開発.comの運営者として、アプリ開発やDX推進の経験を発信中。