PowerAppsのギャラリーとは? Itemsと使い方の基本

PowerApps ギャラリーとは? Itemsと使い方の基本のアイキャッチ

Power Appsで一覧画面を作ろうとして、ギャラリーを置いた瞬間に手が止まることってありますよね。Items、ThisItem、Selectedが出てきて、「結局どこを直せば表示が変わるの?」となりがちです。

PowerApps ギャラリーは、一覧画面を作るための中心コントロールです。Itemsで表示データを決め、ThisItemで1行の中身を表示し、Selectedで選んだ行をフォームや詳細画面へ渡す。

この3つで見ると、ギャラリーの理解がかなり楽になります。

目次

PowerApps ギャラリーは一覧表示の中心になるコントロール

A woman interacts with a productivity app on her smartphone at a desk setup.

PowerApps ギャラリーを理解する最初のポイントは、「複数件のデータを、同じレイアウトで繰り返し表示する部品」だと見ることです。ここでは、ギャラリーの役割と、フォームやテーブルとの違いから整理します。

ギャラリーは複数レコードを並べる器

A control that contains other controls and shows a set of data.

Microsoft Learn

ギャラリーは、SharePointリストやDataverseテーブルなどのデータソースから、複数のレコードを一覧表示するコントロールです。

たとえば問い合わせ管理アプリなら、問い合わせのタイトル、担当者、ステータス、期限を1行ずつ並べる画面に向いています。

画面にギャラリーを置くだけでは、まだ空の器です。そこにItemsプロパティで「何を表示するか」を指定することで、一覧画面として動き始めます。

フォームやテーブルとは役割が違う

Power Appsには、データを表示するコントロールがいくつかあります。ギャラリー、フォーム、データテーブル、Tableモダンコントロールは似ていますが、得意な役割が違います。

コントロール得意なことよく使う場面
ギャラリー複数件を自由なレイアウトで表示する一覧画面、カード一覧、検索結果
フォーム1件の詳細表示や編集をする詳細画面、編集画面、新規作成画面
データテーブル表形式で列を並べる簡易的な一覧確認
Tableモダンコントロール表やリスト形式で表示する標準的な表UIを早く作りたいとき

一覧をカードっぽく見せたい、行の中にボタンやアイコンを置きたい、選択した行から詳細画面へ移動したい。こういう場面では、ギャラリーが扱いやすいです。

一方で、1件のレコードを編集するならフォームが向いています。一覧はギャラリー、1件の表示や編集はフォームと分けると、画面設計で迷いにくくなりますよ。

テンプレートを直すと全行に反映される

ギャラリーには「テンプレート」という考え方があります。ギャラリー内の1行目にラベルや画像、アイコンを置いて調整すると、その同じレイアウトが他の行にも反映されます。

When you change the first item in a gallery, the same change automatically applies to all other items.

Microsoft Learn

たとえば、1行目のタイトルラベルを太字にすれば、2行目以降のタイトルも太字になります。ステータス用のラベルを追加すれば、すべての行にステータス欄が出ます。

ポイント

ギャラリーは「1行の見た目を作ると、それがデータ件数分だけ繰り返される」と考えるとわかりやすいです。

最初は、ギャラリーを「一覧の箱」として見れば十分です。次に見るべきなのが、その箱へ何を流し込むかを決めるItemsです。

Itemsを見ればギャラリーに出るデータがわかる

Abstract visualization of data analytics with graphs and charts showing dynamic growth.

ギャラリーで表示がおかしいときは、まずItemsを見ます。Itemsは、ギャラリーに表示するデータの入口です。どのデータソースを表示するか、どんな条件で絞るか、どの順番で並べるかまで、ここで決まります。

Itemsは表示データの入口

Itemsには、データソース名をそのまま書けます。SharePointリストの名前がTasksなら、ギャラリーのItemsに次のように書くと、Tasksのレコードが一覧表示されます。

Tasks

条件を付けたい場合は、Filter関数を組み合わせます。たとえば、未完了のタスクだけ出したいなら、考え方はこうです。

Filter(Tasks, Status.Value = "未完了")

つまり、ギャラリーに何が出るかは画面の見た目ではなく、Itemsの式で決まります。PowerApps ギャラリーで最初に読むべきプロパティはItemsです。

ThisItemは今の1行を指す

Itemsに入ったデータは、ギャラリーの各行へ流れていきます。その「今表示している1行」を指すのがThisItemです。

たとえばギャラリー内のタイトルラベルには、次のように書きます。

ThisItem.Title

ステータス列が選択肢の場合は、アプリのデータ構造によって次のように書くことがあります。

ThisItem.Status.Value

ThisItemは、ギャラリーの外では基本的に使えません。ギャラリーの中にあるラベル、画像、アイコン、ボタンなどが「自分の行のデータ」を読むための言葉です。

ポイント

Itemsは一覧全体、ThisItemはその中の1行です。この関係が見えると、ギャラリー内の式が一気に読みやすくなります。

PowerApps ギャラリーのItemsとThisItemの関係図

検索と絞り込みは委任を意識する

ギャラリーでは、検索ボックスやドロップダウンを使ってItemsを絞り込むことが多いです。ただし、実務データを扱うなら委任を意識したいです。

Power Appsでは、データソース側で処理できる式は委任されます。つまり、SharePointやDataverse側で検索や絞り込みをして、必要な結果だけをアプリに返せます。

反対に、委任できない式を使うと、Power Appsが最初の一部データだけを取得して、アプリ内で処理します。データが少ないうちは気づきませんが、件数が増えると検索結果や一覧にデータ漏れが出る可能性があります。

注意

委任警告が出た式は、「今は動く」だけで安心しないほうがいいです。SharePointやDataverseの件数が増えたとき、一覧に出ないレコードが出ることがあります。

まずは、Itemsをこう読むと整理しやすいです。

  1. どのデータソースを表示しているかを見る
  2. FilterやSearchで何を絞っているかを見る
  3. SortやSortByColumnsで並び順を見る
  4. 青い委任警告が出ていないかを見る

この順番で見ると、ギャラリーが表示されないときも原因を切り分けやすくなります。

ThisItemとSelectedを分けると式が読みやすくなる

A woman browsing app on her smartphone outside with focus on hands and device.

PowerApps ギャラリーでよく混乱するのが、ThisItemとSelectedです。どちらもレコードを指しますが、使う場所が違います。

ThisItemはギャラリーの中、Selectedはギャラリーの外へ渡す選択結果として見ると整理できます。

ThisItemはギャラリーの中で使う

ThisItemは、ギャラリーの各行の中で使います。タイトル、ステータス、期限、担当者など、行ごとに違う値を表示したいときに使うものです。

たとえば、ギャラリー内に「詳細」アイコンを置き、その行のIDを変数に保存したいなら、アイコンのOnSelectにこう書けます。

Set(varSelectedTask, ThisItem)

この式は、「今クリックした行のレコードをvarSelectedTaskに入れる」という意味です。ギャラリー内のボタンやアイコンでは、ThisItemを使うと「押した行」がはっきりします。

Selectedはギャラリーの外へ渡す

Selectedは、ギャラリー全体で現在選ばれているレコードです。フォームのItemプロパティに次のように入れると、選択行の詳細をフォームに表示できます。

GalleryTasks.Selected

詳細画面へ移動するだけなら、ギャラリー内アイコンのOnSelectで次のように書くこともあります。

Navigate(scrDetail)

そして詳細フォームのItemにGalleryTasks.Selectedを入れておけば、選んだ行の詳細が表示されます。小さなアプリならこれでも十分です。

ただし、画面をまたいだり、Itemsが再読み込みされたり、検索条件が変わったりするアプリでは注意が必要です。

選択行を安定させたいなら変数に保存する

The Selected property of the Gallery is a moving target.

Microsoft Learn

Microsoft Learnでは、Gallery.Selectedは変わり得る対象として説明されています。

Itemsが変わったり、Defaultが変わったり、データソース更新が入ったりすると、ユーザーが明示的に選び直していなくてもSelectedが変わる可能性があります。

そのため、詳細画面や編集画面へ渡すレコードを安定させたい場合は、ギャラリー内のボタンやアイコンで変数に保存してから遷移するのが扱いやすいです。

Set(varSelectedTask, ThisItem);
Navigate(scrDetail)

詳細フォームのItemには、次のように入れます。

varSelectedTask
ThisItemとSelectedの違いを示す図解

ThisItemで押した行を取り、変数で保持し、フォームへ渡す。この流れにすると、後から検索条件や並び順を足したときも読みやすいです。

注意

Gallery.Selectedをそのまま使うのが悪いわけではありません。ただ、一覧の再読み込みや条件変更がある画面では、選択行を変数に保存したほうが安全なことがあります。

ThisItemとSelectedの違いは、最初はややこしく感じます。でも「中で使うThisItem、外へ渡すSelected」と覚えるだけで、ギャラリーの式はかなり読みやすくなりますよ。

検索フィルター並び替えは目的から式を選ぶ

A close-up view of a laptop displaying a search engine page.

ギャラリーは、検索や絞り込みを組み合わせると一気に実務アプリらしくなります。ただ、Search、Filter、SortByColumnsをなんとなく混ぜると式が読みにくくなります。まずは目的から使う関数を選びましょう。

検索ボックスはTextInputと組み合わせる

検索ボックスに入力した文字で一覧を絞りたい場合、TextInputとItemsを組み合わせます。たとえばタイトル列を検索するなら、考え方はこうです。

Search(Tasks, txtSearch.Text, "Title")

部分一致のように探したいときはSearchがわかりやすいです。ただし、データソースや列の種類によって委任できるかが変わります。SharePointで件数が多い場合は、委任できる関数や列設計を確認したいです。

ドロップダウンで状態を絞り込む

ステータスで絞りたい場合は、Filterを使います。ドロップダウンで「未完了」を選んだら未完了だけ表示し、未選択なら全件表示したい。その場合は、こういう考え方になります。

Filter(
    Tasks,
    IsBlank(ddStatus.Selected.Value) || Status.Value = ddStatus.Selected.Value
)

式だけを見ると難しそうですが、意味はシンプルです。「ドロップダウンが空なら全部出す。選ばれているなら、そのステータスだけ出す」という流れです。

やりたいこと使いやすい関数見るポイント
文字で探すSearchまたはStartsWith委任できるか、対象列はどれか
条件で絞るFilter列の型と条件式
1件を探すLookUp返したい列やレコード
並び替えるSortまたはSortByColumns列名と昇順降順

並び替えは列名と方向をはっきり書く

一覧画面では、期限が近い順、登録日が新しい順、優先度が高い順など、並び替えもよく使います。SortByColumnsなら、列名と方向をはっきり書けます。

SortByColumns(
    Filter(Tasks, Status.Value = "未完了"),
    "DueDate",
    SortOrder.Ascending
)

この式は、「未完了のTasksを、DueDateの昇順で並べる」という意味です。

検索、フィルター、並び替えは、全部Itemsの中で組み立てると考えると見通しがよくなります。画面上のTextInputやDropdownは条件を入力する部品で、実際に一覧を変えるのはギャラリーのItemsです。

ポイント

式が長くなってきたら、最初に「何を表示したいのか」を日本語で書き出すのがおすすめです。日本語の条件をFilterやSortByColumnsへ置き換えると、式の迷子になりにくいです。

ギャラリーを実務で使うときの注意点

A person planning a software project with handwritten notes and code on a monitor in a modern workspace.

PowerApps ギャラリーは便利ですが、本番運用では少しだけ慎重に見たいポイントがあります。式が動くかだけでなく、データ件数、選択行、操作性、アクセシビリティまで見ておくと、あとから直す手間を減らせます。

PowerApps ギャラリーの実務チェックリスト図

委任警告はあとで困るサイン

Power Appsの委任設定では、委任できない式があると、アプリ側で処理するために最初の一部レコードだけを取得します。既定では500件、設定で最大2,000件まで増やせますが、根本解決ではありません。

たとえば問い合わせが3,000件あるのに、委任できない検索式で最初の500件だけを対象にすると、501件目以降にある問い合わせは検索に出ません。画面上は普通に動いて見えるので、ここが怖いところです。

委任警告は見た目のエラーではなく、データ欠けの予告です。とくにSharePointやDataverseで業務データを扱う場合は、警告を残したまま本番に進めないほうが安心です。

ギャラリー内に何でも置けるわけではない

ギャラリーの中にはラベル、画像、ボタン、アイコンなどを置けます。ただし、何でも置けるわけではありません。

Microsoft Learnでは、Display form、Edit form、PDF viewer、Power BI tile、Rich text editorなどはギャラリー内に追加できないと説明されています。

フォームを使いたい場合は、ギャラリーの外にフォームを置きます。そしてフォームのItemにGalleryTasks.SelectedvarSelectedTaskを入れて、選択行を表示します。

また、ギャラリー内にText inputやToggleを置く場合、OnChangeの扱いにも注意が必要です。ユーザー操作だけでなく、データ再読み込みやギャラリーの変化でイベントが想定外に動くことがあります。

注意

ギャラリー内でデータ更新処理を書くときは、どの行のどの値を更新するのかを必ず確認しましょう。ThisItem.IDなど一意のキーを使うと、誤更新を避けやすいです。

見た目だけでなく操作しやすさも整える

実務では、ギャラリーの見た目も大事です。選択行の背景を変えるならTemplateFill、読み込み中の体感を整えるならLoadingSpinner、クリックできるかどうかはSelectableを確認します。

アクセシビリティも忘れたくないです。ギャラリーの各項目が何を表すのか、スクリーンリーダーに伝えるにはItemAccessibleLabelが役立ちます。社内アプリでも、誰が使っても迷いにくい画面にすることは大事ですよね。

実務で確認したいポイントを整理すると、次の通りです。

  • Itemsに委任警告が出ていないか
  • ThisItemとSelectedを混同していないか
  • 詳細画面へ渡すレコードは安定しているか
  • ギャラリー内で無理なコントロール配置をしていないか
  • 選択行、読み込み中、空データ時の見た目を用意しているか
  • ItemAccessibleLabelで内容が伝わるか

ギャラリーは「表示できたら終わり」ではなく、使い続けても壊れにくい一覧に育てるのが大事です。小さな確認を積み重ねるだけで、あとからの修正がかなり減ります。

PowerApps ギャラリーに関するよくある質問

ギャラリーとフォームは何が違いますか

ギャラリーは複数件の一覧表示、フォームは1件の詳細表示や編集に向いています。一覧で選び、フォームで詳しく見る流れにすると作りやすいです。

ThisItemとSelectedはどちらを使えばいいですか

ギャラリーの中ではThisItem、ギャラリーの外へ選択行を渡すときはSelectedを使います。安定させたい場合は、ThisItemを変数に保存してから使うと安心です。

ギャラリーにデータが出ないときはどこを見ればいいですか

まずItemsを見ます。データソース名、Filter条件、Search条件、列名、委任警告を順番に確認すると、原因を切り分けやすいです。

ギャラリーのItemsにSearchとFilterを同時に使えますか

使えます。ただし式が長くなりやすいので、検索条件、絞り込み条件、並び替え条件を分けて考えるのがおすすめです。データ件数が多い場合は委任も確認してください。

Data tableやTableコントロールではなくギャラリーを使う理由は何ですか

ギャラリーはレイアウトの自由度が高く、カード形式やボタン付き一覧を作りやすいです。表形式で素早く表示したいだけならTable系、見た目や操作を作り込みたいならギャラリーが向いています。

まとめ

PowerApps ギャラリーは、一覧画面を作るための中心コントロールです。Itemsで表示データを決め、ThisItemで1行を表示し、Selectedや変数で選択行を詳細画面へ渡す。

この3点セットで見ると、検索、フィルター、フォーム連携までつながって理解できます。

まずは自分のアプリでギャラリーを1つ選び、ItemsとThisItemの式を読んでみてください。そこが読めるようになると、一覧画面の修正がぐっと楽になりますよ。

よかったらシェアしてね!
目次